:root {
    --bg-color: #f8fafc;
    --sidebar-bg: #ffffff;
    --panel-bg: #ffffff;
    --border-color: #e2e8f0;
    --accent-color: #f97316;
    --accent-gradient: linear-gradient(135deg, #f97316, #ea580c);
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --sidebar-width: 260px;
    --header-height: 80px;
    --radius-lg: 16px;
    --radius-md: 10px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    overflow: hidden;
}

.app-container {
    display: flex;
    height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    padding: 2rem;
    display: flex; flex-direction: column;
}

.logo {
    margin-bottom: 3rem;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--text-primary);
}

.logo-text span {
    font-weight: 300;
    color: var(--accent-color);
}

nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* There are 12 navigation items. On a short screen (a 1366x768 laptop
       leaves roughly 640px of viewport) they do not fit, and because body has
       overflow:hidden the last items were clipped with no way to reach them.
       Scrolling only the nav keeps the logo pinned at the top and Logout
       visible at the bottom.
       flex + min-height:0 are both required - without min-height a flex child
       refuses to shrink below its content height and no scrollbar appears. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

nav::-webkit-scrollbar {
    width: 6px;
}

nav::-webkit-scrollbar-track {
    background: transparent;
}

nav::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

nav::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.nav-item:hover {
    background: #f1f5f9;
    color: var(--text-primary);
}

.nav-item.active {
    background: #fff7ed;
    color: var(--accent-color);
    font-weight: 600;
}

.nav-item i {
    width: 20px;
    height: 20px;
}

/* Short-to-medium screens: tighten the sidebar so the full navigation fits
   without needing to scroll.
   The threshold is 1000px on purpose. With the default spacing the 12 items
   need 776px, which only fits once the viewport is about 975px tall - so a
   smaller threshold would leave the awkward case where a SHORT screen fits but
   a slightly TALLER one scrolls. Above 1000px the roomier spacing is used and
   always fits; below it the compact spacing is used and also always fits.
   Scoped above the 992px breakpoint, because below that the sidebar is already
   collapsed to icons by the rules further down this file. */
@media (min-width: 993px) and (max-height: 1000px) {
    .sidebar {
        padding: 1.25rem 1.5rem;
    }

    .logo {
        margin-bottom: 1.5rem;
    }

    .nav-item {
        padding: 0.7rem 0.75rem;
    }
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    overflow-y: auto;
}

header {
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.header-search {
    background: white;
    border: 1px solid var(--border-color);
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 400px;
    box-shadow: var(--shadow-sm);
}

.header-search input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    width: 100%;
    outline: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Buttons */
.btn {
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
}

.btn-primary:hover {
    background: #ea580c;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(249, 115, 22, 0.3);
}

.btn-secondary {
    background: #f1f5f9;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: #e2e8f0;
}

.btn-danger {
    background: #fee2e2;
    color: var(--danger);
    border: 1px solid #fecaca;
}

.btn-danger:hover {
    background: #fecaca;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: 1px solid var(--border-color);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.btn-icon:hover {
    background: #e2e8f0;
    color: var(--text-primary);
}

.btn-icon.danger:hover {
    background: #fee2e2;
    color: var(--danger);
    border-color: #fecaca;
}

.bulk-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Checkbox styling */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-color);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    display: flex;
    gap: 1.5rem;
    align-items: center;
    box-shadow: var(--shadow-sm);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #fff7ed;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
}

.stat-info h3 {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.3rem;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-change {
    font-size: 0.75rem;
    color: var(--success);
    font-weight: 500;
}

/* Panels */
.glass-panel {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.dashboard-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1200px) {
    .dashboard-bottom {
        grid-template-columns: 1fr;
    }
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.panel-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Leads List */
.leads-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.lead-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8fafc;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}

.lead-item:hover {
    background: #ffffff;
    border-color: var(--accent-color);
    box-shadow: var(--shadow-sm);
}

.lead-info {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.lead-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffedd5;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

.lead-details h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.lead-details span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.status-badge {
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-lead { background: #fff7ed; color: #ea580c; }
.status-contacted { background: #fef3c7; color: #92400e; }
.status-client { background: #dcfce7; color: #166534; }

/* Timeline */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    padding-left: 1.2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
}

.timeline-item {
    position: relative;
}

.timeline-dot {
    position: absolute;
    left: -22px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--accent-color);
}

.timeline-content {
    background: #f8fafc;
    padding: 1rem;
    border-radius: var(--radius-md);
}

.timeline-content p {
    font-size: 0.9rem;
    line-height: 1.5;
}

.timeline-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
    display: block;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal {
    background: white;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: 24px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.modal-header {
    padding: 1.5rem 2.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body {
    padding: 2rem 2.5rem;
    overflow-y: auto;
    flex: 1;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-group input, .form-group select {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #f8fafc;
    outline: none;
    transition: border-color 0.2s;
}

.form-group input:focus {
    border-color: var(--accent-color);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .sidebar {
        width: 80px;
        padding: 1.5rem 1rem;
    }
    
    .sidebar .logo-text, .nav-item span {
        display: none;
    }
    
    .sidebar .nav-item {
        justify-content: center;
        padding: 0.8rem;
    }
    
    .main-content {
        padding: 1.5rem;
    }
    
    .modal {
        width: 95%;
        max-width: 95%;
        margin: 0 10px;
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .bulk-actions {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 5px;
    }
}

/* Premium Table Design */
.table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    position: relative;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) #f1f5f9;
}

.table-container::-webkit-scrollbar {
    height: 8px;
}

.table-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

.table-top-scrollbar {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    height: 10px;
    margin-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) #f1f5f9;
}

.table-top-scrollbar::-webkit-scrollbar {
    height: 6px;
}

.table-top-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.table-top-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.table-top-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

.table-top-scrollbar-inner {
    height: 1px;
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table th {
    background: #f8fafc;
    padding: 1.1rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 2px solid #edf2f7;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 4;
}

.data-table td {
    padding: 1.1rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: var(--text-primary);
    font-size: 0.875rem;
    vertical-align: middle;
    white-space: nowrap;
}

.data-table tr:hover {
    background-color: #fcfdfe;
}

.data-table tr:last-child td {
    border-bottom: none;
}

/* Status Badge Refinement */
.status-badge {
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
}
}

@media (max-width: 1100px) {
    .col-email {
        display: none;
    }
}

/* Glass Panel Padding Adjustments */
.glass-panel {
    padding: 1.5rem;
}

@media (min-width: 1600px) {
    .container {
        max-width: 1600px;
        margin: 0 auto;
    }
}

.btn-text {
    background: none;
    border: none;
    color: var(--accent-color);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
}

.btn-text:hover {
    text-decoration: underline;
}

/* Sub-tabs */
.tabs-container {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.sub-tabs {
    display: flex;
    gap: 2rem;
}

.sub-tab {
    background: none;
    border: none;
    padding: 0.8rem 0;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    position: relative;
    font-size: 0.9rem;
}

.sub-tab.active {
    color: var(--accent-color);
}

.sub-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-color);
}

.subview {
    display: none;
}

.subview.active {
    display: block;
}

.content-view { display: none; }
.content-view.active { display: block; }

/* Pagination Footer */
.pagination-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.pagination-pages {
    display: flex;
    gap: 0.5rem;
}

.page-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: white;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.page-btn:hover {
    background: #f1f5f9;
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.page-btn.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);
}

.pagination-status {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Options Management */
.form-row {
    display: flex;
    gap: 0.5rem;
}

.form-row input {
    flex: 1;
    padding: 0.7rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    outline: none;
    background: #f8fafc;
}

.options-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.option-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    background: #f1f5f9;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.option-chip button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #ef4444;
    display: flex;
}

.table-select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.85rem;
    background: white;
    cursor: pointer;
}
.modal-section-divider {
    height: 1px;
    background: var(--border-color);
    margin: 1.5rem 0;
}

.timeline-section h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.timeline-container {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 5px;
}

.timeline-item {
    position: relative;
    padding-left: 1.5rem;
    padding-bottom: 1.2rem;
    border-left: 2px solid var(--primary-color);
}

.timeline-item:last-child {
    border-left-color: transparent;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary-color);
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

.timeline-user {
    font-weight: 700;
    color: var(--primary-color);
}

.timeline-content {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.4;
    background: #f8fafc;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
}

/* Renewal Card Styling */
.renewals-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-height: 350px;
    overflow-y: auto;
    padding-right: 5px;
}

.renewal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8fafc;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.renewal-item:hover {
    background: #ffffff;
    border-color: var(--warning);
    box-shadow: var(--shadow-sm);
}

.renewal-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.renewal-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.renewal-info span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.renewal-badge {
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
}

.renewal-badge.danger {
    background: #fee2e2;
    color: var(--danger);
}

.renewal-badge.warning {
    background: #fef3c7;
    color: var(--warning);
}

.renewal-badge.success {
    background: #dcfce7;
    color: var(--success);
}

/* Premium Open vs Closed Research Calls UI/UX Styling */
.open-call-row {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.open-call-row:hover {
    background-color: rgba(249, 115, 22, 0.03) !important;
}
.open-call-row td {
    transition: color 0.25s ease;
}

.closed-call-row {
    opacity: 0.5;
    filter: grayscale(90%) contrast(90%);
    background-color: #f8fafc !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.closed-call-row:hover {
    opacity: 0.95;
    filter: grayscale(0%) contrast(100%);
    background-color: #ffffff !important;
}
.closed-call-row td {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}
.closed-call-row td span, 
.closed-call-row td .status-badge {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Redesigned Edit Research Call Modal Grid Layout */
.rc-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.rc-segment-full {
    grid-column: span 2;
}

.rc-segment {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.rc-segment:hover {
    border-color: var(--accent-color);
    box-shadow: var(--shadow-md);
}

.rc-segment-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rc-segment-title i {
    width: 16px;
    height: 16px;
    color: var(--accent-color);
}

.rc-fields-grid {
    display: grid;
    gap: 1rem;
}

.rc-fields-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.rc-fields-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
    .rc-edit-grid {
        grid-template-columns: 1fr;
    }
    .rc-segment-full {
        grid-column: span 1;
    }
    .rc-fields-grid-3 {
        grid-template-columns: 1fr;
    }
    .rc-fields-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Troops form grid helper classes */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.form-grid.grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 768px) {
    .form-grid, .form-grid.grid-3 {
        grid-template-columns: 1fr !important;
    }
}

/* Login Screen Overlay */
#login-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 10% 20%, rgba(31, 38, 52, 0.95) 0%, rgba(15, 18, 23, 0.98) 90%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.login-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 3rem 2.5rem;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    text-align: center;
    color: #ffffff;
}

.login-card .logo {
    margin-bottom: 2rem;
}

.login-card .logo-text {
    font-size: 2.2rem;
    color: #ffffff;
}

.login-card h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.8);
}

.login-card .form-group {
    text-align: left;
    margin-bottom: 1.25rem;
}

.login-card .form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-card input {
    width: 100%;
    padding: 0.85rem 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    outline: none;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.login-card input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.3);
    background: rgba(0, 0, 0, 0.5);
}

.login-card .btn-primary {
    width: 100%;
    justify-content: center;
    padding: 0.9rem;
    font-size: 1.05rem;
    margin-top: 1.5rem;
}

.login-error {
    color: #f87171;
    font-size: 0.9rem;
    margin-top: 1rem;
    display: none;
    background: rgba(239, 68, 68, 0.1);
    padding: 0.6rem;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Staff Access Settings Styling */
.permissions-grid-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.permissions-grid-table th, .permissions-grid-table td {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.permissions-grid-table th {
    background: #f8fafc;
    font-weight: 600;
    color: var(--text-primary);
}

.permissions-grid-table td:first-child, .permissions-grid-table th:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
}

.permissions-grid-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-color);
}

/* User Management Table Header actions */
.access-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
}

.access-header-row h3 {
    font-size: 1.2rem;
    color: var(--text-primary);
}

/* Active Notifications Style */
.notifications-active {
    background: var(--accent-gradient) !important;
    color: white !important;
}
.notifications-active .stat-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}
.notifications-active .stat-info h3 {
    color: rgba(255, 255, 255, 0.8) !important;
}
.notifications-active .stat-value {
    color: white !important;
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.4); border-color: rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 25px rgba(239, 68, 68, 1); border-color: rgba(239, 68, 68, 1); }
    100% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.4); border-color: rgba(239, 68, 68, 0.4); }
}
.notifications-glow {
    animation: pulse-glow 1.5s infinite ease-in-out !important;
    border: 2px solid #ef4444 !important;
}

/* Color rows where target is achieved or stop loss is triggered */
tr.target-achieved-row td {
    background-color: #dcfce7 !important; /* light green */
    color: #166534 !important; /* dark green text for contrast */
}
tr.stop-loss-triggered-row td {
    background-color: #fee2e2 !important; /* light red */
    color: #991b1b !important; /* dark red text for contrast */
}

/* Maintain opacity and visibility for closed rows that were triggered */
tr.closed-call-row.target-achieved-row td,
tr.closed-call-row.stop-loss-triggered-row td {
    color: #94a3b8 !important; /* Keep original closed style text color or similar if desired */
    opacity: 0.7;
}

/* Column Filter Popover & Header Buttons */
#col-filter-popover {
    position: fixed;
    z-index: 999999 !important;
    width: 260px;
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 0.85rem !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.22) !important;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.col-filter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.col-filter-item:hover {
    background: #f1f5f9;
}

.header-filter-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: color 0.15s, background 0.15s;
    user-select: none;
}

.header-filter-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--accent-color);
}

.header-filter-btn.active {
    color: #10b981 !important;
}