/* =============================================================================
   IGIHE Editorial Monitoring System — Professional responsive theme
   Loads after Bootstrap and the legacy stylesheet to reskin the existing app.
   ============================================================================= */

:root {
    --brand:     #635BFF;
    --brand-600: #5B54E8;
    --brand-700: #4F46E5;
    --brand-050: #F5F6FE;
    --accent:    #0F766E;
    --accent-050:#E6FFFB;
    --gold:      #C59A19;
    --gold-050:  #FFF8E5;

    /* Ink (text) */
    --ink-900: #18202A;
    --ink-700: #344054;
    --ink-500: #667085;
    --ink-400: #98A2B3;

    /* Surfaces & lines */
    --bg:       #F5F7FA;
    --surface:  #FFFFFF;
    --surface-2:#F9FAFB;
    --border:   #EAECF0;
    --border-2: #D0D5DD;
    --hairline: #F2F4F7;

    /* Status (Stripe-like soft badges) */
    --green-bg:#CBF4C9; --green-fg:#0E6245;
    --amber-bg:#FCEFC7; --amber-fg:#B4540A;
    --red-bg:  #FDE2DD; --red-fg:  #C0123C;
    --grey-bg: #E3E8EE; --grey-fg: #4F566B;

    /* Shape & depth (subtle, layered) */
    --radius:    8px;
    --radius-sm: 6px;
    --radius-pill: 999px;
    --shadow-card: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
    --shadow-pop:  0 14px 34px rgba(16, 24, 40, .12);
    --shadow-btn:  0 1px 2px rgba(16, 24, 40, .10);

    --z-topbar: 30;
    --z-sidebar: 40;
    --z-overlay: 50;

    --sidebar-w: 270px;

    --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Base ---------------------------------------------------------- */
body {
    background: var(--bg);
    color: var(--ink-700);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.92) 0, rgba(245,247,250,.60) 280px, transparent 520px),
        radial-gradient(circle at 80% -10%, rgba(15,118,110,.10), transparent 340px);
    z-index: -1;
}
h1, h2, h3, h4, h5, .dash-title, .title-style, .details_title {
    font-family: var(--font);
    color: var(--ink-900);
    font-weight: 600;
    letter-spacing: -0.01em;
}
a { color: var(--accent); }
a:hover, a:focus { color: #0B5F59; }

.mytable, .table, .counter, .stat-card, .report-table, input, select {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Accessibility */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .btn:focus-visible {
    outline: 3px solid rgba(15,118,110,.25);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.skip-link {
    position: absolute; left: 12px; top: -48px; z-index: var(--z-overlay);
    background: var(--accent); color: #fff; font-weight: 600;
    padding: 10px 16px; border-radius: var(--radius-sm); transition: top .15s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Content area -------------------------------------------------- */
.side-body {
    margin-left: var(--sidebar-w);
    padding: 30px 34px 64px;
    min-height: 100vh;
}
.side-body > .container-fluid,
.side-body .container-fluid {
    padding-left: 0;
    padding-right: 0;
}
hr, .side-body > hr { border-top: 1px solid var(--border); opacity: 1; margin: 22px 0; }

.dash-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 2px 0 22px;
}
.title-style {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 4px 0 14px;
    letter-spacing: 0;
}
a.title-style { color: var(--accent); }

/* ---------- Sidebar (light) ---------------------------------------------- */
.side-menu {
    background: var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: 8px 0 28px rgba(16, 24, 40, .04);
    width: var(--sidebar-w);
    z-index: var(--z-sidebar);
}
.side-menu .navbar { background: transparent; border: 0; }
.side-menu .navbar-header { border-bottom: 1px solid var(--border); padding: 8px 0 12px; margin-bottom: 4px; }
.side-menu .brand-name-wrapper { padding: 12px 18px 4px; }
.side-menu .lg-box { max-width: 150px; height: auto; }

/* Logged-in user */
.side-menu .bg-wrapp {
    margin: 12px 14px; padding: 12px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.side-menu .text-logged span { color: var(--ink-900); font-weight: 600; font-size: 13.5px; }
.side-menu .text-logged span[style*="facb08"],
.side-menu .text-logged span:last-child { color: var(--ink-500) !important; font-weight: 500; }
.side-menu .img-size { width: 46px; height: 46px; margin-left: 0; }
.side-menu .img-size img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--border-2);
}
.side-menu .dropdown button {
    background: transparent;
    border: 0;
    padding: 6px;
}

/* Nav items */
.side-menu .navbar-nav { padding: 8px 12px 18px; }
.side-menu .navbar-nav li { width: 100%; margin: 1px 0; }
.side-menu .navbar-nav li a {
    display: flex; align-items: center; gap: 11px;
    color: var(--ink-500);
    padding: 10px 12px; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 500; line-height: 1.2;
    transition: background-color .15s ease, color .15s ease;
}
.side-menu .navbar-nav li a img,
.side-menu .navbar-nav li a .glyphicon {
    width: 18px; height: 18px; flex: 0 0 18px;
    filter: none; opacity: .5;
    transition: opacity .15s ease;
}
.side-menu .navbar-nav li a:hover,
.side-menu .navbar-nav li a:focus {
    background: var(--surface-2); color: var(--ink-900); text-decoration: none;
}
.side-menu .navbar-nav li a:hover img { opacity: .8; }
.side-menu .navbar-nav .active a,
.side-menu .navbar-nav li.active a {
    background: var(--brand-050); color: var(--brand-700); font-weight: 700;
}
.side-menu .navbar-nav .active a img { opacity: .9; }
.side-menu .navbar-nav li a .badge {
    margin-left: auto; background: var(--accent); color: #fff; font-weight: 600;
    font-size: 11px; padding: 3px 8px;
}

/* ---------- Collapsible nav groups --------------------------------------- */
.side-menu .nav-group-toggle { cursor: pointer; }
.side-menu .nav-group-toggle .nav-caret {
    margin-left: auto; color: var(--ink-400); font-size: 18px; line-height: 1;
    transition: transform .2s ease;
}
.side-menu .nav-group.open > .nav-group-toggle .nav-caret { transform: rotate(90deg); color: var(--ink-500); }
.side-menu .nav-group.open > .nav-group-toggle,
.side-menu .nav-group-toggle.has-active { color: var(--ink-900); }
.side-menu .nav-group-items {
    list-style: none; margin: 1px 0 5px; padding: 0;
    max-height: 0; overflow: hidden; transition: max-height .26s ease;
}
.side-menu .nav-group.open > .nav-group-items { max-height: 560px; }
.side-menu .nav-group-items li { width: 100%; margin: 1px 0; }
.side-menu .nav-group-items li a {
    padding: 7px 12px 7px 41px; font-size: 13.5px; font-weight: 500;
    color: var(--ink-500); border-radius: var(--radius-sm);
}
.side-menu .nav-group-items li a:hover { background: var(--surface-2); color: var(--ink-900); }

/* Active link + active group (set by the sidebar JS) */
.side-menu .side-nav a.active { background: var(--brand-050); color: var(--brand-700); font-weight: 700; }
.side-menu .side-nav a.active img { opacity: .9; }

/* ---------- Top bar ------------------------------------------------------- */
.blue-bgx {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    margin-left: var(--sidebar-w);
    position: sticky; top: 0; z-index: var(--z-topbar);
}
.my-topnav.navbar { background: transparent; border: 0; margin: 0; min-height: 64px; border-radius: 0; }
.app-topbar .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    gap: 16px;
    padding-left: 26px;
    padding-right: 26px;
}
.topbar-title {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.topbar-title strong {
    color: var(--ink-900);
    font-size: 17px;
    font-weight: 700;
}
.topbar-kicker,
.topbar-date {
    color: var(--ink-500);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.topbar-actions .btn { margin: 0; }

.online-users-widget {
    position: relative;
}

.online-users-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    border-color: #dbe4ef;
    color: var(--ink-800);
    font-weight: 700;
}

.online-users-toggle .caret {
    margin-left: 2px;
}

.online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
}

.online-users-menu {
    width: 300px;
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
    padding: 8px;
}

.online-users-heading {
    padding: 8px 10px 10px;
    color: var(--ink-500);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.online-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
}

.online-user-row + .online-user-row {
    margin-top: 2px;
}

.online-user-row:hover {
    background: #f8fafc;
}

.online-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eef2ff, #e0f2fe);
    color: #3157d5;
    font-size: 13px;
    font-weight: 800;
}

.online-user-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.online-user-meta strong {
    color: var(--ink-900);
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.online-user-meta small,
.online-users-empty {
    color: var(--ink-500);
    font-size: 12px;
    font-weight: 600;
}

.online-users-empty {
    padding: 12px 10px;
}

/* ---------- System-wide page surfaces ------------------------------------ */
.side-body > hr:first-child {
    display: none;
}
.side-body > .container-fluid > .col-sm-12:first-child,
.side-body .col-sm-12 > .add-style,
.side-body .col-sm-12 > .create-style:first-child {
    margin-bottom: 18px;
}
.side-body > .container-fluid > .col-sm-12:first-child > .title-style,
.side-body .col-sm-12 > .add-style .title-style {
    margin-bottom: 6px;
}
.side-body > .container-fluid > .col-sm-12:first-child > hr,
.side-body .col-sm-12 > .add-style > hr {
    margin: 12px 0 0;
}
.side-body .col-sm-12 > p,
.side-body .col-sm-12 > .add-style + p {
    color: var(--ink-500);
}
.side-body .col-sm-12 > form,
.side-body .col-sm-8 > form,
.side-body .col-sm-6 > form,
.side-body .col-sm-4 > form {
    margin-bottom: 24px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.side-body td form,
.side-body .login-form form,
.side-body form.report-controls {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.form-group {
    margin-bottom: 16px;
}
.side-body .form-group br {
    display: none;
}
.side-body .col-sm-12 > hr,
.side-body .col-sm-6 > hr,
.side-body .col-sm-8 > hr {
    margin: 18px 0;
}
.create-style {
    min-height: 58px;
    border-style: dashed;
}
.create-style p {
    margin: 0;
}
.my-nav.navbar {
    margin-bottom: 18px;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-card);
}
.my-nav .container-fluid {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 8px 12px;
}
.my-nav .navbar-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.my-nav .navbar-nav > li > a {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--ink-500);
    font-weight: 650;
}
.my-nav .navbar-nav > li > a:hover,
.my-nav .navbar-nav > li.active > a,
.my-nav .navbar-nav > li > a:focus {
    color: var(--brand);
    background: var(--brand-050) !important;
}
.my-nav .navbar-btn {
    margin: 0;
}
.btn-create {
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: #fff !important;
    border: 1px solid var(--brand);
    box-shadow: var(--shadow-btn);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 12px;
}
.btn-create:hover {
    background: var(--brand-600);
    border-color: var(--brand-600);
}
.app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-left: var(--sidebar-w);
    padding: 18px 34px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-500);
}
.app-footer strong {
    display: block;
    color: var(--ink-900);
    font-size: 14px;
}
.app-footer span {
    font-size: 13px;
}
.app-footer img {
    width: 72px;
    max-height: 34px;
    object-fit: contain;
}

/* ---------- Stripe-inspired dashboard ------------------------------------ */
.dashboard-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 24px;
    padding: 30px 32px;
    overflow: hidden;
    border: 1px solid rgba(99, 91, 255, .12);
    border-radius: 12px;
    background:
        linear-gradient(115deg, rgba(255,255,255,.98) 0%, rgba(247,250,255,.96) 46%, rgba(238,244,255,.94) 100%),
        linear-gradient(90deg, rgba(99,91,255,.16), rgba(0,212,255,.10));
    box-shadow: 0 18px 48px rgba(16, 24, 40, .08);
}
.dashboard-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(99,91,255,.16), transparent 42%),
        repeating-linear-gradient(135deg, rgba(99,91,255,.055) 0 1px, transparent 1px 16px);
    pointer-events: none;
}
.dashboard-hero > * {
    position: relative;
}
.dashboard-eyebrow {
    margin: 0 0 7px;
    color: #635BFF;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.dashboard-subtitle {
    max-width: 680px;
    margin: 0;
    color: var(--ink-500);
    font-size: 15px;
}
.dashboard-hero .dash-title {
    margin: 0 0 8px;
    font-size: 32px;
    letter-spacing: 0;
}
.dashboard-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.dashboard-hero-actions .btn {
    margin: 0;
}
.dashboard-metrics-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 14px;
    margin: 0 0 26px;
}
.dashboard-metric-card {
    min-height: 136px;
    padding: 18px 18px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 10px 24px rgba(16,24,40,.045);
}
.dashboard-metric-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.dashboard-metric-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #635BFF;
    box-shadow: 0 0 0 4px rgba(99,91,255,.10);
}
.dashboard-metric-label {
    color: var(--ink-500);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1.25;
    text-transform: uppercase;
}
.dashboard-metric-value {
    color: var(--ink-900);
    font-size: 34px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: 0;
}
.dashboard-metric-meta {
    margin: 10px 0 0;
    color: var(--ink-500);
    font-size: 13px;
}
.dashboard-metric-green .dashboard-metric-dot { background: #00A76F; box-shadow: 0 0 0 4px rgba(0,167,111,.12); }
.dashboard-metric-purple .dashboard-metric-dot { background: #7C3AED; box-shadow: 0 0 0 4px rgba(124,58,237,.12); }
.dashboard-metric-amber .dashboard-metric-dot { background: #F59E0B; box-shadow: 0 0 0 4px rgba(245,158,11,.14); }
.dashboard-metric-slate .dashboard-metric-dot { background: #475467; box-shadow: 0 0 0 4px rgba(71,84,103,.12); }
.dashboard-metric-teal .dashboard-metric-dot { background: #0F766E; box-shadow: 0 0 0 4px rgba(15,118,110,.12); }
.dashboard-section-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}
.dashboard-data-panel {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.dashboard-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}
.dashboard-panel-head .title-style {
    margin: 0;
}
.dashboard-panel-head .dashboard-eyebrow {
    margin-bottom: 4px;
}
.dashboard-data-panel .dataTables_wrapper {
    margin: 0;
    padding: 16px 18px 18px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.dashboard-data-panel .ig-table-toolbar {
    padding-top: 0;
}
.dashboard-data-panel .ig-table-shell {
    border: 1px solid var(--border);
    border-radius: 8px;
}
.dashboard-data-panel .table {
    border: 0;
}

/* ---------- Cards / panels ------------------------------------------------ */
.panel, .add-style, .brd-st, .create-style, .shadow, .summary, .login-form form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}
.panel { overflow: hidden; }
.add-style, .brd-st, .shadow, .summary { padding: 22px 24px; }
.create-style { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading { background: var(--surface); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--ink-900); }

/* Stat / KPI cards */
.stat-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-card);
    padding: 18px 20px; transition: box-shadow .18s ease;
}
.shadow-lg {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 20px;
    margin-bottom: 16px;
}
.box-title {
    color: var(--ink-500);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.nbr-style {
    color: var(--ink-900);
    font-size: 28px;
    font-weight: 700;
}
.total-sty {
    color: var(--ink-500);
}
.stat-card:hover { box-shadow: var(--shadow-pop); }
.stat-card .counter, .counter {
    font-weight: 600; font-size: 26px; color: var(--ink-900); line-height: 1.15; letter-spacing: -0.02em;
}
.stat-card .stat-label {
    color: var(--ink-500); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}

/* ---------- Tables -------------------------------------------------------- */
.ig-table-shell {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ig-managed-table {
    margin: 0 !important;
}
.ig-data-table {
    overflow: hidden;
}
.ig-table-toolbar {
    align-items: center;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    padding: 4px 0 14px;
}
.ig-table-footer {
    align-items: center;
    border-top: 1px solid var(--border);
    margin-top: 0;
    padding: 14px 0 2px;
}
.ig-table-search label,
.ig-table-length label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.ig-table-search label {
    justify-content: flex-end;
}
.ig-table-search input {
    min-width: 250px;
}
.ig-table-pages .pagination {
    margin: 0;
}
.side-body .table, .mytable {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    border-collapse: separate; border-spacing: 0;
    width: 100% !important;
}
.mytable thead th, .side-body .table > thead > tr > th {
    background: var(--surface);
    color: var(--ink-500);
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--border); padding: 11px 16px; vertical-align: middle;
}
.mytable tbody td, .side-body .table > tbody > tr > td {
    padding: 13px 16px; border-top: 1px solid var(--hairline); color: var(--ink-700); vertical-align: middle;
}
.mytable tbody tr, .side-body .table > tbody > tr { transition: background-color .12s ease; }
.mytable tbody tr:hover, .side-body .table-hover > tbody > tr:hover { background: var(--surface-2); }
.table-striped > tbody > tr:nth-of-type(odd) { background: #FCFDFE; }
.table-striped > tbody > tr:nth-of-type(odd):hover { background: var(--surface-2); }

/* DataTables controls */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--border-2); border-radius: var(--radius-sm);
    padding: 7px 12px; background: var(--surface); color: var(--ink-700);
}
.dataTables_wrapper {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 14px;
    margin-bottom: 28px;
}
.dataTables_wrapper .row {
    margin-left: 0;
    margin-right: 0;
}
.dataTables_wrapper .row > [class^="col-"],
.dataTables_wrapper .row > [class*=" col-"] {
    padding-left: 0;
    padding-right: 0;
}
.dataTables_wrapper .table {
    box-shadow: none;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--brand) !important; border: 1px solid var(--brand) !important;
    color: #fff !important; border-radius: var(--radius-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--radius-sm); padding: 5px 11px; color: var(--brand) !important; border: 0;
}
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length { color: var(--ink-500); margin: 8px 0; }

/* ---------- Forms --------------------------------------------------------- */
label { font-weight: 500; color: var(--ink-700); font-size: 13px; margin-bottom: 6px; }
.form-control, .form-custom, select.form-control, textarea.form-control {
    height: auto; min-height: 40px;
    border: 1px solid var(--border-2); border-radius: var(--radius-sm);
    padding: 9px 12px; color: var(--ink-900); background: var(--surface);
    box-shadow: 0 1px 1px rgba(0,0,0,.02); font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.form-control { min-height: 88px; }
.form-control:focus, .form-custom:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15,118,110,.16);
    outline: none;
}
.form-custom { display: block; width: 100%; margin-bottom: 12px; }
::placeholder { color: var(--ink-400); }

/* ---------- Buttons (Stripe-style) --------------------------------------- */
.btn {
    border-radius: var(--radius-sm); font-family: var(--font); font-weight: 600; font-size: 14px;
    padding: 9px 16px; min-height: 38px; border: 1px solid transparent;
    transition: background-color .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}

/* Primary = blurple with subtle gloss + shadow */
.btn-add, .btn-create, .btn-primary {
    background: var(--accent);
    background-image: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,0));
    color: #fff !important; border-color: var(--accent);
    box-shadow: var(--shadow-btn);
    display: inline-block; text-decoration: none;
}
.btn-add:hover, .btn-create:hover, .btn-primary:hover,
.btn-add:focus, .btn-create:focus, .btn-primary:focus {
    background: #0B5F59; color: #fff !important; box-shadow: 0 2px 5px rgba(16,24,40,.18), 0 1px 2px rgba(0,0,0,.10);
}

/* Strong secondary = dark slate */
.btn-success {
    background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: var(--shadow-btn);
}
.btn-success:hover, .btn-success:focus { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

/* Quiet secondary = white w/ border */
.btn-default {
    background: var(--surface); color: var(--ink-700); border-color: var(--border-2);
    box-shadow: 0 1px 1px rgba(0,0,0,.03);
}
.btn-default:hover, .btn-default:focus { background: var(--surface-2); border-color: var(--ink-400); color: var(--ink-900); }

.btn-xs { min-height: 0; padding: 4px 9px; font-size: 12px; }

/* ---------- Badges & status pills ---------------------------------------- */
.badge { background: var(--ink-500); border-radius: var(--radius-pill); font-weight: 600; padding: 3px 8px; }
.status-green, .status-yellow, .status-red, .status-grey, .badge-status {
    display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill);
    font-weight: 600; font-size: 12px; text-align: center;
}
.status-green  { background: var(--green-bg); color: var(--green-fg); }
.status-yellow { background: var(--amber-bg); color: var(--amber-fg); }
.status-red    { background: var(--red-bg);   color: var(--red-fg); }
.status-grey   { background: var(--grey-bg);  color: var(--grey-fg); }

/* ---------- Alerts -------------------------------------------------------- */
.alert { border-radius: var(--radius-sm); border: 1px solid transparent; padding: 12px 16px; font-size: 14px; }
.alert-success { background: var(--green-bg); color: var(--green-fg); border-color: #A8E5A0; }
.alert-danger, .bg-danger { background: var(--red-bg); color: var(--red-fg); border-color: #F7C6BC; }
.alert-warning { background: var(--amber-bg); color: var(--amber-fg); border-color: #F3D998; }

/* ---------- Monthly report polish ---------------------------------------- */
.report-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    margin: 12px 0 22px !important;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.report-controls label {
    margin: 0 2px 0 0;
}
.report-controls input,
.report-controls select {
    margin: 0 !important;
}
.report-head {
    padding: 22px 24px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(99,91,255,.08), rgba(15,118,110,.06)),
        var(--surface);
    box-shadow: var(--shadow-card);
}
.report-head h2 {
    margin: 0 0 8px;
    color: var(--ink-900);
    font-size: 24px;
    font-weight: 750;
}
.report-head p {
    margin: 0;
    color: var(--ink-500);
}
.report-section {
    margin-bottom: 24px !important;
}
.report-h2 {
    font-family: var(--font);
    border-radius: 10px 10px 0 0;
    background: #0A2540 !important;
    font-weight: 700;
    padding: 10px 14px !important;
}
.report-band { background: #0A2540 !important; }
.report-table {
    box-shadow: var(--shadow-card);
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    background: var(--surface);
}
.report-table th {
    background: var(--surface-2) !important;
}
.report-sub {
    color: var(--ink-500) !important;
}

/* ---------- Responsive ---------------------------------------------------- */
/* ---------- Login --------------------------------------------------------- */
body.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 14px;
}
body.login-page:before {
    background:
        linear-gradient(135deg, rgba(24,32,42,.96), rgba(15,118,110,.86)),
        url("../images/index.png") center/cover no-repeat;
}
.login-shell {
    width: min(1040px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: stretch;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(16,24,40,.32);
    overflow: hidden;
}
.login-brand-panel {
    min-height: 520px;
    padding: 48px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(24,32,42,.92), rgba(15,118,110,.80)),
        url("../images/press.png") center/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.login-brand-panel img {
    width: 210px;
    max-width: 100%;
    filter: brightness(0) invert(1);
}
.login-brand-panel h1 {
    color: #fff;
    font-size: 34px;
    line-height: 1.15;
    margin: 0 0 14px;
    letter-spacing: 0;
}
.login-brand-panel p {
    color: rgba(255,255,255,.82);
    font-size: 15px;
    max-width: 430px;
    margin: 0;
}
.login-form {
    width: auto;
    margin: 0;
    padding: 48px 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.login-form form {
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}
.login-form h2 {
    text-align: left;
    font-size: 25px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 24px;
}
.login-form .checkbox-inline,
.login-form a {
    color: var(--accent) !important;
}
.login-form p.text-center { margin-top: 18px; }

/* ---------- Mobile shell -------------------------------------------------- */
.app-menu-backdrop {
    display: none;
}

@media (max-width: 1180px) {
    .dashboard-metrics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .side-body { padding: 20px 18px 52px; }
    .app-footer {
        margin-left: var(--sidebar-w);
        padding-left: 18px;
        padding-right: 18px;
    }
    .dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
    }
    .dashboard-hero-actions {
        width: 100%;
    }
}
@media (max-width: 768px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    body { font-size: 15px; }
    body.menu-open { overflow: hidden; }
    .side-body { margin-left: 0 !important; padding: 16px 14px 48px; overflow-x: hidden; }
    .blue-bgx { margin-left: 0 !important; }
    .app-footer {
        margin-left: 0;
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 14px;
    }
    .side-body .col-sm-12 > form,
    .side-body .col-sm-8 > form,
    .side-body .col-sm-6 > form,
    .side-body .col-sm-4 > form {
        padding: 16px;
        border-radius: 10px;
    }
    .my-nav .container-fluid {
        align-items: stretch;
        flex-direction: column;
    }
    .my-nav .navbar-nav {
        width: 100%;
        margin: 0;
    }
    .my-nav .navbar-nav > li {
        width: 100%;
    }
    .my-nav .navbar-nav > li > a,
    .my-nav .navbar-btn,
    .btn-create {
        display: block;
        width: 100%;
        text-align: center;
    }
    .report-controls {
        display: grid;
        grid-template-columns: 1fr;
        padding: 16px;
    }
    .report-head {
        padding: 18px;
    }
    .report-head h2 {
        font-size: 20px;
    }
    .dash-title { font-size: 21px; }
    .dashboard-hero {
        padding: 22px 18px;
        border-radius: 10px;
    }
    .dashboard-hero .dash-title {
        font-size: 25px;
    }
    .dashboard-subtitle {
        font-size: 14px;
    }
    .dashboard-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .dashboard-metrics-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .dashboard-metric-card {
        min-height: 112px;
    }
    .dashboard-panel-head {
        align-items: stretch;
        flex-direction: column;
        padding: 16px;
    }
    .dashboard-data-panel .dataTables_wrapper {
        padding: 12px;
    }
    .mytable, .side-body .table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .btn { width: 100%; margin-bottom: 8px; }
    .create-style { flex-direction: column; align-items: stretch; gap: 8px; }
    .side-menu {
        position: relative;
        width: 100%;
        height: 58px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 1px 2px rgba(16,24,40,.06);
    }
    .side-menu .navbar-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 58px;
        z-index: var(--z-sidebar);
        background: var(--surface);
        padding: 0;
        display: flex;
        align-items: center;
    }
    .side-menu .navbar-toggle {
        width: 58px;
        height: 58px;
        padding: 18px;
        background: transparent;
    }
    .side-menu .brand-name-wrapper {
        padding: 9px 12px;
    }
    .side-menu .brand-name-wrapper .navbar-brand {
        padding: 0;
        height: auto;
    }
    .side-menu .lg-box {
        max-width: 118px;
    }
    .side-menu .bg-wrapp {
        display: none;
    }
    .side-menu-container > .navbar-nav {
        top: 58px;
        width: min(86vw, 320px);
        left: -340px;
        height: calc(100vh - 58px);
        overflow-y: auto;
        background: var(--surface);
        border-right: 1px solid var(--border);
        box-shadow: var(--shadow-pop);
        z-index: var(--z-sidebar);
        animation: none !important;
        transform: none !important;
        transition: left .22s ease;
    }
    .side-menu-container > .navbar-nav.slide-in {
        left: 0;
        animation: none !important;
    }
    .body-slide-in {
        animation: none !important;
        left: auto !important;
    }
    .app-menu-backdrop {
        display: block;
        position: fixed;
        inset: 58px 0 0;
        background: rgba(24,32,42,.42);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
        z-index: calc(var(--z-sidebar) - 1);
    }
    body.menu-open .app-menu-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    .app-topbar {
        position: sticky;
        top: 58px;
    }
    .app-topbar .container-fluid {
        min-height: auto;
        padding: 12px 14px;
        flex-direction: column;
        align-items: flex-start;
    }
    .topbar-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .topbar-actions .online-users-widget,
    .topbar-actions .online-users-toggle {
        width: 100%;
    }
    .topbar-actions .online-users-toggle {
        justify-content: center;
    }
    .online-users-menu {
        width: calc(100vw - 28px);
        max-width: 320px;
    }
    .topbar-date {
        grid-column: 1 / -1;
    }
    .dataTables_wrapper {
        padding: 10px;
    }
    .ig-table-toolbar,
    .ig-table-footer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .ig-table-search label,
    .ig-table-length label {
        justify-content: stretch;
        width: 100%;
    }
    .ig-table-search input,
    .ig-table-length select {
        width: 100% !important;
        min-width: 0;
        margin-left: 0 !important;
    }
    .ig-table-pages,
    .ig-table-info {
        text-align: center;
    }
    .ig-table-pages .pagination {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }
    .ig-table-pages .pagination > li > a,
    .ig-table-pages .pagination > li > span {
        border-radius: var(--radius-sm);
        margin: 0;
    }
    .login-shell {
        grid-template-columns: 1fr;
    }
    .login-brand-panel {
        min-height: 240px;
        padding: 28px;
    }
    .login-brand-panel h1 {
        font-size: 26px;
    }
    .login-form {
        padding: 30px 24px;
    }
}

/* ---------- Print --------------------------------------------------------- */
@media print {
    .side-menu, .blue-bgx, .create-style, .btn, footer { display: none !important; }
    .side-body { margin-left: 0 !important; padding: 0 !important; }
    .panel, .mytable, .table { box-shadow: none !important; }
}