/* ===============================
   Global Header
================================ */

/* ===============================
   Section Separation
================================ */

.dashboard-content hr{
    height:0;
    margin:var(--ds-space-5, 20px) 0;
    border:0;
    background:none;
}

/* ===============================
   Rich Description Blocks
================================ */

.task-description-card{
    padding:var(--ds-space-5, 20px);
    margin:var(--ds-space-5, 20px) 0;
    background:var(--ds-surface-muted);
    border:1px solid color-mix(in srgb, var(--ds-info) 28%, var(--ds-border));
    border-inline-start:4px solid #2563eb;
    border-radius:var(--ds-radius-lg, 16px);
    box-shadow:var(--ds-shadow-sm, 0 4px 14px rgba(15,23,42,.05));
}

.task-description-card h3{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 var(--ds-space-4, 16px);
    color:#1e3a8a;
    font-size:20px;
}

.task-description-content{
    color:var(--ds-text-muted);
    font-size:15px;
    font-weight:500;
    line-height:1.75;
    overflow-wrap:anywhere;
}

.task-description-content > :first-child{
    margin-top:0;
}

.task-description-content > :last-child{
    margin-bottom:0;
}

.task-description-content ul,
.task-description-content ol{
    margin:10px 0;
    padding-inline-start:24px;
}

.task-description-content li + li{
    margin-top:6px;
}


/* ===============================
   Backup Cards
=============================== */

/* ===============================
   Automatic Backup Status
================================ */

.automatic-backup-panel{
    display:flex;
    gap:18px;
    margin-bottom:24px;
    padding:22px 24px;
    background:var(--ds-surface);
    border:1px solid var(--ds-border);
    border-inline-start:4px solid var(--ds-success, #10b981);
    border-radius:16px;
    box-shadow:var(--ds-shadow-sm, 0 4px 14px rgba(15,23,42,.05));
}

.automatic-backup-panel__icon{
    display:flex;
    flex:0 0 52px;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    color:#047857;
    background:color-mix(in srgb, var(--ds-success, #10b981) 12%, var(--ds-surface));
    border-radius:14px;
    font-size:24px;
}

.automatic-backup-panel__content{
    flex:1;
    min-width:0;
}

.automatic-backup-panel__heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.automatic-backup-panel h2{
    margin:0 0 5px;
    color:var(--ds-text);
    font-size:19px;
}

.automatic-backup-panel p{
    margin:0;
    color:var(--ds-text-muted);
}

.automatic-backup-status{
    display:inline-flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    padding:7px 11px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.automatic-backup-status span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:currentColor;
}

.automatic-backup-status.is-active{
    color:#047857;
    background:#d1fae5;
}

.automatic-backup-status.is-pending{
    color:#a16207;
    background:#fef3c7;
}

.automatic-backup-panel__details{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-top:18px;
}

.automatic-backup-panel__details > div{
    min-width:0;
    padding:12px 14px;
    background:var(--ds-surface-muted);
    border:1px solid var(--ds-border);
    border-radius:12px;
}

.automatic-backup-panel__details span,
.automatic-backup-panel__details strong{
    display:block;
    overflow-wrap:anywhere;
}

.automatic-backup-panel__details span{
    margin-bottom:4px;
    color:var(--ds-text-muted);
    font-size:12px;
}

.automatic-backup-panel__details strong{
    color:var(--ds-text);
    font-size:14px;
}

.automatic-backup-panel .automatic-backup-panel__note{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid var(--ds-border);
    color:#a16207;
    font-size:13px;
}

.automatic-backup-settings{
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid var(--ds-border);
}

.automatic-backup-settings__grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.automatic-backup-settings label,
.automatic-backup-settings label > span{
    display:block;
}

.automatic-backup-settings label > span{
    margin-bottom:7px;
    color:var(--ds-text);
    font-size:12px;
    font-weight:700;
}

.automatic-backup-settings input,
.automatic-backup-settings select{
    width:100%;
    min-width:0;
    min-height:42px;
    padding:9px 11px;
    color:var(--ds-text);
    background:var(--ds-surface-muted);
    border:1px solid var(--ds-border);
    border-radius:10px;
}

.automatic-backup-settings__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:14px;
}

.automatic-backup-settings__footer small{
    color:var(--ds-text-muted);
    line-height:1.5;
}.automatic-backup-settings__footer .btn{flex:0 0 auto}

.automatic-backup-status.is-disabled{
    color:var(--ds-text-muted);
    background:var(--ds-surface-muted);
    border:1px solid var(--ds-border);
}
.backup-auto-label{
    padding:2px 7px;
    color:#047857;
    background:#d1fae5;
    border-radius:999px;
    font-size:10px;
    font-weight:700;
}

@media (max-width: 767px){
    .automatic-backup-panel{
        padding:18px;
    }

    .automatic-backup-panel__heading{
        flex-direction:column;
        gap:12px;
    }

    .automatic-backup-panel__details{
        grid-template-columns:1fr;
    }

    .automatic-backup-settings__grid{
        grid-template-columns:1fr;
    }

    .automatic-backup-settings__footer{
        align-items:stretch;
        flex-direction:column;
    }.automatic-backup-settings__footer .btn{width:100%}
}
.backup-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
    margin-bottom:30px;
}

.backup-card{
    position:relative;
    background:var(--ds-surface);
    border:1px solid var(--ds-border);
    border-radius:18px;
    padding:28px;
    transition:.25s;
    box-shadow:0 4px 14px rgba(15,23,42,.04);
}

.backup-card:hover{
    transform:translateY(-4px);
    border-color:#2563eb;
    box-shadow:0 14px 40px rgba(37,99,235,.12);
}

.backup-card-icon{
    width:64px;
    height:64px;
    border-radius:18px;
    background:#f3f4f6;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    margin-bottom:20px;
}

.backup-card h3{
    margin:0 0 10px;
    font-size:20px;
    font-weight:700;
    color:var(--ds-text);
}

.backup-card p{
    margin:0 0 24px;
    color:var(--ds-text-muted);
    line-height:1.6;
    min-height:46px;
}

.backup-card form{
    margin:0;
}.backup-card .btn{width:100%}

.backup-badge{
    position:absolute;
    top:18px;
    right:18px;
    background:#10b981;
    color:#ffffff;
    padding:5px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.3px;
    text-transform:uppercase;
}

/* ===============================
   Backup Type
=============================== */

.backup-type{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    border-radius:999px;
    background:var(--ds-surface-muted);
    border:1px solid var(--ds-border);
    font-size:13px;
    font-weight:600;
    color:var(--ds-text-muted);
}

/* ===============================
   Backup Table
=============================== */

.table-card .table td,
.table-card .table th{
    vertical-align:middle;
}

.table-card .table td:first-child{
    white-space:nowrap;
}.table-card .btn-sm{margin-right:6px}

.table-actions{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:8px;
}

.points-history-actions{
    min-width:132px;
}.points-history-actions .btn-sm{margin-right:0}

.points-history-pagination{
    display:flex;
    padding-top:var(--ds-space-5);
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:var(--ds-space-4);
}

.points-history-pagination p,
.points-history-pagination .pagination{
    margin:0;
}

.table-pagination-footer{
    display:flex;
    padding-top:var(--ds-space-5);
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:var(--ds-space-4);
}

.table-pagination-footer p,
.table-pagination-footer .pagination{
    margin:0;
}

/* Module Management
   -------------------------------------------------------------------------- */
.module-management-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:var(--ds-space-5);
}

.module-management-card{
    display:grid;
    padding:var(--ds-space-6);
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:var(--ds-space-4);
    background:var(--ds-surface);
    border:1px solid var(--ds-border);
    border-radius:var(--ds-radius-lg);
    box-shadow:var(--ds-shadow-sm);
}

.module-management-card.is-disabled{
    background:var(--ds-surface-muted);
    opacity:.82;
}

.module-management-icon{
    display:grid;
    place-items:center;
    width:50px;
    height:50px;
    color:var(--primary-color);
    background:var(--primary-soft);
    border-radius:var(--ds-radius-md);
    font-size:22px;
}

.module-management-copy{
    min-width:0;
}

.module-management-title{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--ds-space-2);
}

.module-management-title h2{
    margin:0;
    font-size:17px;
}

.module-management-copy p{
    margin:5px 0;
    color:var(--ds-text-muted);
    font-size:13px;
}

.module-management-copy small{
    color:var(--ds-text-subtle);
}

.module-management-card form{
    margin:0;
}

@media (max-width:767px){
    .module-management-grid{
        grid-template-columns:1fr;
    }

    .module-management-card{
        grid-template-columns:auto 1fr;
    }

    .module-management-card form{
        grid-column:1 / -1;
    }.module-management-card form .btn{width:100%}
}

.table-actions form{
    display:inline-flex;
    margin:0;
}

/* ===============================
   Backup Actions
=============================== */

.backup-card:nth-child(1) .backup-card-icon{
    background:#eef2ff;
}

.backup-card:nth-child(2) .backup-card-icon{
    background:#eff6ff;
}

.backup-card:nth-child(3) .backup-card-icon{
    background:#ecfdf5;
}

/* ===============================
   Responsive
=============================== */












/* ===============================
   Header Notifications
=============================== */

.notification-menu .notification-item{
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:12px 16px;
    border-bottom:1px solid var(--ds-border-subtle);
    text-decoration:none;
    color:var(--ds-text);
    transition:.2s;
}

.notification-item-icon{
    display:flex;
    width:36px;
    height:36px;
    min-width:36px;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#eef2ff,#dbeafe);
    border-radius:11px;
    font-size:18px;
    line-height:1;
}

.notification-item-content{
    min-width:0;
    flex:1;
}

.notification-item:hover{
    background:var(--ds-surface-muted);
}

.notification-item strong{
    display:block;
    font-size:14px;
    margin-bottom:4px;
}

.notification-item small{
    display:block;
    color:var(--ds-text-muted);
    line-height:1.4;
}

.notification-empty{
    padding:20px;
    text-align:center;
    color:var(--ds-text-muted);
}

.notification-footer{
    border-top:1px solid var(--ds-border-subtle);
}

.notification-footer a{
    display:block;
    padding:14px;
    text-align:center;
    font-weight:600;
    text-decoration:none;
}

/* ===============================
   Account Tabs
================================ */

.account-tabs{
    display:flex;
    gap:12px;
    margin-bottom:25px;
    flex-wrap:wrap;
}

.account-tabs a{
    padding:10px 18px;
    border-radius:12px;
    text-decoration:none;
    background:var(--ds-surface);
    border:1px solid var(--ds-border);
    color:var(--ds-text);
    font-weight:600;
}

.account-tabs a.active{
    background:#10b981;
    color:#ffffff;
    border-color:#10b981;
}


/* ===============================
   Contract View
=============================== */

.stats-grid{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(240px,1fr)
    );

    gap:20px;

    margin-bottom:25px;
}

.stat-card{

    background:var(--ds-surface);

    border-radius:20px;

    padding:25px;

    border:1px solid var(--ds-border);

    box-shadow:
    0 8px 25px rgba(15,23,42,.04);
}

.stat-card h4{

    margin:0 0 12px;

    font-size:14px;

    font-weight:600;

    color:var(--ds-text-muted);
}

.stat-card strong{

    display:block;

    font-size:32px;

    font-weight:800;

    color:var(--ds-text);
}

/* ===============================
   Contract Details Table
=============================== */

.contract-details-table th{

    width:240px;

    background:var(--ds-surface-muted);

    font-weight:700;

    color:var(--ds-text);
}

.contract-details-table td{

    color:var(--ds-text);
}

/* ===============================
   Contract View Header
=============================== */

.contract-header{

    background:
    linear-gradient(
        135deg,
        #020617,
        #0f172a,
        #334155
    );

    color:#ffffff;

    border-radius:24px;

    padding:35px;

    margin-bottom:25px;
}

.contract-header h2{

    margin:0 0 8px;

    font-size:34px;

    font-weight:800;
}

.contract-header p{

    margin:0;

    opacity:.85;
}

/* ===============================
   Mobile
=============================== */


/* ===============================
   User Dropdown
================================ */

.user-dropdown{
    position:relative;
}

.user-avatar{
    width:34px;
    height:34px;
    border-radius:50%;
    background:#10b981;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:700;
}

.user-avatar img{
    width:100%;
    height:100%;
    border-radius:inherit;
    object-fit:cover;
}

.user-dropdown-menu{
    position:absolute;
    top:100%;
    right:0;
    min-width:220px;
    background:var(--ds-surface);
    border:1px solid var(--ds-border);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
    display:none;
    z-index:var(--ds-z-dropdown);
}

.user-dropdown-menu a{
    display:block;
    padding:14px 18px;
    text-decoration:none;
    color:var(--ds-text);
    transition:background .2s;
}

.user-dropdown-menu a:hover{
    background:var(--ds-surface-muted);
}

.dropdown-divider{
    height:1px;
    background:#e5e7eb;
}

.user-dropdown-menu .logout-link{
    color:#dc2626;
}

.user-dropdown-mobile-language{
    display:none;
}

.user-dropdown:hover .user-dropdown-menu{
    display:block;
}

/* ===============================
   Messages Center
================================ */

.messages-dropdown{
    position:relative;
}.messages-btn{position:relative;width:44px}

.messages-count{
    position:absolute;
    top:-6px;
    right:-7px;
    min-width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 5px;
    border:2px solid #fff;
    border-radius:999px;
    background:#ef4444;
    color:var(--ds-text-inverse);
    font-size:10px;
    font-weight:700;
    line-height:1;
}

.messages-menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    z-index:var(--ds-z-dropdown);
    width:360px;
    overflow:hidden;
    display:none;
    background:var(--ds-surface);
    border:1px solid var(--ds-border);
    border-radius:16px;
    box-shadow:0 20px 50px rgba(15,23,42,.14);
}

.messages-dropdown.open .messages-menu{
    display:block;
}

.messages-header{
    padding:14px 16px;
    border-bottom:1px solid var(--ds-border);
    color:var(--ds-text);
    font-size:14px;
    font-weight:700;
}

.messages-menu .messages-list{
    max-height:360px;
    overflow-y:auto;
}

.messages-item{
    position:relative;
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
    padding:12px 16px;
    color:var(--ds-text);
    text-decoration:none;
    border-bottom:1px solid var(--ds-border-subtle);
    transition:background-color .18s ease;
}

.messages-item:hover,
.messages-item:focus-visible{
    background:var(--ds-surface-muted);
}

.messages-item:focus-visible{
    outline:2px solid var(--primary-color);
    outline-offset:-2px;
}

.messages-item.is-unread{
    background:var(--ds-surface-muted);
}

.messages-avatar{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:50%;
    background:var(--primary-soft);
    color:var(--primary-color);
    font-size:13px;
    font-weight:700;
}

.messages-copy{
    min-width:0;
    flex:1;
}

.messages-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.messages-meta strong{
    overflow:hidden;
    font-size:13px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.messages-meta time{
    flex:0 0 auto;
    color:var(--ds-text-subtle);
    font-size:11px;
}

.messages-preview{
    display:block;
    margin-top:3px;
    overflow:hidden;
    color:var(--ds-text-muted);
    font-size:12px;
    line-height:1.4;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.messages-unread-dot{
    width:7px;
    height:7px;
    flex:0 0 auto;
    border-radius:50%;
    background:var(--primary-color);
}

.messages-empty{
    padding:28px 18px;
    color:var(--ds-text-subtle);
    font-size:13px;
    text-align:center;
}

.messages-footer{
    border-top:1px solid var(--ds-border);
}

.messages-footer a{
    display:block;
    padding:12px 16px;
    color:var(--primary-color);
    font-size:13px;
    font-weight:600;
    text-align:center;
    text-decoration:none;
}

.messages-footer a:hover,
.messages-footer a:focus-visible{
    background:var(--ds-surface-muted);
}

/* ===============================
   Notifications
================================ */

.notification-dropdown{
    position:relative;
}.notification-btn{position:relative;width:44px}

.notification-count{
    position:absolute;
    top:-5px;
    right:-5px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#ef4444;
    color:#ffffff;
    font-size:11px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

.notification-menu{
    position:absolute;
    top:calc(100% + 2px);
    right:0;
    width:320px;
    background:var(--ds-surface);
    border:1px solid var(--ds-border);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
    display:none;
    z-index:var(--ds-z-dropdown);
}

.notification-header{
    padding:15px 18px;
    font-weight:700;
    border-bottom:1px solid var(--ds-border);
}

.notification-menu a{
    display:block;
    padding:14px 18px;
    text-decoration:none;
    color:var(--ds-text);
}

.notification-menu a:hover{
    background:var(--ds-surface-muted);
}


/* ========================================================================== */
/* Business OS Admin Design System                                            */
/* Canonical shared foundation. Module styles should contain domain UI only.  */
/* ========================================================================== */

/* Typography
   -------------------------------------------------------------------------- */
body{
    font-family:var(--ds-font-family);
    color:var(--ds-text);
    background:var(--ds-surface-page);
    line-height:1.5;
}

h1,h2,h3,h4,h5,h6{
    color:var(--ds-text);
    line-height:1.25;
}

.page-title,
.employees-title,
.tasks-title{
    margin:0;
    color:var(--ds-text);
    font-size:clamp(22px,2vw,28px);
    font-weight:700;
}

.page-description,
.page-subtitle,
.employees-subtitle,
.tasks-subtitle{
    margin:6px 0 0;
    color:var(--ds-text-muted);
    font-size:14px;
}

/* Page Layout, Headers, Description Blocks, and Actions
   -------------------------------------------------------------------------- */
.page-stack{
    display:flex;
    flex-direction:column;
    gap:var(--ds-space-6);
}

.page-header,
.employees-header,
.tasks-header,
.action-bar,
.page-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--ds-space-5);
    flex-wrap:wrap;
}

.page-header,
.employees-header,
.tasks-header{
    margin-bottom:var(--ds-space-6);
}

.employees-header-content{
    display:flex;
    align-items:flex-start;
    flex-direction:column;
}.employees-add-button{margin-top:var(--ds-space-3)}

.action-bar,
.page-actions{
    margin-bottom:var(--ds-space-5);
}

.description-block,
.communications-header-card{
    padding:var(--ds-space-7);
    margin-bottom:var(--ds-space-6);
    color:var(--ds-text);
    background:var(--ds-surface);
    border:1px solid var(--ds-border);
    border-radius:var(--ds-radius-xl);
    box-shadow:var(--ds-shadow-sm);
}

.description-block h1,
.communications-header-card h1{
    margin:0 0 var(--ds-space-2);
}

.description-block p,
.communications-header-card p{
    margin:0;
    color:var(--ds-text-muted);
}

/* Cards and Dashboard Grids
   -------------------------------------------------------------------------- */
.card-header,
.dashboard-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--ds-space-4);
    padding-bottom:var(--ds-space-4);
    margin-bottom:var(--ds-space-5);
    border-bottom:1px solid var(--ds-border);
}

.card-header h2,
.card-header h3,
.dashboard-card-header h2,
.dashboard-card-header h3{
    margin:0;
}

.dashboard-grid,
.card-grid,
.communications-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:var(--ds-space-5);
}

/* Statistics
   -------------------------------------------------------------------------- */
.stats-grid,
.statistics-grid,
.communications-stats-grid,
.board-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:var(--ds-space-5);
    margin-bottom:var(--ds-space-6);
}

.stat-card,
.statistics-card,
.communications-stat-card,
.board-stat-card{
    min-width:0;
    padding:var(--ds-space-6);
    background:var(--ds-surface);
    border:1px solid var(--ds-border);
    border-radius:var(--ds-radius-lg);
    box-shadow:var(--ds-shadow-sm);
}

.stat-card span,
.stat-card h4,
.statistics-card span,
.communications-stat-card span,
.board-stat-card span{
    display:block;
    margin:0 0 var(--ds-space-2);
    color:var(--ds-text-muted);
    font-size:13px;
    font-weight:600;
}

.stat-card strong,
.statistics-card strong,
.communications-stat-card strong,
.board-stat-card strong{
    display:block;
    color:var(--ds-text);
    font-size:clamp(26px,3vw,34px);
    font-weight:700;
    line-height:1.15;
}

/* Tables, Toolbars, Search, and Filters
   -------------------------------------------------------------------------- */
.table-card{
    padding:var(--ds-space-5);
    margin-bottom:var(--ds-space-5);
    overflow:hidden;
}

.table-card > h2,
.table-card > h3{
    margin:0 0 var(--ds-space-4);
}

.table-card > .table,
.table-card > .table-responsive:last-child{
    margin-bottom:0;
}

.ui-table-wrap,
.table-responsive,
.employees-table-wrapper{
    width:100%;
    overflow-x:auto;
}

.ui-table,
.table,
.data-table{
    width:100%;
    border-collapse:collapse;
}

.ui-table thead th,
.table thead th,
.data-table thead th{
    padding:14px 16px;
    color:var(--ds-text-muted);
    background:var(--ds-surface-muted);
    border-bottom:1px solid var(--ds-border);
    font-size:13px;
    font-weight:700;
    text-align:left;
    white-space:nowrap;
}

.ui-table tbody td,
.table tbody td,
.data-table tbody td{
    padding:15px 16px;
    border-bottom:1px solid var(--ds-border-subtle);
    vertical-align:middle;
}

.ui-table tbody tr,
.table tbody tr,
.data-table tbody tr{
    transition:background-color var(--ds-transition);
}

.ui-table tbody tr:hover,
.table tbody tr:hover,
.data-table tbody tr:hover{
    background:var(--ds-surface-hover);
}

.ui-table tbody tr:last-child td,
.table tbody tr:last-child td,
.data-table tbody tr:last-child td{
    border-bottom:0;
}

.ui-toolbar,
.table-toolbar,
.filter-bar,
.search-bar,
.tasks-toolbar,
.board-filters{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--ds-space-4);
    flex-wrap:wrap;
    padding:var(--ds-space-4) var(--ds-space-5);
    margin-bottom:var(--ds-space-6);
    background:var(--ds-surface);
    border:1px solid var(--ds-border);
    border-radius:var(--ds-radius-lg);
    box-shadow:var(--ds-shadow-sm);
}

.table-toolbar-actions,
.filter-bar-actions,
.tasks-toolbar-actions{
    display:flex;
    align-items:center;
    gap:var(--ds-space-3);
    flex-wrap:wrap;
}

.search-input,
.tasks-toolbar input{
    width:min(380px,100%);
}

/* Advanced Filters and Active Filter Chips
   -------------------------------------------------------------------------- */
.transactions-filter-form{
    margin-bottom:var(--ds-space-4);
}

.transactions-filter-bar{
    position:relative;
    align-items:flex-end;
    justify-content:flex-start;
    margin-bottom:0;
}

.filter-control{
    display:flex;
    flex:1 1 150px;
    min-width:140px;
    flex-direction:column;
    gap:6px;
}

.filter-control-search{
    flex:2 1 280px;
}

.filter-control label{
    color:var(--ds-text-muted);
    font-size:12px;
    font-weight:700;
}

.filter-control input,
.filter-control select{
    width:100%;
    min-height:44px;
    padding:10px 12px;
    color:var(--ds-text);
    background:var(--ds-surface);
    border:1px solid var(--ds-border);
    border-radius:var(--ds-radius-md);
    font:inherit;
}

.search-field{
    position:relative;
}

.search-field > i{
    position:absolute;
    top:50%;
    inset-inline-start:13px;
    color:var(--ds-text-subtle);
    pointer-events:none;
    transform:translateY(-50%);
}

.search-field input{
    padding-inline-start:38px;
}

.transactions-filter-bar .search-field input{
    padding-inline-start:46px !important;
}.category-analysis-toggle{font:inherit}.category-analysis-toggle small{min-width:20px;place-items:center}.category-analysis-child-row{background:color-mix(in srgb,var(--ds-surface-muted) 72%,var(--ds-surface))}.category-analysis-child-index{background:var(--ds-surface-muted);border-inline-end:1px solid var(--ds-border)}.category-analysis-child-name{padding-inline-start:28px!important;color:var(--ds-text-muted)!important;font-weight:650!important}.category-analysis-child-name i{margin-inline-end:8px;color:var(--ds-text-subtle)}.category-analysis-child-total{background:var(--ds-surface-muted);border-inline-start:1px solid var(--ds-border)}

.filter-control input:focus,
.filter-control select:focus{
    outline:0;
    border-color:var(--primary-color);
    box-shadow:0 0 0 4px var(--ds-focus-ring);
}

.advanced-filter-drawer{
    position:relative;
}

.advanced-filter-drawer > summary{
    list-style:none;
}

.advanced-filter-drawer > summary::-webkit-details-marker{
    display:none;
}

.filter-count{
    min-width:20px;
    height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 5px;
    border-radius:999px;
    color:var(--ds-text-inverse);
    background:var(--primary-color);
    font-size:10px;
}

.advanced-filter-panel{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    z-index:120;
    width:min(760px, calc(100vw - 64px));
    padding:var(--ds-space-5);
    background:var(--ds-surface);
    border:1px solid var(--ds-border);
    border-radius:var(--ds-radius-lg);
    box-shadow:var(--ds-shadow-lg);
}

.advanced-filter-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--ds-space-4);
    padding-bottom:var(--ds-space-4);
    margin-bottom:var(--ds-space-4);
    border-bottom:1px solid var(--ds-border);
}

.advanced-filter-header strong,
.advanced-filter-header span{
    display:block;
}

.advanced-filter-header span{
    margin-top:3px;
    color:var(--ds-text-muted);
    font-size:12px;
}.advanced-filter-close{width:34px;flex:0 0 auto}

.active-filter-chips{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin:0 0 var(--ds-space-5);
}

.filter-chip{
    min-height:30px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 9px 5px 11px;
    color:var(--ds-text);
    background:var(--primary-soft);
    border:1px solid var(--primary-border);
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    text-decoration:none;
}

.filter-chip:hover{
    color:var(--ds-text);
    background:var(--ds-surface);
}

.filter-chip i{
    font-size:15px;
}

.transactions-summary .stat-card:nth-child(1){
    border-top:3px solid #16a34a;
}

.transactions-summary .stat-card:nth-child(2){
    border-top:3px solid #dc2626;
}

.transactions-summary .stat-card:nth-child(3){
    border-top:3px solid #eab308;
}

.compact-empty-state{
    min-height:180px;
    padding:30px;
}

.compact-empty-state h3{
    margin:8px 0 4px;
}

.compact-empty-state p{
    margin:0;
}

/* Forms and Controls
   -------------------------------------------------------------------------- */
.form-card{
    padding:var(--ds-space-7);
    margin-bottom:var(--ds-space-6);
}

.form-card > h2,
.form-card > h3{
    margin:0 0 var(--ds-space-5);
    padding-bottom:var(--ds-space-4);
    border-bottom:1px solid var(--ds-border-subtle);
    font-size:20px;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:var(--ds-space-5);
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:var(--ds-space-2);
    min-width:0;
    margin-bottom:var(--ds-space-4);
}

.form-group label,
.control-label{
    color:var(--ds-text-muted);
    font-size:14px;
    font-weight:600;
}

.ui-control,
.form-control,
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea,
.table-toolbar input,
.table-toolbar select,
.filter-bar input,
.filter-bar select,
.search-bar input,
.tasks-toolbar input,
.tasks-toolbar select,
.board-filters .form-control{
    width:100%;
    min-height:var(--ds-control-height);
    padding:10px 14px;
    color:var(--ds-text);
    background:var(--ds-surface);
    border:1px solid var(--ds-border);
    border-radius:var(--ds-radius-md);
    font:inherit;
    transition:border-color var(--ds-transition),box-shadow var(--ds-transition),background var(--ds-transition);
}

.form-group textarea,
textarea.form-control{
    min-height:120px;
    resize:vertical;
}

.ui-control:focus,
.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.table-toolbar input:focus,
.table-toolbar select:focus,
.filter-bar input:focus,
.filter-bar select:focus,
.search-bar input:focus,
.tasks-toolbar input:focus,
.tasks-toolbar select:focus,
.board-filters .form-control:focus{
    outline:0;
    border-color:var(--primary-color);
    box-shadow:0 0 0 4px var(--ds-focus-ring);
}

.ui-control:disabled,
.ui-control[readonly],
.form-control:disabled,
.form-control[readonly],
.form-group input:disabled,
.form-group input[readonly],
.form-group select:disabled,
.form-group textarea:disabled{
    color:var(--ds-text-muted);
    background:var(--ds-surface-muted);
    cursor:not-allowed;
}

input[type="file"]{
    padding:10px;
    background:var(--ds-surface-muted);
    border:1px dashed var(--ds-border-strong);
    border-radius:var(--ds-radius-md);
}

.form-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:var(--ds-space-3);
    flex-wrap:wrap;
    margin-top:var(--ds-space-5);
}/* Buttons
   -------------------------------------------------------------------------- */
.btn{text-decoration:none}.btn-icon{width:40px}.btn:disabled,.btn[aria-disabled="true"]{pointer-events:none}

/* Badges
   -------------------------------------------------------------------------- */
.ui-badge,
.badge,
.status-badge,
.priority-badge,
.conversation-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--ds-space-1);
    min-height:24px;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}

.ui-badge--success,
.badge-success,
.status-active,
.status-completed,
.priority-low{
    color:var(--ds-success);
    background:var(--ds-success-soft);
}

.status-active::before{
    width:7px;
    height:7px;
    content:"";
    background:currentColor;
    border-radius:50%;
    box-shadow:0 0 0 3px rgba(22,163,74,.12);
}

.ui-badge--warning,
.badge-warning,
.priority-medium{
    color:var(--ds-warning-text);
    background:var(--ds-warning-soft);
}

.status-review{
    color:#075ea8;
    background:#dbeeff;
    border:1px solid #82bff1;
}

.ui-badge--danger,
.badge-danger,
.status-suspended,
.status-revision,
.status-cancelled,
.priority-urgent{
    color:var(--ds-danger-text);
    background:var(--ds-danger-soft);
}

.ui-badge--info,
.badge-info,
.status-progress{
    color:var(--ds-info-text);
    background:var(--ds-info-soft);
}

.status-pending{
    color:#8a5700;
    background:#fff2b8;
    border:1px solid #f1c84b;
}

.ui-badge--neutral,
.badge-neutral,
.status-draft{
    color:var(--ds-text-muted);
    background:var(--ds-neutral-soft);
}

/* Alerts
   -------------------------------------------------------------------------- */
.alert{
    display:flex;
    align-items:flex-start;
    gap:var(--ds-space-3);
    padding:var(--ds-space-4);
    margin-bottom:var(--ds-space-4);
    border:1px solid transparent;
    border-radius:var(--ds-radius-md);
    font-size:14px;
}

.alert-success{
    color:var(--ds-success);
    background:var(--ds-success-soft);
    border-color:#bbf7d0;
}

.alert-error,
.alert-danger{
    color:var(--ds-danger-text);
    background:var(--ds-danger-soft);
    border-color:#fecaca;
}

.alert-warning{
    color:var(--ds-warning-text);
    background:var(--ds-warning-soft);
    border-color:#fde68a;
}

.alert-info{
    color:#1e40af;
    background:var(--ds-info-soft);
    border-color:#bfdbfe;
}

/* Empty States
   -------------------------------------------------------------------------- */
.ui-empty-state,
.empty-state,
.table-empty,
.dashboard-empty{
    display:flex;
    min-height:180px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--ds-space-3);
    padding:var(--ds-space-8);
    color:var(--ds-text-muted);
    text-align:center;
    background:var(--ds-surface);
    border:1px dashed var(--ds-border-strong);
    border-radius:var(--ds-radius-lg);
}

.empty-state h2,
.empty-state h3,
.table-empty h3{
    margin:0;
    color:var(--ds-text);
}

.empty-state p,
.table-empty p{
    max-width:560px;
    margin:0;
}

/* Drawers and Modals
   -------------------------------------------------------------------------- */
.ui-modal-overlay,
.drawer-overlay,
.modal-overlay,
.task-modal-overlay{
    position:fixed;
    inset:0;
    z-index:var(--ds-z-overlay);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--ds-space-5);
    background:var(--ds-overlay);
}

.drawer{
    width:min(460px,100%);
    height:100%;
    margin-inline-start:auto;
    background:var(--ds-surface);
    box-shadow:var(--ds-shadow-lg);
}

.ui-modal,
.modal,
.task-modal{
    width:min(640px,100%);
    max-height:calc(100vh - 40px);
    overflow:auto;
    background:var(--ds-surface);
    border-radius:var(--ds-radius-lg);
    box-shadow:var(--ds-shadow-lg);
}

.drawer-header,
.modal-header,
.task-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--ds-space-4);
    padding:var(--ds-space-5) var(--ds-space-6);
    border-bottom:1px solid var(--ds-border);
}

.drawer-body,
.modal-body{
    padding:var(--ds-space-6);
}

.drawer-footer,
.modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:var(--ds-space-3);
    padding:var(--ds-space-5) var(--ds-space-6);
    border-top:1px solid var(--ds-border);
}

/* Pagination
   -------------------------------------------------------------------------- */
.pagination{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:var(--ds-space-2);
    flex-wrap:wrap;
    margin-top:var(--ds-space-6);
}

.pagination a,
.pagination span{
    min-width:38px;
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 11px;
    color:var(--ds-text-muted);
    background:var(--ds-surface);
    border:1px solid var(--ds-border);
    border-radius:var(--ds-radius-sm);
}

.pagination a:hover,
.pagination .active{
    color:var(--ds-text-inverse);
    background:var(--primary-color);
    border-color:var(--primary-color);
}

/* Notices, tabs, and application-owned dropdowns
   -------------------------------------------------------------------------- */
.notice-panel{
    padding:var(--ds-space-4);
    margin-top:var(--ds-space-4);
    color:var(--ds-text);
    background:var(--ds-surface-muted);
    border:1px solid var(--ds-border);
    border-radius:var(--ds-radius-md);
}

.notice-panel--warning{
    color:var(--ds-warning-text);
    background:var(--ds-warning-soft);
    border-color:var(--ds-warning);
}

.notice-panel > :first-child{margin-top:0}
.notice-panel > :last-child{margin-bottom:0}

.ui-tabs{
    display:flex;
    align-items:center;
    gap:var(--ds-space-2);
    overflow-x:auto;
    padding:var(--ds-space-1);
    border-bottom:1px solid var(--ds-border);
}

.ui-tab{
    display:inline-flex;
    min-height:var(--ds-button-height);
    align-items:center;
    justify-content:center;
    padding:var(--ds-space-2) var(--ds-space-3);
    color:var(--ds-text-muted);
    background:transparent;
    border:1px solid transparent;
    border-radius:var(--ds-radius-sm);
    font-weight:600;
    white-space:nowrap;
}

.ui-tab:hover,
.ui-tab:focus-visible{
    color:var(--ds-text);
    background:var(--ds-surface-hover);
}

.ui-tab.is-active,
.ui-tab[aria-selected="true"]{
    color:var(--primary-dark);
    background:var(--primary-soft);
    border-color:var(--primary-border);
}

.ui-tab:disabled,
.ui-tab[aria-disabled="true"]{
    color:var(--ds-text-disabled);
    pointer-events:none;
}

.ui-dropdown{
    z-index:var(--ds-z-dropdown);
    min-width:190px;
    padding:var(--ds-space-2);
    color:var(--ds-text);
    background:var(--ds-surface-elevated);
    border:1px solid var(--ds-border);
    border-radius:var(--ds-radius-md);
    box-shadow:var(--ds-shadow-lg);
}

.ui-dropdown-item{
    display:flex;
    min-height:40px;
    align-items:center;
    gap:var(--ds-space-2);
    padding:var(--ds-space-2) var(--ds-space-3);
    color:var(--ds-text);
    border-radius:var(--ds-radius-sm);
}

.ui-dropdown-item:hover,
.ui-dropdown-item:focus-visible,
.ui-dropdown-item.is-active{
    color:var(--ds-text);
    background:var(--ds-surface-hover);
}

.ui-dropdown-item--danger{color:var(--ds-danger-text)}

.ui-helper-text,
.form-text,
.help-text{
    color:var(--ds-text-muted);
    font-size:12px;
}

.ui-field-error{color:var(--ds-danger-text)}
/* Responsive
   -------------------------------------------------------------------------- */


.notification-dropdown.open .notification-menu,
.user-dropdown.open .user-dropdown-menu{
    display:block;
}

/* ========================================
   Application Launcher
======================================== */

.module-switcher{
    position:relative;
}

.module-switcher::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    background:rgba(15,23,42,.28);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
    transition:opacity .18s ease, visibility 0s linear .18s;
}

.module-switcher.open,
.module-switcher.is-closing{
    z-index:var(--ds-z-dropdown);
}

.module-switcher.open::before{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transition:opacity .2s ease, visibility 0s;
}

.module-switcher.is-closing::before{
    opacity:0;
    pointer-events:none;
}.module-switcher-btn{min-width:112px}

.module-switcher-content{
    display:flex;
    min-width:0;
    align-items:center;
}

.module-switcher-label{
    color:var(--ds-text);
    font-size:14px;
    font-weight:600;
    line-height:1;
}

.module-arrow{
    flex-shrink:0;
    margin-left:2px;
    color:var(--ds-text-muted);
    font-size:11px;
    transition:transform .25s;
}

.module-switcher.open .module-arrow{
    transform:rotate(180deg);
}.module-switcher .module-switcher-btn{min-width:112px}

.app-launcher-button-icon{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:8px;
    background:var(--ds-neutral-soft);
    color:var(--primary-color);
    font-size:15px;
}

.module-switcher .module-switcher-menu{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    width:min(560px, calc(100vw - 32px));
    max-height:min(680px, calc(100vh - 96px));
    padding:0;
    overflow:hidden;
    background:var(--ds-surface);
    border:1px solid var(--ds-border);
    border-radius:16px;
    box-shadow:0 24px 64px rgba(15,23,42,.2);
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transform:translateY(-8px) scale(.98);
    transform-origin:top left;
    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility 0s linear .18s;
}

.module-switcher.open .module-switcher-menu{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:translateY(0) scale(1);
    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility 0s;
}

.module-switcher.is-closing .module-switcher-menu{
    opacity:0;
    transform:translateY(-8px) scale(.98);
}

.app-launcher-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:16px 18px 13px;
    border-bottom:1px solid var(--ds-border);
}

.app-launcher-header strong,
.app-launcher-header span{
    display:block;
}

.app-launcher-header strong{
    color:var(--ds-text);
    font-size:17px;
}

.app-launcher-header span{
    margin-top:2px;
    color:var(--ds-text-muted);
    font-size:13px;
}.app-launcher-close{width:34px;flex:0 0 auto}

.app-launcher-search{
    position:relative;
    display:flex;
    align-items:center;
    margin:12px 18px 6px;
}

.app-launcher-search > i{
    position:absolute;
    inset-inline-start:14px;
    color:var(--ds-text-subtle);
    pointer-events:none;
}

.app-launcher-search-input{
    width:100%;
    height:44px;
    padding-block:0;
    padding-inline:40px 58px;
    border:1px solid var(--ds-border);
    border-radius:12px;
    outline:none;
    background:var(--ds-surface-muted);
    color:var(--ds-text);
    font:inherit;
    transition:border-color .2s, box-shadow .2s, background .2s;
}

.app-launcher-search-input:focus{
    border-color:var(--primary-color);
    background:var(--ds-surface);
    box-shadow:0 0 0 3px rgba(16,185,129,.12);
}

.app-launcher-search kbd{
    position:absolute;
    inset-inline-end:10px;
    padding:3px 7px;
    border:1px solid var(--ds-border);
    border-radius:6px;
    background:var(--ds-surface);
    color:var(--ds-text-subtle);
    font-size:11px;
}

.app-launcher-scroll{
    overflow-y:auto;
    padding:6px 18px 18px;
}

.app-launcher-group{
    margin-top:12px;
}

.app-launcher-group[hidden],
.app-launcher-card[hidden],
.app-launcher-empty[hidden]{
    display:none;
}

.app-launcher-group-title{
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:7px;
    color:var(--ds-text-muted);
    font-size:11px;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.app-launcher-group-title i{
    color:var(--primary-color);
}

.app-launcher-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
}

.app-launcher-card{
    position:relative;
    min-width:0;
    border:1px solid var(--ds-border);
    border-radius:12px;
    background:var(--ds-surface);
    transition:border-color .2s, box-shadow .2s, transform .2s;
}

.app-launcher-card:hover,
.app-launcher-card:focus-within{
    border-color:var(--ds-border-strong);
    box-shadow:0 6px 18px rgba(15,23,42,.07);
    transform:translateY(-1px);
}

.app-launcher-card.is-active{
    border-color:var(--primary-color);
    background:var(--ds-surface-muted);
}

.module-switcher-menu .app-launcher-card-link{
    min-height:72px;
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:11px 38px 11px 11px;
    border-radius:12px;
    color:var(--ds-text);
    text-decoration:none;
}

.module-switcher-menu .app-launcher-card-link:hover{
    background:transparent;
}.app-launcher-card-link:focus-visible,.app-launcher-favorite:focus-visible{
    outline:3px solid rgba(16,185,129,.24);
    outline-offset:2px;
}

.app-launcher-card-icon{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:10px;
    background:var(--ds-neutral-soft);
    color:var(--primary-color);
    font-size:17px;
}

.app-launcher-card-copy{
    min-width:0;
}

.app-launcher-card-copy strong,
.app-launcher-card-copy small{
    display:block;
}

.app-launcher-card-copy strong{
    color:var(--ds-text);
    font-size:14px;
    line-height:1.3;
}

.app-launcher-card-copy small{
    display:-webkit-box;
    margin-top:3px;
    overflow:hidden;
    color:var(--ds-text-muted);
    font-size:12px;
    line-height:1.35;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

.app-launcher-active{
    position:absolute;
    top:8px;
    right:9px;
    color:var(--primary-color);
    font-size:14px;
}

.app-launcher-favorite{
    position:absolute;
    right:6px;
    bottom:6px;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--ds-text-subtle);
    cursor:pointer;
}

.app-launcher-favorite:hover,
.app-launcher-favorite[aria-pressed="true"]{
    background:var(--ds-neutral-soft);
    color:var(--primary-color);
}

.app-launcher-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:42px 20px;
    color:var(--ds-text-subtle);
    text-align:center;
}

.app-launcher-empty i{
    font-size:24px;
}

/* ========================================
   Mobile
======================================== */


/* Command Palette reusable component */
.command-palette-trigger{
    min-height:42px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 10px;
    border:1px solid var(--ds-border);
    border-radius:12px;
    background:var(--ds-surface);
    color:var(--ds-text-muted);
    cursor:pointer;
    font:inherit;
}

.command-palette-trigger:hover{
    background:var(--ds-surface-muted);
    color:var(--ds-text);
}

.command-palette-trigger kbd,
.command-palette-search kbd,
.command-palette-footer kbd{
    border:1px solid var(--ds-border);
    border-radius:6px;
    background:var(--ds-surface-muted);
    color:var(--ds-text-muted);
    font-family:inherit;
    font-size:11px;
    line-height:1;
}

/* Authentication and verification components
   -------------------------------------------------------------------------- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 32px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lg);
}

.auth-card > img {
    display: block;
    max-width: 180px;
    max-height: 72px;
    margin: 0 auto 18px;
    object-fit: contain;
}

.auth-card h1 {
    margin: 0 0 8px;
    font-size: 24px;
}

.auth-card h2 {
    margin: 0 0 24px;
    color: var(--ds-text-muted);
    font-size: 18px;
}

.remember-row {
    margin: 12px 0 16px;
}

.form-group .remember-label {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.remember-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Legacy account filter mapped to the shared filter component */
.account-filter-card {
    padding: var(--ds-space-6);
    margin-bottom: var(--ds-space-6);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm);
}

.account-filter-card label {
    display: block;
    margin-bottom: var(--ds-space-2);
    color: var(--ds-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.account-filter-card select {
    width: 100%;
    min-height: var(--ds-control-height);
    padding: 10px 14px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
}

.account-filter-card select:focus {
    outline: 0;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--primary-soft);
}

.command-palette-trigger kbd{
    padding:4px 6px;
}

.command-palette-overlay{
    position:fixed;
    inset:0;
    z-index:var(--ds-z-modal);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:10vh 20px 20px;
    background:rgba(15,23,42,.32);
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .16s ease, visibility 0s linear .16s;
}

.command-palette-overlay.is-open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transition:opacity .18s ease, visibility 0s;
}

.command-palette-overlay.is-closing{
    opacity:0;
}

.command-palette{
    width:min(640px, 100%);
    max-height:min(680px, 80vh);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--ds-border);
    border-radius:18px;
    background:var(--ds-surface);
    box-shadow:0 28px 80px rgba(15,23,42,.22);
    transform:translateY(-10px) scale(.985);
    transition:transform .18s ease;
}

.command-palette-overlay.is-open .command-palette{
    transform:translateY(0) scale(1);
}

.command-palette-overlay.is-closing .command-palette{
    transform:translateY(-8px) scale(.985);
}

.command-palette-search{
    position:relative;
    display:flex;
    align-items:center;
    min-height:62px;
    border-bottom:1px solid var(--ds-border);
}

.command-palette-search > i{
    position:absolute;
    left:20px;
    color:var(--ds-text-muted);
    font-size:18px;
}

.command-palette-search input{
    width:100%;
    height:62px;
    padding:0 72px 0 52px;
    border:0;
    outline:0;
    background:transparent;
    color:var(--ds-text);
    font:inherit;
    font-size:16px;
}

.command-palette-search > kbd{
    position:absolute;
    right:18px;
    padding:5px 7px;
}

.command-palette-results{
    min-height:160px;
    overflow-y:auto;
    padding:8px;
}

.command-palette-group + .command-palette-group{
    margin-top:6px;
}

.command-palette-group-title{
    padding:9px 10px 6px;
    color:var(--ds-text-subtle);
    font-size:11px;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.command-palette-item{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:54px;
    padding:8px 10px;
    border-radius:11px;
    color:var(--ds-text);
    text-decoration:none;
}

.command-palette-item:hover,
.command-palette-item.is-selected{
    background:var(--ds-neutral-soft);
}

.command-palette-item-icon{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:9px;
    background:var(--ds-surface);
    color:var(--primary-color);
    box-shadow:inset 0 0 0 1px #e5e7eb;
}

.command-palette-item-copy{
    min-width:0;
    flex:1;
}

.command-palette-item-copy strong,
.command-palette-item-copy small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.command-palette-item-copy strong{
    font-size:14px;
}

.command-palette-item-copy small{
    margin-top:2px;
    color:var(--ds-text-muted);
    font-size:12px;
}

.command-palette-item mark{
    border-radius:2px;
    background:rgba(16,185,129,.16);
    color:inherit;
}

.command-palette-item-type{
    flex:0 0 auto;
    color:var(--ds-text-subtle);
    font-size:11px;
}

.command-palette-empty{
    min-height:200px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:24px;
    color:var(--ds-text-subtle);
    text-align:center;
}

.command-palette-empty > i{
    margin-bottom:4px;
    font-size:26px;
}

.command-palette-empty strong{
    color:var(--ds-text);
    font-size:14px;
}

.command-palette-empty span{
    font-size:12px;
}

.command-palette-footer{
    min-height:42px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:0 16px;
    border-top:1px solid var(--ds-border);
    color:var(--ds-text-subtle);
    font-size:11px;
}

.command-palette-footer span{
    display:flex;
    align-items:center;
    gap:4px;
}

.command-palette-footer kbd{
    min-width:21px;
    padding:4px 5px;
    text-align:center;
}

body.command-palette-open{
    overflow:hidden;
}


/* Migrated reusable dashboard widgets */
/* ===============================
   Uploaded ID Status
=============================== */

.id-uploaded-success {
    text-align: center;
    padding: 40px 20px;
}

.admin-notes-content {
    font-size: 15px;
    font-weight: 600;
    color: #78350f;
    white-space: pre-wrap;
    word-break: break-word;
}

.id-upload-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    font-size: 32px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.id-uploaded-success h4 {
    margin-bottom: 10px;
}

.id-uploaded-success p {
    color: var(--ds-text-muted);
    font-size: 14px;
}

/* ===============================
   Announcement Links
=============================== */

.card-body a {
    color: #10b981;
    text-decoration: underline;
    font-weight: 600;
}

.card-body a:hover {
    color: #059669;
}

/* ===============================
   Admin National ID Document
=============================== */

.admin-id-image {
    width: 300px;
    height: 180px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
}

/* ===============================
   Flexible Hours Dashboard
=============================== */

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

.status-draft{
    background:#f3f4f6;
    color:var(--ds-text-muted);
}

/* ===============================
   Notification Links
================================ */

.notification-link{
    display:block;
    text-decoration:none;
    color:inherit;
}

.notification-link:hover{
    color:inherit;
    text-decoration:none;
}

.notification-link .notification-card{
    cursor:pointer;
}

/* ===============================
   Details
================================ */

.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0;
}

.detail-item {
    background: #f9fafb;
    border-radius: 12px;
    padding: 16px;
}

.detail-item span {
    display: block;
    color: var(--ds-text-muted);
    font-size: 13px;
    margin-bottom: 6px;
}

.detail-item strong {
    display: block;
    color:var(--ds-text);
    font-size: 15px;
}

/* ===============================
   Comments
================================ */

.comment-box {
    background: #f9fafb;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

.comment-box p {
    margin-top: 10px;
}

/* =========================
   Ultra Modern Notifications
========================= */

.notifications-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.notification-card{

    position:relative;

    background:var(--ds-surface);

    border-radius:24px;

    padding:22px;

    display:flex;

    gap:18px;

    align-items:flex-start;

    border:1px solid var(--ds-border);

    overflow:hidden;

    transition:.25s ease;

    box-shadow:
        0 8px 30px rgba(15,23,42,.05);
}

.notification-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(
        180deg,
        #34d399,
        #10b981
    );
}

.notification-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 20px 50px rgba(15,23,42,.10);
}

.notification-icon{

    width:60px;
    height:60px;

    min-width:60px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #dbeafe
        );

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:24px;

    transition:.25s ease;
}

.notification-card:hover .notification-icon{

    transform:scale(1.08);
}

.notification-content{
    flex:1;
}

.notification-top{

    display:flex;

    justify-content:space-between;

    gap:20px;

    align-items:flex-start;

    margin-bottom:10px;
}

.notification-top h3{

    margin:0;

    font-size:18px;

    font-weight:700;

    color:var(--ds-text);
}

.notification-content p{

    margin:0;

    color:var(--ds-text-muted);

    line-height:1.8;

    font-size:15px;
}

.notification-date{

    font-size:12px;

    font-weight:700;

    color:var(--ds-text-subtle);

    white-space:nowrap;

    text-transform:uppercase;

    letter-spacing:.4px;
}

.empty-notifications{

    background:var(--ds-surface);

    border-radius:24px;

    padding:80px 20px;

    text-align:center;

    box-shadow:
        0 8px 30px rgba(15,23,42,.05);
}

.empty-icon{

    font-size:64px;

    margin-bottom:15px;
}

.empty-notifications h3{

    margin-bottom:10px;
}

.empty-notifications p{

    color:var(--ds-text-muted);
}

/* ===============================
   Toast Notifications
=============================== */

.toast-message {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 280px;
    max-width: 420px;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    z-index: var(--ds-z-toast);

    box-shadow: var(--ds-shadow-lg);

    animation: toastSlideIn 0.3s ease;
}

/* Success */

.toast-success {
    background: #16a34a;
    color: #ffffff;
}

/* Error */

.toast-error {
    background: #dc2626;
    color: #ffffff;
}

/* Warning */

.toast-warning {
    background: #f59e0b;
    color: #ffffff;
}

/* Info */

.toast-info {
    background: #2563eb;
    color: #ffffff;
}

/* Animation */

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===============================
   Mobile
================================ */





/* ===============================
   Modern Employee Dashboard
================================ */

.dashboard-hero {
    margin-bottom: 30px;
    padding: 40px;
    border-radius: 24px;

    background: linear-gradient(
        135deg,
        #022c22,
        #059669,
        #10b981
    );

    color: #ffffff;
    overflow: hidden;
}

.hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.hero-left h2 {
    margin: 0 0 12px;
    font-size: 35px;
    font-weight: 600;
}

.hero-left p {
    margin: 0;
    opacity: .9;
    font-size: 16px;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.hero-badge {
    padding: 10px 16px;
    border-radius: 999px;

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

    backdrop-filter: blur(10px);

    font-size: 13px;
    font-weight: 600;
}

.section-heading,
.table-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.section-heading h3,
.table-card-header h3 {
    margin: 3px 0 0;
}

.section-eyebrow {
    display: block;
    color: var(--ds-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.empty-table-state {
    padding: 30px;
    color: var(--ds-text-muted);
    text-align: center;
}

.stat-open {
    border-top: 4px solid #3b82f6;
}

.stat-completed {
    border-top: 4px solid #10b981;
}

.stat-points {
    border-top: 4px solid #10b981;
}

.stat-attendance {
    border-top: 4px solid #8b5cf6;
}

.stat-notifications {
    border-top: 4px solid #ef4444;
}

.stat-payroll {
    border-top: 4px solid #14b8a6;
}

/* ===============================
   Bottom Layout
================================ */

.dashboard-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 25px;
}

/* Performance employee warnings */
.warning-issue-card .form-grid{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(360px,1.2fr);gap:20px}
.warning-issue-card .form-group{display:flex;flex-direction:column;gap:8px}
.warning-issue-card textarea{min-height:118px;resize:vertical}
.warning-reason-cell{min-width:260px;max-width:480px;white-space:normal;line-height:1.5}
.warning-revoke-form{display:flex;align-items:center;gap:8px;white-space:nowrap}
.warning-revoke-form input[type="text"]{min-width:180px}
@media (max-width:768px){.warning-issue-card .form-grid{grid-template-columns:1fr}.warning-revoke-form{min-width:210px;flex-direction:column;align-items:stretch}.warning-revoke-form input[type="text"]{min-width:0}}

/* Theme Color Picker
   -------------------------------------------------------------------------- */
.theme-color-control{
    display:grid;
    grid-template-columns:52px minmax(150px,220px) minmax(80px,1fr);
    align-items:center;
    gap:var(--ds-space-3);
}

.form-group .theme-color-picker{
    width:52px;
    min-width:52px;
    height:44px;
    padding:4px;
    border:1px solid var(--ds-border);
    border-radius:var(--ds-radius-sm);
    background:var(--ds-surface);
    cursor:pointer;
}

.theme-color-picker::-webkit-color-swatch-wrapper{padding:0}
.theme-color-picker::-webkit-color-swatch{border:0;border-radius:5px}
.theme-color-picker::-moz-color-swatch{border:0;border-radius:5px}

.form-group .theme-color-control .theme-color-hex{
    width:100%;
    min-width:0;
    font-family:Consolas,Monaco,monospace;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.theme-color-hex[aria-invalid="true"]{
    border-color:var(--ds-danger);
    box-shadow:0 0 0 3px rgba(220,38,38,.12);
}

.theme-color-preview{
    min-width:80px;
    height:44px;
    border:1px solid rgba(15,23,42,.12);
    border-radius:var(--ds-radius-sm);
    background:var(--theme-color-preview);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

@media (max-width:640px){
    .theme-color-control{grid-template-columns:52px minmax(0,1fr)}
    .theme-color-preview{grid-column:1 / -1;width:100%}
}
/* Organization Settings Workspace
   -------------------------------------------------------------------------- */
.organization-settings-workspace{
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
    gap:var(--ds-space-5);
    align-items:start;
}

.settings-section-nav{
    position:sticky;
    top:84px;
    overflow:hidden;
    border:1px solid var(--ds-border);
    border-radius:var(--ds-radius-md);
    background:var(--ds-surface);
    box-shadow:var(--ds-shadow-sm);
}

.settings-section-nav-header{display:flex;flex-direction:column;gap:2px;padding:20px;border-bottom:1px solid var(--ds-border)}
.settings-section-nav-header strong{font-size:18px;color:var(--ds-text)}
.settings-section-nav-header span{font-size:12px;color:var(--ds-text-muted)}
.settings-search{position:relative;display:block;padding:14px 14px 8px}
.settings-search i{position:absolute;inset-inline-start:27px;top:50%;color:var(--ds-text-muted);transform:translateY(-25%)}
.settings-search input{width:100%;height:40px;padding:8px 12px 8px 36px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-sm);background:var(--ds-surface-muted)}
.settings-section-nav-list{display:flex;flex-direction:column;padding:8px}
.settings-section-link{display:flex;align-items:center;gap:11px;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:var(--ds-radius-sm);color:#334155;background:transparent;font:inherit;font-weight:600;text-align:start;text-decoration:none;cursor:pointer;transition:var(--ds-transition)}
.settings-section-nav-divider{display:flex;align-items:center;gap:8px;padding:11px 20px 3px;color:var(--ds-text-subtle);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.settings-section-nav-divider::after{content:"";height:1px;flex:1;background:var(--ds-border)}
.settings-system-tools{padding-top:4px}
.system-settings-tool-workspace .settings-section-nav{position:sticky;top:82px;align-self:start}
.settings-section-link i{width:20px;color:var(--ds-text-muted);font-size:16px;text-align:center}
.settings-section-link:hover{background:var(--ds-surface-muted)}
.settings-section-link.is-active{color:#fff;background:var(--primary-color);box-shadow:0 5px 14px var(--primary-soft)}
.settings-section-link.is-active i{color:#fff}
.settings-section-link[hidden]{display:none}

/* System settings navigation follows the primary application sidebar. */
.settings-section-nav{
    color:#fff;
    background:var(--sidebar-modern-shell,linear-gradient(180deg,var(--primary-dark) 0%,var(--primary-color) 45%,var(--primary-hover) 100%));
    border-color:rgba(255,255,255,.12);
}
.settings-section-nav-header{padding:17px 18px;border-bottom-color:rgba(255,255,255,.18)}
.settings-section-nav-header strong{color:#fff;font-size:16px}
.settings-section-nav-header span{color:rgba(255,255,255,.72);font-size:11px}
.settings-search input{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.settings-search input::placeholder{color:rgba(255,255,255,.62)}
.settings-search i{color:rgba(255,255,255,.72)}
.settings-section-nav-list{font-size:13px}
.settings-section-link{min-height:40px;color:rgba(255,255,255,.84);font-weight:600}
.settings-section-link i{color:rgba(255,255,255,.72);font-size:14px}
.settings-section-link:hover{color:#fff;background:rgba(255,255,255,.10)}
.settings-section-link.is-active{color:#fff;background:rgba(255,255,255,.18);box-shadow:inset 3px 0 0 rgba(255,255,255,.92)}
.settings-section-nav-divider{color:rgba(255,255,255,.7);font-size:9px}
.settings-section-nav-divider::after{background:rgba(255,255,255,.22)}
html[data-theme="dark"] .settings-section-nav .settings-section-link{color:rgba(255,255,255,.84)}
html[data-theme="dark"] .settings-section-nav .settings-section-link i{color:rgba(255,255,255,.72)}
html[data-theme="dark"] .settings-section-nav .settings-section-link:hover,
html[data-theme="dark"] .settings-section-nav .settings-section-link.is-active{color:#fff}

.settings-section-main{min-width:0}
.settings-workspace-toolbar{position:sticky;top:70px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:var(--ds-space-5);padding:14px 18px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-md);background:color-mix(in srgb,var(--ds-surface) 96%,transparent);box-shadow:var(--ds-shadow-sm);backdrop-filter:blur(10px)}
.settings-workspace-toolbar--save-only{justify-content:flex-end;padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none}
.settings-workspace-toolbar h2{margin:0 0 2px;color:var(--ds-text);font-size:19px}
.settings-workspace-toolbar p{margin:0;color:var(--ds-text-muted);font-size:13px}
.organization-settings-workspace.is-ready .settings-panel:not(.is-active){display:none}
.settings-panel{min-height:480px;margin:0}
.settings-panel-heading{margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--ds-border)}
.settings-panel-heading h2{margin:0 0 5px;padding:0;border:0}
.settings-panel-heading p{margin:0;color:var(--ds-text-muted)}
.settings-subsection{margin-top:10px;padding:22px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-md);background:var(--ds-surface-muted)}
.settings-subsection-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.settings-subsection-heading h3{margin:0 0 4px;font-size:17px}
.settings-subsection-heading p{margin:0;color:var(--ds-text-muted);font-size:13px}
.settings-color-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.settings-color-grid .theme-color-control{grid-template-columns:44px minmax(100px,1fr)}
.settings-color-grid .theme-color-picker{width:44px;min-width:44px}
.settings-color-grid .theme-color-preview{grid-column:1 / -1;width:100%;height:24px}
.button-theme-toggle{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;color:var(--ds-text);font-size:13px;font-weight:700;cursor:pointer}
.button-theme-toggle input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color:var(--primary-color)}
.button-color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.button-color-card{display:grid;min-width:0;grid-template-columns:minmax(0,1fr) minmax(210px,.8fr);align-items:center;gap:13px;padding:16px;border:0;border-radius:var(--ds-radius-md);background:var(--ds-surface);box-shadow:var(--ds-shadow-sm)}
.button-color-card-copy{display:grid;gap:4px}.button-color-card-copy strong{color:var(--ds-text);font-size:14px}.button-color-card-copy small{color:var(--ds-text-muted);font-size:12px;line-height:1.45}
.button-color-card .theme-color-control{min-width:0;grid-template-columns:44px minmax(0,1fr);gap:8px}
.button-color-card .theme-color-picker{width:44px;min-width:44px;height:38px;padding:4px;border:1px solid var(--ds-border);border-radius:9px;background:var(--ds-surface);cursor:pointer}
.button-color-card .theme-color-hex{width:100%;min-width:0;height:38px;padding:0 11px;border:1px solid var(--ds-border);border-radius:9px;background:var(--ds-control-surface,var(--ds-surface));color:var(--ds-text);font-family:Consolas,Monaco,monospace;font-size:13px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;box-shadow:inset 0 1px 2px rgba(15,23,42,.03);transition:border-color .16s ease,box-shadow .16s ease}
.button-color-card .theme-color-hex:hover{border-color:var(--ds-border-strong,var(--ds-border))}
.button-color-card .theme-color-hex:focus{outline:0;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-soft)}
.button-color-card .theme-color-preview{display:none}
.button-color-preview-row{display:flex;grid-column:1/-1;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--ds-border-subtle)}
.button-contrast-status{font-size:11px;font-weight:750}.button-contrast-status.is-pass{color:var(--ds-success-text,#047857)}.button-contrast-status.is-warning{color:var(--ds-danger-text,#b91c1c)}
.button-color-card.is-theme-linked .theme-color-control{display:none}.button-color-card.is-theme-linked::after{grid-column:1/-1;color:var(--ds-text-muted);font-size:11px;content:"Primary preview follows Theme Color while this option is enabled."}
.button-color-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px;margin-top:18px}

@media (max-width:1100px){
    .organization-settings-workspace{grid-template-columns:200px minmax(0,1fr)}
    .settings-color-grid{grid-template-columns:1fr}
    .settings-color-grid .theme-color-control{grid-template-columns:52px minmax(130px,220px) minmax(80px,1fr)}
    .settings-color-grid .theme-color-picker{width:52px;min-width:52px}
    .settings-color-grid .theme-color-preview{grid-column:auto;height:44px}
    .button-color-grid{grid-template-columns:1fr}
}

@media (max-width:768px){
    .organization-settings-workspace{grid-template-columns:1fr}
    .settings-section-nav{position:static}
    .settings-section-nav-header{padding:15px}
    .settings-section-nav-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
    .settings-workspace-toolbar{top:62px}
    .settings-workspace-toolbar p{display:none}
    .settings-panel{min-height:0}
    .settings-panel{scroll-margin-top:92px}
    .settings-page-header-with-save{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px 12px}
    .settings-page-header-with-save h1{grid-column:1;grid-row:1}.settings-page-header-with-save .settings-floating-save{grid-column:2;grid-row:1;width:auto!important;align-self:start}.settings-page-header-with-save .settings-floating-save.is-sticky{position:fixed;top:10px;right:20px;z-index:40;width:auto!important}
    .settings-page-header-with-save .app-breadcrumb{grid-column:1 / -1;grid-row:2;margin-top:0}
}

@media (max-width:520px){
    .settings-section-nav-list{grid-template-columns:1fr}
    .settings-workspace-toolbar{align-items:stretch;flex-direction:column}.settings-workspace-toolbar .btn{width:100%}
    .settings-subsection-heading{align-items:flex-start;flex-direction:column}
    .settings-color-grid .theme-color-control{grid-template-columns:52px minmax(0,1fr)}
    .settings-color-grid .theme-color-preview{grid-column:1 / -1;width:100%}.settings-page-header-with-save .settings-floating-save{width:auto!important}
    .button-color-card{grid-template-columns:1fr}.button-color-preview-row{align-items:flex-start;flex-direction:column}.button-color-actions{align-items:stretch;flex-direction:column}.button-color-actions .btn{width:100%}
}

.task-description-content table{
    width:100%;
    min-width:640px;
    margin:12px 0;
    border-collapse:collapse;
    background:var(--ds-surface);
}

.task-description-content{
    overflow-x:auto;
}

.task-description-content th,
.task-description-content td{
    padding:10px 12px;
    border:1px solid var(--ds-border);
    text-align:start;
    vertical-align:top;
}

.task-description-content th{
    background:var(--ds-neutral-soft);
    color:var(--ds-text);
    font-weight:700;
}

.task-description-content tbody tr:nth-child(even){
    background:var(--ds-surface-muted);
}

/* Shared borderless elevation treatment */
.description-block,
.communications-header-card,
.dashboard-card,
.content-card,
.form-card,
.table-card,
.communications-card,
.stat-card,
.statistics-card,
.communications-stat-card,
.board-stat-card,
.ui-toolbar,
.table-toolbar,
.filter-bar,
.search-bar,
.tasks-toolbar,
.board-filters{
    border:0;
    box-shadow:var(--ds-shadow-md);
}

/* Preserve meaningful finance summary accents after removing card borders. */
.transactions-summary .stat-card:nth-child(1){border-top:3px solid #16a34a}
.transactions-summary .stat-card:nth-child(2){border-top:3px solid #dc2626}
.transactions-summary .stat-card:nth-child(3){border-top:3px solid #eab308}
/* Profile images inside messaging avatars */
.messages-avatar img,
.conversation-avatar img,
.chat-user-avatar img,
.conversation-popout-avatar img{
    display:block;
    width:100%;
    height:100%;
    border-radius:inherit;
    object-fit:cover;
}
.admin-profile-avatar-panel{display:flex;align-items:center;gap:18px;margin-bottom:24px;padding:18px;background:linear-gradient(135deg,#f8fafc,#eefbf5);border-radius:16px;box-shadow:0 5px 18px rgba(15,23,42,.055)}
.admin-profile-avatar-preview{display:grid;width:82px;height:82px;flex:0 0 82px;margin:0;place-items:center;overflow:hidden;border-radius:50%;background:var(--primary-color);color:#fff;font-size:28px;font-weight:800;box-shadow:0 0 0 5px rgba(5,150,105,.1)}
.admin-profile-avatar-preview img{width:100%;height:100%;object-fit:cover}
.admin-profile-avatar-copy{min-width:0}
.admin-profile-avatar-copy h3{margin:0 0 5px;font-size:17px}
.admin-profile-avatar-copy p{margin:0;color:var(--ds-text-muted);font-size:13px}
.admin-profile-avatar-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.admin-profile-avatar-actions>span{color:var(--ds-text-muted);font-size:11px}
.admin-profile-avatar-input{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
@media(max-width:640px){.admin-profile-avatar-panel{align-items:flex-start;flex-direction:column}.admin-profile-avatar-preview{width:72px;height:72px;flex-basis:72px}}
.admin-media-open{overflow:hidden}
.admin-media-modal{position:fixed;z-index:var(--ds-z-modal);inset:0;display:grid;place-items:center;padding:20px}
.admin-media-modal[hidden]{display:none}
.admin-media-modal-backdrop{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(15,23,42,.54);backdrop-filter:blur(3px);cursor:default}
.admin-media-dialog{position:relative;display:grid;width:min(860px,100%);max-height:min(720px,calc(100vh - 40px));grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;background:var(--ds-surface);border-radius:20px;box-shadow:0 24px 70px rgba(15,23,42,.28)}
.admin-media-dialog>header,.admin-media-dialog>footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px}
.admin-media-dialog>header{border-bottom:1px solid var(--ds-border)}
.admin-media-dialog>header h2{margin:0;font-size:20px}
.admin-media-dialog>header p{margin:4px 0 0;color:var(--ds-text-muted);font-size:12px}.admin-media-close{width:38px;flex:0 0 38px;place-items:center}
.admin-media-library{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;align-content:start;overflow:auto;padding:20px;background:var(--ds-surface-muted)}
.admin-media-item{display:grid;min-width:0;gap:8px;padding:8px;border:2px solid transparent;border-radius:13px;background:var(--ds-surface);box-shadow:0 3px 12px rgba(15,23,42,.06);cursor:pointer;text-align:left;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.admin-media-item:hover,.admin-media-item:focus-visible{border-color:var(--primary-color);box-shadow:0 8px 20px rgba(15,23,42,.12);transform:translateY(-2px);outline:0}
.admin-media-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;background:#eef2f7}
.admin-media-item span{display:block;overflow:hidden;color:var(--ds-text-muted);font-size:11px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.admin-media-empty{grid-column:1/-1;display:grid;min-height:240px;place-items:center;align-content:center;gap:7px;color:var(--ds-text-muted);text-align:center}
.admin-media-empty i{font-size:34px}
.admin-media-empty strong{color:var(--ds-text)}
.admin-media-dialog>footer{border-top:1px solid var(--ds-border)}
.admin-media-dialog>footer>span{color:var(--ds-text-muted);font-size:12px}
@media(max-width:640px){.admin-media-modal{padding:10px}.admin-media-dialog{max-height:calc(100vh - 20px);border-radius:16px}.admin-media-library{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px}.admin-media-dialog>header,.admin-media-dialog>footer{padding:14px}.admin-media-dialog>footer{align-items:stretch;flex-direction:column}.admin-media-dialog>footer .btn{width:100%}}

/* Independent episode-management permission for shared projects. */
.project-folder-access-grant{grid-template-columns:minmax(220px,1fr) minmax(150px,.45fr) repeat(2,minmax(160px,.42fr)) auto}
.project-folder-access-row{grid-template-columns:minmax(0,1fr) 170px minmax(160px,.55fr) auto}
.project-folder-access-episode-permission{display:flex!important;align-items:center;gap:8px;min-height:42px;padding:0 2px;font-size:12px!important;font-weight:700!important;color:var(--ds-text)!important}
.project-folder-access-episode-permission input{width:16px;height:16px;margin:0;accent-color:var(--primary-color)}

/* Shared full-page notification details. */
.notification-bell{
    display:block;
    font-size:28px;
    line-height:1;
    filter:drop-shadow(0 2px 2px rgba(15,23,42,.15));
}

.notification-details-row{
    display:flex;
    margin-top:14px;
    align-items:stretch;
    flex-wrap:wrap;
    gap:10px;
}

.notification-task-context{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.notification-task-context > span{
    display:grid;
    min-width:180px;
    padding:10px 12px;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    column-gap:9px;
    color:var(--ds-text);
    background:var(--ds-surface-muted);
    border:1px solid var(--ds-border);
    border-radius:10px;
}

.notification-task-context i{
    grid-row:1 / 3;
    align-self:center;
    color:var(--primary-color);
}

.notification-task-context small{
    color:var(--ds-text-muted);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
}

.notification-task-context strong{
    overflow:hidden;
    font-size:13px;
    text-overflow:ellipsis;
    white-space:nowrap;
}.notification-view-btn{width:max-content;margin-top:0;align-self:stretch;text-decoration:none}

@media (max-width:767px){
    .notification-task-context{
        width:100%;
    }

    .notification-task-context > span{
        flex:1 1 145px;
        min-width:0;
    }
}
.admin-notification-actions{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:14px}
.notifications-page-actions{justify-content:flex-end;margin-bottom:18px}
@media(max-width:640px){.notifications-page-actions .btn,.admin-notification-actions .btn{width:100%}}

/* Specialized header navigation controls retain their pre-Button-System surfaces. */
.user-dropdown-btn{border:1px solid var(--ds-border);background:var(--ds-surface);border-radius:14px;padding:8px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;font-weight:600}
.user-dropdown-btn .user-name{font-size:13px;line-height:1.25}
.messages-btn{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--ds-border);border-radius:12px;background:var(--ds-surface);color:var(--ds-text);font-size:18px;cursor:pointer;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease}
.messages-btn:hover{border-color:var(--ds-border-strong);background:var(--ds-surface-muted)}
.messages-btn:focus-visible{outline:3px solid rgba(16,185,129,.24);outline-offset:2px}
.notification-btn{position:relative;width:44px;height:44px;border:1px solid var(--ds-border);background:var(--ds-surface);border-radius:12px;cursor:pointer;font-size:18px}
.module-switcher-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:112px;min-height:44px;padding:6px 10px;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:12px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease,transform .18s ease}
.module-switcher-btn:hover{border-color:var(--ds-border-strong);background:var(--ds-surface-muted);box-shadow:0 4px 14px rgba(15,23,42,.06)}
.module-switcher-btn:active{transform:scale(.99)}
.module-switcher-btn:focus-visible,.app-launcher-close:focus-visible{outline:3px solid rgba(16,185,129,.24);outline-offset:2px}
.app-launcher-close{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;border:0;border-radius:10px;background:var(--ds-surface-muted);color:var(--ds-text-muted);cursor:pointer}
.category-analysis-toggle{display:inline-flex;align-items:center;gap:8px;padding:5px 7px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.category-analysis-toggle:hover{background:var(--ds-surface-hover)}
.category-analysis-toggle i{font-size:12px;transition:transform .18s ease}
.category-analysis-toggle[aria-expanded="true"] i{transform:rotate(90deg)}
.category-analysis-toggle small{display:inline-grid;min-width:20px;height:20px;place-items:center;padding:0 5px;border-radius:999px;background:var(--ds-info-soft);color:var(--ds-info-text);font-size:10px}
.settings-section-link{display:flex;align-items:center;gap:11px;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:var(--ds-radius-sm);color:#334155;background:transparent;font:inherit;font-weight:600;text-align:start;text-decoration:none;cursor:pointer;transition:var(--ds-transition)}
.settings-section-link:hover{background:var(--ds-surface-muted)}
.settings-section-link.is-active{color:#fff;background:var(--primary-color);box-shadow:0 5px 14px var(--primary-soft)}
.mobile-menu-btn{display:none}

/* Keep the settings navigation aligned with the primary sidebar after legacy link rules. */
.settings-section-nav{
    color:#fff;
    background:var(--sidebar-modern-shell,linear-gradient(180deg,var(--primary-dark) 0%,var(--primary-color) 45%,var(--primary-hover) 100%));
    border-color:rgba(255,255,255,.12);
}
.settings-section-nav-header{padding:17px 18px;border-bottom-color:rgba(255,255,255,.18)}
.settings-section-nav-header strong{color:#fff;font-size:16px}
.settings-section-nav-header span{color:rgba(255,255,255,.72);font-size:11px}
.settings-search input{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.settings-search input::placeholder{color:rgba(255,255,255,.62)}
.settings-search i{color:rgba(255,255,255,.72)}
.settings-section-nav-list{font-size:13px}
.settings-section-link{min-height:40px;color:rgba(255,255,255,.84);font-weight:600}
.settings-section-link i{color:rgba(255,255,255,.72);font-size:14px}
.settings-section-link:hover{color:#fff;background:rgba(255,255,255,.10)}
.settings-section-link.is-active{color:#fff;background:rgba(255,255,255,.18);box-shadow:inset 3px 0 0 rgba(255,255,255,.92)}
.settings-section-nav-divider{color:rgba(255,255,255,.7);font-size:9px}
.settings-section-nav-divider::after{background:rgba(255,255,255,.22)}