:root {
    --crm-navy: #12233f;
    --crm-navy-2: #1a3157;
    --crm-blue: #2563eb;
    --crm-blue-dark: #1d4ed8;
    --crm-sky: #eaf2ff;
    --crm-coral: #f06445;
    --crm-ink: #182230;
    --crm-muted: #64748b;
    --crm-line: #dfe6ee;
    --crm-surface: #ffffff;
    --crm-canvas: #f4f7fb;
    --crm-success: #16845b;
    --crm-danger: #c33c54;
    --crm-radius: 12px;
    --crm-shadow: 0 1px 2px rgba(18, 35, 63, .05), 0 8px 24px rgba(18, 35, 63, .06);
}

html { background: var(--crm-canvas); }

body.layout-modern {
    color: var(--crm-ink);
    background: var(--crm-canvas) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.skip-link {
    position: fixed;
    left: 16px;
    top: -50px;
    z-index: 10050;
    padding: 10px 14px;
    color: #fff;
    background: var(--crm-blue);
    border-radius: 8px;
    transition: top .15s ease;
}

.skip-link:focus { top: 12px; color: #fff; }

.layout-modern .main-header {
    min-height: 58px;
    margin-left: 0 !important;
    padding: 0 20px !important;
    border: 0;
    border-bottom: 1px solid var(--crm-line);
    border-radius: 0;
    box-shadow: 0 1px 10px rgba(18, 35, 63, .04);
}

.layout-modern .nav-menu-toggle {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    place-items: center;
    border: 1px solid var(--crm-line);
    border-radius: 9px;
}

.layout-modern .brand-item { display: flex; align-items: center; }
.layout-modern .brand-home { display: flex; align-items: center; gap: 10px; margin-left: 12px; }
.layout-modern .small-logo { display: block; width: 118px; max-height: 36px; padding: 4px 0; }
.layout-modern .brand-product {
    padding-left: 10px;
    color: var(--crm-muted);
    border-left: 1px solid var(--crm-line);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.layout-modern .globalNav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

.layout-modern .globalNav > li { position: relative; }
.layout-modern .globalNav > li > a {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    color: var(--crm-ink) !important;
    border-radius: 9px;
    font-weight: 600;
}
.layout-modern .globalNav > li > a:hover { color: var(--crm-blue) !important; background: var(--crm-sky); }
.layout-modern .shift-status,
.layout-modern .clock-status { padding: 0 10px; color: var(--crm-muted); font-size: 12px; }
.layout-modern .shift-status { color: var(--crm-success); font-weight: 700; }

.layout-modern .main-sidebar {
    top: 58px !important;
    width: 260px;
    background: var(--crm-navy);
    border-right: 0;
}
.layout-modern .main-sidebar .sidebar { margin-top: 0 !important; padding: 14px 10px 24px !important; }
.layout-modern .leftpanel-menu { padding-top: 0; background: transparent; box-shadow: none; }
.layout-modern .os-content { background: var(--crm-navy) !important; }
.layout-modern .nav-sidebar > .nav-item { margin-bottom: 3px; }
.layout-modern .nav-sidebar > .nav-item .nav-link {
    min-height: 42px;
    padding: 10px 12px;
    color: #cbd6e6 !important;
    border: 0;
    border-radius: 9px !important;
    font-size: 14px;
    font-weight: 600;
}
.layout-modern .nav-sidebar .nav-link p { margin-left: 7px; }
.layout-modern .nav-sidebar .nav-link i:not(.right) { width: 20px; color: #91a4be; text-align: center; }
.layout-modern .nav-sidebar > .nav-item:hover > .nav-link,
.layout-modern .nav-sidebar .nav-link:focus { background: rgba(255,255,255,.08) !important; }
.layout-modern .nav-sidebar .nav-link.active {
    color: #fff !important;
    background: var(--crm-blue) !important;
    box-shadow: 0 7px 18px rgba(37, 99, 235, .25);
}
.layout-modern .nav-sidebar .nav-link.active i:before { color: #fff !important; }
.layout-modern .nav-treeview { margin-left: 0 !important; padding: 5px 0 6px 12px; }
.layout-modern .nav-treeview > .nav-item > .nav-link { min-height: 36px; padding: 8px 10px; font-size: 13px; }

body.layout-modern:not(.sidebar-mini-md) .content-wrapper,
body.layout-modern:not(.sidebar-mini-md) .main-footer { margin-left: 260px !important; }
.layout-modern.sidebar-collapse:not(.sidebar-mini-md) .content-wrapper,
.layout-modern.sidebar-collapse:not(.sidebar-mini-md) .main-footer { margin-left: 4.6rem !important; }
.layout-modern .content-wrapper { min-height: calc(100vh - 58px) !important; padding-bottom: 24px; background: var(--crm-canvas) !important; }
.layout-modern .content-header { padding: 26px 24px 16px; }
.layout-modern .content { padding: 0 24px; }
.layout-modern .content > .container-fluid,
.layout-modern .content-header > .container-fluid { max-width: 1800px; padding: 0; }
.layout-modern .page-eyebrow,
.layout-modern .section-kicker {
    margin: 0 0 3px;
    color: var(--crm-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.layout-modern .page-title { margin: 0; color: var(--crm-ink); font-size: clamp(24px, 2vw, 30px); font-weight: 750; letter-spacing: -.025em; }
.layout-modern .breadcrumb { margin: 0; padding: 8px 12px; background: rgba(255,255,255,.72); border: 1px solid var(--crm-line); border-radius: 999px; font-size: 12px; }
.layout-modern .breadcrumb a { color: var(--crm-blue); }

.layout-modern .card,
.layout-modern .homeTable,
.layout-modern .dashboard-toolbar,
.layout-modern .modal-content,
.layout-modern .ui-dialog {
    background: var(--crm-surface);
    border: 1px solid var(--crm-line) !important;
    border-radius: var(--crm-radius) !important;
    box-shadow: var(--crm-shadow) !important;
}
.layout-modern .card { padding: 0; overflow: hidden; }
.layout-modern .card-header { padding: 14px 18px; background: #fbfcfe !important; border-bottom: 1px solid var(--crm-line); }
.layout-modern .card-body { padding: 18px; }

.layout-modern .dashboard-toolbar { margin-bottom: 18px; padding: 18px 20px 10px; }
.layout-modern .dashboard-toolbar__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid var(--crm-line); }
.layout-modern .dashboard-toolbar h2 { margin: 0; color: var(--crm-ink); font-size: 18px; font-weight: 750; }
.layout-modern .dashboard-toolbar__hint { margin: 4px 0 0; color: var(--crm-muted); font-size: 12px; }
.layout-modern .field-label,
.layout-modern .form-group label { display: block; margin-bottom: 6px; color: #435168; font-size: 12px; font-weight: 700; }
.layout-modern .dashboard-actions { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; }

.layout-modern .form-control,
.layout-modern input[type="text"],
.layout-modern input[type="email"],
.layout-modern input[type="password"],
.layout-modern input[type="number"],
.layout-modern select,
.layout-modern textarea {
    min-height: 38px;
    color: var(--crm-ink);
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: none;
    font-size: 14px;
}
.layout-modern .form-control:focus,
.layout-modern input:focus,
.layout-modern select:focus,
.layout-modern textarea:focus {
    border-color: var(--crm-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
    outline: 0;
}
.layout-modern .dateRange { min-height: 40px; padding: 3px 9px; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; }
.layout-modern .dateRange .cal-text { min-height: 30px; padding: 4px 5px; border: 0; font-weight: 650; }
.layout-modern .dateRange .cal-text:focus { box-shadow: none; }
.layout-modern .dateRange .fa-calendar { color: var(--crm-blue); font-size: 18px; }
.layout-modern .preNext { gap: 4px; margin-top: 3px; }
.layout-modern .preNext button { width: 34px; height: 34px; color: var(--crm-muted); background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; line-height: 1; }
.layout-modern .preNext button:hover { color: var(--crm-blue); border-color: var(--crm-blue); }

.layout-modern .btn,
.layout-modern .btn-info {
    min-height: 38px;
    padding: 8px 15px !important;
    color: #fff !important;
    background: var(--crm-blue) !important;
    border: 1px solid var(--crm-blue) !important;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .16);
    font-size: 13px !important;
    font-weight: 700;
}
.layout-modern .btn:hover,
.layout-modern .btn-info:hover { background: var(--crm-blue-dark) !important; border-color: var(--crm-blue-dark) !important; transform: translateY(-1px); }
.layout-modern .btn-danger { background: var(--crm-danger) !important; border-color: var(--crm-danger) !important; }
.layout-modern .btn-success,
.layout-modern .btn-dark { background: var(--crm-success) !important; border-color: var(--crm-success) !important; }
.layout-modern .buttons-excel { display: inline-grid; width: 38px; height: 38px; margin: 0; color: var(--crm-success); background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px; place-items: center; }

.layout-modern .table-responsive,
.layout-modern .scrollDiv { border: 1px solid var(--crm-line); border-radius: 10px; background: #fff; }
.layout-modern .table { margin-bottom: 0; border: 0 !important; border-collapse: separate !important; border-spacing: 0; box-shadow: none; }
.layout-modern .table thead th {
    padding: 11px 10px !important;
    color: #dbe7f7 !important;
    background: var(--crm-navy) !important;
    border: 0 !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.layout-modern .table tbody td { padding: 10px !important; border-bottom: 1px solid #edf1f6 !important; vertical-align: middle; }
.layout-modern .table tbody tr:nth-child(even) td { background: #fafcff; }
.layout-modern .table tbody tr:hover td { background: var(--crm-sky); }
.layout-modern .table tbody tr:last-child td { border-bottom: 0 !important; }
.layout-modern .dataTables_wrapper .dataTables_filter input { min-width: 220px; margin-left: 7px; }
.layout-modern .pagination .page-link { color: var(--crm-blue); border-color: var(--crm-line); }
.layout-modern .page-item.active .page-link { color: #fff; background: var(--crm-blue); border-color: var(--crm-blue); }

.layout-modern .nav-tabs { gap: 4px; border-bottom: 1px solid var(--crm-line); }
.layout-modern .nav-tabs .nav-link { padding: 9px 13px; color: var(--crm-muted); border: 0; border-bottom: 2px solid transparent; font-weight: 650; }
.layout-modern .nav-tabs .nav-link.active { color: var(--crm-blue); background: transparent; border-bottom-color: var(--crm-blue); }
.layout-modern .dropdown-menu { padding: 7px; border: 1px solid var(--crm-line); border-radius: 10px; box-shadow: var(--crm-shadow); }
.layout-modern .dropdown-item { padding: 8px 10px; border-radius: 7px; }
.layout-modern .dropdown-item:hover { color: var(--crm-blue); background: var(--crm-sky); }
.layout-modern .badge { border-radius: 999px; }
.layout-modern .alert { border: 0; border-radius: 10px; }
.layout-modern .overlay { backdrop-filter: blur(2px); }

.layout-modern .main-footer { padding: 14px 24px; color: var(--crm-muted); background: #fff; border-top: 1px solid var(--crm-line); font-size: 12px; }

@media (max-width: 991.98px) {
    .layout-modern .shift-status,
    .layout-modern .clock-status { display: none !important; }
    .layout-modern .content-header { padding: 20px 16px 12px; }
    .layout-modern .content { padding: 0 16px; }
    .layout-modern .dashboard-toolbar__heading { flex-direction: column; gap: 4px; }
}

@media (max-width: 767.98px) {
    .layout-modern .main-header { min-height: 56px; padding: 0 10px !important; }
    .layout-modern .main-sidebar { top: 56px !important; }
    body.layout-modern:not(.sidebar-mini-md) .content-wrapper,
    body.layout-modern:not(.sidebar-mini-md) .main-footer { margin-left: 0 !important; }
    .layout-modern .brand-product,
    .layout-modern .globalNav .hidden-xs { display: none !important; }
    .layout-modern .small-logo { width: 104px; margin-right: 0; }
    .layout-modern .globalNav { gap: 0; }
    .layout-modern .globalNav > li > a { padding: 8px; }
    .layout-modern .page-title { font-size: 22px; }
    .layout-modern .breadcrumb { display: none !important; }
    .layout-modern .content-header .col-sm-6:last-child { display: none; }
    .layout-modern .dashboard-toolbar { padding: 15px 14px 8px; }
    .layout-modern .dashboard-actions { padding-top: 4px; }
    .layout-modern .dashboard-actions .btn { flex: 1; }
    .layout-modern .dateRange { width: calc(100% - 80px) !important; }
    .layout-modern .dateRange .cal-text { width: 42%; }
    .layout-modern .table thead th { white-space: nowrap; }
    .layout-modern .main-footer { padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .layout-modern *, .layout-modern *::before, .layout-modern *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; }
}

/* Sign-in experience */
.login-page.crm-login {
    display: block;
    min-height: 100vh;
    padding: 0;
    color: var(--crm-ink);
    background: var(--crm-canvas);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.crm-login__shell { display: grid; min-height: 100vh; grid-template-columns: minmax(420px, .95fr) minmax(480px, 1.05fr); }
.crm-login__brand {
    position: relative;
    display: flex;
    min-height: 100vh;
    padding: clamp(34px, 5vw, 72px);
    overflow: hidden;
    flex-direction: column;
    color: #fff;
    background: linear-gradient(145deg, #10213c 0%, #173663 62%, #1e4b87 100%);
}
.crm-login__brand::before,
.crm-login__brand::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.crm-login__brand::before { right: -180px; top: -170px; width: 440px; height: 440px; }
.crm-login__brand::after { right: 70px; bottom: -240px; width: 520px; height: 520px; }
.crm-login__logo { position: relative; z-index: 1; display: flex; width: fit-content; align-items: center; gap: 12px; }
.crm-login__logo img { width: 152px; padding: 8px 12px; background: #fff; border-radius: 9px; }
.crm-login__logo span { padding-left: 12px; color: #d8e7fb; border-left: 1px solid rgba(255,255,255,.3); font-size: 12px; font-weight: 800; letter-spacing: .15em; }
.crm-login__brand-copy { position: relative; z-index: 1; max-width: 580px; margin: auto 0 28px; }
.crm-login__eyebrow { margin-bottom: 12px; color: #9fc4ff; font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.crm-login__brand h1 { margin: 0 0 18px; color: #fff; font-size: clamp(38px, 4.4vw, 64px); font-weight: 750; letter-spacing: -.045em; line-height: 1.04; }
.crm-login__brand-copy > p:last-child { max-width: 520px; margin: 0; color: #d7e3f2; font-size: 16px; line-height: 1.7; }
.crm-login__features { position: relative; z-index: 1; display: grid; margin: 0 0 42px; padding: 0; gap: 11px; color: #eef5ff; list-style: none; }
.crm-login__features li { display: flex; align-items: center; gap: 10px; }
.crm-login__features i { display: grid; width: 22px; height: 22px; color: #b9d6ff; background: rgba(255,255,255,.1); border-radius: 50%; font-size: 10px; place-items: center; }
.crm-login__support { position: relative; z-index: 1; margin: 0; color: #9fb3cc; font-size: 12px; }
.crm-login__form-panel { display: grid; padding: 40px; background: #fff; place-items: center; }
.crm-login__form-wrap { width: 100%; max-width: 440px; }
.crm-login__welcome { margin: 0 0 8px; color: var(--crm-blue); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.crm-login__form-wrap h2 { margin: 0 0 10px; color: var(--crm-ink); font-size: clamp(28px, 3vw, 38px); font-weight: 750; letter-spacing: -.035em; }
.crm-login__form-note { margin: 0 0 34px; color: var(--crm-muted); }
.crm-login__form .form-group { margin-bottom: 20px; }
.crm-login__label-row { display: flex; align-items: center; justify-content: space-between; }
.crm-login__label,
.crm-login__label-row label { margin: 0 0 7px; color: #344258; font-size: 13px; font-weight: 750; }
.crm-login__label-row a { margin-bottom: 7px; color: var(--crm-blue); font-size: 12px; font-weight: 650; }
.crm-login__input-wrap { position: relative; }
.crm-login__input-wrap > i { position: absolute; left: 14px; top: 50%; z-index: 1; color: #94a3b8; transform: translateY(-50%); }
.crm-login__input-wrap .form-control { height: 48px; padding-left: 42px; color: var(--crm-ink); background: #fbfcfe; border: 1px solid #cbd5e1; border-radius: 9px; }
.crm-login__input-wrap .form-control:focus { background: #fff; border-color: var(--crm-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.13); }
.crm-login__validation { padding: 10px 12px; background: #fff1f2; border-radius: 8px; font-size: 12px; }
.crm-login__submit { display: flex; height: 48px; margin-top: 28px; align-items: center; justify-content: center; gap: 10px; background: var(--crm-blue); border: 0; border-radius: 9px; font-weight: 750; box-shadow: 0 8px 18px rgba(37,99,235,.2); }
.crm-login__submit:hover { background: var(--crm-blue-dark); }
.crm-login__privacy { margin: 22px 0 0; color: #8491a4; text-align: center; font-size: 11px; }
.crm-login__privacy i { margin-right: 5px; }

@media (max-width: 900px) {
    .crm-login__shell { grid-template-columns: 1fr; }
    .crm-login__brand { min-height: auto; padding: 28px 28px 34px; }
    .crm-login__brand-copy { margin: 54px 0 24px; }
    .crm-login__brand h1 { max-width: 650px; font-size: clamp(34px, 8vw, 54px); }
    .crm-login__features { margin-bottom: 12px; }
    .crm-login__form-panel { min-height: 620px; }
}
@media (max-width: 575.98px) {
    .crm-login__brand { padding: 22px 20px 26px; }
    .crm-login__brand-copy { margin-top: 40px; }
    .crm-login__brand-copy > p:last-child { font-size: 14px; }
    .crm-login__features { display: none; }
    .crm-login__form-panel { min-height: auto; padding: 44px 20px; }
}