/* ============================================================
   DARK NEUMORPHIC THEME  -  "Neumorphic dashboard UI kit. Admin
   panel template with infographic elements, HUD" (dark version,
   by alexdndz). Loaded after AdminLTE, style.css and ticket.css.
   Colours were measured from the reference screenshot.

   Deep navy everywhere; cards are slightly lighter navy, lifted by
   a dark shadow (bottom-right) and a faint light one (top-left).
   Accents: cyan, pink-red, purple, periwinkle.
   ============================================================ */
:root {
    --dk-bg:        #1b2049;   /* page */
    --dk-panel:     #1d224c;   /* sidebar, top bar */
    --dk-card:      #232750;   /* cards */
    --dk-deep:      #171b40;   /* inputs, insets */
    --dk-raise-d:   #12153a;   /* raised: dark shadow */
    --dk-raise-l:   #2b3063;   /* raised: light shadow */
    --dk-line:      #30385b;   /* borders / separators */
    --dk-ink:       #e9ecf5;   /* text */
    --dk-ink-2:     #b4b8cf;   /* secondary text */
    --dk-ink-3:     #9ba0c4;   /* muted (5.6:1 on cards; was #7d82a3, too dull) */
    --dk-strong:    #fff;      /* emphasised text on panels (hover, active, values) */
    --dk-surface-2: #2b3063;   /* raised chips, tracks, hover rows */
    --dk-edge:      #262b55;   /* top bar / sidebar edge */
    --dk-hover:     rgba(255, 255, 255, .04);
    --dk-stripe:    rgba(255, 255, 255, .025);
    --dk-chip:      rgba(255, 255, 255, .12);

    --dk-cyan:      #0dade8;
    --dk-cyan-2:    #00bbf2;
    --dk-pink:      #ff2d6b;
    --dk-pink-2:    #ff6eb3;
    --dk-purple:    #a32ffa;
    --dk-peri:      #727ae2;
    --dk-orange:    #ff8a3d;
    --dk-green:     #21c993;

    --dk-g-cyan:    linear-gradient(135deg, #34d3ff 0%, #0a8fe0 100%);
    --dk-g-pink:    linear-gradient(135deg, #ff6e9a 0%, #f01f5c 100%);
    --dk-g-purple:  linear-gradient(135deg, #c46bff 0%, #8a26f0 100%);
    --dk-g-orange:  linear-gradient(135deg, #ffb26b 0%, #ff6f3d 100%);
    --dk-g-green:   linear-gradient(135deg, #57e8bb 0%, #19b783 100%);

    --dk-raised:    6px 6px 14px var(--dk-raise-d), -4px -4px 12px var(--dk-raise-l);
    --dk-raised-sm: 3px 3px 8px var(--dk-raise-d), -2px -2px 7px var(--dk-raise-l);
    --dk-pressed:   inset 3px 3px 7px var(--dk-raise-d), inset -2px -2px 6px var(--dk-raise-l);

    --dk-font:      'Poppins', 'Source Sans Pro', Arial, sans-serif;
}

/* ---------- Light mode ----------
   The same panel, re-coloured: switched by the sun / moon button in the top
   bar (html[data-theme="light"], remembered per browser). Every surface and
   text colour above is a variable, so only the palette changes here; accents
   and gradients stay, cyan is deepened a touch so links read on white. */
html[data-theme="light"] {
    --dk-bg:        #eef0f8;
    --dk-panel:     #ffffff;
    --dk-card:      #ffffff;
    --dk-deep:      #f4f5fb;
    --dk-raise-d:   #d6d9ea;
    --dk-raise-l:   #ffffff;
    --dk-line:      #e2e4f0;
    --dk-ink:       #1d224c;
    --dk-ink-2:     #4a4f75;
    --dk-ink-3:     #63688b;
    --dk-strong:    #1d224c;
    --dk-surface-2: #e8eaf5;
    --dk-edge:      #e2e4f0;
    --dk-hover:     rgba(29, 34, 76, .04);
    --dk-stripe:    rgba(29, 34, 76, .025);
    --dk-chip:      rgba(29, 34, 76, .08);

    --dk-cyan-2:    #0a8fe0;

    --dk-raised:    6px 6px 16px rgba(29, 34, 76, .08), -4px -4px 12px rgba(255, 255, 255, .9);
    --dk-raised-sm: 3px 3px 8px rgba(29, 34, 76, .07), -2px -2px 7px rgba(255, 255, 255, .9);
    --dk-pressed:   inset 2px 2px 6px rgba(29, 34, 76, .08), inset -2px -2px 6px rgba(255, 255, 255, .9);
}
html[data-theme="light"] a:hover,
html[data-theme="light"] a:focus { color: #0670b8; }
html[data-theme="light"] .dk-side-ring .dk-ring::after { border-color: rgba(29, 34, 76, .25); }

/* Brief colour fade while switching modes (class added for ~400ms by the toggle) */
html.dk-theme-switching,
html.dk-theme-switching *,
html.dk-theme-switching *::before,
html.dk-theme-switching *::after {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}

/* Sun / moon toggle in the top bar: outlined pill like the other buttons */
.dk-theme-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 7px 8px 0 0;
    padding: 0 !important;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--dk-ink-2) !important;
    box-shadow: inset 0 0 0 1px var(--dk-line);
    font-size: 16px;
    cursor: pointer;
    transition: color .2s, background .2s, box-shadow .2s, transform .2s;
}
.dk-theme-toggle:hover,
.dk-theme-toggle:focus-visible {
    background: rgba(13, 173, 232, .16) !important;
    color: var(--dk-strong) !important;
    box-shadow: inset 0 0 0 1px var(--dk-cyan), 0 0 0 3px rgba(13, 173, 232, .18), 0 4px 14px rgba(13, 173, 232, .25);
    transform: translateY(-1px);
    outline: none;
}
.dk-theme-toggle:active { transform: translateY(0) scale(.94); }
/* Shows the mode you would switch to: a sun while dark, a moon while light */
.dk-theme-toggle .fa-sun-o { color: #ffb020; }
.dk-theme-toggle .fa-moon-o { display: none; color: #727ae2; }
html[data-theme="light"] .dk-theme-toggle .fa-sun-o { display: none; }
html[data-theme="light"] .dk-theme-toggle .fa-moon-o { display: inline-block; }

/* ---------- Base ---------- */
html, body,
.wrapper,
.content-wrapper,
.right-side,
.layout-top-nav .wrapper {
    background: var(--dk-bg) !important;
}

body { font-family: var(--dk-font); color: var(--dk-ink-2); }

h1, h2, h3, h4, h5, h6, b, strong { color: var(--dk-ink); }
a { color: var(--dk-cyan-2); }
a:hover, a:focus { color: #5fd6ff; }
.text-muted, small.text-muted { color: var(--dk-ink-3) !important; }
hr { border-color: var(--dk-line); }

/* ---------- Top bar ---------- */
.skin-blue .main-header .navbar,
.skin-blue .main-header .logo {
    background: var(--dk-panel) !important;
    border-bottom: 1px solid var(--dk-edge);
}

.skin-blue .main-header .logo { border-right: 0 !important; }

.skin-blue .main-header .navbar .sidebar-toggle,
.skin-blue .main-header .navbar .nav > li > a {
    color: var(--dk-ink) !important;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover,
.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > .open > a,
.skin-blue .main-header .logo:hover {
    background: var(--dk-hover) !important;
    color: var(--dk-strong) !important;
}

.skin-blue .main-header .navbar .user-image {
    border-radius: 50%;
    padding: 2px;
    background: var(--dk-g-purple);
}

/* Logo: gradient ticket badge + two-line name (title + cyan caption) */
.skin-blue .main-header .logo .logo-lg {
    display: flex;
    align-items: center;
    height: 50px;
    text-align: left;
}
.skin-blue .main-header .logo .logo-mini {
    display: none;
    height: 50px;
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px) {
    .sidebar-mini.sidebar-collapse .main-header .logo > .logo-lg { display: none; }
    .sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini { display: flex; }
}
@media (max-width: 767px) {
    .skin-blue .main-header .logo .logo-lg { justify-content: center; }
}

.dk-logo-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff6e9a 0%, #c43bff 55%, #6a5cff 100%);
    color: #fff;
    font-size: 16px;
    box-shadow: 0 4px 14px rgba(196, 59, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
    transform: rotate(-8deg);
    transition: transform .25s ease, box-shadow .25s ease;
}
.dk-logo-dot .fa { transform: rotate(8deg); }

.dk-logo-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 12px;
    line-height: 1.15;
    font-family: var(--dk-font);
    white-space: nowrap;
}
.dk-logo-name b {
    color: var(--dk-strong);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
}
.dk-logo-name small {
    margin-top: 2px;
    color: var(--dk-cyan-2);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.skin-blue .main-header .logo:hover .dk-logo-dot {
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 6px 18px rgba(196, 59, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.skin-blue .main-header .logo:hover .dk-logo-dot .fa { transform: none; }

/* Dropdowns (user menu) */
.dropdown-menu,
.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    background: var(--dk-card) !important;
    border-color: var(--dk-line) !important;
}

.dropdown-menu > li > a { color: var(--dk-ink-2); }
.dropdown-menu > li > a:hover { background: var(--dk-surface-2); color: var(--dk-strong); }
.skin-blue .main-header li.user-header { background: var(--dk-g-purple) !important; }

/* ---------- Sidebar ---------- */
.skin-blue .main-sidebar,
.skin-blue .left-side {
    background: var(--dk-panel) !important;
    border-right: 1px solid var(--dk-edge);
}


.skin-blue .sidebar-menu > li.header {
    background: transparent !important;
    color: var(--dk-ink-3) !important;
    font-family: var(--dk-font);
    letter-spacing: 1.5px;
    font-size: 11px;
}

.skin-blue .sidebar-menu > li {
    margin: 0 14px;
    border-bottom: 1px solid var(--dk-line);
}

.skin-blue .sidebar-menu > li > a {
    color: var(--dk-ink-2) !important;
    font-family: var(--dk-font);
    font-size: 14px;
    padding: 14px 6px;
    border-left: 0 !important;
    background: transparent !important;
}

.skin-blue .sidebar-menu > li > a > .fa { color: var(--dk-ink-3); width: 26px; }

.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
    color: var(--dk-strong) !important;
}

.skin-blue .sidebar-menu > li.active > a > .fa,
.skin-blue .sidebar-menu > li.menu-open > a > .fa { color: var(--dk-cyan-2); }

.skin-blue .sidebar-menu > li > .treeview-menu {
    background: var(--dk-deep) !important;
    border-radius: 12px;
    margin: 0 0 12px !important;
    padding: 6px 0;
    box-shadow: var(--dk-pressed);
}

.skin-blue .sidebar-menu .treeview-menu > li > a {
    color: var(--dk-ink-2) !important;
    font-family: var(--dk-font);
    font-size: 13px !important;
    padding: 8px 5px 8px 16px;
}

.skin-blue .sidebar-menu .treeview-menu > li.active > a,
.skin-blue .sidebar-menu .treeview-menu > li > a:hover {
    color: var(--dk-strong) !important;
}

.skin-blue .sidebar-menu .treeview-menu > li.active > a > .fa { color: var(--dk-cyan-2); }

/* ---------- Page header ---------- */
.content-header > h1 { color: var(--dk-ink); font-family: var(--dk-font); font-weight: 600; }
.content-header > h1 > small { color: var(--dk-ink-3); }
.content-header > .breadcrumb > li,
.content-header > .breadcrumb > li > a { color: var(--dk-ink-3); }
.content-header > .breadcrumb > li.active { color: var(--dk-ink-2); }

/* ---------- Cards ---------- */
.box,
.info-box,
.ticket-hero,
.task-card,
.public-card,
.zt-mcard,
.profile-card,
.callout {
    background: var(--dk-card) !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: var(--dk-raised) !important;
    color: var(--dk-ink-2);
}

.box { margin-bottom: 24px; }
.box > .box-body, .box-body, .box-footer { background: transparent !important; }
.box-footer { border-top: 1px solid var(--dk-line) !important; }

.box > .box-header,
.box > .box-header.with-border {
    background: transparent;
    border-bottom: 1px solid var(--dk-line);
}

.box .box-header .box-title {
    color: var(--dk-ink);
    font-family: var(--dk-font);
    font-weight: 500;
    font-size: 15px;
}

.box .box-header .box-title > .fa { color: var(--dk-cyan-2); margin-right: 4px; }
.box.box-success .box-title > .fa { color: var(--dk-green); }
.box.box-warning .box-title > .fa { color: var(--dk-orange); }
.box.box-info .box-title > .fa    { color: var(--dk-purple); }
.box .btn-box-tool { color: var(--dk-ink-3); }
.box .btn-box-tool:hover { color: var(--dk-strong); }

.detail-card {
    background: var(--dk-panel) !important;
    border: 1px solid var(--dk-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.detail-card:hover { border-color: var(--dk-cyan) !important; background: var(--dk-panel) !important; }
.detail-info-label { color: var(--dk-ink-3) !important; }
.detail-info-value { color: var(--dk-ink) !important; }

/* ---------- Dashboard info boxes ---------- */
.info-box { padding: 12px; min-height: 96px; }

.info-box-icon {
    width: 70px !important;
    height: 70px !important;
    line-height: 70px !important;
    border-radius: 16px !important;
    font-size: 28px !important;
    color: #fff !important;
}

.info-box-icon.bg-aqua   { background: var(--dk-g-cyan) !important;   box-shadow: 0 0 18px rgba(13, 173, 232, .45); }
.info-box-icon.bg-red    { background: var(--dk-g-pink) !important;   box-shadow: 0 0 18px rgba(255, 45, 107, .45); }
.info-box-icon.bg-yellow { background: var(--dk-g-orange) !important; box-shadow: 0 0 18px rgba(255, 138, 61, .45); }
.info-box-icon.bg-green  { background: var(--dk-g-purple) !important; box-shadow: 0 0 18px rgba(163, 47, 250, .45); }

.info-box-content { margin-left: 84px; padding-top: 8px; }
.info-box-text { color: var(--dk-ink-3); font-family: var(--dk-font); font-size: 12px; text-transform: none; }
.info-box-number { color: var(--dk-ink); font-family: var(--dk-font); font-size: 28px; font-weight: 600; }

/* ---------- Buttons ----------
   One look for every button, matching the public "New Ticket / Track Ticket"
   pills: outlined pill at rest, cyan glow + lift on hover, purple gradient
   when active. Coloured buttons keep their colour (red still means delete)
   but share the same hover / press motion. Outlines are inset box-shadows,
   not borders, so outlined and filled buttons stay the same size. */
.btn {
    border-radius: 999px !important;
    font-family: var(--dk-font);
    font-weight: 600;
    border: 0 !important;
    transition: color .2s, background .2s, box-shadow .2s, transform .2s, filter .2s;
}
.btn.rounded-circle { border-radius: 50% !important; }
.btn:focus, .btn:active:focus, .btn.active:focus { outline: none !important; }

/* Neutral buttons (Profile, Sign out, Copy link, Cancel...): outlined pill */
.btn-default,
.btn-secondary,
.btn-outline-light {
    background: transparent !important;
    color: var(--dk-ink-2) !important;
    box-shadow: inset 0 0 0 1px var(--dk-line) !important;
}
.btn-default:hover, .btn-default:focus-visible,
.btn-secondary:hover, .btn-secondary:focus-visible,
.btn-outline-light:hover, .btn-outline-light:focus-visible,
.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default:hover {
    background: rgba(13, 173, 232, .16) !important;
    color: var(--dk-strong) !important;
    box-shadow: inset 0 0 0 1px var(--dk-cyan), 0 0 0 3px rgba(13, 173, 232, .18), 0 4px 14px rgba(13, 173, 232, .25) !important;
    transform: translateY(-1px);
}

/* Coloured buttons: gradient fill, glow ring in their own colour on hover */
.btn-primary { background: var(--dk-g-cyan) !important;   color: #fff !important; box-shadow: 0 0 12px rgba(13, 173, 232, .4) !important; }
.btn-info    { background: var(--dk-g-purple) !important; color: #fff !important; box-shadow: 0 0 12px rgba(163, 47, 250, .4) !important; }
.btn-success { background: var(--dk-g-green) !important;  color: #fff !important; box-shadow: 0 0 12px rgba(33, 201, 147, .4) !important; }
.btn-warning { background: var(--dk-g-orange) !important; color: #fff !important; box-shadow: 0 0 12px rgba(255, 138, 61, .4) !important; }
.btn-danger  { background: var(--dk-g-pink) !important;   color: #fff !important; box-shadow: 0 0 12px rgba(255, 45, 107, .4) !important; }
.bg-purple.btn { background: var(--dk-g-purple) !important; }
.bg-navy.btn { background: #3a4070 !important; }

.btn-primary:hover, .btn-primary:focus-visible { box-shadow: 0 0 0 3px rgba(13, 173, 232, .25), 0 6px 18px rgba(13, 173, 232, .5) !important; }
.btn-info:hover,    .btn-info:focus-visible    { box-shadow: 0 0 0 3px rgba(163, 47, 250, .25), 0 6px 18px rgba(163, 47, 250, .55) !important; }
.btn-success:hover, .btn-success:focus-visible { box-shadow: 0 0 0 3px rgba(33, 201, 147, .25), 0 6px 18px rgba(33, 201, 147, .5) !important; }
.btn-warning:hover, .btn-warning:focus-visible { box-shadow: 0 0 0 3px rgba(255, 138, 61, .25), 0 6px 18px rgba(255, 138, 61, .5) !important; }
.btn-danger:hover,  .btn-danger:focus-visible  { box-shadow: 0 0 0 3px rgba(255, 45, 107, .25), 0 6px 18px rgba(255, 45, 107, .5) !important; }
.btn-primary:hover, .btn-info:hover, .btn-success:hover, .btn-warning:hover, .btn-danger:hover,
.bg-purple.btn:hover, .bg-navy.btn:hover {
    color: #fff !important;
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Active / selected (toggle groups, current choice): purple gradient pill */
.btn.active,
.btn-group > .btn.active {
    background: var(--dk-g-purple) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(163, 47, 250, .45) !important;
}
.btn.active:hover {
    box-shadow: 0 0 0 3px rgba(163, 47, 250, .25), 0 6px 18px rgba(163, 47, 250, .55) !important;
    filter: brightness(1.1);
}

/* Pressed: settle back down */
.btn:active, .btn.active:active { transform: translateY(0) scale(.98); }

/* Text-only buttons stay plain */
.btn-link, .btn-box-tool { box-shadow: none !important; transform: none !important; background: transparent !important; }

/* Grouped buttons: small gap instead of fused edges (each is a full pill) */
.btn-group > .btn + .btn { margin-left: 6px; }

/* ---------- Labels / badges: pills ---------- */
.label { border-radius: 10px; padding: .3em .75em; font-weight: 600; }
.label-primary, .bg-light-blue { background: var(--dk-cyan) !important; color: #fff !important; }
.label-info, .bg-aqua         { background: var(--dk-peri) !important; color: #fff !important; }
.label-success, .bg-green     { background: var(--dk-green) !important; color: #fff !important; }
.label-warning, .bg-yellow    { background: var(--dk-orange) !important; color: #fff !important; }
.label-danger, .bg-red        { background: var(--dk-pink) !important; color: #fff !important; }
.label-default                { background: #4a5080 !important; color: #fff !important; }
.bg-purple                    { background: var(--dk-purple) !important; color: #fff !important; }
.bg-navy                      { background: #3a4070 !important; color: #fff !important; }
.bg-teal, .bg-olive           { background: var(--dk-cyan) !important; }
.bg-lime                      { background: var(--dk-pink-2) !important; color: #fff !important; }
.bg-gray                      { background: var(--dk-surface-2) !important; color: var(--dk-ink) !important; }

/* ---------- Progress ---------- */
.progress {
    background: var(--dk-deep) !important;
    box-shadow: var(--dk-pressed) !important;
    border-radius: 8px !important;
}

.progress-bar { background: linear-gradient(90deg, #4cc9ff, #727ae2); border-radius: 8px; }
.progress-bar-success { background: linear-gradient(90deg, #57e8bb, #19b783) !important; }
.progress-bar-aqua, .progress-bar-info { background: linear-gradient(90deg, #4cc9ff, #727ae2) !important; }
.progress-bar-warning, .progress-bar-yellow { background: linear-gradient(90deg, #ffb26b, #ff6f3d) !important; }
.progress-bar-danger, .progress-bar-red { background: linear-gradient(90deg, #ff6eb3, #ff2d6b) !important; }

/* ---------- Forms ---------- */
.form-control,
.input-group-addon,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
#applyFilter .form-control-sm,
#applyFilter .select2-container--default .select2-selection--single,
#applyFilter input[type="text"],
#applyFilter input[type="date"],
#applyFilter select.form-control {
    background: var(--dk-deep) !important;
    border: 1px solid var(--dk-line) !important;
    color: var(--dk-ink) !important;
    border-radius: 10px !important;
}

.form-control::placeholder { color: var(--dk-ink-3); }
.form-control:focus { border-color: var(--dk-cyan) !important; box-shadow: 0 0 0 2px rgba(13, 173, 232, .25) !important; }
select.form-control option { background: var(--dk-card); color: var(--dk-ink); }

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered { color: var(--dk-ink) !important; }

.select2-dropdown { background: var(--dk-card) !important; border-color: var(--dk-line) !important; color: var(--dk-ink-2); }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--dk-surface-2); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--dk-cyan) !important; color: #fff; }
.select2-container--default .select2-search--dropdown .select2-search__field { background: var(--dk-deep); border-color: var(--dk-line); color: var(--dk-ink); }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--dk-surface-2); border-color: var(--dk-line); color: var(--dk-ink); }

.filter-toggle-btn {
    background: var(--dk-card) !important;
    color: var(--dk-ink) !important;
    border: 1px solid var(--dk-line) !important;
    box-shadow: var(--dk-raised-sm) !important;
}

#applyFilter .card-body { background: var(--dk-card) !important; border-color: var(--dk-line) !important; }
.form-label, label { color: var(--dk-ink-2); }

/* ---------- Tables / DataTables ---------- */
.table { background: transparent; color: var(--dk-ink-2); }
.table > thead > tr > th { color: var(--dk-ink); font-family: var(--dk-font); font-weight: 600; border-bottom: 1px solid var(--dk-line) !important; }

.table > thead > tr > th,
.table > tbody > tr > td,
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: var(--dk-line) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) { background: var(--dk-stripe) !important; }
.table-striped > tbody > tr:nth-of-type(even) { background: transparent !important; }
.table-hover > tbody > tr:hover, .table > tbody > tr:hover { background: rgba(13, 173, 232, .06) !important; }

.dataTables_wrapper,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--dk-ink-2) !important; }

.page-link,
.pagination > li > a,
.pagination > li > span {
    background: var(--dk-card) !important;
    border-color: var(--dk-line) !important;
    color: var(--dk-ink-2) !important;
}

.page-link:hover,
.pagination > li > a:hover {
    background: rgba(13, 173, 232, .16) !important;
    border-color: var(--dk-cyan) !important;
    color: var(--dk-strong) !important;
}

.page-item.active .page-link,
.pagination > .active > a,
.pagination > .active > a:hover {
    background: var(--dk-g-purple) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.page-item.disabled .page-link { color: var(--dk-ink-3) !important; }

/* ---------- Slide-in drawer ---------- */
#globalDrawer {
    background: var(--dk-panel) !important;
    border-color: var(--dk-line) !important;
    color: var(--dk-ink-2);
}

#globalDrawer .drawer-header {
    background: linear-gradient(135deg, #2b3063 0%, #232750 100%) !important;
    border-bottom: 1px solid var(--dk-cyan);
}
#globalDrawer .drawer-header h3, #drawerTitle { color: var(--dk-ink) !important; }
.closeDrawer { color: var(--dk-ink) !important; background: var(--dk-surface-2) !important; }

/* ---------- Timeline (ticket history) ---------- */
.timeline:before { background: var(--dk-line) !important; }
.timeline > li > .timeline-item {
    background: var(--dk-card) !important;
    color: var(--dk-ink-2);
    box-shadow: var(--dk-raised-sm) !important;
}
.timeline > li > .timeline-item > .timeline-header { color: var(--dk-ink); border-bottom-color: var(--dk-line) !important; }
.timeline > li > .timeline-item > .time { color: var(--dk-ink-3); }
.timeline > li > .timeline-item > .timeline-body { color: var(--dk-ink-2) !important; }
.timeline > .time-label > span { background: var(--dk-surface-2) !important; color: var(--dk-ink) !important; }
.timeline > li > .fa { box-shadow: 0 0 0 4px var(--dk-card); }

/* ---------- Team chat ---------- */
.direct-chat-text {
    background: var(--dk-surface-2) !important;
    border-color: var(--dk-surface-2) !important;
    color: var(--dk-ink) !important;
}
.direct-chat-text:before, .direct-chat-text:after { border-right-color: var(--dk-surface-2) !important; }
.right .direct-chat-text, .direct-chat-primary .right > .direct-chat-text {
    background: var(--dk-cyan) !important;
    border-color: var(--dk-cyan) !important;
    color: #fff !important;
}
.direct-chat-primary .right > .direct-chat-text:before,
.direct-chat-primary .right > .direct-chat-text:after { border-left-color: var(--dk-cyan) !important; }
.direct-chat-name { color: var(--dk-ink); }
.direct-chat-timestamp { color: var(--dk-ink-3); }

/* ---------- Ticket desk pieces (ticket.css) ---------- */
.status-tabs a {
    background: var(--dk-card);
    border: 1px solid var(--dk-line);
    color: var(--dk-ink-2);
    font-family: var(--dk-font);
    box-shadow: var(--dk-raised-sm);
}
.status-tabs a { border-radius: 999px; transition: color .2s, background .2s, border-color .2s, box-shadow .2s, transform .2s; }
.status-tabs a:hover,
.status-tabs a:focus-visible {
    color: var(--dk-strong);
    background: rgba(13, 173, 232, .16);
    border-color: var(--dk-cyan);
    box-shadow: 0 0 0 3px rgba(13, 173, 232, .18), 0 4px 14px rgba(13, 173, 232, .25);
    transform: translateY(-1px);
    outline: none;
}
.status-tabs a.active { background: var(--dk-g-purple); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(163, 47, 250, .45); }
.status-tabs a.active:hover { box-shadow: 0 0 0 3px rgba(163, 47, 250, .25), 0 6px 18px rgba(163, 47, 250, .55); filter: brightness(1.1); }
.status-tabs a .tab-count { background: var(--dk-chip); }

.ticket-no { color: var(--dk-cyan-2) !important; }
.ticket-hero h2, .task-card .task-title { color: var(--dk-ink) !important; font-family: var(--dk-font); }
.ticket-hero .hero-meta, .task-card .task-meta { color: var(--dk-ink-3); }
.ticket-hero .hero-meta i { color: var(--dk-cyan-2); }
.ticket-description, .task-card .task-desc { color: var(--dk-ink-2) !important; }

.task-card { border-left: 4px solid #4a5080 !important; }
.task-card.status-on_going  { border-left-color: var(--dk-peri) !important; }
.task-card.status-on_hold   { border-left-color: var(--dk-orange) !important; }
.task-card.status-completed { border-left-color: var(--dk-green) !important; }
.task-card.status-cancelled { border-left-color: var(--dk-pink) !important; }

.complaint-item { background: rgba(255, 138, 61, .08) !important; border-color: rgba(255, 138, 61, .35) !important; color: var(--dk-ink-2); }
.complaint-item.is-resolved { background: rgba(33, 201, 147, .08) !important; border-color: rgba(33, 201, 147, .35) !important; }
.complaint-item .complaint-reply { background: var(--dk-panel) !important; border-left-color: var(--dk-cyan) !important; }

/* Complaint conversation (admin/tickets/_complaint_thread): chat bubbles,
   the viewer's own side on the right; staff cyan, requester orange */
.complaint-thread { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 6px; }
.cmsg {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--dk-panel);
    border: 1px solid var(--dk-line);
    color: var(--dk-ink-2);
}
.cmsg-theirs { align-self: flex-start; border-bottom-left-radius: 4px; }
.cmsg-mine   { align-self: flex-end;   border-bottom-right-radius: 4px; }
.cmsg-staff     { border-left: 3px solid var(--dk-cyan); }
.cmsg-requester { border-left: 3px solid var(--dk-orange); }
.cmsg-mine.cmsg-staff     { background: rgba(13, 173, 232, .10); }
.cmsg-mine.cmsg-requester { background: rgba(255, 138, 61, .10); }
.cmsg-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.cmsg-meta strong { color: var(--dk-ink); font-size: 13px; }
.cmsg-meta small { color: var(--dk-ink-3); font-size: 11px; }
.cmsg-tag {
    font-size: 10px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
    padding: 1px 7px; border-radius: 999px;
    background: rgba(255, 138, 61, .15); color: var(--dk-orange);
}
.cmsg-text { white-space: pre-wrap; word-wrap: break-word; font-size: 13.5px; line-height: 1.55; }
.complaint-reply-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.complaint-reply-form textarea { flex: 1; resize: vertical; }
.complaint-reply-form .btn { flex: none; }
@media (max-width: 575px) {
    .cmsg { max-width: 100%; }
    .complaint-reply-form { flex-direction: column; align-items: stretch; }
}

.assign-row, .merge-option { background: var(--dk-panel) !important; border-color: var(--dk-line) !important; color: var(--dk-ink-2); }
.dash-list-item { border-bottom-color: var(--dk-line) !important; }
.progress-cell b, .progress-cell small { color: var(--dk-ink-2); }

/* ---------- Text colours set directly on elements (inline styles) ---------- */
[style*="color: #2c3e50"], [style*="color:#2c3e50"],
[style*="color: #0f172a"], [style*="color: #333"], [style*="color: #444"] { color: var(--dk-ink) !important; }
[style*="color: #555"], [style*="color: #64748b"], [style*="color: #666"] { color: var(--dk-ink-2) !important; }
.ticket-progress small { color: var(--dk-ink-2) !important; }
.callout[style*="background: #f3f0ff"] { background: rgba(163, 47, 250, .12) !important; color: var(--dk-ink-2) !important; }

/* ---------- Profile page (has its own built-in styles) ---------- */
.profile-card [style*="border-left"] { border-left-color: var(--dk-line) !important; }
.form-segment-title { color: var(--dk-ink-3) !important; }
.modern-label { color: var(--dk-ink-2) !important; }
.modern-input {
    background: var(--dk-deep) !important;
    border: 1px solid var(--dk-line) !important;
    color: var(--dk-ink) !important;
}
.modern-input:focus { background: var(--dk-deep) !important; border-color: var(--dk-cyan) !important; }
.profile-card .modern-input.modern-input-readonly { background: var(--dk-panel) !important; color: var(--dk-ink-3) !important; border-color: var(--dk-line) !important; }
.avatar-wrapper { background: var(--dk-card) !important; box-shadow: var(--dk-raised-sm) !important; }
.camera-btn { background: var(--dk-g-cyan) !important; border-color: var(--dk-card) !important; }
.premium-submit-btn { background: var(--dk-g-cyan) !important; box-shadow: 0 0 12px rgba(13, 173, 232, .4) !important; }
.system-alert { background: rgba(13, 173, 232, .1) !important; color: var(--dk-ink-2) !important; border-color: var(--dk-line) !important; }

/* ---------- Dashboard (layout of the template) ---------- */
.dk-dash { padding-top: 20px; }

.dk-tile {
    background: var(--dk-card);
    border-radius: 14px;
    box-shadow: var(--dk-raised);
    margin-bottom: 22px;
}

/* Row 1: three stats with cyan pills */
.dk-stats { display: flex; flex-wrap: wrap; padding: 6px; }

.dk-stat {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    color: var(--dk-ink-2);
}

.dk-stat + .dk-stat { border-left: 1px solid var(--dk-line); }
.dk-stat:hover { color: var(--dk-ink); }

.dk-stat-icon {
    flex: none;
    width: 46px;
    height: 46px;
    border: 1.5px solid var(--dk-ink-3);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--dk-ink-2);
}

.dk-stat-text { flex: 1; min-width: 0; }
.dk-stat-text b { display: block; color: var(--dk-ink); font-weight: 500; font-size: 15px; }
.dk-stat-text small { color: var(--dk-ink-3); font-size: 12px; }

.dk-pill {
    flex: none;
    background: var(--dk-g-cyan);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 14px;
    border-radius: 12px;
    box-shadow: 0 0 12px rgba(13, 173, 232, .45);
}

/* Gauges */
.dk-gauges { display: flex; gap: 18px; margin-bottom: 18px; }
.dk-gauge { flex: 1 1 0; min-width: 0; }   /* let the charts shrink to half the column */
.dk-gauge-canvas { position: relative; height: 92px; width: 100%; }
.dk-gauge-canvas canvas { max-width: 100%; }
.dk-gauge-canvas span {
    position: absolute;
    left: 0; right: 0; bottom: 4px;
    text-align: center;
    color: var(--dk-strong);
    font-size: 24px;
    font-weight: 600;
}
.dk-gauge-line { height: 2px; margin: 6px 0 8px; border-radius: 2px; }
.dk-gauge-line.pink { background: var(--dk-pink); }
.dk-gauge-line.purple { background: var(--dk-purple); }
.dk-gauge p { color: var(--dk-ink-2); font-size: 12px; line-height: 1.5; margin: 0; }

/* Small area charts */
.dk-spark { padding: 16px 18px 6px; }
.dk-spark b { display: block; color: var(--dk-ink); font-weight: 500; }
.dk-spark small { color: var(--dk-ink-3); font-size: 12px; }
.dk-spark-canvas { height: 90px; margin-top: 6px; }

/* Toggle rows */
.dk-toggles { padding: 4px 0; }

.dk-toggle-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    color: var(--dk-ink-2);
}

.dk-toggle-row + .dk-toggle-row { border-top: 1px solid var(--dk-line); }
.dk-toggle-row b { display: block; color: var(--dk-ink); font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.dk-toggle-row small { color: var(--dk-ink-3); font-size: 12px; }

.dk-switch {
    flex: none;
    position: relative;
    width: 38px;
    height: 20px;
    border-radius: 10px;
    background: var(--dk-deep);
    box-shadow: var(--dk-pressed);
}

.dk-switch i {
    position: absolute;
    top: 3px; left: 3px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: left .2s ease;
}

.dk-switch.on { background: var(--dk-g-cyan); box-shadow: 0 0 10px rgba(13, 173, 232, .5); }
.dk-switch.on i { left: 21px; }

/* Chart blocks */
.dk-chart-block { margin-bottom: 22px; }
.dk-chart-title { text-align: right; color: var(--dk-ink-3); font-size: 12px; margin-bottom: 6px; }
.dk-area-canvas { height: 230px; }
.dk-bars-canvas { height: 150px; }
.dk-line-canvas { height: 190px; }
.dk-line-block .dk-chart-title { text-align: center; }

.dk-legend { display: flex; gap: 6px; margin: 8px 0 18px; }
.dk-legend span {
    flex: 1;
    border: 1px solid var(--dk-line);
    border-radius: 4px;
    padding: 4px 8px;
    color: var(--dk-ink-2);
    font-size: 12px;
    text-align: center;
}
.dk-legend em { color: var(--dk-pink-2); font-style: normal; font-weight: 600; }

/* Horizontal bars */
.dk-hbars { margin-bottom: 18px; }
.dk-hbars > small { display: block; color: var(--dk-ink-3); font-size: 11px; margin: 2px 0 10px; }
.dk-hbar { display: flex; align-items: center; gap: 12px; }
.dk-hbar b { width: 42px; text-align: right; color: var(--dk-ink); font-weight: 600; }
.dk-hbar-track { flex: 1; height: 10px; border-radius: 6px; background: var(--dk-surface-2); overflow: hidden; }
.dk-hbar-fill { height: 100%; border-radius: 6px; }
.dk-hbar-fill.cyan { background: linear-gradient(90deg, #0dade8, #727ae2); box-shadow: 0 0 8px rgba(13, 173, 232, .5); }
.dk-hbar-fill.pink { background: linear-gradient(90deg, #ff6eb3, #ff2d6b); box-shadow: 0 0 8px rgba(255, 45, 107, .5); }

/* Sidebar ring card (bottom of the sidebar) */
.dk-side-ring {
    margin: 20px 14px;
    padding: 18px 10px 14px;
    border-radius: 14px;
    background: var(--dk-deep);
    box-shadow: var(--dk-raised);
    text-align: center;
    display: block;
}

.dk-side-ring .dk-ring {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    border-radius: 50%;
}

.dk-side-ring .dk-ring::before {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: var(--dk-deep);
}

.dk-side-ring .dk-ring::after {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 2px dotted rgba(180, 184, 207, .6);
}

.dk-side-ring .dk-ring span {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--dk-strong);
    font-size: 20px;
    font-weight: 600;
    z-index: 1;
}

.dk-side-ring .dk-ring span small { font-size: 8px; color: var(--dk-ink-2); letter-spacing: .5px; text-transform: uppercase; font-weight: 500; }
.dk-side-ring b { color: var(--dk-ink-2); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.sidebar-collapse .dk-side-ring { display: none; }

/* Top-bar tabs, search and bell (as in the template) */
.dk-tabs { float: left; margin: 0 0 0 10px; padding: 0; list-style: none; }
.dk-tabs li { display: inline-block; }
.dk-tabs a {
    display: inline-block;
    line-height: 48px;
    padding: 0 14px;
    color: var(--dk-ink-3) !important;
    font-size: 13px;
    border-bottom: 2px solid transparent;
}
.dk-tabs a:hover { color: var(--dk-ink) !important; }
.dk-tabs li.active a { color: var(--dk-strong) !important; font-weight: 600; border-bottom-color: var(--dk-strong); }

/* ---------- Pop-ups ---------- */
.swal2-popup { background: var(--dk-card) !important; color: var(--dk-ink-2) !important; }
.swal2-title, .swal2-html-container { color: var(--dk-ink) !important; }
.swal2-input, .swal2-textarea { background: var(--dk-deep) !important; color: var(--dk-ink) !important; border-color: var(--dk-line) !important; }

/* ---------- Public pages (ticket form / tracking) ---------- */
.layout-top-nav .main-header .navbar { background: var(--dk-panel) !important; }
.public-card .detail-card { background: var(--dk-panel) !important; }

/* ==========================================================
   PUBLIC PAGES: PREMIUM LIGHT
   ----------------------------------------------------------
   public/layout.blade.php sets html[data-theme="public"]. A calm
   cool-white page, white cards with a hairline border and soft
   layered shadows (no neumorphism), deep navy type, and the
   brand navy -> purple gradient kept for the hero and the main
   action. Nothing here reaches the admin panel.
   ========================================================== */
html[data-theme="public"] {
    --dk-bg:        #f5f6fb;
    --dk-panel:     #ffffff;
    --dk-card:      #ffffff;
    --dk-deep:      #f9fafc;
    --dk-line:      #e6e8f1;
    --dk-ink:       #151a3d;
    --dk-ink-2:     #50567a;
    --dk-ink-3:     #63688b;
    --dk-strong:    #151a3d;
    --dk-surface-2: #eef0f7;
    --dk-edge:      #eceef5;
    --dk-hover:     rgba(21, 26, 61, .04);
    --dk-stripe:    rgba(21, 26, 61, .02);
    --dk-chip:      rgba(21, 26, 61, .06);
    --dk-cyan-2:    #0a84d6;

    --dk-raised:    0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -14px rgba(29, 34, 76, .16);
    --dk-raised-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 12px -6px rgba(29, 34, 76, .12);
    --dk-pressed:   inset 0 1px 2px rgba(16, 24, 40, .06);

    --pb-accent:      #7c3aed;
    --pb-accent-ring: rgba(124, 58, 237, .14);
}

/* Page: cool white with two faint colour glows behind everything */
html[data-theme="public"] body,
html[data-theme="public"] .wrapper {
    background-color: #f5f6fb !important;
    background-image:
        radial-gradient(900px 500px at 0% 0%, rgba(124, 58, 237, .07), transparent 60%),
        radial-gradient(800px 500px at 100% 100%, rgba(13, 173, 232, .07), transparent 60%) !important;
    background-attachment: fixed !important;
}
html[data-theme="public"] body { color: var(--dk-ink-2); -webkit-font-smoothing: antialiased; }
html[data-theme="public"] a:hover,
html[data-theme="public"] a:focus { color: #0668b0; }

/* Header: frosted glass over the page */
html[data-theme="public"] .layout-top-nav .main-header .navbar,
html[data-theme="public"] .main-header .navbar {
    background: rgba(255, 255, 255, .78) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--dk-line) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 6px 20px -16px rgba(29, 34, 76, .35);
}
html[data-theme="public"] .main-header { position: sticky; top: 0; z-index: 1030; }

/* Cards: white, hairline border, soft depth */
html[data-theme="public"] .public-card {
    border: 1px solid var(--dk-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--dk-raised) !important;
    padding: 30px !important;
}
/* Accent edges set inline on some cards (submitted / merged / reopen) */
html[data-theme="public"] .public-card[style*="#00a65a"] { border-left: 4px solid #19b783 !important; }
html[data-theme="public"] .public-card[style*="#001f3f"] { border-left: 4px solid #1d224c !important; }
html[data-theme="public"] .public-card[style*="#605ca8"] { border-left: 4px solid var(--pb-accent) !important; }

html[data-theme="public"] .public-card h4 {
    color: var(--dk-ink);
    font-size: 17px;
    font-weight: 700 !important;
    letter-spacing: -.1px;
    margin-bottom: 16px;
}
html[data-theme="public"] .public-card h4 .fa { color: var(--pb-accent) !important; margin-right: 4px; }
html[data-theme="public"] .public-card h4 + .row { margin-bottom: 8px; }

/* Fields: label above a roomy input, no box around each one */
html[data-theme="public"] .public-card .detail-card,
html[data-theme="public"] .public-card .detail-card:hover {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 18px;
    height: auto;
}
html[data-theme="public"] .detail-info-label {
    color: var(--dk-ink-2) !important;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 7px;
}
html[data-theme="public"] .detail-info-value { color: var(--dk-ink) !important; font-weight: 600; }

html[data-theme="public"] .form-control {
    height: 46px;
    padding: 10px 14px;
    background: var(--dk-deep) !important;
    border: 1px solid var(--dk-line) !important;
    border-radius: 12px !important;
    color: var(--dk-ink) !important;
    font-size: 14.5px;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
html[data-theme="public"] textarea.form-control { height: auto; min-height: 46px; line-height: 1.6; }
html[data-theme="public"] input[type="file"].form-control { padding: 10px 12px; height: auto; }
html[data-theme="public"] .form-control:hover { border-color: #d3d6e6 !important; }
html[data-theme="public"] .form-control:focus {
    background: #fff !important;
    border-color: var(--pb-accent) !important;
    box-shadow: 0 0 0 4px var(--pb-accent-ring) !important;
}
html[data-theme="public"] .form-control.is-invalid { border-color: #e5484d !important; }
html[data-theme="public"] .input-group .form-control { border-radius: 12px 0 0 12px !important; }
html[data-theme="public"] .input-group-btn .btn { border-radius: 0 12px 12px 0 !important; height: 46px; }

/* The main action: brand gradient, soft glow, a gentle lift */
html[data-theme="public"] .btn-gradient {
    border-radius: 14px !important;
    padding: 13px 18px;
    font-size: 16px;
    letter-spacing: .2px;
    box-shadow: 0 10px 24px -10px rgba(124, 58, 237, .6) !important;
    transition: transform .2s, box-shadow .2s, filter .2s;
}
html[data-theme="public"] .btn-gradient:hover,
html[data-theme="public"] .btn-gradient:focus-visible {
    opacity: 1;
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 16px 30px -12px rgba(124, 58, 237, .7) !important;
}
html[data-theme="public"] .btn-gradient:active { transform: translateY(0) scale(.99); }

/* Ticket number: monospace chip */
html[data-theme="public"] .ticket-no {
    color: var(--pb-accent) !important;
    background: rgba(124, 58, 237, .08);
    padding: 2px 9px;
    border-radius: 8px;
}
html[data-theme="public"] .public-hero .ticket-no {
    color: #fff !important;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .25);
    display: inline-block;
    margin-bottom: 10px;
    opacity: 1 !important;
}

/* "We need something from you": soft amber, not a solid orange slab */
html[data-theme="public"] .callout.callout-warning {
    background: #fff8ee !important;
    border: 1px solid #ffe2bf !important;
    border-left: 4px solid #ff8a3d !important;
    border-radius: 14px !important;
    box-shadow: var(--dk-raised-sm) !important;
    color: #8a4b12 !important;
}
html[data-theme="public"] .callout.callout-warning h4 { color: #8a4b12 !important; }

/* Progress, tasks, timeline */
html[data-theme="public"] .progress { background: var(--dk-surface-2) !important; box-shadow: none !important; border-radius: 999px; }
html[data-theme="public"] .progress-bar { border-radius: 999px; }
html[data-theme="public"] .task-card {
    border: 1px solid var(--dk-line) !important;
    border-left-width: 4px !important;
    box-shadow: var(--dk-raised-sm) !important;
}
html[data-theme="public"] .task-card.status-pending { border-left-color: #a3a8c3 !important; }
html[data-theme="public"] .complaint-item { border-radius: 12px; }
html[data-theme="public"] .timeline > li > .timeline-item {
    border: 1px solid var(--dk-line) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
}

/* Footer */
html[data-theme="public"] .main-footer {
    background: transparent !important;
    border-top: 1px solid var(--dk-line) !important;
    color: var(--dk-ink-3);
}

/* ---------- Footer ---------- */
.main-footer { background: var(--dk-panel) !important; color: var(--dk-ink-3); border-top: 1px solid var(--dk-edge) !important; }
.main-footer strong { color: var(--dk-ink-2); }
.main-footer a { color: var(--dk-cyan-2); }

/* ---------- Readable text on every theme ----------
   These pieces come from the old light design (style.css) with dark text
   colours fixed in place, so on the dark theme they were close to invisible
   (mobile list cards 1.3:1, role pill 2.3:1, Select2 placeholder 3.0:1).
   Point them at the theme's ink colours instead. */
.zt-mcard-title,
.zt-mcard-title a,
.zt-mcard-lead { color: var(--dk-ink) !important; }
.zt-mcard-meta,
.zt-mcard-meta.has-k .zt-mcard-k { color: var(--dk-ink-3) !important; }
.zt-mcard-meta.has-k .zt-mcard-v { color: var(--dk-ink-2) !important; }

.select2-container--default .select2-selection__placeholder { color: var(--dk-ink-3) !important; }

.detail-icon { background: rgba(13, 173, 232, .12) !important; color: var(--dk-cyan-2) !important; }
.detail-role-pill { background: rgba(13, 173, 232, .12) !important; color: var(--dk-cyan-2) !important; }