/* =========================================================
   INSURANCE CRM - CLEAN STYLE.CSS
   Sections:
   1. Global
   2. Login
   3. Layout / Navbar
   4. Cards / Dashboard
   5. Forms / Buttons
   6. Tables
   7. Leads Page
   8. Filter Dropdowns
   9. Live Watch
   10. Employee Dropdowns
   11. Activity /a Stats Cards
   12. Reassign Controls
   13. Responsive / Print
   ========================================================= */

/* 1. GLOBAL */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f3f4f6;
    color: #111827;
}

input,
select,
textarea {
    padding: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: white;
    font-family: Arial, sans-serif;
}

textarea { resize: vertical; }

button {
    padding: 10px 14px;
    border: none;
    border-radius: 6px;
    background: #2563eb;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

button:hover { opacity: 0.9; }

.danger { background: #dc2626 !important; }
.muted { color: #64748b; }

/* 2. LOGIN */
.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #1d4ed8, #111827);
}

.login-box {
    width: 380px;
    max-width: 92vw;
    background: white;
    padding: 28px;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-box h2 { margin: 0; }
.login-box p { color: #64748b; margin-top: -4px; }

.login-choice-btn {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 8px;
    background: #2563eb;
    color: white;
    font-weight: bold;
}

.login-choice-btn.secondary { background: #111827; }

/* 3. LAYOUT / NAVBAR */
.admin-topbar {
    background: #111827;
    color: white;
    padding: 0 22px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

.admin-brand {
    font-size: 20px;
    font-weight: bold;
}

.admin-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-nav a {
    color: white;
    text-decoration: none;
    padding: 11px 13px;
    border-radius: 8px;
    display: block;
}

.admin-nav a.active,
.admin-nav a:hover { background: #2563eb; }
.logout-nav { background: #dc2626 !important; }

.nav-dropdown { position: relative; }

.dropdown-menu {
    display: none;
    position: absolute;
    top: 43px;
    left: 0;
    min-width: 190px;
    background: #111827;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.28);
    padding: 8px;
    z-index: 200;
}

.nav-dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu a { padding: 11px 12px; border-radius: 8px; white-space: nowrap; }

.admin-main-content { padding: 22px; }
.container { padding: 22px; }

.app-layout { display: flex; min-height: 100vh; }
.sidebar {
    width: 245px;
    background: #111827;
    color: white;
    padding: 18px 14px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
}

.brand {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 24px;
    padding: 8px;
}

.sidebar a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.sidebar a.active,
.sidebar a:hover { background: #2563eb; }
.sidebar .logout-link { background: #dc2626; margin-top: 24px; }

.main-content {
    margin-left: 245px;
    padding: 22px;
    width: calc(100% - 245px);
}

.topbar {
    background: #111827;
    color: white;
    padding: 15px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar a {
    color: white;
    text-decoration: none;
    background: #dc2626;
    padding: 8px 12px;
    border-radius: 6px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-header h1 { margin-bottom: 4px; }
.page-header p { margin-top: 0; color: #64748b; }

/* 4. CARDS / DASHBOARD */
.card {
    background: white;
    padding: 18px;
    margin-bottom: 18px;
    border-radius: 12px;
    box-shadow: 0 1px 8px rgba(15,23,42,0.08);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 1px 8px rgba(15,23,42,0.08);
}

.stat-card h3 {
    margin: 0;
    color: #64748b;
    font-size: 15px;
}

.stat-card p {
    font-size: 32px;
    margin: 14px 0 0;
    font-weight: bold;
    color: #2563eb;
}

.alert {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.success { background: #dcfce7; color: #166534; }
.error { background: #fee2e2; color: #991b1b; }

/* 5. FORMS / BUTTONS */
.form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 10px;
}

.inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.filter-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.edit-btn {
    display: inline-block;
    background: #2563eb;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    border: none;
    cursor: pointer;
}

.edit-btn:hover { opacity: 0.9; }

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 650px;
}

.profile-form label,
.edit-employee-form label {
    font-weight: bold;
    color: #374151;
}

.edit-employee-form {
    max-width: 620px;
    display: block !important;
}

.edit-employee-form label {
    display: block;
    margin-bottom: 6px;
    margin-top: 14px;
}

.edit-employee-form input,
.edit-employee-form textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 11px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    font-size: 15px;
}

.edit-employee-form textarea {
    min-height: 95px;
    resize: vertical;
}

.edit-employee-form button {
    margin-top: 16px;
    display: inline-block;
    width: auto;
}

/* 6. TABLES */
.table-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

.wide-table { min-width: 1500px; }
.employee-table { min-width: 1900px; }

th,
td {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}

th {
    background: #eef2ff;
    white-space: nowrap;
}

td { min-width: 130px; }
td form { display: contents !important; }

.list-table th:first-child,
.list-table td:first-child {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    text-align: left;
}

.wrap-cell {
    white-space: normal;
    word-break: break-word;
    min-width: 180px;
    max-width: 260px;
    line-height: 1.35;
}

.plan-cell { min-width: 220px; max-width: 320px; }
.remarks-box { width: 280px; min-height: 50px; }
.details-box { width: 320px; min-height: 50px; }
.remarks-view { min-width: 260px; max-width: 360px; }
.details-view { min-width: 280px; max-width: 420px; }

/* 7. LEADS PAGE */
.leads-tabs-grid {
    display: flex !important;
    gap: 14px;
    align-items: stretch;
    margin-bottom: 18px;
}

.leads-tabs-grid .stat-card {
    width: 180px !important;
    min-width: 180px !important;
    padding: 14px !important;
}

.leads-tabs-grid .stat-card h3 { font-size: 14px; }
.leads-tabs-grid .stat-card p { font-size: 20px; margin-top: 10px; }

.lead-tab-card {
    text-decoration: none;
    color: inherit;
    display: block;
    border: 2px solid transparent;
    transition: 0.2s ease;
}

.lead-tab-card:hover {
    transform: translateY(-2px);
    border-color: #2563eb;
}

.active-lead-tab {
    border-color: #2563eb !important;
    background: #eff6ff !important;
}

.upload-csv-btn {
    margin-left: auto;
    margin-top: 42px;
    width: 180px;
    height: 42px;
    padding: 10px 16px;
}

.upload-card { padding: 12px !important; margin-bottom: 12px !important; }
.card.upload-card { width: 500px !important; max-width: 500px !important; margin-bottom: 20px !important; }
.upload-card h2 { margin: 0 0 10px 0; }

.upload-form {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.upload-form input[type="file"] { width: 450px; flex: unset; }
.upload-form button { width: 210px; min-width: 140px; }

.lead-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: nowrap;
}

.lead-action-row .filter-form {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    flex-wrap: nowrap;
}

#assignSelectedLeadsForm { flex: 0 0 auto; margin-right: auto !important; }

.lead-action-row .edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.selectable-lead-row { cursor: pointer; }
.selectable-lead-row:hover td,
.selectable-live-lead-row:hover td {
    background-color: #f8fafc !important;
}
.selectable-lead-row.selected-lead td,
.selectable-live-lead-row.selected-lead td,
tr.selected-lead,
tr.selected-lead td {
    background-color: #eef1f5 !important;
}

.employee-name-link {
    color: #2563eb;
    font-weight: bold;
    text-decoration: none;
}

.employee-name-link:hover { text-decoration: underline; }

.pagination-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    padding: 14px 4px 4px;
    background: transparent;
}

.pagination-bar span {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

.pagination-links {
    display: flex;
    gap: 6px;
    align-items: center;
}

.pagination-links a {
    padding: 8px 12px;
    border-radius: 6px;
    background: #eef2ff;
    color: #2563eb;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    border: 1px solid #c7d2fe;
}

.pagination-links a:hover { background: #dbeafe; }
.pagination-links a.active-page { background: #2563eb; color: #ffffff; border-color: #2563eb; }

/* 8. FILTER DROPDOWNS */
.filter-line {
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
    gap: 8px;
    align-items: center;
}

.filter-line label{
    font-family: Arial, sans-serif !important;
    font-size:15px !important;
    font-weight:600 !important;
    color:#374151 !important;
}

.filter-line input { width: 100% !important; height: 40px !important; }

.filter-btn-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-left: 110px !important;
}

.filter-btn-row button,
.filter-btn-row .filter-clear-btn {
    height: 32px !important;
    width: 100% !important;
    padding: 0 14px !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.filter-clear-btn {
    background: #111827 !important;
    color: #ffffff !important;
}

.lead-filter-box,
.live-filter-box { position: relative; }

.lead-filter-box { margin-left: auto !important; }
.live-filter-box { display: flex; justify-content: flex-end; margin-bottom: 12px; }

.lead-filter-dropdown,
.live-filter-dropdown {
    display: none !important;
    position: absolute !important;
    right: 0 !important;
    top: 48px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 14px !important;
    box-shadow: 0 12px 35px rgba(15,23,42,0.18) !important;
    z-index: 99999 !important;
}

.lead-filter-dropdown.show,
.live-filter-dropdown.show { display: block !important; }

.lead-filter-dropdown { width: 460px !important; }
.live-filter-dropdown { width: 560px !important; }

.lead-filter-dropdown form,
.live-filter-dropdown form,
.lead-filter-dropdown #leadFilterForm {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
}

.lead-filter-dropdown .filter-line {
    display: grid !important;
    grid-template-columns: 90px 130px 130px !important;
    gap: 10px !important;
    align-items: center !important;
}

.live-filter-dropdown {
    width: 520px !important;
    padding: 18px 22px !important;
}

.live-filter-dropdown .filter-line {
    display: grid !important;
    grid-template-columns: 130px 1fr 1fr !important;
    gap: 12px !important;
    align-items: center !important;
}

.live-filter-dropdown .filter-line label{
    margin:0 !important;
    font-family: Arial, sans-serif !important;
    font-size:15px !important;
    font-weight:600 !important;
    color:#374151 !important;
    line-height:1.2 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
}

.live-filter-dropdown input,
.live-filter-dropdown select {
    width: 100% !important;
    height: 50px !important;
    border-radius: 8px !important;
}

.live-filter-dropdown .filter-btn-row {
    margin-left: 130px !important;
    grid-template-columns: 150px 150px !important;
    gap: 14px !important;
}

.lead-filter-dropdown .filter-line label {
    width: 90px !important;
    min-width: 90px !important;
    margin: 0 !important;
}

.lead-filter-dropdown #leadFilterForm .filter-line input {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
}

.lead-filter-dropdown #leadFilterForm .filter-line select {
    width: 265px !important;
    min-width: 265px !important;
    max-width: 265px !important;
}

/* 9. LIVE WATCH */
.live-watch-page { width: 100%; }

.live-action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px 0;
}

.live-action-row #liveWatchForm {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
}

.live-action-row .live-filter-box {
    margin-left: auto !important;
    margin-bottom: 0 !important;
}

.live-table-card {
    margin-top: 16px !important;
    padding: 35px 16px 16px 16px;
}

.live-table-action-row {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    gap: 14px;
}

.live-table-action-row .live-filter-box {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
}

.live-search-form input { width: 300px; }

.live-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
}

.live-table th,
.live-table td {
    padding: 12px !important;
    font-size: 14px !important;
    text-align: left !important;
    vertical-align: top !important;
}

.live-table td { min-width: 130px !important; }

.live-table th:first-child,
.live-table td:first-child {
    width: 70px !important;
    min-width: 60px !important;
    max-width: 60px !important;
}

.live-table .plan-cell { min-width: 260px !important; max-width: 320px !important; }
.live-table .customer-cell { min-width: 260px !important; max-width: 320px !important; }
.live-table td:nth-child(12),
.live-table th:nth-child(12) { min-width: 110px; }

.lead-green td { background: #dcfce7 !important; }
.mobile-secure{

    cursor:pointer;

    user-select:none;

    transition:.15s ease;

}

.mobile-secure:hover{

    color:inherit !important;

    font-family:inherit !important;

    font-size:inherit !important;

    font-weight:inherit !important;

    line-height:inherit !important;

    letter-spacing:inherit !important;

}
.employee-secure-page { user-select: none; }
.employee-secure-page input,
.employee-secure-page select,
.employee-secure-page textarea { user-select: auto; }

/* 10. EMPLOYEE DROPDOWNS */
.employee-search-dropdown {
    position: relative;
    width: 350px;
}

.employee-dropdown-btn {
    width: 100%;
    height: 42px;
    background: #fff;
    color: #111827;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    text-align: left;
    padding: 0 38px 0 12px;
    font-size: 15px;
    font-weight: 500;
}

.employee-dropdown-btn::after {
    content: "▾";
    position: absolute;
    right: 14px;
}

.employee-dropdown-menu {
    display: none;
    position: absolute;
    top: 48px;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 12px 35px rgba(15,23,42,0.18);
    z-index: 99999;
}

.employee-dropdown-menu.show { display: block !important; }

#employeeSearchInput {
    width: 100%;
    height: 38px;
    margin-bottom: 8px;
}

.employee-options {
    max-height: 230px;
    overflow-y: auto;
}

.employee-option {
    padding: 10px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
}

.employee-option:hover {
    background: #eff6ff;
    color: #2563eb;
}
/* 11. EMPLOYEE ACTIVITY / STATS */

.employee-analytics-card {
background:
    radial-gradient(circle at top right, rgba(96,165,250,.25), transparent 35%),
    radial-gradient(circle at bottom left, rgba(167,139,250,.18), transparent 35%),
    linear-gradient(135deg,#1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
    border: 1px solid rgba(147,197,253,.22);
    border-radius: 20px;
    padding:18px 20px 35px 20px;
    margin-bottom: 20px;
    box-shadow: 0 14px 34px rgba(15,23,42,.22);
}

.employee-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 50px;
}

.employee-left-info {
    flex: 1;
    min-width: 260px;
}

.employee-header h3 {
    margin: 0;
    font-size: 23px;
    font-weight: 850;
    color: #ffffff;
}

.employee-header p {
    margin: 4px 0;
    color: #cbd5e1;
    font-size: 14px;
}

.employee-right-section {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-left: auto;
}

.employee-status-badge {
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.employee-status-badge.online {
    background: rgba(34,197,94,.18);
    color: #86efac;
    border: 1px solid rgba(134,239,172,.35);
}

.employee-status-badge.offline {
    background: rgba(148,163,184,.16);
    color: #cbd5e1;
    border: 1px solid rgba(203,213,225,.22);
}

/* Today's Follow Up + Total Updates */

.employee-activity-row {
    display: flex;
    justify-content: flex-end;
    margin: -58px 1px 12px 0;
}

.employee-activity-mini-cards {
    display: flex;
    gap: 12px;
}

.employee-activity-card {
    width: 230px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    text-decoration: none;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.employee-activity-card span {
    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #dbeafe !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
}

.employee-activity-card strong {
    font-size: 20px;
    font-weight: 900;
    color: #93c5fd;
}

.employee-activity-card.total strong {
    color: #c4b5fd;
}

/* Lead Count Cards */

.employee-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.employee-stat-box {
    height: 52px;
    min-height: 52px;
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(226,232,240,.95);
    box-shadow: 0 8px 18px rgba(15,23,42,.13);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 13px;
    text-decoration: none;
    transition: .18s ease;
}

.employee-stat-box:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(15,23,42,.18);
}

.employee-stat-box span {
    font-family: Arial, sans-serif !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    color: #334155 !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;

    letter-spacing: 0 !important;
}

.employee-stat-box strong {
    font-size: 23px;
    line-height: 1;
    font-weight: 900;
}

/* Number colors */
.employee-stat-box:nth-child(1) strong { color: #2563eb; }
.employee-stat-box:nth-child(2) strong { color: #ea580c; }
.employee-stat-box:nth-child(3) strong { color: #16a34a; }
.employee-stat-box:nth-child(4) strong { color: #7c3aed; }
.employee-stat-box:nth-child(5) strong { color: #dc2626; }
.employee-stat-box:nth-child(6) strong { color: #0284c7; }

.employee-stat-box.active-stat {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(147,197,253,.22), 0 10px 22px rgba(15,23,42,.18);
}

/* 12. REASSIGN CONTROLS */
#reassignSelectedLeadsForm button[type="submit"]{
    background:#16a34a !important;
    color:#ffffff !important;
}

#reassignSelectedLeadsForm button[type="submit"]:hover{
    opacity:0.9 !important;
}

.reassign-search-dropdown {
    position: relative !important;
    width: 230px !important;       /* Select Employee width */
    flex: 0 0 230px !important;
}

.reassign-dropdown-btn {
    width: 100% !important;
    height: 35px !important;       /* Select Employee height */
    padding: 0 38px 0 14px !important;
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    text-align: left !important;
    font-size: 13px !important;    /* Select Employee font */
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.reassign-dropdown-btn::after {
    content: "\25BE";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #111827;
    font-size: 12px;
}

.reassign-dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: 48px !important;
    left: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 10px !important;
    padding: 10px !important;
    box-shadow: 0 12px 35px rgba(15,23,42,0.18) !important;
    z-index: 99999 !important;
}

.reassign-dropdown-menu.show { display: block !important; }

#reassignSearchInput {
    width: 100% !important;
    height: 38px !important;
    margin-bottom: 8px !important;
    padding: 8px 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 7px !important;
    font-size: 14px !important;
}

.reassign-options {
    max-height: 230px !important;
    overflow-y: auto !important;
}

.reassign-option {
    padding: 10px !important;
    border-radius: 7px !important;
    cursor: pointer !important; 
    font-size: 13px !important;
    color: #111827 !important;
}
.reassign-option:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
}

#deleteSelectedLiveLeadsBtn{
    background:#dc2626 !important;
    color:#ffffff !important;
}
/* 13. MISC */
.dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.green { background: #16a34a; }
.gray { background: #9ca3af; }

.mark-cell { text-align: center; }
.green-dot { background: #22c55e; }
.red-dot { background: #ef4444; }
.yellow-dot { background: #facc15; }

/* 14. RESPONSIVE / PRINT */
@media print {
    body * { display: none !important; }
    body::before {
        content: "Printing is disabled.";
        display: block !important;
        font-size: 24px;
        padding: 40px;
    }
}

@media (max-width: 900px) {
    .admin-topbar {
        display: block;
        padding: 14px;
    }

    .admin-brand { margin-bottom: 10px; }
    .admin-nav { flex-wrap: wrap; }
    .dropdown-menu { position: static; margin-top: 4px; }

    .sidebar {
        position: relative;
        width: 100%;
    }

    .app-layout { display: block; }

    .main-content {
        margin-left: 0;
        width: 100%;
    }

    .form-grid,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .employee-list-table { width: 100%; }
    .employee-list-table th,
    .employee-list-table td {
        text-align: center !important;
        vertical-align: middle !important;
    }

    .employee-list-table .dot { margin-right: 5px; }

    .live-table-action-row,
    .lead-action-row,
    #reassignSelectedLeadsForm {
        flex-wrap: wrap !important;
    }
}
.live-search-form input {
    width: 300px !important;
    height: 35px !important;
}
.live-search-form {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
/* Employee name dropdown inside card */

.card-employee-dropdown {
    position: relative;
    display: inline-block;
}

.card-employee-btn {
    background: transparent !important;
    color: #ffffff !important;
    padding: 0 !important;
    border: none !important;
    font-size: 23px !important;
    font-weight: 850 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

.card-employee-btn span {
    font-size: 13px;
    margin-top: 2px;
}

.card-employee-menu {
    display: none;
    position: absolute;
    top: 38px;
    left: 0;
    width: 260px;
    background: #ffffff;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 14px 35px rgba(15,23,42,0.22);
    z-index: 99999;
}

.card-employee-menu.show {
    display: block;
}

#cardEmployeeSearchInput {
    width: 100%;
    height: 38px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
}

.card-employee-options {
    max-height: 230px;
    overflow-y: auto;
}

.card-employee-option {
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #111827;
    font-weight: normal;
}

.card-employee-option:hover {
    background: #eff6ff;
    color: #2563eb;
}
.select-employee-empty-btn {
    color: #111827 !important;
    background: transparent !important;
    font-size: 23px !important;
    font-weight: 650 !important;
    padding: 0 !important;
    border: none !important;
}

.select-employee-empty-btn span {
    font-size: 13px !important;
}
/* Empty Live Watch Employee Selector */

.empty-live-watch-card {
    min-height: 96px !important;
    display: flex !important;
    align-items: center !important;
    padding: 22px 24px !important;
}

.empty-employee-selector {
    display: inline-block !important;
}

.empty-live-watch-card .card-employee-btn {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 850 !important;
}

.empty-live-watch-card .card-employee-menu {
    top: 42px !important;
}

.employee-lead-tabs {
    display: flex;
    gap: 10px;
    margin: 0 0 14px 0;
}

.employee-lead-tabs a,
.reassigned-filter-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    height:36px !important;
    min-height:36px !important;
    padding:0 14px !important;

    background:#111827 !important;
    color:#ffffff !important;

    border-radius:6px !important;
    font-size:13px !important;
    font-weight:bold !important;

    line-height:1 !important;
    text-decoration:none !important;
    white-space:nowrap !important;
}

.reassigned-filter-btn:hover{
    background:#1f2937;
}

.reassigned-filter-btn.active{
    background:#2563eb;
}
.previous-assign-details {
    background: transparent !important;
    color: inherit !important;
    font-weight: normal !important;

    white-space: normal;
    word-break: break-word;
    line-height: 1.5;

    min-width: 240px;
    max-width: 320px;
}
.employee-action-cell button{
    width: 75px !important;
    height: 30px !important;

    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 7px !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    line-height: 1 !important;
    background:#16a34a;
    color:#fff;
}

.view-history-btn{
    width:75px !important;
    height:30px !important;
    min-height:30px !important;

    padding:0 !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 auto !important;

    border-radius:7px !important;

    font-size:12px !important;
    font-weight:700 !important;
    line-height:1 !important;
    background:#6b7280;
    color:#fff;
}

.history-floating-card {
    display: none;
    position: absolute;
    width: 360px;
    max-height: 420px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.22);
    z-index: 999999;
}

.history-card-header {
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}

.history-card-header button {
    background: transparent !important;
    color: #111827 !important;
    font-size: 20px !important;
    padding: 0 !important;
}

.history-card-content {
    padding: 12px;
}

.history-item {
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
}

.history-item:last-child {
    border-bottom: none;
}

.history-date {
    font-size: 12px;
    color: #64748b;
    font-weight: bold;
    margin-bottom: 5px;
}

.history-details {
    font-size: 13px;
    color: #111827;
    line-height: 1.45;
    white-space: normal;
    word-break: break-word;
}

.history-empty {
    padding: 18px;
    text-align: center;
    color: #64748b;
}
.view-admin-history-btn {
    background: #919191 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
    border-radius: 7px;
}

.history-employee {
    font-size: 13px;
    color: #111827;
    font-weight: 700;
    margin-bottom: 6px;
}
.employee-table-action-row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
}

.employee-table-action-row .live-filter-box{

    position:relative !important;

    display:inline-block !important;

    margin-left:0 !important;

    flex:0 0 auto !important;
}

.employee-search-form {
    margin-left: auto !important;
}

.employee-live-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
}

.employee-live-table th,
.employee-live-table td {
    font-size: 14px !important;
    padding: 12px !important;
}

.employee-live-table .details-box {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;

    min-height: 55px !important;
    height: 55px !important;

    resize: vertical !important;
}

.employee-live-table .remarks-box {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;

    min-height: 55px !important;
    height: 55px !important;

    resize: vertical !important;
}
.employee-live-table th:nth-child(2),
.employee-live-table td:nth-child(2){
    width:210px !important;
    min-width:210px !important;
    max-width:210px !important;
    vertical-align:top !important;
}

.employee-live-table th:nth-child(3),
.employee-live-table td:nth-child(3){
    min-width:260px !important;
}
/* ===== LEAD SUMMARY CARD - SAME AS EMPLOYEE CARD THEME ===== */

.lead-summary-card {
    margin-bottom: 18px;
    padding: 18px !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at top right, rgba(96,165,250,.25), transparent 35%),
        radial-gradient(circle at bottom left, rgba(167,139,250,.18), transparent 35%),
        linear-gradient(135deg,#1e3a8a 0%, #2563eb 55%, #3b82f6 100%) !important;
    border: 1px solid rgba(147,197,253,.22) !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.22) !important;
}

.lead-summary-card .employee-header {
    margin-bottom: 16px !important;
}

.lead-summary-card .employee-left-info h3 {
    margin: 0 !important;
    font-size: 23px !important;
    font-weight: 850 !important;
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    letter-spacing: 0 !important;
}

.lead-summary-card .employee-left-info p {
    margin: 4px 0 !important;
    color: #cbd5e1 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: Arial, sans-serif !important;
}

.lead-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-top: 0 !important;
}

.lead-summary-grid .employee-stat-box {
    min-height: 88px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(226,232,240,.95) !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.13) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px !important;
}

.lead-summary-grid .employee-stat-box span {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    white-space: nowrap !important;
    font-family: Arial, sans-serif !important;
}

.lead-summary-grid .employee-stat-box strong {
    font-size: 23px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.lead-summary-grid .employee-stat-box:nth-child(1) strong {
    color: #2563eb !important;
}

.lead-summary-grid .employee-stat-box:nth-child(2) strong {
    color: #16a34a !important;
}

.lead-summary-grid .employee-stat-box:nth-child(3) strong {
    color: #ea580c !important;
}

.lead-summary-grid .employee-stat-box.active-stat {
    border-color: #93c5fd !important;
    box-shadow:
        0 0 0 3px rgba(147,197,253,.22),
        0 10px 22px rgba(15,23,42,.18) !important;
}

.lead-upload-modern-btn {
    margin: 0 !important;
    height: 52px !important;
    padding: 0 22px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* ===== Lead Type Dropdown ===== */

.lead-type-dropdown{
    position:relative;
}

.lead-type-btn{

    height:52px;

    padding:0 18px;

    border:none;

    border-radius:14px;

    background:rgba(255,255,255,.15);

    color:#fff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:12px;

    transition:.25s;

}

.lead-type-btn:hover{

    background:rgba(255,255,255,.22);

}

.lead-arrow{

    font-size:12px;

}

.lead-type-menu{

    position:absolute;

    top:58px;

    left:0;

    width:180px;

    background:#fff;

    border-radius:12px;

    box-shadow:0 12px 28px rgba(0,0,0,.18);

    overflow:hidden;

    display:none;

    z-index:999;

}

.lead-type-menu.show{

    display:block;

}

.lead-type-option{

    padding:13px 18px;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    color:#334155;

    transition:.2s;

}

.lead-type-option:hover{

    background:#eff6ff;

    color:#2563eb;

}
.lead-upload-modern-btn:disabled{

    opacity:.45;

    cursor:not-allowed;

    pointer-events:none;

    filter:grayscale(.25);

}
.lead-action-row .assign-dropdown-btn,
.lead-action-row .assign-leads-btn,
.lead-action-row .delete-leads-btn,
.lead-action-row #openLeadFilterBtn {
    height: 35px !important;
    min-height: 35px !important;
}
/* ===== FINAL LEADS ASSIGN CONTROLS FIX ===== */

.lead-action-row {
    align-items: center !important;
}

.lead-action-row #assignSelectedLeadsForm {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}

.lead-action-row .assign-search-dropdown {
    position: relative !important;
    width: 230px !important;
    min-width: 230px !important;
    flex: 0 0 230px !important;
}

.lead-action-row .assign-dropdown-btn {
    width: 100% !important;
    height: 35px !important;
    min-height: 35px !important;
    padding: 0 38px 0 14px !important;

    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 35px !important;
    text-align: left !important;
    white-space: nowrap !important;

    display: block !important;
    position: relative !important;
}

.lead-action-row .assign-dropdown-btn::after {
    content: "▾";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #111827;
}

.lead-action-row .assign-dropdown-menu {
    position: absolute !important;
    top: 41px !important;
    left: 0 !important;
    width: 230px !important;
    z-index: 99999 !important;
}

.lead-action-row .assign-leads-btn,
.lead-action-row .delete-leads-btn,
.lead-action-row #openLeadFilterBtn {
    height: 35px !important;
    min-height: 35px !important;
    padding: 0 18px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 35px !important;
}
.lead-action-row .assign-leads-btn{
    background:#16a34a !important;
    color:#ffffff !important;
}

.lead-action-row .assign-leads-btn:hover{
    opacity:.9 !important;
}
.lead-action-row .delete-leads-btn{
    background:#dc2626 !important;
    color:#ffffff !important;
}

.lead-action-row .delete-leads-btn:hover{
    opacity:.9 !important;
}
/* ===== FIX: Leads Assign Dropdown Floating Menu ===== */

.lead-action-row .assign-dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: 41px !important;
    left: 0 !important;
    width: 230px !important;

    background: #ffffff !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 10px !important;
    padding: 10px !important;

    box-shadow: 0 12px 35px rgba(15,23,42,0.18) !important;
    z-index: 999999 !important;
}

.lead-action-row .assign-dropdown-menu.show {
    display: block !important;
}

.lead-action-row #assignSearchInput {
    width: 100% !important;
    height: 38px !important;
    margin-bottom: 8px !important;
}

.lead-action-row .assign-options {
    max-height: 230px !important;
    overflow-y: auto !important;
}

.lead-action-row .assign-option {
    display: block !important;
    padding: 10px !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: #111827 !important;
}

.lead-action-row .assign-option:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
}
.bulk-select-count,
.trash-restore-btn,
.trash-clear-btn {
    height: 35px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.bulk-select-count {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
}

.trash-restore-btn {
    background: #16a34a !important;
    color: #ffffff !important;
}

.trash-clear-btn {
    background: #dc2626 !important;
    color: #ffffff !important;
}
.trash-dropdown {
    position: relative !important;
    display: inline-block !important;
}

.trash-main-btn {
    height: 35px !important;
    padding: 0 18px !important;
    border-radius: 8px !important;
    background: #111827 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.trash-menu {
    display: none !important;
    position: absolute !important;
    top: 42px !important;
    left: 0 !important;
    width: 170px !important;
    background: #ffffff !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 10px !important;
    padding: 8px !important;
    box-shadow: 0 12px 35px rgba(15,23,42,.18) !important;
    z-index: 999999 !important;
}

.trash-menu.show {
    display: block !important;
}

.trash-menu form {
    margin: 0 !important;
}

.trash-menu button {
    width: 100% !important;
    height: 36px !important;
    background: transparent !important;
    color: #111827 !important;
    text-align: left !important;
    padding: 0 10px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
}

.trash-menu button:hover {
    background: #eff6ff !important;
}

.trash-menu-clear {
    color: #dc2626 !important;
}
/* Select Leads */
.bulk-select-dropdown {
    position: relative !important;
    width: 110px !important;
    min-width: 110px !important;
    flex: 0 0 110px !important;
}

/* Trash */
.trash-dropdown {
    position: relative !important;
    width: 110px !important;      /* apni requirement ke hisab se 75–90px */
    min-width: 110px !important;
    flex: 0 0 110px !important;
}

.bulk-select-btn,
.trash-main-btn {
    width: 100% !important;
    height: 35px !important;
    min-height: 35px !important;
    padding: 0 38px 0 14px !important;
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 35px !important;
    text-align: left !important;
    white-space: nowrap !important;
    position: relative !important;
}

.bulk-select-btn::after,
.trash-main-btn::after {
    content: "▾";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #111827;
}

.bulk-select-menu,
.trash-menu {
    display: none !important;
    position: absolute !important;
    top: 41px !important;
    left: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 10px !important;
    padding: 10px !important;
    box-shadow: 0 12px 35px rgba(15,23,42,0.18) !important;
    z-index: 999999 !important;
}

.bulk-select-menu.show,
.trash-menu.show {
    display: block !important;
}

.bulk-select-option,
.trash-menu-option {
    width: 100% !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #111827 !important;
    background: transparent !important;
    border: none !important;
    text-align: left !important;
}

.bulk-select-option:hover,
.trash-menu-option:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
}

.trash-menu form {
    margin: 0 !important;
}

.trash-clear-option {
    color: #dc2626 !important;
}
.trash-menu-option:disabled{
    opacity:.45 !important;
    cursor:not-allowed !important;
    pointer-events:none !important;
}
/* Filter Select Dropdown UI Fix */
.lead-filter-dropdown select,
.live-filter-dropdown select {
    height: 42px !important;
    padding: 0 38px 0 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    outline: none !important;
    cursor: pointer !important;
    appearance: auto !important;
}

.lead-filter-dropdown select:focus,
.live-filter-dropdown select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14) !important;
}

.lead-filter-dropdown option,
.live-filter-dropdown option {
    background: #ffffff !important;
    color: #111827 !important;
    font-size: 14px !important;
    padding: 10px !important;
}
/* Filter custom dropdown same as assign dropdown */
.custom-filter-line {
    grid-template-columns: 90px 265px 1px !important;
}

.filter-search-dropdown {
    position: relative !important;
    width: 265px !important;
}

.filter-dropdown-btn {
    width: 100% !important;
    height: 42px !important;
    padding: 0 38px 0 14px !important;
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
    position: relative !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.filter-dropdown-btn::after {
    content: "▾";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #111827;
}

.filter-dropdown-menu {
    display: none;
    position: absolute;
    top: 47px;
    left: 0;
    width: 100%;
    background: #ffffff;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 14px 35px rgba(15,23,42,0.22);
    z-index: 999999;
}

.filter-dropdown-menu.show {
    display: block;
}

#filterAssignedSearch {
    width: 100% !important;
    height: 38px !important;
    margin-bottom: 8px !important;
    padding: 8px 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
}

.filter-dropdown-options {
    max-height: 220px;
    overflow-y: auto;
}

.filter-dropdown-option {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #111827;
    font-weight: 500;
}

.filter-dropdown-option:hover {
    background: #eff6ff;
    color: #2563eb;
}
/* Employee Call Status Custom Dropdown */
.emp-status-dropdown {
    position: relative !important;
    width: 140px !important;
}

.emp-status-btn {
    width: 100% !important;
    height: 35px !important;
    padding: 0 34px 0 12px !important;
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    position: relative !important;
}

.emp-status-btn::after {
    content: "▾";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #111827;
    font-size: 12px;
}

.emp-status-menu {
    display: none !important;
    position: absolute !important;
    top: 41px !important;
    left: 0 !important;
    width: 210px !important;
    background: #ffffff !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 10px !important;
    padding: 8px !important;
    box-shadow: 0 12px 35px rgba(15,23,42,0.18) !important;
    z-index: 999999 !important;
}

.emp-status-menu.show {
    display: block !important;
}

.emp-status-option {
    padding: 10px 11px !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: #111827 !important;
    font-weight: 500 !important;
}

.emp-status-option:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
}
.employee-history-cell{
    width:90px !important;
    min-width:90px !important;
    max-width:90px !important;

    text-align:center !important;
    vertical-align:middle !important;
}

/* Live Watch filter dropdown menu full open fix */
.live-filter-dropdown{
    overflow: visible !important;
}

.live-filter-dropdown .filter-dropdown-menu{
    z-index: 9999999 !important;
    max-height: 260px !important;
    overflow-y: auto !important;
}
/* ===== CLEAN LIVE WATCH FILTER + ACTION ROW ===== */

.live-table-action-row{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    margin-bottom:16px !important;
    flex-wrap:nowrap !important;
}

.live-table-action-row #reassignSelectedLeadsForm{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin:0 !important;
    flex:0 0 auto !important;
}

.live-table-action-row .live-filter-box{
    position:relative !important;
    display:inline-block !important;
    margin:0 !important;
    flex:0 0 auto !important;
}

.live-table-action-row .reassigned-filter-btn{
    flex:0 0 auto !important;
}

.live-table-action-row .live-search-form{
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex:0 0 auto !important;
}

.live-filter-dropdown{
    display:none !important;
    position:absolute !important;
    top:42px !important;
    left:0 !important;
    right:auto !important;

    width:430px !important;
    max-width:430px !important;

    background:#ffffff !important;
    padding:14px !important;
    border-radius:14px !important;
    box-shadow:0 12px 35px rgba(15,23,42,0.18) !important;
    z-index:999999 !important;
    overflow:visible !important;
}

.live-filter-dropdown.show{
    display:block !important;
}

.live-filter-dropdown form{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    margin:0 !important;
}

.live-filter-dropdown .filter-line{
    display:grid !important;
    grid-template-columns:95px 1fr 1fr !important;
    gap:8px !important;
    align-items:center !important;
}

.live-filter-dropdown .custom-filter-line{
    grid-template-columns:95px 210px 1px !important;
}

.live-filter-dropdown .filter-line label{
    font-family:Arial, sans-serif !important;
    font-size:13px !important;
    font-weight:600 !important;
    color:#374151 !important;
    line-height:1.2 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
}

.live-filter-dropdown input,
.live-filter-dropdown select,
.live-filter-dropdown .filter-dropdown-btn{
    height:35px !important;
    font-size:13px !important;
    font-weight:500 !important;
    border-radius:8px !important;
    padding:0 12px !important;
}

.live-filter-dropdown .filter-search-dropdown{
    width:210px !important;
}

.live-filter-dropdown .filter-dropdown-menu{
    top:40px !important;
    z-index:9999999 !important;
    max-height:240px !important;
    overflow-y:auto !important;
}

.live-filter-dropdown .filter-dropdown-option{
    font-size:13px !important;
    font-weight:500 !important;
    padding:8px 10px !important;
}

.live-filter-dropdown .filter-btn-row{
    display:flex !important;
    margin:8px 0 0 95px !important;
    gap:8px !important;
}

.live-filter-dropdown .filter-btn-row button,
.live-filter-dropdown .filter-btn-row .filter-clear-btn{
    width:105px !important;
    height:34px !important;
    font-size:13px !important;
    border-radius:8px !important;
}
/* Live Watch Lead Type */

.lead-type-cell{
    text-align:center;
    font-weight:600;
    white-space:nowrap;
}
.crm-confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 999999;
    align-items: center;
    justify-content: center;
}

.crm-confirm-overlay.show {
    display: flex;
}

.crm-confirm-box {
    width: 380px;
    max-width: 92vw;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.28);
}

.crm-confirm-box h3 {
    margin: 0 0 8px;
    font-size: 20px;
    color: #111827;
}

.crm-confirm-box p {
    margin: 0;
    color: #64748b;
    line-height: 1.5;
}

.crm-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.crm-confirm-cancel {
    background: #111827 !important;
}

.crm-confirm-delete {
    background: #dc2626 !important;
}
.policy-secure{
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
    font:inherit !important;
    color:inherit !important;
    line-height:inherit !important;
    letter-spacing:inherit !important;
}

.policy-secure:hover{

    color:inherit !important;

    font:inherit !important;

}
.emp-filter-status-dropdown {
    width: 210px !important;
}

.emp-filter-status-dropdown .filter-dropdown-menu {
    top: 40px !important;
    z-index: 9999999 !important;
    max-height: 260px !important;
    overflow-y: auto !important;
}

.emp-filter-status-dropdown .filter-dropdown-option {
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 10px !important;
}
/* ===== Employees Page Fresh Redesign ===== */

.employees-page-hero {
    margin-bottom: 18px !important;
}

.employees-mini-stats {
    margin-top: 18px;
    grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
}

.employees-modern-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 18px;
    align-items: flex-start;
}

.employee-create-card,
.employees-directory-card {
    border-radius: 18px !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.09) !important;
}

.employee-create-card {
    position: sticky;
    top: 82px;
    padding: 22px !important;
}

.employee-create-card h2,
.employees-directory-card h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 750;
    color: #111827;
    letter-spacing: -0.2px;
}

.single-employee-form {
    margin-top: 20px;
}

.single-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
}

.single-form-grid label,
.employee-edit-modern-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 650;
    color: #1f2937;
}

.single-form-grid input,
.single-form-grid textarea,
.employee-edit-modern-form input,
.employee-edit-modern-form textarea,
.employee-search-box {
    width: 100%;
    border-radius: 11px !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #111827 !important;
    outline: none;
}

.single-form-grid input,
.employee-edit-modern-form input,
.employee-search-box {
    height: 44px;
}

.single-form-grid textarea,
.employee-edit-modern-form textarea {
    min-height: 78px;
    resize: vertical;
}

.single-form-grid input:focus,
.single-form-grid textarea:focus,
.employee-edit-modern-form input:focus,
.employee-edit-modern-form textarea:focus,
.employee-search-box:focus {
    border-color: #2563eb !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
}

.employee-main-btn {
    width: 100%;
    height: 44px;
    margin-top: 14px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 750;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Directory Card */

.employees-directory-card {
    padding: 22px !important;
    overflow: visible;
}

.employees-directory-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.employees-directory-header p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
}

.employee-filter-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.employee-filter-pill {
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 13px;
    font-weight: 700;
}

.employee-filter-pill.active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

.employee-search-box {
    margin-bottom: 14px;
    padding: 0 14px !important;
}

.employee-directory-list {
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* Changed */
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
}

.employee-directory-item {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 15px;
    overflow: hidden;
}

.employee-directory-toggle {
    width: 100%;
    height: 48px;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111827 !important;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 0 14px !important;
    text-align: left;
}

.employee-directory-toggle:hover {
    background: #ffffff !important;
    opacity: 1 !important;
}

.employee-list-info strong {
    display: block;
    font-size: 16px;
    font-weight: 750;
    color: #111827;
    line-height: 1.1;
}

.employee-status-pill {
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
}

.employee-status-pill.online {
    background: #dcfce7;
    color: #166534;
}

.employee-status-pill.offline {
    background: #e5e7eb;
    color: #374151;
}

/* Profile Panel */

.employee-profile-panel {
    display: none;
    padding: 0 14px 14px;
}

.employee-directory-item.open .employee-profile-panel {
    display: block;
}

.employee-profile-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 8px 18px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #edf2f7;
}

.employee-profile-grid div {
    min-width: 0;
}

.employee-profile-grid span {
    display: block;
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 3px;
}

.employee-profile-grid strong {
    display: block;
    font-size: 14px;
    color: #111827;
    font-weight: 500;
    line-height: 1.35;
    word-break: break-word;
}

.employee-profile-grid .profile-address {
    grid-column: 1 / -1;
}

.employee-profile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.employee-profile-actions form {
    margin: 0;
}

.employee-profile-actions .edit-btn,
.employee-profile-actions button,
.edit-employee-open-btn {
    height: 34px;
    min-height: 34px;
    padding: 0 13px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
/* Edit Employee Modal */

.employee-edit-panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(15, 23, 42, 0.48);
    padding: 24px;
    align-items: center;
    justify-content: center;
}

.employee-edit-panel.show {
    display: flex;
}

.employee-edit-modern-form {
    width: 720px;
    max-width: 96vw;
    max-height: 90vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.32);
    display: grid;
    grid-template-columns: repeat(2, minmax(230px, 1fr));
    gap: 14px;
}

.employee-edit-modern-form::before {
    content: "Edit Employee Profile";
    grid-column: 1 / -1;
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 4px;
}

.employee-edit-modern-form .full {
    grid-column: 1 / -1;
}

.employee-edit-modern-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.employee-edit-modern-form input,
.employee-edit-modern-form textarea {
    width: 100%;
    border-radius: 11px !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    font-size: 15px !important;
    color: #111827 !important;
}

.employee-edit-modern-form input {
    height: 44px;
}

.employee-edit-modern-form textarea {
    min-height: 90px;
}

.edit-form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.edit-form-actions button {
    height: 40px;
    min-height: 40px;
    padding: 0 18px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 750 !important;
}

.close-edit-panel-btn {
    background: #111827 !important;
}

@media (max-width: 820px) {
    .employee-edit-modern-form {
        grid-template-columns: 1fr;
    }
}

/* Responsive */

@media (max-width: 1100px) {
    .employees-modern-layout {
        grid-template-columns: 1fr;
    }

    .employee-create-card {
        position: static;
    }
}

@media (max-width: 820px) {
    .employees-directory-header {
        flex-direction: column;
    }

    .employee-directory-toggle {
        grid-template-columns: 40px 1fr;
    }

    .employee-status-pill {
        grid-column: 2 / 3;
        width: fit-content;
    }

    .employee-profile-grid,
    .employee-edit-modern-form {
        grid-template-columns: 1fr;
    }
}
/* ===== Team Health Card - Employee Management ===== */

.team-health-grid {
    grid-template-columns: repeat(5, minmax(140px, 1fr)) !important;
}

.team-health-grid .employee-stat-box {
    height: 56px !important;
    min-height: 56px !important;
}

.team-health-grid .employee-stat-box span {
    font-size: 13px !important;
    font-weight: 700 !important;
}

.team-health-grid .employee-stat-box strong {
    font-size: 24px !important;
    font-weight: 800 !important;
}

@media (max-width: 900px) {
    .team-health-grid {
        grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    }
}
/* ===== Clickable Team Health Cards ===== */

.team-health-filter {
    cursor: pointer !important;
    border: 1px solid rgba(226,232,240,.95) !important;
    color: inherit !important;
    text-align: left !important;
}

.team-health-filter:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 24px rgba(15,23,42,.20) !important;
    opacity: 1 !important;
}

.team-health-filter.active-stat {
    border-color: #93c5fd !important;
    box-shadow: 0 0 0 3px rgba(147,197,253,.25), 0 12px 24px rgba(15,23,42,.18) !important;
}
.employee-disabled-item {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    opacity: 0.92;
}

.employee-disabled-item .employee-directory-toggle {
    background: #fff1f2 !important;
}

.employee-status-pill.disabled {
    background: #fee2e2 !important;
    color: #991b1b !important;
    font-weight: 800 !important;
}

.bulk-employee-status-form {
    display: inline-flex !important;
    margin: 0 !important;
}

.bulk-toggle-btn{

    min-width:130px;

}

.bulk-toggle-btn.bulk-disable{

    background:#dc2626 !important;
    color:#fff !important;

}

.bulk-toggle-btn.bulk-enable{

    background:#16a34a !important;
    color:#fff !important;

}

.employee-delete-btn {
    background: #7f1d1d !important;
    color: #ffffff !important;
}

.employee-profile-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.employee-profile-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    margin-top: 18px !important;
}

.employee-left-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.employee-right-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
}

.employee-right-actions form,
.employee-left-actions form {
    margin: 0 !important;
}

.employee-delete-btn {
    background: #991b1b !important;
    color: #ffffff !important;
    min-width: 86px !important;
}