/* ================================================================
   Mag Dynamics — Global Theme Layer
   ----------------------------------------------------------------
   Single source of truth for the app palette (the "Client Profile"
   theme: navy / green / teal / slate) plus global overrides that
   retheme the shared Bootstrap + admin-template components so every
   legacy page adopts the look without per-view edits.

   Load order: this file is linked LAST in _Layout so it wins the
   cascade over the bundled template (app.css) and sidebar-demo.css.
   Prefix for any new bespoke classes: mag-
   ================================================================ */

:root {
    /* Brand palette */
    --mag-navy:        #1a2e4a;
    --mag-navy-700:    #16273f;
    --mag-navy-600:    #22395a;
    --mag-green:       #1d9e75;
    --mag-green-600:   #178a65;
    --mag-teal:        #0d9488;
    --mag-teal-700:    #0f766e;

    /* Surfaces & neutrals */
    --mag-bg:          #f8fafc;
    --mag-surface:     #ffffff;
    --mag-border:      #e2e8f0;
    --mag-border-soft: #f1f5f9;
    --mag-text:        #1e293b;
    --mag-text-muted:  #64748b;
    --mag-text-faint:  #94a3b8;

    /* Status */
    --mag-success:     #16a34a;
    --mag-warning:     #f59e0b;
    --mag-danger:      #dc2626;
    --mag-info:        #0d9488;

    /* Shape & motion */
    --mag-radius:      8px;
    --mag-radius-lg:   12px;
    --mag-shadow:      0 1px 3px rgba(15, 23, 42, .08);
    --mag-shadow-md:   0 6px 24px rgba(15, 23, 42, .10);
    --mag-focus-ring:  0 0 0 2px rgba(29, 158, 117, .18);

    /* Emerald Forest chrome (header + sidebar) */
    --mag-emerald-header:      #0f3d35;
    --mag-emerald-sidebar:     #0b2e29;
    --mag-emerald-header-text: #bfe3d6;
    --mag-emerald-text:        #c7e6da;
    --mag-emerald-icon:        #7fc4ad;
    --mag-emerald-active:      #1d9e75;
    --mag-emerald-active-text: #06281f;

    --mag-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ── Page content surface ───────────────────────────────────────── */
.content.dashboard-page { background: var(--mag-bg); }

/* ── Buttons ─────────────────────────────────────────────────────
   Map Bootstrap 3 contextual buttons onto the brand palette. */
.btn-primary,
.btn-primary:focus {
    background-color: var(--mag-green) !important;
    border-color: var(--mag-green) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--mag-green-600) !important;
    border-color: var(--mag-green-600) !important;
    color: #fff !important;
}

.btn-success,
.btn-success:focus { background-color: var(--mag-success) !important; border-color: var(--mag-success) !important; color: #fff !important; }
.btn-success:hover,
.btn-success:active { background-color: #15803d !important; border-color: #15803d !important; }

.btn-info,
.btn-info:focus { background-color: var(--mag-teal) !important; border-color: var(--mag-teal) !important; color: #fff !important; }
.btn-info:hover,
.btn-info:active { background-color: var(--mag-teal-700) !important; border-color: var(--mag-teal-700) !important; }

.btn-default,
.btn-secondary {
    background-color: #fff !important;
    border-color: var(--mag-border) !important;
    color: var(--mag-text) !important;
}
.btn-default:hover,
.btn-secondary:hover { background-color: var(--mag-bg) !important; border-color: #cbd5e1 !important; }

.btn-danger,  .btn-danger:focus  { background-color: var(--mag-danger)  !important; border-color: var(--mag-danger)  !important; }
.btn-warning, .btn-warning:focus { background-color: var(--mag-warning) !important; border-color: var(--mag-warning) !important; color: #1f2937 !important; }

.btn { border-radius: var(--mag-radius); font-weight: 600; }
.btn:focus, .btn.focus { box-shadow: var(--mag-focus-ring) !important; outline: none !important; }

/* Links */
a { color: var(--mag-teal-700); }
a:hover, a:focus { color: var(--mag-navy); }

/* Grid affordances: clickable name cells (.link-row, was hard blue) and the
   custom row action dropdown used across every module list page. */
.link-row, .action-link { color: var(--mag-teal-700) !important; }
.link-row:hover, .action-link:hover { color: var(--mag-navy) !important; }
.dropdown-content a { color: var(--mag-text); }
.dropdown-content a:hover { background: #e1f5ee; color: var(--mag-teal-700); }

/* Grid row action buttons (the amber .btn-warning "Edit" in table cells):
   calm soft-teal ghost, clearly secondary to the solid-green primary buttons,
   hovering to solid teal. Scoped to table cells so real warning buttons stay amber. */
td .btn-warning {
    background: #e1f5ee !important;
    border: 1px solid #9fe1cb !important;
    color: #0f6e56 !important;
}
td .btn-warning:hover,
td .btn-warning:focus {
    background: var(--mag-teal) !important;
    border-color: var(--mag-teal) !important;
    color: #fff !important;
}

/* ── Form controls ──────────────────────────────────────────────
   Consistent borders, radius and a green focus ring everywhere. */
.form-control {
    border: 1px solid var(--mag-border);
    border-radius: var(--mag-radius);
    color: var(--mag-text);
    box-shadow: none;
}
.form-control:focus {
    border-color: var(--mag-green) !important;
    box-shadow: var(--mag-focus-ring) !important;
}
.control-label, label { color: var(--mag-text); }

/* Select2 single control aligned to the same look */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--mag-border);
    border-radius: var(--mag-radius);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--mag-green);
    box-shadow: var(--mag-focus-ring);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--mag-green);
}

/* ── Cards / panels ─────────────────────────────────────────────── */
.card, .panel {
    background: var(--mag-surface);
    border: 1px solid var(--mag-border);
    border-radius: var(--mag-radius-lg);
    box-shadow: var(--mag-shadow);
}
.card-header, .panel-heading {
    background: var(--mag-surface);
    border-bottom: 1px solid var(--mag-border);
    color: var(--mag-navy);
    font-weight: 700;
}
.panel-primary > .panel-heading {
    background: var(--mag-navy);
    border-color: var(--mag-navy);
    color: #fff;
}

/* ── Tables ─────────────────────────────────────────────────────── */
.table > thead > tr > th {
    background: var(--mag-bg);
    color: var(--mag-navy);
    border-bottom: 1px solid var(--mag-border) !important;
    font-weight: 700;
    text-transform: none;
}
.table > tbody > tr > td { border-top: 1px solid var(--mag-border-soft); color: var(--mag-text); }
.table-hover > tbody > tr:hover { background: var(--mag-bg); }
.table-striped > tbody > tr:nth-of-type(odd) { background: #fcfdfe; }

/* DataTables accents */
table.dataTable thead th { color: var(--mag-navy); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--mag-green) !important;
    border-color: var(--mag-green) !important;
    color: #fff !important;
}

/* ── Pagination ─────────────────────────────────────────────────── */
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
    background-color: var(--mag-green);
    border-color: var(--mag-green);
}
.pagination > li > a { color: var(--mag-teal-700); }

/* ── Nav tabs ───────────────────────────────────────────────────── */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-tabs .nav-link.active {
    color: var(--mag-navy);
    border-bottom: 2px solid var(--mag-green);
    font-weight: 700;
}
.nav-tabs .nav-link:hover { color: var(--mag-navy); }

/* ── Modals (match the themed Client dialog) ───────────────────── */
.modal-content { border: none; border-radius: var(--mag-radius-lg); box-shadow: var(--mag-shadow-md); overflow: hidden; }
/* Specificity .modal .modal-header (0,2,0) + !important — beats app.css's
   `.modal .modal-header { background-color:#85CE36 }` (the lime header). */
.modal-header,
.modal .modal-header {
    background: var(--mag-navy) !important;
    border-bottom: none;
    color: #fff;
}
.modal-header .modal-title, .modal .modal-header .modal-title,
.modal-header h4, .modal-header h3 { color: #fff; }
.modal-header .close, .modal .modal-header .close { color: #cbd5e1; opacity: .9; text-shadow: none; }
.modal-header .close:hover, .modal .modal-header .close:hover { color: #fff; }

/* ── Badges / status pills ──────────────────────────────────────── */
.badge-primary { background-color: var(--mag-green); }
.badge-info    { background-color: var(--mag-teal); }
.badge-success { background-color: var(--mag-success); }
.badge-warning { background-color: var(--mag-warning); color: #1f2937; }
.badge-danger  { background-color: var(--mag-danger); }

.status-sample-1.status-active   { background: #e1f5ee; color: #0f6e56; }
.status-sample-1.status-inactive { background: #f1f5f9; color: var(--mag-text-muted); }

/* ================================================================
   App shell — "Emerald Forest" chrome (header + sidebar)
   Broad selectors + !important so these win over the bundled
   template (app.css) and every sidebar-demo.css menu variant.
   ================================================================ */

/* ── Top header bar ─────────────────────────────────────────────── */
.header {
    background: var(--mag-emerald-header) !important;
    border-bottom: 1px solid #0a2e28 !important;
    box-shadow: 0 2px 8px rgba(6, 40, 31, .25);
}
.header .nav-profile > li > a,
.header .nav-profile .name,
.header .header-block > a:not(.btn),
.header .collapse-btn,
.header .nav-profile .fa,
.header .header-block .fa {
    color: var(--mag-emerald-header-text) !important;
}
.header .nav-profile > li > a:hover,
.header .nav-profile > li > a:hover .fa,
.header .nav-profile > li > a:hover .name,
.header .collapse-btn:hover { color: #ffffff !important; }
.header .nav-profile .caret { border-top-color: var(--mag-emerald-header-text) !important; }
/* (header quick-link buttons keep the green .btn-primary styling above) */

/* ── Sidebar shell ──────────────────────────────────────────────── */
.sidebar,
.sidebar .sidebar-container,
.sidebar .sidebar-header,
.sidebar .sidebar-footer { background: var(--mag-emerald-sidebar) !important; }
.sidebar .sidebar-footer { border-top: 1px solid rgba(255, 255, 255, .06) !important; }
.sidebar .brand .logo-text { color: #ffffff !important; }

/* Neutralise the v1/v2/v3 menu container backgrounds */
.sidebar .menu,
.sidebar .menu.menu-demo-v1,
.sidebar .menu.menu-demo-v2,
.sidebar .menu.menu-demo-v3 {
    background: transparent !important;
    box-shadow: none !important;
}

/* ── Top-level menu items: inactive ─────────────────────────────── */
.sidebar #sidebar-menu > li > a {
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    color: var(--mag-emerald-text) !important;
}
.sidebar #sidebar-menu > li > a .menu-text { color: var(--mag-emerald-text) !important; }
.sidebar #sidebar-menu > li > a .fa:first-child,
.sidebar #sidebar-menu > li > a .menu-arrow { color: var(--mag-emerald-icon) !important; }

/* ── Top-level menu items: hover ────────────────────────────────── */
.sidebar #sidebar-menu > li > a:hover {
    background: rgba(29, 158, 117, .16) !important;
    border-color: rgba(29, 158, 117, .40) !important;
    color: #ffffff !important;
}
.sidebar #sidebar-menu > li > a:hover .menu-text,
.sidebar #sidebar-menu > li > a:hover .fa:first-child,
.sidebar #sidebar-menu > li > a:hover .menu-arrow { color: #ffffff !important; }

/* ── Top-level menu items: active / open ────────────────────────── */
.sidebar #sidebar-menu > li.active > a,
.sidebar #sidebar-menu > li.open > a,
.sidebar #sidebar-menu li a.active {
    background: var(--mag-emerald-active) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(13, 148, 136, .28) !important;
    color: var(--mag-emerald-active-text) !important;
}
.sidebar #sidebar-menu > li.active > a .menu-text,
.sidebar #sidebar-menu > li.open > a .menu-text,
.sidebar #sidebar-menu li a.active .menu-text,
.sidebar #sidebar-menu > li.active > a .fa:first-child,
.sidebar #sidebar-menu > li.open > a .fa:first-child,
.sidebar #sidebar-menu li a.active .fa:first-child,
.sidebar #sidebar-menu li.active > a .menu-arrow,
.sidebar #sidebar-menu li.open > a .menu-arrow {
    color: var(--mag-emerald-active-text) !important;
}

/* ── Sub-menu items (nested) ────────────────────────────────────── */
.sidebar #sidebar-menu > li > ul { border-left: 2px solid rgba(127, 196, 173, .28) !important; }
.sidebar #sidebar-menu ul li > a {
    background: transparent !important;
    color: #a9d6c5 !important;
}
.sidebar #sidebar-menu ul li > a .menu-text { color: #a9d6c5 !important; }
.sidebar #sidebar-menu ul li > a:hover {
    background: rgba(29, 158, 117, .14) !important;
    color: #ffffff !important;
}
.sidebar #sidebar-menu ul li > a:hover .menu-text { color: #ffffff !important; }
.sidebar #sidebar-menu ul li.active > a {
    background: rgba(29, 158, 117, .85) !important;
    color: var(--mag-emerald-active-text) !important;
}
.sidebar #sidebar-menu ul li.active > a .menu-text { color: var(--mag-emerald-active-text) !important; }

/* Clickable activity name → opens the Activity Detail modal (Info/Comments/Work Log/History) */
.activity-detail-link {
    color: var(--mag-teal-700, #0f766e);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.activity-detail-link:hover,
.activity-detail-link:focus {
    color: var(--mag-green, #1d9e75);
    text-decoration: underline;
}

/* ================================================================
   Compact emerald navigation shell
   Final sidebar/topbar overrides for the flyout menu direction.
   ================================================================ */
.header {
    min-height: 58px;
    background: #0c4137 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
.header .header-block-collapse {
    padding-left: 18px !important;
    padding-right: 12px !important;
}
.header .collapse-btn {
    width: 24px;
    height: 24px;
    color: #eafff6 !important;
    font-size: 18px !important;
}
.header .header-block-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-left: 0 !important;
}
.header .hdr-company-mark {
    width: 23px;
    height: 23px;
    display: inline-grid;
    place-items: center;
    border-radius: 7px;
    background: #20a173;
    color: #06352d;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}
.header .hdr-company {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}
.header .header-block-search {
    margin-left: auto !important;
}
.header .hdr-search {
    width: 250px;
    height: 36px;
    border-radius: 9px;
    background: #09392f !important;
    border: 1px solid rgba(156, 242, 210, .18) !important;
}
.header .hdr-search .fa {
    color: #9cf2d2 !important;
    font-size: 15px !important;
}
.header .hdr-search input {
    color: #ffffff !important;
    font-size: 15px !important;
}
.header .hdr-search input::placeholder {
    color: #d9f7ed !important;
}
.header .nav-profile,
.header .nav-profile > li > a {
    display: flex;
    align-items: center;
}
.header .nav-profile > li > a {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.sidebar,
.sidebar .sidebar-container,
.sidebar .sidebar-header,
.sidebar .sidebar-footer {
    background: #073b32 !important;
}
.sidebar,
.sidebar .sidebar-container {
    width: 255px !important;
}
.sidebar {
    border-right: 0 !important;
    box-shadow: none !important;
}
.sidebar .menu {
    padding: 10px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.sidebar #sidebar-menu {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
.sidebar #sidebar-menu > li {
    margin: 0 !important;
}
.sidebar #sidebar-menu > li > a {
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #dffcf1 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
.sidebar #sidebar-menu > li > a .menu-text {
    flex: 1 1 auto;
    min-width: 0;
    color: #dffcf1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar #sidebar-menu > li > a .fa:first-child,
.sidebar #sidebar-menu > li > a .ti:first-child {
    width: 18px !important;
    flex: 0 0 18px;
    color: #9cf2d2 !important;
    font-size: 17px !important;
    text-align: center;
}
.sidebar #sidebar-menu > li > a .menu-arrow {
    margin-left: auto !important;
    color: #9cf2d2 !important;
}
.sidebar #sidebar-menu > li > a:hover,
.sidebar #sidebar-menu > li.flyout-open > a {
    background: rgba(255, 255, 255, .04) !important;
    color: #ffffff !important;
}
.sidebar #sidebar-menu > li.active > a,
.sidebar #sidebar-menu > li > a.active {
    background: #20a173 !important;
    color: #ffffff !important;
}
.sidebar #sidebar-menu > li > a:hover .menu-text,
.sidebar #sidebar-menu > li > a:hover .fa:first-child,
.sidebar #sidebar-menu > li > a:hover .ti:first-child,
.sidebar #sidebar-menu > li > a:hover .menu-arrow,
.sidebar #sidebar-menu > li.flyout-open > a .menu-text,
.sidebar #sidebar-menu > li.flyout-open > a .fa:first-child,
.sidebar #sidebar-menu > li.flyout-open > a .ti:first-child,
.sidebar #sidebar-menu > li.flyout-open > a .menu-arrow,
.sidebar #sidebar-menu > li.active > a .menu-text,
.sidebar #sidebar-menu > li.active > a .fa:first-child,
.sidebar #sidebar-menu > li.active > a .ti:first-child,
.sidebar #sidebar-menu > li.active > a .menu-arrow {
    color: #ffffff !important;
}

.sidebar #sidebar-menu li > ul {
    background: #0d463b !important;
    border: 0 !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: 0 14px 32px rgba(1, 37, 32, .28) !important;
    padding: 14px 0 !important;
    min-width: 242px !important;
}
.sidebar #sidebar-menu li > ul li > a {
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 0 20px !important;
    border-radius: 0 !important;
    color: #eafff6 !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
.sidebar #sidebar-menu li > ul li > a .menu-text {
    flex: 1 1 auto;
    color: #eafff6 !important;
    white-space: nowrap;
}
.sidebar #sidebar-menu li > ul li > a .fa:first-child,
.sidebar #sidebar-menu li > ul li > a .ti:first-child,
.sidebar #sidebar-menu li > ul li > a .menu-item-auto-icon {
    width: 18px !important;
    flex: 0 0 18px;
    color: #74d7b5 !important;
    font-size: 15px !important;
    text-align: center;
}
.sidebar #sidebar-menu li > ul li > a:hover,
.sidebar #sidebar-menu li > ul li.flyout-open > a {
    background: rgba(32, 161, 115, .20) !important;
    color: #ffffff !important;
}
.sidebar #sidebar-menu .fly-head {
    color: #64d0aa !important;
    padding: 6px 20px 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}