.dashboard-body {
    background:
        linear-gradient(135deg, rgba(223, 35, 57, 0.035), transparent 28%),
        linear-gradient(315deg, rgba(14, 159, 154, 0.075), transparent 30%),
        #f4f8fb;
}

.dashboard-body main.flex-grow-1 {
    width: 100%;
    max-width: none;
}

.dashboard-body .bi {
    display: none !important;
}

.dashboard-wrapper {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    width: 100vw;
    min-height: calc(100vh - 56px);
    margin-top: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-top: 0;
    position: relative;
    background: transparent;
}

.sidebar {
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(180deg, rgba(7, 31, 54, 0.98), rgba(5, 24, 42, 0.98)),
        #061b2d;
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 18px 0 38px rgba(7, 31, 54, 0.16);
}

.sidebar-mobile-head {
    display: none;
}

.sidebar-header {
    padding: 22px 16px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    margin-bottom: 20px;
}

.sidebar-brand-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #df2339, #1769aa);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.sidebar-brand-text strong {
    display: block;
    font-size: 1rem;
    letter-spacing: 0.08em;
}

.sidebar-brand-text small {
    color: rgba(255, 255, 255, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
}

.sidebar-user-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-weight: 700;
}

.sidebar-user-name {
    font-weight: 600;
}

.sidebar-user-role {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.86rem;
}

.sidebar-nav-wrap {
    padding: 20px 14px;
    display: grid;
    gap: 7px;
}

.sidebar-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 0.82rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sidebar-menu-item i {
    width: 12px;
    font-size: 0.7rem;
}

.sidebar-menu-item:hover {
    background: rgba(23, 105, 170, 0.28);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.08);
}

.sidebar-menu-item.active {
    background: #ffffff;
    color: #0b2d4a;
    border-color: #ffffff;
    box-shadow: 0 14px 24px rgba(5, 14, 22, 0.20);
}

.sidebar-footer-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
}

.sidebar-footer-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.sidebar-footer-text {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.7);
}

.sidebar-logout {
    justify-content: center;
    background: rgba(201, 79, 79, 0.18);
    color: #fff;
}

.dashboard-content {
    padding: 28px 30px;
    min-width: 0;
    width: 100%;
    max-width: none;
}

.dashboard-content > .dashboard-header,
.dashboard-content > .db-page {
    max-width: 1220px;
}

.dashboard-header {
    background: #ffffff;
    border: 1px solid #d9e4ea;
    border-radius: 10px;
    padding: 20px 22px;
    box-shadow: 0 16px 34px rgba(16, 33, 47, 0.07);
}

.header-actions-group {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.header-main-title {
    font-size: 1.35rem;
    color: #0b2d4a;
}

.breadcrumb {
    font-size: 0.88rem;
}

.card-ui {
    background: #ffffff;
    border: 1px solid #d9e4ea;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(16, 33, 47, 0.07);
    padding: 20px;
}

.card-ui,
.portal-hero,
.portal-panel,
.users-modern-list,
.users-modern-toolbar {
    min-width: 0;
}

.dashboard-home {
    display: grid;
    gap: 18px;
}

.portal-hero {
    display: grid;
    grid-template-columns: 1.6fr 0.95fr;
    gap: 20px;
    background: #ffffff;
    color: #1C352D;
    align-items: stretch;
}

.portal-kicker {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #edf4fb;
    color: #245478;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.portal-hero h3 {
    margin: 16px 0 10px;
    font-size: 1.7rem;
}

.portal-hero p {
    margin: 0;
    color: #566774;
    line-height: 1.65;
}

.portal-hero-meta {
    display: grid;
    gap: 12px;
}

.portal-hero-meta-item {
    padding: 14px 16px;
    border-radius: 8px;
    background: #f7fafc;
    border: 1px solid #d7e0e8;
}

.portal-hero-meta-item span {
    display: block;
    font-size: 0.8rem;
    color: #6d7b87;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

.metric-label {
    display: block;
    color: #68757e;
    font-size: 0.84rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-value {
    display: block;
    font-size: 1.7rem;
    line-height: 1;
    color: #1c252a;
    margin-bottom: 8px;
}

.home-main-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr;
    gap: 16px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.panel-head h5 {
    margin: 0;
    font-size: 1rem;
}

.panel-badge {
    padding: 6px 10px;
    border-radius: 999px;
    background: #edf4fb;
    color: #245478;
    font-size: 0.76rem;
    font-weight: 700;
}

.progress-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: #e8eef4;
    overflow: hidden;
    margin-bottom: 18px;
}

.progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1d73b2, #2b90d9);
}

.checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #344149;
}

.checklist .done {
    color: #2f9f42;
}

.checklist .pending {
    color: #a4adb4;
}

.quick-actions {
    display: grid;
    gap: 12px;
}

.quick-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #f7f9fc;
    border: 1px solid #d9e3ed;
    color: #223039;
    text-decoration: none;
    font-weight: 600;
}

.quick-action:hover {
    color: #16354f;
    border-color: #b9cbdd;
    background: #ffffff;
}

.activity-panel .activity-list {
    display: grid;
    gap: 12px;
}

.activity-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 12px 0;
    border-top: 1px solid #e7edf3;
}

.activity-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.activity-item i {
    color: #1d73b2;
}

.activity-item p {
    margin: 4px 0 0;
    color: #617079;
}

.activity-item span {
    color: #7a878f;
    font-size: 0.82rem;
}

.sidebar-overlay {
    display: none;
}

.portal-action-btn {
    background: #1d73b2;
    border-color: #1d73b2;
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
}

.portal-action-btn:hover,
.portal-action-btn:focus {
    background: #155b90;
    border-color: #155b90;
    color: #fff;
}

.dashboard-body .hrms-navbar {
    min-height: 64px;
    background: #24394a;
    box-shadow: 0 10px 26px rgba(7, 31, 54, 0.18);
}

.dashboard-body .hrms-brand {
    align-items: center;
    gap: 0;
    min-width: 0;
}

.dashboard-body .hrms-brand::before {
    content: '';
    width: 9px;
    height: 26px;
    margin-right: 10px;
    border-radius: 2px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(7, 31, 54, 0.24);
}

.dashboard-body .hrms-brand-text {
    color: #50ffe3;
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.dashboard-body .hrms-user-nav {
    align-items: center;
    flex-direction: row;
    gap: 14px;
    margin-left: auto;
}

.dashboard-body .hrms-user-nav .nav-link {
    color: #50ffe3;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dashboard-body .dropdown-toggle::after {
    display: none;
}

.dashboard-body .hrms-user-avatar {
    display: none;
}

.dashboard-body .mobile-sidebar-toggle {
    display: none;
    width: auto;
    min-width: 42px;
    height: 38px;
    margin-right: 8px;
    padding: 0 12px;
    border: 1px solid rgba(80, 255, 227, 0.28);
    border-radius: 8px;
    background: rgba(80, 255, 227, 0.10);
    color: #50ffe3;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-body .mobile-sidebar-toggle::before {
    content: 'Menu';
}

.users-modern-page {
    display: grid;
    gap: 18px;
}

.users-modern-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto;
    gap: 18px;
    align-items: start;
}

.users-modern-kicker {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: #edf4fb;
    color: #245478;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.users-modern-hero-main h3 {
    margin: 0.85rem 0 0.45rem;
    font-size: 1.6rem;
    color: #1C352D;
}

.users-modern-hero-main p {
    margin: 0;
    max-width: 62ch;
    color: #61717e;
    line-height: 1.65;
}

.users-modern-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.users-modern-actions .btn-group {
    max-width: 100%;
}

.users-modern-actions .btn,
.users-modern-actions .dropdown-toggle {
    border-radius: 8px;
    font-weight: 600;
}

.users-modern-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.users-stat-card {
    padding: 1rem 1.05rem;
    border: 1px solid #d8e2ec;
    border-radius: 10px;
    background: #f8fbfd;
}

.users-stat-card span {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #667787;
}

.users-stat-card strong {
    font-size: 1.6rem;
    line-height: 1;
    color: #16354f;
}

.users-modern-toolbar {
    padding: 16px 18px;
}

.users-filter-form {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(180px, 0.7fr)) auto auto;
    gap: 12px;
    align-items: center;
}

.users-filter-input-wrap {
    position: relative;
}

.users-filter-input-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6a7a87;
    pointer-events: none;
}

.users-filter-input-wrap .form-control {
    padding-left: 40px;
}

.users-modern-list {
    overflow: hidden;
}

.users-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.users-list-head h5 {
    margin: 0;
    font-size: 1rem;
}

.users-list-head span {
    color: #6a7a87;
    font-size: 0.9rem;
}

.users-status-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.users-status-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 0.85rem;
    border: 1px solid #d7e0e8;
    border-radius: 999px;
    background: #f8fbfd;
    color: #27465f;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.users-status-tab:hover {
    color: #16354f;
    border-color: #bfd2e2;
}

.users-status-tab.active {
    background: #1d73b2;
    color: #fff;
    border-color: #1d73b2;
}

.users-status-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: #14324b;
    font-size: 0.78rem;
    font-weight: 700;
}

.users-status-tab.active .users-status-tab-count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.users-table-wrap {
    border: 1px solid #e0e8ef;
    border-radius: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.users-modern-table thead th {
    background: #f7fafc;
}

.users-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.users-name-cell strong,
.users-name-cell small {
    display: block;
}

.users-name-cell small {
    color: #6a7a87;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.users-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #16354f, #1d73b2);
    color: #fff;
    font-weight: 700;
}

.users-role-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.users-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: #edf4fb;
    color: #245478;
    font-size: 0.77rem;
    font-weight: 600;
}

.users-status {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.users-status-active {
    background: #ebf8f0;
    color: #1f8b4c;
}

.users-status-inactive {
    background: #fff8eb;
    color: #9a6a19;
}

.users-status-separated {
    background: #fff5f5;
    color: #c14848;
}

.users-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.users-row-actions .btn,
.users-mobile-actions .btn {
    border-radius: 8px;
    min-width: 38px;
}

.users-mobile-list {
    display: none;
    gap: 12px;
}

.users-mobile-card {
    border: 1px solid #e0e8ef;
    border-radius: 10px;
    padding: 14px;
    background: #fff;
    display: grid;
    gap: 12px;
}

.users-mobile-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.users-mobile-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.users-mobile-meta span {
    display: block;
    margin-bottom: 4px;
    font-size: 0.72rem;
    color: #6a7a87;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.users-mobile-meta strong {
    color: #1C352D;
    overflow-wrap: anywhere;
}

.users-mobile-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.users-pagination-wrap {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1100px) {
    .home-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-main-grid,
    .portal-hero {
        grid-template-columns: 1fr;
    }

    .users-filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .users-filter-input-wrap {
        grid-column: 1 / -1;
    }

    .users-modern-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .header-actions-group {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .dashboard-body.sidebar-open {
        overflow: hidden;
    }

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

    .dashboard-body .mobile-sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        width: min(264px, calc(100vw - 24px));
        z-index: 1200;
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform 0.25s ease, visibility 0.25s ease, box-shadow 0.25s ease;
        box-shadow: none;
        overflow-y: auto;
        top: 0;
        height: 100vh;
    }

    .sidebar.is-open {
        visibility: visible;
        transform: translateX(0);
        box-shadow: 0 24px 48px rgba(7, 12, 16, 0.34);
    }

    .sidebar-mobile-head {
        display: flex;
        justify-content: flex-end;
        padding: 14px 14px 0;
    }

    .sidebar-close-btn {
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 1.1rem;
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(16, 20, 24, 0.42);
        z-index: 1100;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .sidebar-overlay.is-open {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    .dashboard-content {
        padding: 16px;
    }

    .dashboard-header {
        gap: 14px;
    }

    .header-actions-group {
        width: 100%;
        margin-left: 0 !important;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .home-metrics {
        grid-template-columns: 1fr;
    }

    .dashboard-header,
    .card-ui {
        padding: 16px;
    }

    .breadcrumb {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 2px;
    }

    .header-actions-group,
    .users-modern-actions {
        width: 100%;
    }

    .header-actions-group .btn,
    .header-actions-group .btn-group,
    .users-modern-actions .btn,
    .users-modern-actions .btn-group {
        width: 100%;
    }

    .users-modern-actions .btn-group > .btn {
        width: 100%;
    }

    .header-main-title {
        font-size: 1.18rem;
    }

    .portal-hero h3 {
        font-size: 1.4rem;
    }

    .users-modern-hero {
        grid-template-columns: 1fr;
    }

    .users-modern-actions {
        justify-content: flex-start;
    }

    .users-modern-stats,
    .users-filter-form,
    .users-mobile-meta {
        grid-template-columns: 1fr;
    }

    .users-table-wrap {
        display: none;
    }

    .users-mobile-list {
        display: grid;
    }

    .users-pagination-wrap {
        justify-content: center;
    }

    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 6px;
    }
}

/* ─── Dashboard home page ─── */
.db-page { display: grid; gap: 20px; }

/* Hero banner */
.db-hero {
    background:
        linear-gradient(135deg, rgba(11, 45, 74, 0.97), rgba(23, 105, 170, 0.92)),
        #0b2d4a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #fff;
    box-shadow: 0 18px 38px rgba(11, 45, 74, 0.20);
}
.db-hero-left { display: flex; align-items: center; gap: 16px; }
.db-hero-avatar {
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: 10px;
    background: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem; font-weight: 700; color: #0b2d4a;
    box-shadow: inset 0 0 0 3px rgba(223, 35, 57, 0.16);
}
.db-hero-kicker {
    display: inline-flex; align-items: center; gap: 5px;
    padding: .22rem .6rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: .7rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    margin-bottom: .4rem;
}
.db-hero-text h2 {
    margin: 0 0 .3rem;
    font-size: 1.4rem; font-weight: 700;
    color: #ffffff; line-height: 1.25;
}
.db-hero-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: .4rem;
}
.db-hero-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: .18rem .55rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    font-size: .75rem; font-weight: 500;
}
.db-hero-chip i { font-size: .68rem; }
.db-hero-chip.chip-active  { background: rgba(14, 159, 154, 0.20); border-color: rgba(14, 159, 154, 0.36); color: #ffffff; }
.db-hero-chip.chip-inactive { background: rgba(223, 35, 57, 0.20); border-color: rgba(223, 35, 57, 0.38); color: #ffffff; }
.db-hero-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.db-hero-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: .45rem 1rem;
    border-radius: 7px; font-size: .84rem; font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.db-hero-btn-primary { background: #df2339; color: #fff; border: 1px solid #df2339; }
.db-hero-btn-primary:hover { background: #b31327; border-color: #b31327; color: #fff; }
.db-hero-btn-outline { background: #fff; color: #0b2d4a; border: 1px solid #fff; }
.db-hero-btn-outline:hover { background: #eef6fb; color: #0b2d4a; border-color: #eef6fb; }

/* Stat cards */
.db-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.db-stat {
    background: #fff;
    border: 1px solid #d9e4ea;
    border-radius: 8px;
    padding: 16px 18px;
    display: flex; align-items: center; gap: 14px;
    box-shadow: 0 12px 28px rgba(16, 33, 47, 0.06);
}
.db-stat-link {
    color: inherit;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.db-stat-link:hover {
    color: inherit;
    transform: translateY(-3px);
    border-color: rgba(23, 105, 170, 0.34);
    box-shadow: 0 18px 38px rgba(16, 33, 47, 0.12);
}
.db-stat-icon {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
}
.db-stat-icon-blue   { background: rgba(23, 105, 170, 0.12); color: #1769aa; }
.db-stat-icon-orange { background: rgba(223, 35, 57, 0.10); color: #df2339; }
.db-stat-icon-green  { background: rgba(14, 159, 154, 0.13); color: #0e9f9a; }
.db-stat-icon-purple { background: rgba(11, 45, 74, 0.10); color: #0b2d4a; }
.db-stat-icon-navy   { background: rgba(11, 45, 74, 0.10); color: #0b2d4a; }
.db-stat-body span {
    display: block;
    font-size: .71rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: #607282; margin-bottom: 3px;
}
.db-stat-body strong {
    font-size: 1.65rem; font-weight: 700;
    line-height: 1; color: #0b2d4a;
}
.db-stat-body small {
    display: block; font-size: .75rem;
    color: #607282; margin-top: 3px;
}

/* Section card */
.db-card {
    background: #fff;
    border: 1px solid #d9e4ea;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(16, 33, 47, 0.06);
}
.db-card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #edf2f7;
}
.db-card-header h5 {
    margin: 0; font-size: .95rem; font-weight: 700; color: #0b2d4a;
}
.db-card-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: .24rem .65rem;
    border-radius: 6px;
    background: #eef6fb; border: 1px solid #d9e4ea;
    color: #1769aa; font-size: .74rem; font-weight: 700;
}

/* Status pill */
.db-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: .22rem .6rem;
    border-radius: 6px; font-size: .75rem; font-weight: 600;
    white-space: nowrap;
}
.db-pill::before {
    content: ''; width: 6px; height: 6px;
    border-radius: 50%; flex-shrink: 0;
}
.db-pill-completed { background: #e8f7ef; color: #1a7a41; border: 1px solid #b8e8cc; }
.db-pill-completed::before { background: #1f8b4c; }

/* View-all footer link */
.db-view-all {
    display: flex; align-items: center; justify-content: center;
    padding: 12px 18px;
    border-top: 1px solid #f0f4f8;
    color: #1d73b2; font-size: .83rem; font-weight: 600;
    text-decoration: none; transition: background .12s;
}
.db-view-all:hover { background: #eef6fb; color: #0b2d4a; }

/* Team members table */
.db-team-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.db-team-table th {
    padding: 9px 14px;
    background: #eef6fb;
    color: #607282; font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    border-top: 1px solid #e4edf5; border-bottom: 1px solid #e4edf5;
}
.db-team-table th:first-child,
.db-team-table td:first-child { padding-left: 18px; }
.db-team-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f4f8;
    font-size: .86rem; color: #10212f;
    vertical-align: middle;
}
.db-team-table tbody tr:last-child td { border-bottom: none; }
.db-team-table tbody tr:hover td { background: #f7fbfd; }
.db-mini-avatar {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #0b2d4a;
    color: #fff; font-size: .78rem; font-weight: 700;
}

/* Responsive */
@media (max-width: 1200px) {
    .db-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .db-hero { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
    .db-hero-actions { flex-direction: row; }
    .db-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .db-stats { grid-template-columns: 1fr; }
    .db-hero-left { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Dashboard polish */
.db-page { gap: 18px; }

.db-hero {
    position: relative;
    overflow: hidden;
    align-items: stretch;
    min-height: 178px;
    padding: 26px 28px;
    background:
        linear-gradient(120deg, rgba(7, 31, 54, 0.98) 0%, rgba(11, 45, 74, 0.96) 48%, rgba(23, 105, 170, 0.88) 100%),
        #0b2d4a;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    box-shadow: 0 22px 46px rgba(7, 31, 54, 0.18);
}

.db-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: 0.16;
    pointer-events: none;
}

.db-hero::after {
    content: '';
    position: absolute;
    right: -78px;
    bottom: -130px;
    width: 330px;
    height: 330px;
    border: 48px solid rgba(14, 159, 154, 0.13);
    border-radius: 999px;
    pointer-events: none;
}

.db-hero-left,
.db-hero-actions {
    position: relative;
    z-index: 1;
}

.db-hero-left {
    min-width: 0;
    align-items: flex-start;
    gap: 18px;
}

.db-hero-avatar {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff, #e8f7ef);
    color: #0b2d4a;
    font-size: 1.28rem;
    box-shadow: 0 18px 32px rgba(2, 13, 23, 0.20);
}

.db-hero-kicker {
    border-radius: 999px;
    padding: 0.34rem 0.78rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.72rem;
}

.db-hero-text h2 {
    max-width: 760px;
    margin: 0.25rem 0 0.7rem;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    letter-spacing: 0;
}

.db-hero-chips {
    max-width: 920px;
    gap: 8px;
}

.db-hero-chip {
    border-radius: 999px;
    padding: 0.36rem 0.7rem;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.94);
    font-weight: 600;
}

.db-hero-actions {
    justify-content: center;
    min-width: 188px;
}

.db-hero-btn {
    width: 100%;
    justify-content: center;
    padding: 0.66rem 1rem;
    border-radius: 8px;
}

.db-hero-btn-primary {
    background: #df2339;
    border-color: #df2339;
    box-shadow: 0 14px 28px rgba(223, 35, 57, 0.24);
}

.db-hero-btn-outline {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
}

.db-hero-btn-outline:hover {
    background: #fff;
    border-color: #fff;
    color: #0b2d4a;
}

.db-stats { gap: 16px; }

.db-stat {
    position: relative;
    align-items: flex-start;
    min-height: 124px;
    padding: 18px 18px 20px;
    overflow: hidden;
    border-color: #dce8f2;
    border-radius: 10px;
    box-shadow: 0 16px 34px rgba(16, 33, 47, 0.07);
}

.db-stat::after {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: #dce8f2;
}

.db-stat:nth-child(1)::after { background: #1769aa; }
.db-stat:nth-child(2)::after { background: #df2339; }
.db-stat:nth-child(3)::after { background: #0e9f9a; }
.db-stat:nth-child(4)::after { background: #0b2d4a; }

.db-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 0;
    font-weight: 900;
    letter-spacing: 0;
}

.db-stat-icon::before {
    font-size: 0.78rem;
}

.db-stat:nth-child(1) .db-stat-icon::before { content: 'AU'; }
.db-stat:nth-child(2) .db-stat-icon::before { content: 'IU'; }
.db-stat:nth-child(3) .db-stat-icon::before { content: 'D'; }
.db-stat:nth-child(4) .db-stat-icon::before { content: 'TU'; }

.db-stat-body { min-width: 0; }

.db-stat-body span {
    margin-bottom: 7px;
    color: #607282;
}

.db-stat-body strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1.9rem;
}

.db-card {
    border-color: #dce8f2;
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(16, 33, 47, 0.07);
}

.db-card-header {
    padding: 18px 22px;
    background: #fbfdfe;
}

.db-card-header h5 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
}

.db-section-kicker {
    display: block;
    margin-bottom: 4px;
    color: #607282;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.db-card-header h5 i {
    color: #1769aa;
    font-size: 0.94rem;
}

.db-card-actions,
.db-role-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.db-card-link { text-decoration: none; }

.db-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.db-team-table th {
    padding: 11px 16px;
    background: #f4f8fb;
}

.db-team-table th:first-child,
.db-team-table td:first-child {
    padding-left: 20px;
}

.db-team-table td {
    padding: 13px 16px;
}

.db-team-table th,
.db-team-table td {
    white-space: nowrap;
}

.db-team-table th:first-child,
.db-team-table td:first-child {
    width: 44%;
}

.db-member {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
}

.db-member strong,
.db-member small {
    display: block;
}

.db-member strong {
    color: #16354f;
    font-size: 0.9rem;
}

.db-member small {
    color: #7a8a97;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.db-muted-cell {
    color: #5a6875;
    font-size: 0.84rem;
}

.db-role-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.58rem;
    border-radius: 999px;
    background: #edf4fb;
    color: #1a5f96;
    font-size: 0.74rem;
    font-weight: 700;
}

.db-empty-value {
    color: #9aa8b4;
    font-size: 0.84rem;
}

.db-pill-inactive {
    background: #fff2f2;
    color: #b03a3a;
    border: 1px solid #f5c0c0;
}

.db-pill-inactive::before { background: #c14848; }

.message-card {
    overflow: hidden;
}

.message-search {
    display: grid;
    grid-template-columns: minmax(240px, 420px) auto auto;
    gap: 10px;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid #edf2f7;
    background: #ffffff;
}

.message-search .form-control {
    min-height: 42px;
    border-color: #d9e4ea;
    border-radius: 8px;
}

.message-search .form-control:focus {
    border-color: #1769aa;
    box-shadow: 0 0 0 4px rgba(23, 105, 170, 0.12);
}

.message-table-wrap {
    background: #fff;
}

.message-sender {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
}

.message-sender strong,
.message-sender a {
    display: block;
}

.message-sender strong {
    color: #16354f;
    font-size: 0.9rem;
}

.message-sender a {
    color: #607282;
    font-size: 0.78rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.message-cell {
    min-width: 340px;
    color: #5a6875;
    font-size: 0.84rem;
    line-height: 1.5;
}

.contact-message-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    white-space: nowrap;
}

.contact-message-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 999px;
}

.contact-message-status.responded {
    color: #146c43;
    background: #e9f8ef;
    border-color: #bfe8cf;
}

.contact-message-status.responded::before {
    background: #198754;
}

.contact-message-status.unresponded {
    color: #9a5d12;
    background: #fff6df;
    border-color: #f5d68a;
}

.contact-message-status.unresponded::before {
    background: #d4861a;
}

.message-status-cell,
.message-date,
.message-actions-cell {
    white-space: nowrap;
}

.message-status-form {
    margin-top: 6px;
}

.message-status-form .btn-link {
    color: #1769aa;
    font-weight: 700;
    text-decoration: none;
}

.message-date {
    color: #8898a6;
    font-size: 0.8rem;
}

.message-delete-form {
    margin: 0;
}

.contact-message-toggle {
    margin: 0;
}

.contact-message-toggle summary {
    cursor: pointer;
    color: #5a6875;
    line-height: 1.5;
    list-style: none;
}

.contact-message-toggle summary::-webkit-details-marker {
    display: none;
}

.contact-message-toggle summary span {
    display: block;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-message-toggle summary small {
    display: inline-flex;
    margin-top: 4px;
    color: #1769aa;
    font-weight: 800;
}

.contact-message-toggle[open] summary span {
    display: none;
}

.contact-message-full {
    max-width: 620px;
    color: #5a6875;
    line-height: 1.55;
    white-space: normal;
}

.message-empty {
    padding: 32px;
    text-align: center;
    color: #8898a6;
}

.message-pagination {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 16px 22px;
    border-top: 1px solid #edf2f7;
    background: #fbfdfe;
}

@media (max-width: 768px) {
    .db-hero {
        align-items: flex-start;
        padding: 22px;
    }

    .db-hero-actions {
        width: 100%;
        min-width: 0;
    }

    .db-hero-btn { width: auto; }

    .db-team-table {
        min-width: 640px;
    }
}

@media (max-width: 560px) {
    .db-hero-actions,
    .db-card-header,
    .db-card-actions {
        align-items: stretch;
        width: 100%;
    }

    .db-hero-btn,
    .db-card-badge {
        width: 100%;
        justify-content: center;
    }

    .db-card-header { flex-direction: column; }

    .dashboard-body .hrms-navbar {
        min-height: auto;
    }

    .dashboard-body .hrms-navbar .container-fluid {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 10px;
        padding: 14px 16px !important;
    }

    .dashboard-body .hrms-brand {
        justify-self: start;
    }

    .dashboard-body .hrms-brand-text {
        font-size: 0.86rem;
    }

    .dashboard-body .hrms-user-nav {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 8px;
        margin: 0;
    }

    .dashboard-body .hrms-user-nav .nav-link {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0.65rem 0.85rem;
        border: 1px solid rgba(80, 255, 227, 0.18);
        border-radius: 8px;
        background: rgba(80, 255, 227, 0.08);
    }

    .dashboard-content {
        padding: 18px;
    }

    .dashboard-header {
        margin-bottom: 18px !important;
    }

    .db-hero {
        min-height: 0;
        padding: 22px;
    }

    .db-hero-avatar {
        width: 58px;
        height: 58px;
    }

    .db-hero-text h2 {
        font-size: 1.55rem;
    }

    .db-hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .db-stats {
        gap: 12px;
    }

    .db-stat {
        min-height: auto;
        padding: 18px 18px 22px;
    }

    .db-table-wrap {
        margin: 0;
    }

    .db-team-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .db-team-table thead {
        display: none;
    }

    .db-team-table,
    .db-team-table tbody,
    .db-team-table tr,
    .db-team-table td {
        display: block;
        width: 100%;
    }

    .db-team-table tr {
        padding: 14px 18px;
        border-bottom: 1px solid #edf2f7;
    }

    .db-team-table td,
    .db-team-table td:first-child {
        width: 100% !important;
        padding: 6px 0;
        border: 0;
        white-space: normal;
    }

    .db-team-table td:not(:first-child) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }

    .db-team-table td:nth-child(2)::before,
    .db-team-table td:nth-child(3)::before {
        color: #607282;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .db-team-table td:nth-child(2)::before { content: 'Roles'; }
    .db-team-table td:nth-child(3)::before { content: 'Status'; }

    .db-member {
        min-width: 0;
    }

    .db-role-tags {
        justify-content: flex-end;
    }

    .message-search {
        grid-template-columns: 1fr;
        padding: 16px 18px;
    }

    .message-search .btn {
        width: 100%;
    }

    .message-cell {
        min-width: 0;
    }

    .message-sender {
        min-width: 0;
    }

    .message-status-cell,
    .message-date {
        white-space: normal;
    }

    .message-pagination {
        justify-content: center;
        padding: 14px 18px;
    }
}

/* ─── Work Order List page ─── */
.wol-page { display: grid; gap: 20px; }

/* Hero */
.wol-hero {
    background: #fff;
    border: 1px solid #dce8f2;
    border-radius: 8px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.wol-hero-kicker {
    display: inline-flex; align-items: center; gap: 5px;
    padding: .22rem .6rem;
    border-radius: 6px;
    background: #edf4fb; color: #245478;
    font-size: .7rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    margin-bottom: .5rem;
}
.wol-hero h2 {
    margin: 0 0 .3rem;
    font-size: 1.4rem; font-weight: 700; color: #16354f;
}
.wol-hero p {
    margin: 0;
    font-size: .88rem; color: #6a7a87;
}
.wol-hero-stats {
    display: flex; gap: 0;
    flex-shrink: 0;
    border: 1px solid #dce8f2;
    border-radius: 8px;
    overflow: hidden;
}
.wol-hero-stat {
    padding: 14px 22px;
    text-align: center;
    border-right: 1px solid #dce8f2;
}
.wol-hero-stat:last-child { border-right: none; }
.wol-hero-stat strong {
    display: block;
    font-size: 1.5rem; font-weight: 700; color: #16354f;
    line-height: 1;
}
.wol-hero-stat span {
    display: block;
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: #8898a6; margin-top: 5px;
}

/* Filter card */
.wol-filter-card {
    background: #fff;
    border: 1px solid #dce8f2;
    border-radius: 8px;
    padding: 16px 18px;
    display: grid;
    gap: 12px;
}
.wol-filter-form {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr) 160px 160px auto;
    gap: 10px;
    align-items: center;
}
.wol-search-wrap {
    position: relative;
}
.wol-search-wrap i {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    color: #8898a6; pointer-events: none;
}
.wol-search-wrap .form-control { padding-left: 36px; }
.wol-filter-btns { display: flex; gap: 8px; }
.wol-export-row {
    display: flex; align-items: center; gap: 10px;
    padding-top: 4px;
    border-top: 1px solid #f0f4f8;
}
.wol-export-label {
    font-size: .76rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: #8898a6;
}
.wol-export-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: .28rem .7rem;
    border-radius: 6px;
    border: 1px solid #d0dce8;
    background: #f7fafc; color: #445566;
    font-size: .8rem; font-weight: 600;
    text-decoration: none;
    transition: background .12s, border-color .12s;
}
.wol-export-btn:hover { background: #fff; border-color: #b0c8e0; color: #16354f; }

/* Table card */
.wol-table-card {
    background: #fff;
    border: 1px solid #dce8f2;
    border-radius: 8px;
    overflow: hidden;
}
.wol-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wol-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.wol-table thead th {
    padding: 10px 14px;
    background: #f7fafc;
    color: #6a7a87; font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    border-top: 1px solid #e4edf5;
    border-bottom: 1px solid #e4edf5;
    white-space: nowrap;
}
.wol-table thead th:first-child { padding-left: 18px; }
.wol-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f0f4f8;
    font-size: .875rem; color: #2d3e4f;
    vertical-align: middle;
}
.wol-table td:first-child { padding-left: 18px; }
.wol-table tbody tr:last-child td { border-bottom: none; }
.wol-table tbody tr:hover td { background: #f8fbfd; }
.wol-wo-no { font-weight: 700; color: #16354f; }
.wol-customer { font-weight: 500; }
.wol-muted { color: #6a7a87; }

/* Status badges */
.wol-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: .22rem .65rem;
    border-radius: 6px; font-size: .75rem; font-weight: 600;
    white-space: nowrap;
}
.wol-badge::before {
    content: ''; width: 6px; height: 6px;
    border-radius: 50%; flex-shrink: 0;
}
.wol-badge-progress { background: #fff8eb; color: #a46f13; border: 1px solid #f5d8a0; }
.wol-badge-progress::before { background: #d4861a; }
.wol-badge-done { background: #e8f7ef; color: #1a7a41; border: 1px solid #b8e8cc; }
.wol-badge-done::before { background: #1f8b4c; }

/* Row action buttons */
.wol-row-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 6px;
    padding-right: 4px;
}
.wol-btn {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; border: 1px solid #d8e4ee;
    background: #f7fafc; color: #445566;
    font-size: .82rem;
    cursor: pointer; text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
}
.wol-btn:hover { background: #fff; border-color: #b0c8e0; }
.wol-btn-view:hover { color: #1d73b2; border-color: #b8d4ee; }
.wol-btn-edit:hover { color: #1f8b4c; border-color: #b8e8cc; }
.wol-btn-del { background: #fff; border-color: #f5c0c0; color: #b03a3a; }
.wol-btn-del:hover { background: #fff5f5; border-color: #e89898; }

/* Empty state */
.wol-empty {
    padding: 48px 18px;
    text-align: center; color: #8898a6;
}
.wol-empty i {
    font-size: 2.2rem; display: block;
    margin-bottom: 10px; color: #c8d8e4;
}
.wol-empty p { margin: 0; font-size: .88rem; }

/* Mobile cards */
.wol-mobile-list { display: none; gap: 12px; padding: 14px; }
.wol-mobile-card {
    border: 1px solid #e0e8ef;
    border-radius: 8px; padding: 14px;
    background: #fff; display: grid; gap: 12px;
}
.wol-mobile-head {
    display: flex; justify-content: space-between;
    align-items: flex-start; gap: 12px;
}
.wol-mobile-meta {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.wol-mobile-meta span {
    display: block; margin-bottom: 3px;
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: #8898a6;
}
.wol-mobile-meta strong { font-size: .86rem; color: #16354f; }
.wol-mobile-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Responsive */
@media (max-width: 1024px) {
    .wol-filter-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .wol-search-wrap { grid-column: 1 / -1; }
    .wol-filter-btns { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    .wol-hero { flex-direction: column; align-items: flex-start; }
    .wol-hero-stats { width: 100%; }
    .wol-hero-stat { flex: 1; }
}
@media (max-width: 640px) {
    .wol-table-wrap { display: none; }
    .wol-mobile-list { display: grid; }
    .wol-mobile-meta { grid-template-columns: 1fr; }
    .wol-filter-form { grid-template-columns: 1fr; }
    .wol-search-wrap, .wol-filter-btns { grid-column: auto; }
}

/* User directory template utilities */
.directory-results-icon {
    font-size: .85rem;
}

.user-empty-marker {
    font-size: .82rem;
}

.user-action-icon-view {
    font-size: .85rem;
}

    .user-action-icon-edit,
    .user-action-icon-delete {
        font-size: .8rem;
    }

    .user-action-svg {
        width: 0.78rem;
        height: 0.78rem;
        flex-shrink: 0;
        display: inline-block;
        fill: currentColor;
        vertical-align: -0.125em;
    }

    .users-mobile-actions .user-action-svg {
        width: 0.85rem;
        height: 0.85rem;
    }

.pagination-chevron-icon {
    font-size: .75rem;
}

/* Roles page */
.roles-wrap {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        gap: 1.25rem;
    }

    .roles-hero {
        background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
        border: 1px solid #e6edf5;
        border-radius: 18px;
        padding: 1.25rem 1.35rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    }

    .roles-hero h1 {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 700;
        color: #0f172a;
    }

    .roles-hero p {
        margin: 0.24rem 0 0;
        color: #64748b;
        font-size: 0.92rem;
    }

    .roles-hero .hero-actions {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        flex-wrap: wrap;
    }

    .roles-hero .hero-stat {
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 12px;
        padding: 0.55rem 0.9rem;
        text-align: center;
    }

    .roles-hero .hero-stat .count {
        display: block;
        font-size: 1.1rem;
        font-weight: 800;
        color: #1d4ed8;
        line-height: 1;
    }

    .roles-hero .hero-stat .label {
        font-size: 0.74rem;
        color: #1e40af;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 700;
    }

    .btn-create-role {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        color: #fff;
        border: 0;
        border-radius: 10px;
        padding: 0.62rem 0.9rem;
        font-weight: 700;
        text-decoration: none;
    }

    .btn-create-role:hover {
        color: #fff;
        filter: brightness(1.05);
    }

    .roles-panel {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
        overflow: hidden;
    }

    .roles-panel-head {
        padding: 1rem 1.1rem;
        border-bottom: 1px solid #eef2f7;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }

    .roles-panel-head h2 {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: #0f172a;
    }

    .roles-grid {
        padding: 1rem 1.1rem 1.15rem;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 0.85rem;
    }

    .role-card-v2 {
        border: 1px solid #e8edf4;
        border-radius: 12px;
        padding: 0.9rem;
        background: #fff;
        display: grid;
        gap: 0.65rem;
    }

    .role-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.65rem;
    }

    .role-name {
        margin: 0;
        font-size: 0.96rem;
        font-weight: 700;
        color: #0f172a;
    }

    .role-code {
        margin-top: 0.12rem;
        color: #64748b;
        font-size: 0.78rem;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    .system-pill {
        border: 1px solid #fde68a;
        background: #fffbeb;
        color: #92400e;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 700;
        padding: 0.22rem 0.5rem;
        white-space: nowrap;
    }

    .role-description {
        margin: 0;
        font-size: 0.83rem;
        color: #64748b;
        min-height: 2.2em;
    }

    .perm-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .perm-tag {
        background: #f8fafc;
        color: #334155;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        padding: 0.22rem 0.52rem;
        font-size: 0.71rem;
        font-weight: 600;
    }

    .role-actions {
        display: flex;
        align-items: center;
        gap: 0.45rem;
    }

    .btn-role-edit,
    .btn-role-delete {
        border-radius: 8px;
        font-size: 0.77rem;
        font-weight: 700;
        padding: 0.38rem 0.58rem;
        text-decoration: none;
        border: 1px solid transparent;
    }

    .btn-role-edit {
        background: #eff6ff;
        color: #1d4ed8;
        border-color: #bfdbfe;
    }

    .btn-role-edit:hover {
        color: #1e3a8a;
    }

    .btn-role-delete {
        background: #fff5f5;
        color: #b91c1c;
        border-color: #fecaca;
    }

    .empty-clean {
        margin: 1rem;
        text-align: center;
        border: 1px dashed #cbd5e1;
        border-radius: 12px;
        padding: 2rem 1rem;
        color: #64748b;
        background: #f8fafc;
    }

    @media (max-width: 992px) {
        .roles-hero {
            align-items: flex-start;
            flex-direction: column;
        }

        .roles-hero .hero-actions {
            width: 100%;
            justify-content: space-between;
        }
    }

/* User directory page */
/* ── Page layout ── */
    .users-modern-page { display: grid; gap: 20px; }

    /* ── Hero card ── */
    .users-modern-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 20px;
        align-items: start;
        background: linear-gradient(135deg, #f0f7ff 0%, #fafcff 100%);
        border: 1px solid #d4e6f5;
    }
    .users-modern-kicker {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0.3rem 0.7rem;
        border-radius: 999px;
        background: #dceeff;
        color: #1a5f96;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        margin-bottom: 0.6rem;
    }
    .users-modern-hero-main h3 {
        margin: 0 0 0.4rem;
        font-size: 1.55rem;
        font-weight: 700;
        color: #16354f;
    }
    .users-modern-hero-main p {
        margin: 0;
        max-width: 64ch;
        color: #6a7a8a;
        font-size: 0.9rem;
        line-height: 1.65;
    }
    .users-modern-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
        padding-top: 2px;
    }
    .users-admin-shortcuts {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
        margin-top: 4px;
    }
    .users-admin-shortcut {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 10px;
        background: #fff;
        border: 1px solid #dce8f0;
        color: #243f57;
        text-decoration: none;
        font-weight: 700;
        font-size: 0.84rem;
        transition: all .15s;
    }
    .users-admin-shortcut:hover {
        transform: translateY(-1px);
        border-color: #1d73b2;
        color: #12314a;
        box-shadow: 0 6px 16px rgba(22,53,79,.10);
    }
    .users-admin-shortcut i {
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #edf4fb;
        color: #1d73b2;
        flex-shrink: 0;
    }

    /* ── Stat cards ── */
    .users-modern-stats {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin-top: 4px;
    }
    .users-stat-card {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        border-radius: 12px;
        background: #fff;
        border: 1px solid #e2edf6;
        box-shadow: 0 1px 4px rgba(22,53,79,.05);
        transition: box-shadow .15s;
    }
    .users-stat-card:hover { box-shadow: 0 3px 10px rgba(22,53,79,.10); }
    .users-stat-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: 1.1rem;
    }
    .users-stat-icon-total    { background: #dceeff; color: #1d73b2; }
    .users-stat-icon-active   { background: #e6f9ee; color: #1f8b4c; }
    .users-stat-icon-inactive { background: #fff3e0; color: #d4861a; }
    .users-stat-icon-separated { background: #ffeaea; color: #c14848; }
    .users-stat-body span {
        display: block;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #7a8a97;
        margin-bottom: 3px;
    }
    .users-stat-body strong {
        font-size: 1.65rem;
        font-weight: 800;
        line-height: 1;
        color: #16354f;
    }

    /* ── Filter toolbar ── */
    .users-modern-toolbar { padding: 16px 18px; }
    .users-filter-form {
        display: grid;
        grid-template-columns: minmax(240px, 1.6fr) repeat(2, minmax(170px, 1fr)) auto auto;
        gap: 10px;
        align-items: center;
    }
    .users-filter-input-wrap { position: relative; }
    .users-filter-input-wrap i {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: #8898a6;
        pointer-events: none;
        font-size: 0.9rem;
    }
    .users-filter-input-wrap .form-control {
        padding-left: 38px;
        border-radius: 8px;
        border-color: #d4dde6;
        background: #f9fbfd;
    }
    .users-filter-input-wrap .form-control:focus {
        border-color: #1d73b2;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(29,115,178,.12);
    }
    .users-filter-form .form-select {
        border-radius: 8px;
        border-color: #d4dde6;
        background-color: #f9fbfd;
    }
    .users-filter-form .form-select:focus {
        border-color: #1d73b2;
        box-shadow: 0 0 0 3px rgba(29,115,178,.12);
    }

    /* ── List section ── */
    .users-modern-list { overflow: hidden; padding: 0; }

    .users-list-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 16px 20px 12px;
        border-bottom: 1px solid #edf2f7;
    }
    .users-list-head h5 {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 700;
        color: #16354f;
    }
    .users-result-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 0.28rem 0.7rem;
        border-radius: 999px;
        background: #edf4fb;
        color: #245478;
        font-size: 0.78rem;
        font-weight: 700;
    }

    /* ── Status tabs ── */
    .users-status-tabs {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        padding: 12px 20px;
        border-bottom: 1px solid #edf2f7;
        background: #f8fbfd;
    }
    .users-status-tab {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 0.45rem 0.85rem;
        border: 1px solid #d7e2ec;
        border-radius: 999px;
        text-decoration: none;
        color: #3a5268;
        background: #fff;
        font-weight: 600;
        font-size: 0.84rem;
        transition: all .15s;
    }
    .users-status-tab:hover { border-color: #9ab8d0; background: #f0f7fc; color: #16354f; }
    .users-status-tab.active { background: #16354f; color: #fff; border-color: #16354f; }
    .users-status-tab-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 999px;
        background: rgba(0,0,0,.08);
        font-size: 0.74rem;
        font-weight: 700;
    }
    .users-status-tab.active .users-status-tab-count { background: rgba(255,255,255,.18); color: #fff; }

    /* ── Table ── */
    .users-table-wrap { padding: 16px 20px 20px; }
    .users-modern-table { width: 100%; border-collapse: separate; border-spacing: 0; }
    .users-modern-table thead th {
        padding: 10px 14px;
        background: #f4f8fc;
        color: #6a7a87;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 700;
        border-top: 1px solid #e4edf5;
        border-bottom: 1px solid #e4edf5;
    }
    .users-modern-table thead th:first-child { border-radius: 8px 0 0 8px; border-left: 1px solid #e4edf5; }
    .users-modern-table thead th:last-child  { border-radius: 0 8px 8px 0; border-right: 1px solid #e4edf5; }
    .users-modern-table td {
        padding: 13px 14px;
        border-bottom: 1px solid #f0f4f8;
        vertical-align: middle;
        color: #2d3e4f;
    }
    .users-modern-table tbody tr:last-child td { border-bottom: none; }
    .users-modern-table tbody tr { transition: background .12s; }
    .users-modern-table tbody tr:hover td { background: #f5f9fd; }

    /* ── Name cell ── */
    .users-name-cell { display: flex; align-items: center; gap: 12px; min-width: 200px; }
    .users-name-cell strong { display: block; color: #16354f; font-size: 0.92rem; font-weight: 600; }
    .users-name-cell small  { display: block; color: #7a8a97; font-size: 0.8rem; margin-top: 1px; }

    /* ── Avatar ── */
    .users-avatar {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #16354f 0%, #1d73b2 100%);
        color: #fff;
        font-size: 0.88rem;
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    /* ── Role tags ── */
    .users-role-tags { display: flex; flex-wrap: wrap; gap: 5px; }
    .users-tag {
        display: inline-flex;
        align-items: center;
        padding: 0.22rem 0.6rem;
        border-radius: 999px;
        background: #edf4fb;
        border: 1px solid #cde0f2;
        color: #1a5f96;
        font-size: 0.75rem;
        font-weight: 600;
    }

    /* ── Status badges ── */
    .users-status {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 0.3rem 0.7rem;
        border-radius: 999px;
        font-size: 0.77rem;
        font-weight: 700;
        white-space: nowrap;
    }
    .users-status::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .users-status-active   { background: #e8f7ef; color: #1a7a41; border: 1px solid #b8e8cc; }
    .users-status-active::before { background: #1f8b4c; }
    .users-status-inactive { background: #fff8ed; color: #9a6319; border: 1px solid #f5d8a0; }
    .users-status-inactive::before { background: #d4861a; }
    .users-status-separated { background: #fff2f2; color: #b03a3a; border: 1px solid #f5c0c0; }
    .users-status-separated::before { background: #c14848; }

    /* ── Row action buttons ── */
    .users-row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
    .users-modern-page .bi {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
    .users-row-actions .btn-action-view {
        width: 32px; height: 32px; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 8px;
        background: #e8f3fc; border: 1px solid #c6dff4; color: #1d73b2;
        transition: all .15s;
    }
    .users-row-actions .btn-action-view:hover { background: #1d73b2; color: #fff; border-color: #1d73b2; }
    .users-row-actions .btn-action-edit {
        width: 32px; height: 32px; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 8px;
        background: #f0f4f8; border: 1px solid #d8e2ec; color: #516070;
        transition: all .15s;
    }
    .users-row-actions .btn-action-edit:hover { background: #16354f; color: #fff; border-color: #16354f; }
    .users-row-actions .btn-action-delete {
        width: 32px; height: 32px; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 8px;
        background: #fff5f5; border: 1px solid #f5c0c0; color: #c14848;
        transition: all .15s;
    }
    .users-row-actions .btn-action-delete:hover { background: #c14848; color: #fff; border-color: #c14848; }

    /* ── Empty state ── */
    .users-empty-state {
        padding: 48px 24px;
        text-align: center;
        color: #8898a6;
    }
    .users-empty-state i { font-size: 2.5rem; margin-bottom: 12px; display: block; color: #b8cad8; }
    .users-empty-state p { margin: 0; font-size: 0.9rem; }

    /* ── Mobile cards ── */
    .users-mobile-list { display: none; padding: 0 16px 20px; gap: 10px; }
    .users-mobile-card {
        display: grid;
        gap: 12px;
        padding: 14px;
        border: 1px solid #e0eaf3;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(22,53,79,.04);
    }
    .users-mobile-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
    .users-mobile-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 10px 12px;
        background: #f8fbfd;
        border-radius: 8px;
        border: 1px solid #edf2f7;
    }
    .users-mobile-meta span { display: block; margin-bottom: 3px; color: #7a8a97; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
    .users-mobile-meta strong { color: #1c3347; font-size: 0.87rem; }
    .users-mobile-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .users-mobile-actions .btn, .users-mobile-actions form { flex: 1 1 100px; }
    .users-mobile-actions form button { width: 100%; }

    /* ── Pagination ── */
    .users-pagination-wrap {
        display: flex;
        justify-content: center;
        padding: 0 20px 20px;
        border-top: 1px solid #f0f4f8;
        padding-top: 16px;
    }
    .users-pagination-wrap .page-link {
        border-radius: 8px;
        margin: 0 2px;
        border-color: #dce8f0;
        color: #3a5268;
        font-size: 0.84rem;
        padding: 0.35rem 0.7rem;
    }
    .users-pagination-wrap .page-item.active .page-link {
        background: #16354f;
        border-color: #16354f;
        color: #fff;
    }
    .users-pagination-wrap .page-link:hover { background: #edf4fb; border-color: #bfd4e6; color: #16354f; }

    /* ── Responsive ── */
    @media (max-width: 1100px) {
        .users-filter-form { grid-template-columns: 1fr 1fr; }
        .users-filter-input-wrap { grid-column: 1 / -1; }
        .users-modern-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .users-admin-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 900px) {
        .users-modern-hero { grid-template-columns: 1fr; }
        .users-modern-actions { justify-content: flex-start; }
        .users-filter-form { grid-template-columns: 1fr; }
        .users-table-wrap { display: none; }
        .users-mobile-list { display: grid; }
    }
    @media (max-width: 640px) {
        .users-modern-stats { grid-template-columns: 1fr 1fr; }
        .users-admin-shortcuts { grid-template-columns: 1fr; }
        .users-status-tabs { padding: 10px 14px; }
        .users-mobile-meta { grid-template-columns: 1fr; }
        .users-pagination-wrap { padding: 12px 14px 16px; }
    }


/* GoldBuy authenticated dashboard theme overrides */
.dashboard-body {
    background:
        linear-gradient(120deg, rgba(201, 154, 53, 0.12), transparent 32%),
        linear-gradient(315deg, rgba(31, 107, 79, 0.08), transparent 28%),
        #f6f1e8;
    color: #18212f;
}

.dashboard-body .bi {
    display: inline-block !important;
}

.sidebar,
body.dashboard-body .sidebar {
    background:
        linear-gradient(180deg, rgba(13, 17, 24, 0.98), rgba(30, 25, 17, 0.98)),
        #0d1118;
    border-right: 1px solid rgba(240, 207, 122, 0.16);
    box-shadow: 18px 0 38px rgba(21, 26, 34, 0.18);
}

.sidebar-menu-item {
    color: rgba(255, 247, 223, 0.84);
}

.sidebar-menu-item i {
    color: #f0cf7a;
}

.sidebar-menu-item:hover {
    color: #fff7df;
    background: rgba(201, 154, 53, 0.16);
    border-color: rgba(240, 207, 122, 0.20);
}

.sidebar-menu-item.active {
    color: #151a22;
    background: linear-gradient(135deg, #f0cf7a, #c99a35);
    border-color: #c99a35;
    box-shadow: 0 14px 24px rgba(5, 14, 22, 0.22);
}

.sidebar-menu-item.active i {
    color: #151a22;
}

.sidebar-footer-card,
.sidebar-user-panel {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(240, 207, 122, 0.16);
}

.dashboard-header,
.card-ui,
.db-panel,
.db-stat,
.users-modern-toolbar,
.users-modern-list,
.users-modern-hero,
.wol-card {
    background: #ffffff !important;
    border-color: #dfd6c7 !important;
    box-shadow: 0 14px 34px rgba(21, 26, 34, 0.08) !important;
}

.header-main-title,
.panel-head h5,
.users-list-head h5,
.db-panel-title,
.db-stat-value,
.users-name-cell strong,
.wol-wo-no {
    color: #151a22 !important;
}

.breadcrumb,
.breadcrumb a,
.metric-card small,
.hero-aside-item span,
.users-name-cell small,
.wol-muted {
    color: #6f7784 !important;
}

.home-kicker,
.users-modern-kicker,
.metric-label,
.db-view-all,
.users-row-actions .btn-action-view,
.wol-btn-view:hover {
    color: #8a641d !important;
}

.home-hero,
.db-hero,
.users-modern-hero {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(251, 246, 234, 0.96)) !important;
    border-color: #dfd6c7 !important;
}

.hero-aside-item,
.metric-card,
.quick-action,
.activity-item,
.users-status-tab,
.users-mobile-card,
.wol-kpi-card {
    background: #fbf6ea !important;
    border-color: #dfd6c7 !important;
}

.panel-badge,
.users-tag,
.db-panel-badge,
.db-stat-icon-blue,
.db-stat-icon-orange,
.db-stat-icon-purple,
.db-stat-icon-navy,
.users-stat-icon-total,
.users-stat-icon-inactive {
    color: #8a641d !important;
    background: rgba(201, 154, 53, 0.14) !important;
    border-color: rgba(201, 154, 53, 0.22) !important;
}

.db-stat-icon-green,
.users-stat-icon-active,
.db-pill-completed,
.users-status-active,
.wol-badge-done {
    color: #1f6b4f !important;
    background: rgba(31, 107, 79, 0.12) !important;
    border-color: rgba(31, 107, 79, 0.22) !important;
}

.users-status-tab.active,
.users-pagination-wrap .active .page-link {
    color: #151a22 !important;
    background: linear-gradient(135deg, #f0cf7a, #c99a35) !important;
    border-color: #c99a35 !important;
}

.users-status-tab:hover,
.quick-action:hover,
.db-view-all:hover {
    color: #151a22 !important;
    background: rgba(201, 154, 53, 0.16) !important;
    border-color: rgba(201, 154, 53, 0.28) !important;
}

.table thead th,
.users-modern-table thead th,
.db-team-table thead th,
.wol-table thead th {
    color: #6f7784 !important;
    background: #fbf6ea !important;
    border-color: #eadfcf !important;
}

.table tbody tr:hover,
.users-modern-table tbody tr:hover td,
.db-team-table tbody tr:hover td,
.wol-table tbody tr:hover td {
    background: #fffaf0 !important;
}

.db-hero,
.db-hero-card {
    background:
        linear-gradient(145deg, rgba(13, 17, 24, 0.96), rgba(35, 30, 21, 0.92)) !important;
    border-color: rgba(240, 207, 122, 0.24) !important;
}

.db-hero h1,
.db-hero h2,
.db-hero-title,
.db-hero *:is(h1, h2, h3) {
    color: #fff7df !important;
}

.db-hero-chip,
.db-hero-btn-outline {
    border-color: rgba(240, 207, 122, 0.28) !important;
}

.db-hero-btn-primary {
    color: #151a22 !important;
    background: linear-gradient(135deg, #f0cf7a, #c99a35) !important;
    border-color: #c99a35 !important;
}

.db-hero-btn-outline {
    color: #fff7df !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.db-stat:nth-child(1)::after,
.db-stat:nth-child(2)::after,
.db-stat:nth-child(4)::after {
    background: #c99a35 !important;
}

.db-stat:nth-child(3)::after {
    background: #1f6b4f !important;
}

.btn-primary,
.db-action-primary,
.users-pagination-wrap .page-item.active .page-link {
    color: #151a22 !important;
    background: linear-gradient(135deg, #f0cf7a, #c99a35) !important;
    border-color: #c99a35 !important;
}

.btn-outline-primary,
.page-link {
    color: #8a641d !important;
    border-color: rgba(138, 100, 29, 0.32) !important;
}

.btn-outline-primary:hover,
.page-link:hover {
    color: #151a22 !important;
    background: rgba(201, 154, 53, 0.16) !important;
    border-color: rgba(201, 154, 53, 0.34) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: #c99a35 !important;
    box-shadow: 0 0 0 0.2rem rgba(201, 154, 53, 0.15) !important;
}

/* Transaction list polish */
.tx-list-page {
    display: grid;
    gap: 16px;
}

.tx-list-card {
    overflow: hidden;
}

.tx-list-head {
    padding: 18px 22px;
}

.tx-list-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.tx-list-title h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #151a22;
}

.tx-list-title small {
    display: block;
    margin-top: 2px;
    color: #6f7784;
    font-size: 0.78rem;
    font-weight: 600;
}

.tx-list-title-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #151a22;
    background: linear-gradient(135deg, #f0cf7a, #c99a35);
    border: 1px solid rgba(138, 100, 29, 0.18);
    flex: 0 0 auto;
}

.tx-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 22px;
    background: #fbf8f1;
    border-bottom: 1px solid #dfd6c7;
}

.tx-filter-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.tx-per-page-control {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #6f7784;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.tx-per-page-control .form-select {
    width: 76px;
    min-height: 34px;
    border-color: #dfd6c7;
    border-radius: 7px;
    font-weight: 700;
}

.tx-search-control {
    position: relative;
    min-width: min(280px, 48vw);
}

.tx-search-control i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a641d;
    font-size: 0.88rem;
    pointer-events: none;
}

.tx-search-control .form-control {
    min-height: 34px;
    padding-left: 36px;
    border-color: #dfd6c7;
    border-radius: 7px;
    background: #fff;
}

.tx-search-btn,
.tx-bulk-delete,
.tx-view-btn {
    min-height: 34px;
    border-radius: 7px;
    font-weight: 700;
}

.tx-bulk-delete {
    white-space: nowrap;
}

.tx-bulk-delete:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tx-table-wrap {
    overflow-x: auto;
}

.tx-table {
    min-width: 860px;
}

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

.tx-table thead th {
    padding-top: 12px;
    padding-bottom: 12px;
    color: #6f7784;
    background: #fffaf0;
    border-color: #eadfcb;
}

.tx-table tbody td {
    padding-top: 13px;
    padding-bottom: 13px;
}

.tx-table tbody tr.is-selected td {
    background: rgba(201, 154, 53, 0.10);
}

.tx-select-col {
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    text-align: center;
    padding-left: 12px !important;
    padding-right: 8px !important;
}

.tx-number-col {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tx-date-col {
    white-space: nowrap;
    color: #6f7784;
    font-size: 0.82rem;
}

.tx-action-col {
    width: 90px;
    white-space: nowrap;
}

.tx-primary-cell {
    color: #151a22;
    font-weight: 700;
    min-width: 180px;
}

.tx-strong-value {
    color: #151a22;
    font-weight: 800;
}

.tx-view-btn {
    padding-left: 14px;
    padding-right: 14px;
    border: 1px solid #dfd6c7;
    color: #8a641d;
    background: #fff;
}

.tx-view-btn:hover {
    color: #151a22;
    background: rgba(201, 154, 53, 0.12);
    border-color: rgba(138, 100, 29, 0.32);
}

.tx-pagination {
    margin-top: 2px;
}

@media (max-width: 900px) {
    .tx-list-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .tx-filter-form,
    .tx-bulk-delete {
        width: 100%;
    }

    .tx-search-control {
        flex: 1 1 220px;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .tx-list-head,
    .tx-list-toolbar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .tx-filter-form {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .tx-per-page-control,
    .tx-search-control,
    .tx-search-btn {
        width: 100%;
    }

    .tx-per-page-control {
        grid-column: 1 / -1;
        justify-content: space-between;
    }

    .tx-per-page-control .form-select {
        width: 92px;
    }

    .tx-search-control {
        grid-column: 1 / 2;
    }

    .tx-search-btn {
        grid-column: 2 / 3;
        width: auto;
    }

    .tx-list-page .db-team-table,
    .tx-list-page .db-team-table thead,
    .tx-list-page .db-team-table tbody,
    .tx-list-page .db-team-table tr,
    .tx-list-page .db-team-table th,
    .tx-list-page .db-team-table td {
        display: revert;
    }

    .tx-list-page .db-team-table td::before {
        content: none !important;
        display: none !important;
    }

    .tx-table-wrap {
        margin: 0;
        padding: 0;
        overflow-x: auto;
    }

    .tx-table {
        min-width: 760px;
    }
}