/* ==========================================================================
   Arkhetupon UI theme - final
   --------------------------------------------------------------------------
   A presentation-only layer over the original HUD/Bootstrap templates. The
   look is the v2 redesign (near-black navy ground, one accent per module,
   glowing sidebar, attached page headers, Inter) rebuilt on the pre-redesign
   markup, so every controller, route, script and template stays as it was.
   It never hides, moves or renames anything the JavaScript depends on.

   Theme selection: the app sets body:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) from the saved preference,
   and the sidebar switch (.theme_mode) posts the new preference and reloads
   three seconds later. Every light rule matches on either signal:
     :is(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)):not(:has(.theme_mode)), body:has(.theme_mode:checked))
   Rules are written against :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) and rewritten mechanically.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens (dark)
   -------------------------------------------------------------------------- */
:root {
    --ark-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --ark-bg: #070a0f;
    --ark-bg-mid: #0c1016;
    --ark-surface: #0f1319;
    --ark-surface-2: #161c24;
    --ark-surface-3: #1c2430;
    --ark-input-bg: #111720;
    --ark-header-bg: rgba(12, 16, 22, 0.94);

    --ark-border: #1a2230;
    --ark-border-strong: #243040;
    --ark-divider: rgba(255, 255, 255, 0.05);

    --ark-text: #e8ecf2;
    --ark-text-2: #b6c2d1;
    --ark-muted: #7d8da3;
    --ark-heading: #f1f5f9;

    --ark-danger: #ef4444;   --ark-danger-rgb: 239, 68, 68;
    --ark-warning: #f59e0b;
    --ark-info: #3b82f6;

    --ark-mod-dashboard: #14b8a6;        --ark-mod-dashboard-rgb: 20, 184, 166;
    --ark-mod-correspondence: #22c55e;   --ark-mod-correspondence-rgb: 34, 197, 94;
    --ark-mod-documentation: #a855f7;    --ark-mod-documentation-rgb: 168, 85, 247;
    --ark-mod-workflow: #f97316;         --ark-mod-workflow-rgb: 249, 115, 22;
    --ark-mod-packages: #3b82f6;         --ark-mod-packages-rgb: 59, 130, 246;
    --ark-mod-address-book: #ec4899;     --ark-mod-address-book-rgb: 236, 72, 153;
    --ark-mod-projects: #eab308;         --ark-mod-projects-rgb: 234, 179, 8;
    --ark-mod-admin: #14b8a6;            --ark-mod-admin-rgb: 20, 184, 166;

    --ark-on-accent: #06111a;

    --ark-radius-sm: 0.375rem;
    --ark-radius: 0.5rem;
    --ark-radius-lg: 0.875rem;
    --ark-radius-xl: 1rem;

    --ark-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --ark-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35);
    --ark-shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, 0.45);

    --ark-header-h: 3.5rem;
    --ark-sidebar-w: 17rem;
    --ark-sidebar-head-h: 4.5rem;
    --ark-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ark-t: 0.18s var(--ark-ease);
    --ark-t-slow: 0.25s var(--ark-ease);

    --ark-close-filter: invert(1) grayscale(1) brightness(1.6);
    --ark-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237d8da3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    /* CKEditor's sprite is white-on-transparent; brightness(0) then invert() makes a solid icon whatever the sprite colour */
    --ark-cke-icon-filter: brightness(0) invert(1) opacity(0.82);
    --ark-cke-icon-filter-hover: brightness(0) invert(1);

    --bs-body-bg: var(--ark-bg);
    --bs-body-color: var(--ark-text);
    --bs-body-font-family: var(--ark-font);
}

/* Accent: the module the page belongs to decides it (body.ark-module-<segment>). */
body {
    --ark-accent: var(--ark-mod-dashboard);
    --ark-accent-rgb: var(--ark-mod-dashboard-rgb);
    --ark-accent-hover: color-mix(in srgb, var(--ark-accent) 82%, #000);
    --ark-accent-dim: rgba(var(--ark-accent-rgb), 0.12);
    --ark-accent-ring: rgba(var(--ark-accent-rgb), 0.35);
    --bs-theme: var(--ark-accent);
    --bs-theme-rgb: var(--ark-accent-rgb);
}
body.ark-module-correspondence { --ark-accent: var(--ark-mod-correspondence); --ark-accent-rgb: var(--ark-mod-correspondence-rgb); }
body.ark-module-documentation  { --ark-accent: var(--ark-mod-documentation);  --ark-accent-rgb: var(--ark-mod-documentation-rgb); }
body.ark-module-workflow, body.ark-module-workflow-template { --ark-accent: var(--ark-mod-workflow); --ark-accent-rgb: var(--ark-mod-workflow-rgb); }
body.ark-module-packages       { --ark-accent: var(--ark-mod-packages);       --ark-accent-rgb: var(--ark-mod-packages-rgb); }
body.ark-module-address-book   { --ark-accent: var(--ark-mod-address-book);   --ark-accent-rgb: var(--ark-mod-address-book-rgb); }
body.ark-module-projects       { --ark-accent: var(--ark-mod-projects);       --ark-accent-rgb: var(--ark-mod-projects-rgb); }
body.ark-module-admin          { --ark-accent: var(--ark-mod-admin);          --ark-accent-rgb: var(--ark-mod-admin-rgb); }

/* --------------------------------------------------------------------------
   2. Ground and type
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
    font-family: var(--ark-font) !important;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ark-text);
    background-color: var(--ark-bg) !important;
    background-image: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* the template's own ground: keep the element, repaint it. Two soft pools of colour on near-black. */
body:before {
    background-color: var(--ark-bg) !important;
    background-image:
        radial-gradient(ellipse 130% 80% at 50% -25%, rgba(var(--ark-accent-rgb), 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 95% 50%, rgba(59, 130, 246, 0.035) 0%, transparent 45%),
        radial-gradient(ellipse 50% 35% at 5% 85%, rgba(168, 85, 247, 0.025) 0%, transparent 40%) !important;
    background-size: auto !important;
    background-attachment: fixed !important;
    opacity: 1 !important;
    z-index: -5;
}
/* the template's html:after still downloads a 79KB photo behind everything; off */
html:after { display: none !important; }
.app-cover, .app-theme-cover { display: none !important; }
.app { padding-top: 0; }
/* faint wordmark behind the content, from body so it never wraps the page's own modals in a stacking context */
body:has(.app-content):after {
    content: ""; position: fixed; top: 0; bottom: 0; left: var(--ark-sidebar-w); right: 0; pointer-events: none; z-index: -1;
    background: var(--ark-text); opacity: 0.035;
    -webkit-mask: url(../img/ark-wordmark-mask.png) center / 55% auto no-repeat; mask: url(../img/ark-wordmark-mask.png) center / 55% auto no-repeat;
}
body:has(.app.app-sidebar-collapsed):after { left: 0; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--ark-font); font-weight: 600; color: var(--ark-heading); letter-spacing: -0.01em; }
a { color: var(--ark-accent); }
a:hover { color: var(--ark-accent-hover); }
hr { border-color: var(--ark-border); opacity: 1; }
::selection { background: var(--ark-accent); color: var(--ark-on-accent); }

.table, .dataTables_wrapper, .badge, .pagination, .dashboard h3, .dashboard h5, input[type="number"], input[type="date"], td, th {
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
/* scrollbars: thicker and raised - a rounded accent thumb with a lit top edge on a faintly sunken track. Chromium
   ignores ::-webkit-scrollbar once scrollbar-width/-color are set, so those two stay Firefox-only */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.16); border-radius: 999px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; background-color: rgba(var(--ark-accent-rgb), 0.5); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 65%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.25); }
::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--ark-accent-rgb), 0.75); }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-color: rgba(var(--ark-accent-rgb), 0.55) rgba(0, 0, 0, 0.14); scrollbar-width: auto; } }

.text-white { color: var(--ark-text) !important; }
.text-theme { color: var(--ark-accent) !important; }
.text-success { color: var(--ark-accent) !important; }
.text-danger { color: var(--ark-danger) !important; }
.text-muted, .text-gray-500 { color: var(--ark-muted) !important; }
.text-opacity-50, .text-opacity-60, .text-opacity-75 { --bs-text-opacity: 1; color: var(--ark-muted) !important; }
.bg-white.bg-opacity-5 { background-color: var(--ark-input-bg) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--ark-border) !important; }
.error { color: var(--ark-danger); font-size: 0.78rem; margin-top: 0.3rem; font-weight: 500; }
label.error { display: block; }
.custom_error, .custom_error1, .custom_error2, .custom_error3, .custom_error_ri, .custom_error_ct { color: var(--ark-danger); font-size: 0.78rem; }

/* --------------------------------------------------------------------------
   3. Sidebar: all chrome lives here on desktop
   -------------------------------------------------------------------------- */
.app-sidebar {
    width: var(--ark-sidebar-w);
    top: 0;
    background: linear-gradient(180deg, #0c1016 0%, #070a0f 100%);
    border-right: 1px solid rgba(var(--ark-accent-rgb), 0.08);
    box-shadow: 4px 0 32px -4px rgba(0, 0, 0, 0.5), inset -1px 0 0 rgba(var(--ark-accent-rgb), 0.06);
}
/* dot-grid texture and an ambient accent glow from the top */
.app-sidebar:before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 18px 18px;
    -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35)); mask: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35));
}
.app-sidebar:after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 260px; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse at 50% -10%, rgba(var(--ark-accent-rgb), 0.2) 0%, transparent 65%);
}
.app-sidebar .app-sidebar-content { display: flex; flex-direction: column; min-height: 100%; position: relative; z-index: 1; }
.app-sidebar .app-sidebar-content .menu { flex: 1 0 auto; position: relative; padding: 0 0.625rem 1rem; }
.app-sidebar .app-sidebar-content .menu .menu-header { display: none; }

/* header band: the logo centred, an accent wash behind it, a lit seam below */
.ark-side-brand {
    display: flex; align-items: center; justify-content: center; position: relative;
    height: var(--ark-sidebar-head-h); margin: 0 -0.625rem 1rem; padding: 0 1.25rem;
    background: linear-gradient(180deg, rgba(var(--ark-accent-rgb), 0.14) 0%, rgba(var(--ark-accent-rgb), 0.05) 60%, transparent 100%);
}
.ark-side-brand:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent 5%, rgba(var(--ark-accent-rgb), 0.55) 50%, transparent 95%); }
.ark-side-brand .ark-brand { display: inline-flex; align-items: center; justify-content: center; transition: transform var(--ark-t); }
.ark-side-brand .ark-brand:hover { transform: scale(1.04); }
.ark-brand-mark { display: block; width: 46px; height: 46px; background: url(../img/ark-logo-160.png) center / contain no-repeat; filter: drop-shadow(0 4px 10px rgba(var(--ark-accent-rgb), 0.35)); }
.ark-collapse-btn, .ark-side-user-more {
    width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; flex: none;
    border: 1px solid transparent; background: transparent; color: var(--ark-muted); border-radius: var(--ark-radius-sm); cursor: pointer; font-size: 0.95rem;
    transition: background var(--ark-t), color var(--ark-t), border-color var(--ark-t);
}
.ark-collapse-btn { position: absolute; right: 0.6rem; top: 50%; margin-top: -1rem; opacity: 0.7; }
.ark-collapse-btn:hover, .ark-collapse-btn:focus-visible { background: rgba(255, 255, 255, 0.05); border-color: var(--ark-border); color: var(--ark-text); outline: 0; opacity: 1; }

/* project switcher */
.ark-side-project { display: block; position: relative; margin: 0 0.125rem 0.75rem; }
.ark-side-project > label { display: block; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ark-muted); margin: 0 0 0.5rem; }
.ark-side-project .project_dropdown {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    padding: 0.55rem 0.8rem; font-size: 0.875rem; font-weight: 500; color: var(--ark-text); text-decoration: none;
    background: linear-gradient(135deg, rgba(var(--ark-accent-rgb), 0.14) 0%, rgba(var(--ark-accent-rgb), 0.06) 100%);
    border: 1px solid rgba(var(--ark-accent-rgb), 0.35); border-radius: var(--ark-radius-lg);
    box-shadow: 0 2px 12px rgba(var(--ark-accent-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: border-color var(--ark-t), background var(--ark-t), box-shadow var(--ark-t);
}
.ark-side-project .project_dropdown .ark-project-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ark-side-project .project_dropdown b { color: var(--ark-accent); font-size: 0.85rem; transition: transform var(--ark-t); }
.ark-side-project .project_dropdown:hover, .ark-side-project .project_dropdown[aria-expanded="true"] {
    background: linear-gradient(135deg, rgba(var(--ark-accent-rgb), 0.24) 0%, rgba(var(--ark-accent-rgb), 0.12) 100%);
    border-color: rgba(var(--ark-accent-rgb), 0.55); color: var(--ark-heading);
    box-shadow: 0 0 0 3px rgba(var(--ark-accent-rgb), 0.1), 0 4px 20px rgba(var(--ark-accent-rgb), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ark-side-project .project_dropdown[aria-expanded="true"] b { transform: rotate(180deg); }
.ark-side-project .dropdown-menu { position: absolute; left: 0; right: 0; top: 100%; min-width: 0; max-height: 22rem; overflow-y: auto; }
.ark-side-project .dropdown-menu .dropdown-item { padding: 0.55rem 0.6rem; }
.ark-side-project .dropdown-menu .dropdown-item .text-white { color: var(--ark-text) !important; font-size: 0.84rem; }
.ark-side-project .dropdown-menu .dropdown-item .fs-20px { font-size: 1rem !important; color: var(--ark-accent); }
.ark-side-project .dropdown-menu .dropdown-item .fs-16px { font-size: 0.75rem !important; color: var(--ark-muted); }
.ark-side-project .dropdown-menu .dropdown-item .mb-1 { margin-bottom: 0 !important; }
.ark-side-project .dropdown-menu .dropdown-item .py-10px { padding: 0; }

/* theme switch: a two-segment pill. The checkbox the script listens to sits invisibly over the
   whole pill, so any click toggles it; the two labels underneath show which side is on. */
.ark-side-theme { display: block; width: auto; min-height: 0; margin: 0 -0.625rem 0.75rem; padding: 0 0.75rem 1rem; border-bottom: 1px solid var(--ark-border); }
.ark-side-theme form {
    position: relative; display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: 0; padding: 3px; isolation: isolate;
    background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.25);
}
/* the sliding chip behind the active side */
.ark-side-theme form:before {
    content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); z-index: 0; border-radius: 999px;
    background: var(--ark-surface-2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(var(--ark-accent-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform var(--ark-t-slow), background var(--ark-t);
}
.ark-side-theme form:has(.theme_mode:checked):before { transform: translateX(100%); }
.ark-side-theme .form-check-label {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; height: 1.85rem; margin: 0; cursor: pointer;
    font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); transition: color var(--ark-t);
}
.ark-side-theme .form-check-label:before { content: ""; width: 0.85rem; height: 0.85rem; background: currentColor; -webkit-mask: var(--ark-theme-icon) center / contain no-repeat; mask: var(--ark-theme-icon) center / contain no-repeat; transition: transform var(--ark-t-slow); }
.ark-side-theme .form-check-label:first-of-type { --ark-theme-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3e%3c/svg%3e"); }
.ark-side-theme .form-check-label:last-of-type { --ark-theme-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='4'/%3e%3cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3e%3c/svg%3e"); }
.ark-side-theme form:not(:has(.theme_mode:checked)) .form-check-label:first-of-type,
.ark-side-theme form:has(.theme_mode:checked) .form-check-label:last-of-type { color: var(--ark-accent); }
.ark-side-theme form:has(.theme_mode:checked) .form-check-label:last-of-type:before { transform: rotate(90deg); }
.ark-side-theme form:hover .form-check-label { color: rgba(255, 255, 255, 0.7); }
.ark-side-theme form:not(:has(.theme_mode:checked)):hover .form-check-label:first-of-type,
.ark-side-theme form:has(.theme_mode:checked):hover .form-check-label:last-of-type { color: var(--ark-accent); }
.ark-side-theme .form-check-input, .ark-side-theme .form-check-input:checked {
    position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; border-radius: 999px;
    background: none !important; border: 0 !important; box-shadow: none !important; float: none;
}
.ark-side-theme form:has(.form-check-input:focus-visible) { box-shadow: 0 0 0 2px var(--ark-bg), 0 0 0 4px var(--ark-accent); }
/* other switches in the app keep the plain slider */
body .form-switch .form-check-input:not(.theme_mode) {
    width: 32px; height: 18px; margin: 0; cursor: pointer; flex: none; float: none;
    border: 0 !important; border-radius: 999px;
    background-color: var(--ark-border-strong) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23161c24'/%3e%3c/svg%3e") !important;
    background-position: left 2px center; background-repeat: no-repeat; background-size: 14px 14px;
    transition: background-position var(--ark-t), background-color var(--ark-t);
    box-shadow: none !important;
}
body .form-switch .form-check-input:not(.theme_mode):checked {
    background-position: right 2px center; background-color: var(--ark-accent) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}
.ark-nav-label { display: none; }

/* nav: plain icon and label, module-tinted on hover, a glowing pill when active */
.app-sidebar .app-sidebar-content .menu .menu-item { margin-bottom: 0.125rem; position: relative; --ark-mod: var(--ark-accent); --ark-mod-rgb: var(--ark-accent-rgb); }
.app-sidebar .app-sidebar-content .menu .menu-item.ark-mod-dashboard { --ark-mod: var(--ark-mod-dashboard); --ark-mod-rgb: var(--ark-mod-dashboard-rgb); }
.app-sidebar .app-sidebar-content .menu .menu-item.ark-mod-correspondence { --ark-mod: var(--ark-mod-correspondence); --ark-mod-rgb: var(--ark-mod-correspondence-rgb); }
.app-sidebar .app-sidebar-content .menu .menu-item.ark-mod-documentation { --ark-mod: var(--ark-mod-documentation); --ark-mod-rgb: var(--ark-mod-documentation-rgb); }
.app-sidebar .app-sidebar-content .menu .menu-item.ark-mod-workflow { --ark-mod: var(--ark-mod-workflow); --ark-mod-rgb: var(--ark-mod-workflow-rgb); }
.app-sidebar .app-sidebar-content .menu .menu-item.ark-mod-packages { --ark-mod: var(--ark-mod-packages); --ark-mod-rgb: var(--ark-mod-packages-rgb); }
.app-sidebar .app-sidebar-content .menu .menu-item.ark-mod-address-book { --ark-mod: var(--ark-mod-address-book); --ark-mod-rgb: var(--ark-mod-address-book-rgb); }
.app-sidebar .app-sidebar-content .menu .menu-item.ark-mod-projects { --ark-mod: var(--ark-mod-projects); --ark-mod-rgb: var(--ark-mod-projects-rgb); }
.app-sidebar .app-sidebar-content .menu .menu-item.ark-mod-organizations { --ark-mod: var(--ark-mod-packages); --ark-mod-rgb: var(--ark-mod-packages-rgb); }

.app-sidebar .app-sidebar-content .menu .menu-item > .btn,
.app-sidebar .app-sidebar-content .menu .menu-item > .menu-link {
    display: flex !important; align-items: center; gap: 0.6rem; width: 100%; position: relative;
    margin: 0; padding: 0.625rem 0.875rem !important;
    font-family: var(--ark-font); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em;
    color: var(--ark-text) !important; text-align: left; text-decoration: none;
    background: transparent !important; border: 0 !important; border-radius: var(--ark-radius-lg) !important;
    box-shadow: none !important; transition: background var(--ark-t), color var(--ark-t), box-shadow var(--ark-t);
}
.app-sidebar .app-sidebar-content .menu .menu-item > .btn .menu-icon {
    width: 1.5rem; flex: none; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem; margin: 0; color: inherit; opacity: 0.9; transition: transform var(--ark-t), filter var(--ark-t);
}
.app-sidebar .app-sidebar-content .menu .menu-item > .btn .menu-text { flex: 1; white-space: normal; line-height: 1.3; }
.app-sidebar .app-sidebar-content .menu .menu-item > .btn:hover, .app-sidebar .app-sidebar-content .menu .menu-item > .btn:focus-visible {
    color: var(--ark-heading) !important; background: rgba(var(--ark-mod-rgb), 0.12) !important; outline: 0;
}
.app-sidebar .app-sidebar-content .menu .menu-item.active > .btn {
    color: var(--ark-mod) !important; font-weight: 600;
    background: rgba(var(--ark-mod-rgb), 0.16) !important;
    box-shadow: 0 0 0 1px rgba(var(--ark-mod-rgb), 0.45), 0 4px 20px rgba(var(--ark-mod-rgb), 0.22), 0 1px 6px rgba(0, 0, 0, 0.25) !important;
}
.app-sidebar .app-sidebar-content .menu .menu-item.active > .btn .menu-icon { opacity: 1; filter: drop-shadow(0 0 6px currentColor); transform: scale(1.08); }

/* footer: avatar, name, organisation, and the account menu */
.ark-side-footer { padding: 0.75rem 0.75rem 0.85rem; border-top: 1px solid var(--ark-border); background: linear-gradient(0deg, rgba(0, 0, 0, 0.35), transparent); position: relative; }
.ark-side-footer:before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--ark-accent-rgb), 0.3), transparent); }
.ark-side-footer .menu-item { position: relative; }
.ark-side-user { display: flex; align-items: center; gap: 0.65rem; padding: 0.4rem 0.45rem; border-radius: var(--ark-radius); text-decoration: none; color: var(--ark-text); transition: background var(--ark-t); }
.ark-side-user:hover, .ark-side-user[aria-expanded="true"] { background: rgba(255, 255, 255, 0.04); color: var(--ark-text); }
.ark-side-user .menu-img {
    width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none; position: relative;
    background: var(--ark-surface-2); border: 2px solid rgba(var(--ark-accent-rgb), 0.4); transition: box-shadow var(--ark-t), border-color var(--ark-t);
}
.ark-side-user:hover .menu-img { border-color: var(--ark-accent); box-shadow: 0 0 0 2px rgba(var(--ark-accent-rgb), 0.2), 0 4px 16px rgba(var(--ark-accent-rgb), 0.3); }
.ark-side-user .menu-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ark-side-user .menu-img.online:after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--ark-mod-correspondence); border: 2px solid var(--ark-bg); }
.ark-side-user-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ark-side-user-meta .menu-text { font-size: 0.85rem; font-weight: 600; color: var(--ark-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ark-side-user-sub { font-size: 0.72rem; color: var(--ark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ark-side-user-more { border-color: var(--ark-border); background: rgba(255, 255, 255, 0.02); }
.ark-side-user:hover .ark-side-user-more, .ark-side-user[aria-expanded="true"] .ark-side-user-more { color: var(--ark-accent); border-color: rgba(var(--ark-accent-rgb), 0.4); }
.ark-side-footer .dropdown-menu { position: absolute; left: 0; right: 0; bottom: 100%; top: auto; min-width: 0; margin-bottom: 0.4rem !important; }
.ark-side-footer .dropdown-item { font-size: 0.72rem; letter-spacing: 0.08em; font-weight: 600; }

.app-sidebar-mobile-backdrop { background: rgba(0, 0, 0, 0.6); }
@keyframes appSidebarCollapse { from { margin-left: 0; } to { margin-left: calc(-1 * var(--ark-sidebar-w)); } }
@keyframes appSidebarExpand { from { margin-left: calc(-1 * var(--ark-sidebar-w)); } to { margin-left: 0; } }
@keyframes appContentCollapse { from { margin-left: var(--ark-sidebar-w); } to { margin-left: 0; } }
@keyframes appContentExpand { from { margin-left: 0; } to { margin-left: var(--ark-sidebar-w); } }
.app.app-sidebar-collapsed .app-sidebar { margin-left: calc(-1 * var(--ark-sidebar-w)); }
.app.app-sidebar-collapsed .app-content { margin-left: 0; }

/* --------------------------------------------------------------------------
   4. Header: hidden on desktop, a slim bar on mobile or with the sidebar collapsed
   -------------------------------------------------------------------------- */
.app-header {
    display: none; height: var(--ark-header-h); align-items: center; gap: 0.25rem; padding: 0 0.75rem;
    background: var(--ark-header-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ark-border); box-shadow: var(--ark-shadow-sm);
}
.app.app-sidebar-collapsed { padding-top: var(--ark-header-h); }
.app.app-sidebar-collapsed .app-header { display: flex; }
.app-header .desktop-toggler, .app-header .mobile-toggler { display: flex; align-items: center; height: 100%; margin: 0; padding: 0; }
.app-header .mobile-toggler { display: none; }
.app-header .menu-toggler { padding: 0.5rem 0.6rem; border-radius: var(--ark-radius-sm); transition: background var(--ark-t); height: auto; }
.app-header .menu-toggler:hover { background: rgba(255, 255, 255, 0.06); }
.app-header .menu-toggler .bar { display: block; width: 18px; height: 2px; margin: 2.5px 0; background: var(--ark-text-2) !important; border-radius: 2px; }
.app-header .brand { display: flex !important; width: auto; height: auto; padding: 0 0.5rem; }
.app-header .brand .brand-logo { display: flex !important; align-items: center; gap: 0.6rem; text-decoration: none; }
.app-header .brand .brand-logo .ark-brand-mark { width: 30px; height: 30px; filter: none; }
.app-header .brand .brand-logo .ark-brand-mark:after { content: "Arkhetupon"; position: absolute; left: 38px; top: 50%; transform: translateY(-50%); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ark-heading); white-space: nowrap; }
.app-header .brand .brand-logo .ark-brand-mark { position: relative; margin-right: 6.5rem; }
.app-header .menu-search { display: none; }

/* --------------------------------------------------------------------------
   5. Content, page headers, cards
   -------------------------------------------------------------------------- */
.app-content { padding: 1.5rem 1.75rem 3rem; margin-left: var(--ark-sidebar-w); position: relative; min-height: 100vh; }
.app-content:before, .app-content:after { display: none !important; }
.app-content > .container { max-width: none; padding: 0; }

/* the title block: the last crumb is the title, the earlier crumbs form the trail under it */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.45rem; margin: 0 0 1rem; padding: 0; }
.breadcrumb-item { order: 1; display: inline-flex; align-items: center; font-size: 0.8125rem; font-weight: 500; color: var(--ark-muted); padding: 0 !important; line-height: 1.3; }
.breadcrumb-item a { color: var(--ark-accent); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item + .breadcrumb-item::before { display: none; }
.breadcrumb-item:not(:last-child) + .breadcrumb-item:not(:last-child)::before { display: inline; float: none; padding: 0; margin-right: 0.45rem; content: "/"; color: var(--ark-border-strong); }
.breadcrumb-item:last-child { order: 0; flex-basis: 100%; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ark-heading); line-height: 1.25; margin-bottom: 0.2rem; }
.breadcrumb-item:only-child { margin-bottom: 0; }
.breadcrumb-item:last-child a { color: var(--ark-heading); }
.breadcrumb-item:last-child a:hover { text-decoration: none; }
.breadcrumb-item.active { color: var(--ark-heading); }

/* the page header band, attached to the card below it */
.ark-page-band, .app-content .row:has(> [class*="col-xl-"] > div > .breadcrumb), .app-content .row:has(> [class*="col-xl-"] > .breadcrumb:only-child),
.app-content [class*="col-"] > .breadcrumb:has(+ #formControls), .app-content [class*="col-"] > .breadcrumb:has(+ #datatable), .app-content [class*="col-"] > .breadcrumb:has(+ .card),
.app-content [class*="col-"] > .breadcrumb:has(+ .ark-metadata-tabs) {
    position: relative; margin: 0; padding: 1.1rem 1.5rem;
    background: linear-gradient(180deg, var(--ark-surface-2) 0%, var(--ark-surface) 100%);
    border: 1px solid var(--ark-border); border-bottom: 0; border-radius: var(--ark-radius-lg) var(--ark-radius-lg) 0 0;
    box-shadow: var(--ark-shadow-sm); z-index: 12; /* above the template's .card-body (z-index 10) so the band's menus open over the table */
}
.app-content .row:has(> [class*="col-xl-"] > div > .breadcrumb):before, .app-content .row:has(> [class*="col-xl-"] > .breadcrumb:only-child):before,
.app-content [class*="col-"] > .breadcrumb:has(+ #formControls):before, .app-content [class*="col-"] > .breadcrumb:has(+ #datatable):before, .app-content [class*="col-"] > .breadcrumb:has(+ .card):before,
.app-content [class*="col-"] > .breadcrumb:has(+ .ark-metadata-tabs):before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: var(--ark-radius-lg) var(--ark-radius-lg) 0 0;
    background: linear-gradient(90deg, var(--ark-accent), rgba(var(--ark-accent-rgb), 0.3), transparent);
}
.app-content .row:has(> [class*="col-xl-"] > div > .breadcrumb) { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1rem; }
.app-content .row:has(> [class*="col-xl-"] > div > .breadcrumb) .breadcrumb { margin-bottom: 0; }
.app-content .row > [class*="col-xl-"]:has(> div > .breadcrumb), .app-content .row > [class*="col-xl-"]:has(> .breadcrumb:only-child) { flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
.app-content .row > [class*="col-xl-"]:has(> .d-flex.float-end) { flex: 1 1 0; width: auto; min-width: 0; padding: 0; }
/* the card under the band loses its top corners and top edge; the wrapper's spacing collapses */
#datatable.mb-5, #formControls.mb-5 { margin-bottom: 1.5rem !important; }
.app-content .row:has(> [class*="col-xl-"] > div > .breadcrumb) + * #datatable > .card,
.app-content [class*="col-"] > .breadcrumb + #datatable > .card, .app-content [class*="col-"] > .breadcrumb + #formControls > .card, .app-content [class*="col-"] > .breadcrumb + .card,
.app-content .col-xl-12:has(> .row > [class*="col-xl-"] > div > .breadcrumb) + .col-xl-12 > .row > .col-xl-12 > #datatable > .card {
    border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-top: 0 !important;
}
/* pages with a tab strip between the band and the card: the band stands alone, then the pills, then the card */
.app-content:has(.ark-metadata-tabs) .row:has(> [class*="col-xl-"] > div > .breadcrumb), .app-content [class*="col-"] > .breadcrumb:has(+ .ark-metadata-tabs) {
    border-bottom: 1px solid var(--ark-border); border-radius: var(--ark-radius-lg); margin-bottom: 1rem;
}
.app-content:has(.ark-metadata-tabs) .col-xl-12:has(> .row > [class*="col-xl-"] > div > .breadcrumb) + .col-xl-12 > .row > .col-xl-12 > #datatable > .card,
.app-content [class*="col-"] > .breadcrumb + .ark-metadata-tabs + #formControls > .card, .app-content [class*="col-"] > .breadcrumb + .ark-metadata-tabs + #datatable > .card {
    border-top-left-radius: var(--ark-radius-lg) !important; border-top-right-radius: var(--ark-radius-lg) !important; border-top: 1px solid var(--ark-border) !important;
}

/* toolbar in the band: ghost controls first, primary actions last behind a divider */
.d-flex.float-end.mb-2 { flex-wrap: wrap; gap: 0.5rem 0.6rem; align-items: center; justify-content: flex-end; margin-bottom: 0 !important; }
.d-flex.float-end.mb-2 > .me-2, .d-flex.float-end.mb-2 > .mx-2 { margin: 0 !important; }
.d-flex.float-end.mb-2 .form-check { margin: 0 0.25rem 0 0 !important; padding-top: 0 !important; display: flex; align-items: center; gap: 0.4rem; min-height: 2.65rem; }
.d-flex.float-end.mb-2 .form-check .form-check-input { margin: 0; }
.d-flex.float-end.mb-2 > .column_visible_btn { order: 1; }
.d-flex.float-end.mb-2 > .delete_class, .d-flex.float-end.mb-2 > .download_class { order: 2; }
.d-flex.float-end.mb-2 > .export_excel { order: 3; }
.d-flex.float-end.mb-2 > .modal_button { order: 5; }
.d-flex.float-end.mb-2 > .reset_data { order: 6; }
.d-flex.float-end.mb-2 > .top_button { order: 10; }
.d-flex.float-end.mb-2 > .top_button.export_excel { order: 3; }
/* secondary links in the toolbar (Back, Workflow Template) are ghosts too */
.d-flex.float-end.mb-2 > .btn-success:not(.top_button), .d-flex.float-end.mb-2 > .top_button:has(> .fa-arrow-left) { order: 4; color: var(--ark-text-2) !important; background: var(--ark-surface-2) !important; border: 1px solid var(--ark-border) !important; box-shadow: none; font-weight: 500; }
.d-flex.float-end.mb-2 > .btn-success:not(.top_button):hover, .d-flex.float-end.mb-2 > .top_button:has(> .fa-arrow-left):hover { color: var(--ark-accent) !important; background: var(--ark-accent-dim) !important; border-color: rgba(var(--ark-accent-rgb), 0.35) !important; transform: none; }
.d-flex.float-end.mb-2 > .top_button:has(> .fa-arrow-left) { order: 0; }
.d-flex.float-end.mb-2 > .top_button.delete_class, .d-flex.float-end.mb-2 > .top_button.download_class { order: 2; }
.d-flex.float-end.mb-2 > .top_button:not(.export_excel):not(.delete_class):not(.download_class):not(.hide):nth-child(n) { position: relative; }
.d-flex.float-end.mb-2 > .btn-success.top_button:not(.export_excel):not(.delete_class):not(.download_class):first-of-type { margin-left: 0.25rem !important; }

.card { background: var(--ark-surface) !important; border: 1px solid var(--ark-border) !important; border-radius: var(--ark-radius-lg) !important; box-shadow: var(--ark-shadow-sm); overflow: visible; }
.card > .card-body { padding: 1.35rem 1.5rem; }
.card-arrow { display: none !important; }
.card .card-header { background: var(--ark-surface-2); border-bottom: 1px solid var(--ark-border); font-weight: 600; }

/* the metadata tab strip: a dark pill box, the active tab an elevated chip */
.ark-metadata-tabs {
    display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 4px; margin: 0 0 0.875rem; position: relative; z-index: 4;
    background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.ark-metadata-tab {
    display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 1.1rem; border-radius: 999px; white-space: nowrap;
    font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.45); text-decoration: none; transition: background var(--ark-t), color var(--ark-t), box-shadow var(--ark-t);
}
.ark-metadata-tab i { font-size: 0.75rem; opacity: 0.8; }
.ark-metadata-tab:hover:not(.active) { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.78); }
.ark-metadata-tab.active { background: var(--ark-surface-2); color: var(--ark-accent); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.ark-metadata-tab.active i { opacity: 1; }

/* --------------------------------------------------------------------------
   6. Buttons
   primary  = accent gradient, dark text     (.btn-success, .top_button, submit buttons)
   secondary = elevated surface, muted text  (.btn-default, column picker)
   ghost    = surface, muted text, border    (.btn-outline-theme, Export, Search)
   -------------------------------------------------------------------------- */
.btn {
    font-family: var(--ark-font); font-weight: 500; font-size: 0.875rem; letter-spacing: 0.01em;
    border-radius: var(--ark-radius); padding: 0.55rem 1.1rem; min-height: 2.65rem; line-height: 1.35;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap;
    transition: background var(--ark-t), color var(--ark-t), border-color var(--ark-t), box-shadow var(--ark-t), transform var(--ark-t);
    box-shadow: none;
}
.btn:focus-visible { box-shadow: 0 0 0 3px var(--ark-accent-ring); outline: 0; }
.btn:active { transform: translateY(1px); }
.btn i.fas, .btn i.fa, .btn i.bi, .btn i.fa-solid { font-size: 0.9em; opacity: 0.9; width: auto; }
.btn i.fa-lg { font-size: 0.95em; margin: 0 !important; }
.btn-lg { padding: 0.7rem 1.4rem; font-size: 0.9rem; min-height: 2.9rem; }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.76rem; min-height: 0; border-radius: var(--ark-radius-sm); }
.btn-success, .btn-theme, .btn-primary, .btn-info, .swal-button--confirm,
.btn-outline-theme[type="submit"], .btn-outline-theme.submit_button, .btn-outline-theme.btn_with_loader, .btn-outline-theme.signature_button,
.modal .btn-outline-theme:not([data-bs-dismiss]):not(.btn_cancel_delete) {
    color: var(--ark-on-accent) !important; border: 1px solid transparent !important; font-weight: 600;
    background: linear-gradient(135deg, var(--ark-accent) 0%, var(--ark-accent-hover) 100%) !important;
    box-shadow: 0 2px 10px rgba(var(--ark-accent-rgb), 0.28);
}
.btn-success:hover, .btn-theme:hover, .btn-primary:hover, .btn-info:hover, .btn-success:focus, .swal-button--confirm:hover,
.btn-outline-theme[type="submit"]:hover, .btn-outline-theme.submit_button:hover, .btn-outline-theme.btn_with_loader:hover, .btn-outline-theme.signature_button:hover,
.modal .btn-outline-theme:not([data-bs-dismiss]):not(.btn_cancel_delete):hover {
    color: var(--ark-on-accent) !important; background: var(--ark-accent-hover) !important;
    box-shadow: 0 4px 16px rgba(var(--ark-accent-rgb), 0.35); transform: translateY(-1px);
}
.btn-outline-theme, .btn-outline-success, .btn-outline-primary, .btn-outline-default, .top_button.export_excel, .btn-success.top_button.export_excel, .btn-default, .btn-secondary, .btn-light, .swal-button--cancel,
.modal .btn-outline-theme[data-bs-dismiss], .modal .btn_cancel_delete {
    color: var(--ark-text-2) !important; background: var(--ark-surface-2) !important; border: 1px solid var(--ark-border) !important; box-shadow: none; font-weight: 500;
}
.btn-outline-theme:hover, .btn-outline-success:hover, .btn-outline-primary:hover, .btn-outline-default:hover, .top_button.export_excel:hover, .btn-success.top_button.export_excel:hover,
.btn-default:hover, .btn-secondary:hover, .btn-light:hover, .swal-button--cancel:hover, .modal .btn-outline-theme[data-bs-dismiss]:hover, .modal .btn_cancel_delete:hover {
    color: var(--ark-accent) !important; background: var(--ark-accent-dim) !important; border-color: rgba(var(--ark-accent-rgb), 0.35) !important; transform: none; box-shadow: none;
}
.btn-danger, .btn-outline-danger, .top_button.delete_class, .btn-success.top_button.delete_class { color: var(--ark-danger) !important; background: rgba(var(--ark-danger-rgb), 0.08) !important; border: 1px solid rgba(var(--ark-danger-rgb), 0.45) !important; box-shadow: none; }
.btn-danger:hover, .btn-outline-danger:hover, .top_button.delete_class:hover, .btn-success.top_button.delete_class:hover { color: #fff !important; background: var(--ark-danger) !important; border-color: var(--ark-danger) !important; }
.reset_data { border-style: dashed !important; }
.btn-warning { color: #1a1203 !important; background: var(--ark-warning) !important; border-color: var(--ark-warning) !important; }
.btn.disabled, .btn:disabled { opacity: 0.45; transform: none; }
.modal_button .fa-filter:before { content: "\f0b0"; }
.btn-group > .btn { border-radius: var(--ark-radius); }
.btn-scroll-top { background: var(--ark-surface-2); color: var(--ark-accent); border: 1px solid var(--ark-border); border-radius: 50%; box-shadow: var(--ark-shadow); }
.btn_with_loader .spinner-border { top: 50%; margin-top: -0.5rem; left: 0.75rem; }

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.form-label, label.form-check-label, .col-form-label { font-size: 0.8125rem; font-weight: 500; color: var(--ark-text-2); margin-bottom: 0.35rem; }
.form-label .text-success, label .text-success { color: var(--ark-accent) !important; font-size: 0.9rem !important; line-height: 1 !important; vertical-align: baseline !important; }
.form-group { margin-bottom: 1rem; }
.form-control, .form-select, .picker, .form-control-lg, .note-editor.note-frame, .form-group .note-editor.note-frame,
.picker .pc-select .pc-list input[type=search], textarea.form-control, .dataTables_wrapper .dataTables_filter input {
    background-color: var(--ark-input-bg) !important; color: var(--ark-text) !important;
    border: 1px solid var(--ark-border) !important; border-radius: var(--ark-radius) !important;
    font-family: var(--ark-font); font-size: 0.875rem; font-weight: 400; box-shadow: none;
    transition: border-color var(--ark-t), box-shadow var(--ark-t), background var(--ark-t);
}
.form-control { padding: 0.5rem 0.875rem; min-height: 2.625rem; line-height: 1.5; }
.form-control-lg { padding: 0.65rem 0.9rem; min-height: 2.9rem; font-size: 0.92rem; }
.form-control::placeholder { color: var(--ark-muted); opacity: 0.7; }
.form-control:hover, .form-select:hover { border-color: var(--ark-border-strong) !important; }
.form-control:focus, .form-select:focus, .picker:focus-within, .note-editor.note-frame:focus-within, .form-control-lg:focus {
    border-color: var(--ark-accent) !important; box-shadow: 0 0 0 2px rgba(var(--ark-accent-rgb), 0.15) !important; outline: 0; background-color: var(--ark-bg-mid) !important;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--ark-surface-2) !important; color: var(--ark-muted) !important; opacity: 1; }
.form-control.error, .form-select.error, .picker.error, .form-control.iti-invalid { border-color: var(--ark-danger) !important; }
/* phone numbers (intl-tel-input): a number the library accepts gets a green frame and a green tick, like a valid
   field; the frame is an inset ring so the flag box on the left doesn't hide it */
.form-control.iti-valid { border-color: var(--ark-mod-correspondence) !important; box-shadow: inset 0 0 0 1.5px var(--ark-mod-correspondence) !important; }
.iti-valid-msg { color: var(--ark-mod-correspondence); font-size: 0.78rem; font-weight: 600; margin-top: 0.3rem; display: inline-block; }
.iti-valid-msg.hide { display: none; }
textarea.form-control { min-height: 6rem; }
.form-select { padding: 0.5rem 2.25rem 0.5rem 0.875rem; min-height: 2.625rem; background-image: var(--ark-select-arrow) !important; background-repeat: no-repeat !important; background-position: right 0.75rem center !important; background-size: 14px 10px !important; }
.form-select-sm { min-height: 2rem; padding: 0.25rem 1.75rem 0.25rem 0.6rem; font-size: 0.8rem; }
.form-select option, .form-select:not([multiple]) option { background: var(--ark-surface-2); color: var(--ark-text); }
.form-control[type="file"] { padding: 0.35rem 0.5rem; }
.form-control::file-selector-button, .form-control::-webkit-file-upload-button { background: var(--ark-surface-2) !important; color: var(--ark-text-2) !important; border: 1px solid var(--ark-border) !important; border-radius: var(--ark-radius-sm); padding: 0.3rem 0.75rem; margin-right: 0.75rem; font-weight: 500; font-size: 0.8rem; }
.input-group .form-control { border-radius: var(--ark-radius) !important; }
.input-group-text { background: var(--ark-surface-2); color: var(--ark-muted); border: 1px solid var(--ark-border); border-radius: var(--ark-radius); }
.show_password .input-group-text { height: 2.625rem; border-radius: 0 var(--ark-radius) var(--ark-radius) 0; }
.show_password .form-control-lg + .input-group-text { height: 2.9rem; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill { -webkit-text-fill-color: var(--ark-text); -webkit-box-shadow: 0 0 0 1000px var(--ark-input-bg) inset; transition: background-color 5000s ease-in-out 0s; }

.form-check { display: flex; align-items: center; gap: 0.5rem; min-height: 1.4rem; padding-left: 0; margin-bottom: 0.25rem; }
.form-check .form-check-input { float: none; margin: 0; flex: none; }
.form-check-input, .form-check .form-check-input { width: 1.05rem; height: 1.05rem; cursor: pointer; background-color: var(--ark-input-bg); border: 1.5px solid var(--ark-border-strong) !important; border-radius: 4px !important; transition: background var(--ark-t), border-color var(--ark-t), box-shadow var(--ark-t); }
.form-check-input[type="radio"], .form-check .form-check-input[type="radio"] { border-radius: 50% !important; }
.form-check-input:checked, .form-check .form-check-input:checked { background-color: var(--ark-accent) !important; border-color: var(--ark-accent) !important; box-shadow: 0 0 8px -2px rgba(var(--ark-accent-rgb), 0.6); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--ark-accent-ring); }
.form-check-label { margin: 0; color: var(--ark-text); cursor: pointer; }
.form-check-inline { display: inline-flex; margin-right: 1rem; vertical-align: middle; }
table .form-check { margin: 0; justify-content: center; }

/* picker (select replacement) */
.picker { padding: 0.15rem 0; min-height: 2.625rem; display: flex; flex-wrap: wrap; align-items: center; }
.picker > .pc-element { background: var(--ark-accent-dim) !important; color: var(--ark-text) !important; border: 1px solid rgba(var(--ark-accent-rgb), 0.35) !important; border-radius: 999px; font-size: 0.8rem; margin: 0.2rem 0 0.2rem 0.45rem; }
.picker > .pc-element:hover { background: var(--ark-accent) !important; color: var(--ark-on-accent) !important; }
.picker > .pc-element .pc-close { color: inherit; opacity: 0.7; }
.picker .pc-select .pc-element { color: var(--ark-text); padding: 0.45rem 2.25rem 0.45rem 0.875rem; background-image: var(--ark-select-arrow); background-size: 14px 10px; }
.picker .pc-select .pc-element.pc-trigger { min-height: 2.3rem; display: flex; align-items: center; }
.picker .pc-select .pc-list { background: var(--ark-surface-2); border: 1px solid var(--ark-border); border-radius: var(--ark-radius); box-shadow: var(--ark-shadow); padding: 0.5rem; margin-top: 0.35rem; z-index: 1060; }
.picker .pc-select .pc-list.pc-up { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 0.35rem; }
.picker .pc-select .pc-list input[type=search] { width: calc(100% - 0.5rem) !important; margin: 0.15rem 0.25rem 0.5rem !important; padding: 0.45rem 0.7rem; }
.picker .pc-select .pc-list ul > li { color: var(--ark-text-2); border-radius: var(--ark-radius-sm); padding: 0.45rem 0.75rem; font-size: 0.85rem; }
.picker .pc-select .pc-list ul > li:hover { background: var(--ark-accent-dim); color: var(--ark-accent); }
.project_hide .picker { background: var(--ark-surface-2) !important; }

/* bootstrap-datepicker */
.datepicker.dropdown-menu, .datepicker.datepicker-dropdown { background: var(--ark-surface-2); border: 1px solid var(--ark-border); border-radius: var(--ark-radius); box-shadow: var(--ark-shadow); padding: 0.5rem; color: var(--ark-text); }
.datepicker.datepicker-dropdown:before, .datepicker.datepicker-dropdown:after { display: none; }
.datepicker table { background: transparent; color: var(--ark-text); }
.datepicker table tr th, .datepicker table tr td { border-radius: var(--ark-radius-sm); font-size: 0.8rem; }
.datepicker table tr th { color: var(--ark-heading); font-weight: 600; }
.datepicker .datepicker-switch:hover, .datepicker .prev:hover, .datepicker .next:hover, .datepicker table tr td.day:hover, .datepicker tfoot tr th:hover { background: var(--ark-accent-dim) !important; color: var(--ark-text); }
.datepicker table tr td.old, .datepicker table tr td.new { color: var(--ark-muted); }
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.active, .datepicker table tr td span.active, .datepicker table tr td span.active:hover { background: var(--ark-accent) !important; color: var(--ark-on-accent) !important; background-image: none !important; text-shadow: none; }
.datepicker table tr td.today, .datepicker table tr td.today:hover { background: transparent !important; color: var(--ark-accent) !important; border: 1px solid var(--ark-accent) !important; }
.datepicker table tr td span:hover { background: var(--ark-accent-dim); }

/* intl-tel-input */
.iti { width: 100%; font-family: var(--ark-font); color: var(--ark-text); font-size: 0.875rem; }
.iti__selected-dial-code { color: var(--ark-text); }
.iti__selected-flag { border-radius: var(--ark-radius) 0 0 var(--ark-radius); }
.iti__selected-flag:hover, .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag { background: var(--ark-accent-dim); }
.iti__arrow { border-top-color: var(--ark-muted); }
.iti__country-list { background: var(--ark-surface-2) !important; border: 1px solid var(--ark-border) !important; border-radius: var(--ark-radius); box-shadow: var(--ark-shadow) !important; color: var(--ark-text) !important; }
.iti__country-list .iti__country-name { color: var(--ark-text); }
.iti__country.iti__highlight, .iti__country:hover { background: var(--ark-accent-dim) !important; }
.iti__dial-code { color: var(--ark-muted) !important; }
.iti__divider { border-bottom-color: var(--ark-border); }

/* summernote */
.note-editor.note-frame, .form-group .note-editor.note-frame { overflow: hidden; }
.note-editor.note-frame .note-toolbar, .note-toolbar { background: var(--ark-surface-2) !important; border-bottom: 1px solid var(--ark-border) !important; padding: 0.4rem 0.5rem; }
.note-editor.note-frame .note-toolbar .note-btn-group > .note-btn, .note-btn { background: var(--ark-surface-3) !important; color: var(--ark-text-2) !important; border: 1px solid var(--ark-border) !important; border-radius: var(--ark-radius-sm) !important; font-size: 0.78rem; min-height: 0; padding: 0.3rem 0.55rem; }
.note-editor.note-frame .note-toolbar .note-btn-group > .note-btn:hover, .note-btn:hover, .note-btn.active { background: var(--ark-accent-dim) !important; color: var(--ark-accent) !important; }
.note-editor.note-frame .note-editing-area .note-editable, .note-editable { background: var(--ark-input-bg) !important; color: var(--ark-text) !important; min-height: 140px; }
.note-editor.note-frame .note-statusbar { background: var(--ark-surface-2); border-top: 1px solid var(--ark-border); }
.note-editor.note-frame .note-statusbar .note-resizebar .note-icon-bar { border-top-color: var(--ark-border-strong); }
.note-editor .note-placeholder { color: var(--ark-muted); }
.note-dropdown-menu { background: var(--ark-surface-2) !important; border: 1px solid var(--ark-border) !important; color: var(--ark-text) !important; }
.note-modal .modal-content { background: var(--ark-surface); }

/* ckeditor */
.cke_chrome, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .cke_chrome { border: 1px solid var(--ark-border) !important; border-radius: var(--ark-radius) !important; overflow: hidden; box-shadow: none !important; }
.cke_top, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .cke_top { background: var(--ark-surface-2) !important; border-bottom: 1px solid var(--ark-border) !important; }
.cke_bottom { background: var(--ark-surface-2) !important; border-top: 1px solid var(--ark-border) !important; }
.cke_toolgroup, .cke_combo_button { background: var(--ark-surface-3) !important; border: 1px solid var(--ark-border) !important; border-radius: var(--ark-radius-sm) !important; box-shadow: none !important; }
.cke_button_icon { filter: var(--ark-cke-icon-filter); }
.cke_button:hover .cke_button_icon, .cke_button_on .cke_button_icon { filter: var(--ark-cke-icon-filter-hover); }
.cke_combo_text, .cke_path_item, .cke_path_empty { color: var(--ark-text-2) !important; text-shadow: none !important; }
.cke_button:hover, .cke_button_on { background: var(--ark-accent-dim) !important; border-radius: 4px; }
/* the editing surface is a white sheet (vendors/ckeditor/contents.css); in the dark theme invert it so it sits on the dark card */
.cke_contents { background: var(--ark-input-bg); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .cke_contents { background: #fff; }
/* The form builder's dialogs (Text Field / Selection Field / Checkbox properties...), right-click menu and panels.
   CKEditor puts them straight into <body>, so they are styled here as a whole, like the app's modals. */
.cke_dialog_background_cover { background-color: rgba(3, 6, 10, 0.75) !important; opacity: 1 !important; }
.cke_dialog.cke_browser_webkit, .cke_dialog { font-family: var(--ark-font) !important; }
.cke_reset_all, .cke_reset_all * { font-family: var(--ark-font) !important; }
.cke_dialog_body {
    background: var(--ark-surface-2) !important; border: 0 !important; border-radius: var(--ark-radius-lg) !important; overflow: hidden;
    box-shadow: 0 0 0 1px var(--ark-border), var(--ark-shadow-lg) !important; border-top: 2px solid var(--ark-accent) !important;
}
.cke_dialog_title {
    background: var(--ark-surface-2) !important; color: var(--ark-heading) !important; border-bottom: 1px solid var(--ark-border) !important;
    font: 600 0.95rem/1.3 var(--ark-font) !important; padding: 0.9rem 1.1rem !important; text-shadow: none !important; cursor: move;
}
.cke_dialog_close_button {
    top: 0.75rem !important; right: 0.8rem !important; width: 1.6rem !important; height: 1.6rem !important; border-radius: 0.45rem;
    background: none !important; opacity: 0.8; display: grid !important; place-items: center;
}
.cke_dialog_close_button::before { content: ""; width: 0.8rem; height: 0.8rem; background: var(--ark-muted); -webkit-mask: var(--ark-i-x) center / contain no-repeat; mask: var(--ark-i-x) center / contain no-repeat; }
.cke_dialog_close_button:hover { background: var(--ark-tint) !important; opacity: 1; }
.cke_dialog_close_button span { display: none !important; }
.cke_dialog_contents { background: var(--ark-surface-2) !important; border-top: 0 !important; }
.cke_dialog_contents_body { padding: 1rem 1.1rem 0.5rem !important; }
.cke_dialog_tabs { background: transparent !important; }
.cke_dialog_tab { background: var(--ark-surface-3) !important; color: var(--ark-text-2) !important; border: 0 !important; border-radius: var(--ark-radius-sm) var(--ark-radius-sm) 0 0 !important; }
.cke_dialog_tab_selected, .cke_dialog_tab:hover { background: var(--ark-accent-dim) !important; color: var(--ark-accent) !important; }
.cke_dialog_ui_labeled_label, .cke_dialog_ui_text, .cke_dialog_ui_checkbox label, .cke_dialog_ui_radio label, .cke_dialog_contents_body label,
.cke_dialog_contents_body td, .cke_dialog_ui_labeled_content, .cke_dialog_ui_html { color: var(--ark-text-2) !important; font-size: 0.8rem !important; }
.cke_dialog_ui_labeled_label { font-weight: 500 !important; letter-spacing: 0.02em; }
.cke_dialog_ui_input_text, .cke_dialog_ui_input_password, .cke_dialog_ui_input_textarea, .cke_dialog_ui_input_select, .cke_dialog_ui_input_file {
    background: var(--ark-input-bg) !important; border: 0 !important; border-radius: var(--ark-radius) !important;
    box-shadow: inset 0 0 0 1px var(--ark-border) !important;
}
.cke_dialog_ui_input_text input, .cke_dialog_ui_input_password input, .cke_dialog_ui_input_textarea textarea, .cke_dialog_ui_input_select select,
select.cke_dialog_ui_input_select, input.cke_dialog_ui_input_text {
    background: var(--ark-input-bg) !important; color: var(--ark-text) !important; border: 0 !important; border-radius: var(--ark-radius) !important;
    min-height: 2.1rem; padding: 0.35rem 0.6rem !important; font: 400 0.85rem/1.4 var(--ark-font) !important; box-shadow: inset 0 0 0 1px var(--ark-border) !important;
}
.cke_dialog_ui_input_text input:focus, .cke_dialog_ui_input_textarea textarea:focus, .cke_dialog_ui_input_select select:focus, select.cke_dialog_ui_input_select:focus {
    outline: none !important; box-shadow: inset 0 0 0 1.5px var(--ark-accent), 0 0 0 3px rgba(var(--ark-accent-rgb), 0.14) !important;
}
select.cke_dialog_ui_input_select option { background: var(--ark-surface-2); color: var(--ark-text); }
.cke_dialog_ui_checkbox_input, .cke_dialog_ui_radio_input { accent-color: var(--ark-accent); }
.cke_dialog_footer { background: var(--ark-surface-2) !important; border-top: 1px solid var(--ark-border) !important; box-shadow: none !important; padding: 0.35rem 0.6rem !important; }
a.cke_dialog_ui_button {
    background: var(--ark-surface-3) !important; border: 0 !important; border-radius: var(--ark-radius) !important; box-shadow: none !important;
    padding: 0.3rem 0.9rem !important; min-width: 4.5rem; text-align: center; transition: background var(--ark-t);
}
a.cke_dialog_ui_button span.cke_dialog_ui_button { color: var(--ark-text) !important; font: 500 0.82rem/1.6 var(--ark-font) !important; text-shadow: none !important; padding: 0 !important; }
a.cke_dialog_ui_button:hover, a.cke_dialog_ui_button:focus { background: var(--ark-tint) !important; }
a.cke_dialog_ui_button_ok { background: var(--ark-accent) !important; }
a.cke_dialog_ui_button_ok span.cke_dialog_ui_button { color: var(--ark-on-accent) !important; font-weight: 600 !important; }
a.cke_dialog_ui_button_ok:hover, a.cke_dialog_ui_button_ok:focus { background: var(--ark-accent) !important; filter: brightness(1.08); }
.cke_dialog .cke_resizer { border-right-color: var(--ark-border-strong) !important; }
.cke_menu_panel, .cke_panel { background: var(--ark-surface-2) !important; border: 0 !important; border-radius: var(--ark-radius) !important; box-shadow: 0 0 0 1px var(--ark-border), var(--ark-shadow) !important; }
.cke_menubutton, .cke_menubutton:visited { background: transparent !important; }
.cke_menubutton_label { color: var(--ark-text-2) !important; background: transparent !important; font-family: var(--ark-font) !important; }
.cke_menubutton_icon { background: transparent !important; }
.cke_menubutton:hover .cke_menubutton_label, .cke_menubutton:focus .cke_menubutton_label { background: var(--ark-accent-dim) !important; color: var(--ark-accent) !important; }
.cke_menuseparator { background: var(--ark-border) !important; }
.cke_toolbar_separator { background: var(--ark-border) !important; }

/* dropzone */
.dropzone { background: var(--ark-input-bg) !important; border: 1.5px dashed var(--ark-border-strong) !important; border-radius: var(--ark-radius-lg); color: var(--ark-muted); transition: border-color var(--ark-t); }
.dropzone:hover, .dropzone.dz-drag-hover { border-color: var(--ark-accent) !important; }
.dropzone .dz-message, .signature_modal .dropzone .dz-message { color: var(--ark-text-2); font-size: 0.95rem; }
.dropzone .dz-preview .dz-image { border-radius: var(--ark-radius); }

/* multiselect (visible columns) */
.column_visible_btn { margin: 0; }
.column_visible_btn .dropdown-toggle, .column_visible_btn .multiselect.btn { color: var(--ark-text) !important; background: var(--ark-surface-2) !important; border: 1px solid var(--ark-border) !important; min-width: 0; padding: 0.55rem 1rem; font-weight: 600; font-size: 0.8125rem; }
.column_visible_btn .dropdown-toggle:hover, .column_visible_btn .multiselect.btn:hover { color: var(--ark-accent) !important; border-color: rgba(var(--ark-accent-rgb), 0.35) !important; background: var(--ark-accent-dim) !important; }
.column_visible_btn .dropdown-toggle:after { display: inline-block; margin-left: 0.4rem; }
.column_visible_btn .multiselect-container > li > a { padding: 0; }
.column_visible_btn .multiselect-container > li > a > label { padding: 0.45rem 0.75rem 0.45rem 2.2rem; border-radius: var(--ark-radius-sm); color: var(--ark-text-2); font-size: 0.8125rem; cursor: pointer; }
.column_visible_btn .multiselect-container > li > a:hover > label { background: var(--ark-accent-dim); color: var(--ark-accent); }
.column_visible_btn .multiselect-container > li > a > label:before { position: absolute; left: 0.6rem; top: 50%; margin-top: -0.55rem; width: 1.1rem; height: 1.1rem; padding: 0; background: var(--ark-input-bg); border: 1.5px solid var(--ark-border-strong); border-radius: 4px; box-shadow: none; }
.column_visible_btn .multiselect-container > li.active > a > label:before { background: var(--ark-accent); border-color: var(--ark-accent); }
.column_visible_btn .multiselect-container > li.active > a > label:after { top: 50%; margin-top: -0.55rem; left: 0.98rem; width: 5px; height: 10px; border-color: var(--ark-on-accent); border-width: 0 2px 2px 0; border-radius: 0; }
.multiselect-container.dropdown-menu { padding: 0.4rem; max-height: 24rem; overflow-y: auto; }

/* --------------------------------------------------------------------------
   8. Tables and DataTables
   -------------------------------------------------------------------------- */
.table { color: var(--ark-text); border-color: var(--ark-border); margin-bottom: 0; font-size: 0.8125rem; --bs-table-hover-bg: transparent; --bs-table-hover-color: var(--ark-text); --bs-table-striped-bg: transparent; }
.table > :not(caption) > * > * { padding: 0.65rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: transparent; box-shadow: none; }
.table > thead > tr > th, .table thead th {
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ark-muted);
    background: linear-gradient(180deg, var(--ark-surface-2) 0%, var(--ark-surface) 100%); border-bottom: 2px solid rgba(var(--ark-accent-rgb), 0.15);
    vertical-align: middle; white-space: nowrap; padding: 0.7rem 0.75rem;
}
.table > tbody > tr > td { vertical-align: middle; color: var(--ark-text); line-height: 1.5; }
.table > tbody > tr { transition: background var(--ark-t); }
.table > tbody > tr:nth-child(even) > td { background: rgba(var(--ark-accent-rgb), 0.02); }
.table > tbody > tr:hover > td, .table-hover > tbody > tr:hover > * { background: rgba(var(--ark-accent-rgb), 0.06) !important; color: var(--ark-text) !important; }
.table > tbody > tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--ark-accent); }
.table > tbody > tr:has(> td .form-check-input:checked) > td { background: rgba(var(--ark-accent-rgb), 0.09); }
.table > tbody > tr:has(> td .form-check-input:checked) > td:first-child { box-shadow: inset 3px 0 0 var(--ark-accent); }
.table > tbody > tr:last-child > td { border-bottom-color: transparent; }
.table a { text-decoration: none; font-weight: 500; color: var(--ark-accent); }
.table > tbody > tr > td > a:only-child, .table > tbody > tr > td > img + a { white-space: nowrap; }
.table a:hover { text-decoration: underline; }
tr { border-color: var(--ark-border); }
.table > thead > tr > th:first-child, .table > tbody > tr > td:first-child { padding-left: 1.25rem; }
.table > thead > tr > th:last-child, .table > tbody > tr > td:last-child { padding-right: 1.25rem; }
.table > thead > tr > th:has(.form-check), .table > tbody > tr > td:has(> .form-check) { width: 3rem; padding-right: 0.25rem; }
.table .form-check-input { width: 1rem; height: 1rem; }
.table .dropdown-toggle { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border: 1px solid var(--ark-border-strong); border-radius: 999px; background: transparent; color: var(--ark-text-2); font-weight: 600; font-size: 0.75rem; text-decoration: none; transition: border-color var(--ark-t), color var(--ark-t), background var(--ark-t); }
.table .dropdown-toggle:hover, .table .dropdown-toggle[aria-expanded="true"] { color: var(--ark-accent); border-color: rgba(var(--ark-accent-rgb), 0.5); background: var(--ark-accent-dim); text-decoration: none; }
.table .dropdown-menu { min-width: 11rem; }
.table .badge { font-size: 0.66rem; }
.default_doc_icon { width: 16px; opacity: 0.9; margin-right: 0.45rem; }
.light-pastel-grey > td { background: rgba(var(--ark-accent-rgb), 0.05) !important; font-weight: 500; }

table.dataTable { border-collapse: collapse !important; margin: 0 !important; width: 100% !important; }
/* sort affordance: one small chip after the label; sortable columns faint, the sorted column in accent */
table.dataTable > thead .sorting, table.dataTable > thead .sorting_asc, table.dataTable > thead .sorting_desc { cursor: pointer; padding-right: 0.75rem !important; position: relative; transition: background var(--ark-t), color var(--ark-t); }
table.dataTable > thead .sorting:before, table.dataTable > thead .sorting_asc:before, table.dataTable > thead .sorting_desc:before { display: none !important; content: none !important; }
table.dataTable > thead .sorting:after, table.dataTable > thead .sorting_asc:after, table.dataTable > thead .sorting_desc:after {
    content: "\2195" !important; position: static !important; display: inline-flex !important; align-items: center; justify-content: center; vertical-align: middle;
    width: 1.05rem; height: 1.05rem; margin-left: 0.4rem; border-radius: 4px; background: rgba(255, 255, 255, 0.06); color: var(--ark-muted);
    font-size: 0.6rem; line-height: 1; opacity: 0.7 !important; bottom: auto !important; right: auto !important; transition: background var(--ark-t), color var(--ark-t);
}
table.dataTable > thead .sorting:hover { background: rgba(var(--ark-accent-rgb), 0.06); color: var(--ark-text-2); }
table.dataTable > thead .sorting:hover:after { opacity: 1 !important; color: var(--ark-text); }
table.dataTable > thead .sorting_asc, table.dataTable > thead .sorting_desc { background: rgba(var(--ark-accent-rgb), 0.12) !important; color: var(--ark-accent) !important; }
table.dataTable > thead .sorting_asc:after { content: "\25B2" !important; }
table.dataTable > thead .sorting_desc:after { content: "\25BC" !important; }
table.dataTable > thead .sorting_asc:after, table.dataTable > thead .sorting_desc:after { background: rgba(var(--ark-accent-rgb), 0.22); color: var(--ark-accent); opacity: 1 !important; font-size: 0.5rem; }
/* resizable columns (custom.js): a grip on each header's right edge, a faint rule on header hover, the accent while
   dragging; a resized table is laid out fixed at the stored widths and long header labels truncate */
table.dataTable > thead > tr > th { position: relative; }
.ark-col-resizer { position: absolute; top: 0; right: 0; bottom: 0; width: 9px; cursor: col-resize; z-index: 2; touch-action: none; }
.ark-col-resizer::after { content: ""; position: absolute; top: 28%; bottom: 28%; right: 3px; width: 2px; border-radius: 2px; background: var(--ark-border-strong); opacity: 0; transition: opacity var(--ark-t), background var(--ark-t); }
table.dataTable > thead > tr > th:hover > .ark-col-resizer::after { opacity: 1; }
.ark-col-resizer:hover::after, body.ark-col-resizing .ark-col-resizer.is-dragging::after { top: 12%; bottom: 12%; background: var(--ark-accent); opacity: 1; }
body.ark-col-resizing, body.ark-col-resizing * { cursor: col-resize !important; user-select: none !important; }
table.dataTable.ark-resized { table-layout: fixed; }
table.dataTable.ark-resized > thead > tr > th { box-sizing: content-box; overflow: hidden; text-overflow: ellipsis; }
table.dataTable.ark-resized > tbody > tr > td { overflow-wrap: anywhere; }
table.dataTable tbody td.dataTables_empty, table.dataTable td.dataTables_empty { padding: 3.5rem 1rem 4rem; color: var(--ark-muted); text-align: center; font-size: 0.875rem; }
table.dataTable td.dataTables_empty:before {
    content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 0.75rem; background: var(--ark-muted); opacity: 0.6;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3 7h18M3 12h18M3 17h18'/%3e%3crect x='3' y='4' width='18' height='16' rx='2'/%3e%3c/svg%3e") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3 7h18M3 12h18M3 17h18'/%3e%3crect x='3' y='4' width='18' height='16' rx='2'/%3e%3c/svg%3e") center / contain no-repeat;
}

/* the table card: full-bleed table, one footer band holding page length, info and pagination */
#datatable .card > .card-body, .card > .card-body:has(> .table-responsive > table.dataTable) { padding: 0; }
#datatable .card .table-responsive, .card > .card-body > .table-responsive:has(> table.dataTable) { margin: 0; border-radius: 0; }
.dataTables_wrapper { color: var(--ark-text-2); display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "table table" "len pager"; }
.dataTables_wrapper > table.dataTable, .dataTables_wrapper > .row:has(> [class*="col-"] > table.dataTable) { grid-area: table; }
.dataTables_wrapper > .row:first-child { grid-area: len; }
.dataTables_wrapper > .d-flex.align-items-center, .dataTables_wrapper > .row:last-child:not(:has(table.dataTable)):not(:first-child) { grid-area: pager; }
.dataTables_wrapper > .row { margin: 0; align-items: center; }
.dataTables_wrapper > .row > [class*="col-"] { padding: 0; }
.dataTables_wrapper > .row:first-child, .dataTables_wrapper > .d-flex.align-items-center, .dataTables_wrapper > .row:last-child:not(:has(table.dataTable)):not(:first-child) {
    padding: 0.75rem 1.25rem; min-height: 3.25rem; border-top: 1px solid rgba(var(--ark-accent-rgb), 0.1);
    background: linear-gradient(180deg, transparent 0%, rgba(var(--ark-accent-rgb), 0.02) 100%);
}
.dataTables_wrapper > .row:first-child { padding-right: 0; flex-wrap: nowrap; }
.dataTables_wrapper > .row:first-child > .col-sm-8, .dataTables_wrapper > .row:first-child > .col-md-6:last-child { display: none; }
.dataTables_wrapper > .row:first-child > [class*="col-"] { flex: 0 0 auto; width: auto; }
.dataTables_wrapper > .d-flex.align-items-center, .dataTables_wrapper > .row:last-child:not(:has(table.dataTable)):not(:first-child) { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; }
.dataTables_wrapper > .row:last-child > .col-md-5, .dataTables_wrapper > .row:last-child > .col-md-7, .dataTables_wrapper > .d-flex > .me-auto, .dataTables_wrapper > .d-flex > .mb-0 { display: flex; align-items: center; flex: 0 0 auto; width: auto; }
.dataTables_wrapper > .row:last-child > .col-md-5, .dataTables_wrapper > .d-flex > .me-auto { flex: 1 1 auto; justify-content: center; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_info { font-size: 0.75rem; color: var(--ark-muted); padding: 0; margin: 0; }
.dataTables_wrapper .dataTables_length label { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.8125rem; color: var(--ark-text-2); }
.dataTables_wrapper .dataTables_length .form-select { min-height: 2rem; padding: 0.25rem 1.6rem 0.25rem 0.6rem; width: auto; margin: 0 !important; font-size: 0.8rem; font-weight: 600; background-color: var(--ark-surface-2) !important; border-radius: var(--ark-radius-sm) !important; }
.dataTables_wrapper .dataTables_filter { text-align: right; }
.dataTables_wrapper .dataTables_filter label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--ark-muted); margin: 0; }
.dataTables_wrapper .dataTables_filter input { min-height: 2rem; padding: 0.3rem 0.7rem; }
.dataTables_wrapper .table-responsive, .dataTables_wrapper .row .table-responsive { overflow-x: auto; }
.pagination { gap: 0.3rem; margin: 0; justify-content: flex-end; }
.pagination .page-link, .page-link { min-width: 2rem; height: 2rem; padding: 0 0.7rem; display: inline-flex; align-items: center; justify-content: center; color: var(--ark-muted) !important; background: transparent !important; border: 1px solid var(--ark-border) !important; border-radius: var(--ark-radius) !important; font-size: 0.75rem; font-weight: 600; box-shadow: none !important; transition: background var(--ark-t), color var(--ark-t), border-color var(--ark-t); }
.pagination .page-link:hover { color: var(--ark-accent) !important; border-color: rgba(var(--ark-accent-rgb), 0.4) !important; background: var(--ark-accent-dim) !important; }
.page-item.active .page-link, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .page-item.active .page-link { color: var(--ark-on-accent) !important; background: var(--ark-accent) !important; border-color: var(--ark-accent) !important; box-shadow: 0 2px 8px -2px rgba(var(--ark-accent-rgb), 0.5) !important; }
.page-item.disabled .page-link, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .page-item.disabled .page-link { color: var(--ark-muted) !important; background: transparent !important; border-color: rgba(var(--ark-accent-rgb), 0.06) !important; opacity: 0.35; }
.workflow_view tr td { color: var(--ark-text-2); padding: 0.55rem 0.75rem; }
.workflow_view tr td:first-child { color: var(--ark-heading); font-weight: 600; width: 30%; }

/* wide tables: the element that directly holds the table scrolls sideways; the bands pin to the left */
.dataTables_wrapper:has(> table.dataTable), .dataTables_wrapper > .row > [class*="col-"]:has(> table.dataTable) { overflow-x: auto; overscroll-behavior-x: contain; }
.dataTables_wrapper:has(> table.dataTable) > .row, .dataTables_wrapper:has(> table.dataTable) > .d-flex { position: sticky; left: 0; }
/* the table must not size the grid tracks (it would push the footer bands out to its own width);
   inline-size containment keeps the tracks at the wrapper's width and lets the table overflow into the scroll */
.dataTables_wrapper > table.dataTable { contain: inline-size; }
/* the sticky sideways bar (custom.js): stands in for the scroller's own horizontal scrollbar, which sits under the
   last row and so is off screen on a long page. It sticks to the bottom of the window while the table is in view */
.dataTables_wrapper { grid-template-areas: "table table" "hbar hbar" "len pager"; }
/* the template's .table-responsive around the wrapper never scrolls (the element holding the table does), but as a
   scroll container it would catch the sticky bar and hold it under the rows */
.table-responsive:has(> .dataTables_wrapper) { overflow: visible; }
.ark-hbar-host { scrollbar-width: none; }
.ark-hbar-host::-webkit-scrollbar { height: 0; }
.ark-hbar { grid-area: hbar; position: sticky; bottom: 0; left: 0; z-index: 6; height: 18px; padding: 3px 4px; background: color-mix(in srgb, var(--ark-surface) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); touch-action: none; }
.ark-hbar[hidden] { display: none !important; }
.ark-hbar-track { position: relative; height: 100%; border-radius: 999px; background: rgba(0, 0, 0, 0.16); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); cursor: pointer; }
.ark-hbar-thumb { position: absolute; top: 0; bottom: 0; left: 0; min-width: 40px; border-radius: 999px; background-color: rgba(var(--ark-accent-rgb), 0.55); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 65%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.25); cursor: grab; transition: background-color var(--ark-t); }
.ark-hbar-thumb:hover, .ark-hbar.is-dragging .ark-hbar-thumb { background-color: rgba(var(--ark-accent-rgb), 0.8); }
.ark-hbar.is-dragging .ark-hbar-thumb { cursor: grabbing; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-hbar-track { background: rgba(15, 23, 42, 0.07); box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.14); }

/* --------------------------------------------------------------------------
   9. Dropdowns, modals, tabs, accordion, alerts, badges
   -------------------------------------------------------------------------- */
.dropdown-menu { background: var(--ark-surface-2) !important; border: 1px solid var(--ark-border) !important; border-radius: var(--ark-radius) !important; box-shadow: var(--ark-shadow); padding: 0.4rem; color: var(--ark-text); margin-top: 0.35rem !important; font-size: 0.8125rem; animation: arkPop 0.14s var(--ark-ease) both; }
@keyframes arkPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dropdown-item { color: var(--ark-text-2); border-radius: var(--ark-radius-sm); padding: 0.5rem 0.75rem; font-weight: 500; transition: background var(--ark-t), color var(--ark-t); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ark-accent-dim); color: var(--ark-accent); }
.dropdown-item:active { background: var(--ark-accent); color: var(--ark-on-accent); }
.dropdown-item .text-theme { color: var(--ark-accent) !important; }
.dropdown-divider { border-color: var(--ark-border); margin: 0.35rem 0; opacity: 1; }
.dropdown-header { color: var(--ark-muted); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
.dropdown-toggle::after { vertical-align: 0.15em; }
button.dropdown-item { width: 100%; text-align: left; background: transparent; border: 0; }

.modal-backdrop { background: #03060a; }
.modal-backdrop.show { opacity: 0.75; }
.modal-content { background: var(--ark-surface) !important; border: 1px solid var(--ark-border-strong) !important; border-radius: var(--ark-radius-xl) !important; box-shadow: var(--ark-shadow-lg); color: var(--ark-text); position: relative; overflow: hidden; }
.modal-content:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--ark-accent), rgba(var(--ark-accent-rgb), 0.3), transparent); pointer-events: none; }
.modal-header { border-bottom: 1px solid var(--ark-border) !important; padding: 1.1rem 1.4rem; align-items: center; background: linear-gradient(180deg, rgba(var(--ark-accent-rgb), 0.05), transparent); }
.modal-title { font-size: 1rem; font-weight: 600; color: var(--ark-heading); letter-spacing: -0.01em; }
.modal-body { padding: 1.4rem; }
.modal-footer { border-top: 1px solid var(--ark-border) !important; padding: 1rem 1.4rem; gap: 0.5rem; background: rgba(0, 0, 0, 0.15); }
.modal-footer > * { margin: 0; }
.btn-close { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important; filter: var(--ark-close-filter); opacity: 0.7; border-radius: var(--ark-radius-sm); width: 0.8em; height: 0.8em; }
.btn-close:hover { opacity: 1; }
.btn-close:focus { box-shadow: 0 0 0 3px var(--ark-accent-ring); }
#delete_counter_modal .modal-dialog { min-width: 0; max-width: 460px; }
#delete_counter_modal h3, #delete_counter_modal h1 { font-size: 1.25rem; }
#delete_counter_modal .delete_count_down { color: var(--ark-danger); }
#delete_counter_modal .modal-body .row { justify-content: center; }
.modal .modal-body h1, .modal .modal-body h3 { color: var(--ark-heading); }

/* tab strips (profile, settings) share the pill-box look */
.nav-tabs, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .nav-tabs, .nav.nav-tabs.nav-tabs-v2 {
    display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 4px !important; margin: 0 0 0.875rem; width: max-content; max-width: 100%; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 999px;
    background: rgba(0, 0, 0, 0.32); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.nav-tabs .nav-item { margin: 0 !important; }
.nav-tabs .nav-link, .nav.nav-tabs.nav-tabs-v2 > .nav-item > .nav-link, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .nav.nav-tabs.nav-tabs-v2 > .nav-item > .nav-link {
    color: rgba(255, 255, 255, 0.45) !important; font-weight: 600; font-size: 0.8rem; border: 0; padding: 0.35rem 1.1rem !important; background: transparent; border-radius: 999px; white-space: nowrap;
    transition: color var(--ark-t), background var(--ark-t), box-shadow var(--ark-t);
}
.nav-tabs .nav-link:hover, .nav.nav-tabs.nav-tabs-v2 > .nav-item > .nav-link:hover, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .nav.nav-tabs.nav-tabs-v2 > .nav-item > .nav-link:hover { color: rgba(255, 255, 255, 0.78) !important; background: rgba(255, 255, 255, 0.08); }
.nav-tabs .nav-link.active, .nav.nav-tabs.nav-tabs-v2 > .nav-item > .nav-link.active, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .nav.nav-tabs.nav-tabs-v2 > .nav-item > .nav-link.active {
    color: var(--ark-accent) !important; background: var(--ark-surface-2); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.nav.nav-tabs.nav-tabs-v2 > .nav-item > .nav-link.active:after, .nav.nav-tabs.nav-tabs-v2 > .nav-item > .nav-link:after { display: none; }
.card > .nav-tabs, .card .nav-tabs.px-4 { margin: 1rem 1.5rem 0.25rem; }
.nav-pills { gap: 0.3rem; }
.nav-pills .nav-link { color: var(--ark-muted); font-weight: 600; font-size: 0.72rem; border-radius: var(--ark-radius); padding: 0.3rem 0.65rem; transition: background var(--ark-t), color var(--ark-t), border-color var(--ark-t); border: 1px solid transparent; }
.nav-pills .nav-link:hover { color: var(--ark-accent); background: var(--ark-accent-dim); border-color: rgba(var(--ark-accent-rgb), 0.15); }
.nav-pills .nav-link.active, .tab_view_card .nav-pills .nav-link.active, .tab_view_card .nav-pills .nav-link.active:hover { background: var(--ark-accent); color: var(--ark-on-accent); border-color: var(--ark-accent); }

.accordion-item, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .accordion-item { background: var(--ark-surface-2) !important; border: 1px solid var(--ark-border) !important; border-radius: var(--ark-radius) !important; overflow: hidden; }
.accordion-button, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .accordion-button { background: var(--ark-surface-2) !important; color: var(--ark-text) !important; font-weight: 500; box-shadow: none !important; }
.accordion-button:not(.collapsed) { background: var(--ark-accent-dim) !important; color: var(--ark-text) !important; }
.accordion-button::after, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .accordion-button::after { background-image: var(--ark-select-arrow) !important; }
.accordion-body { background: var(--ark-surface); color: var(--ark-text-2); }
.accordion-header .header_title1, .accordion-header .header_title2, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .accordion-header .header_title1, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .accordion-header .header_title2 { color: var(--ark-text) !important; }

.alert { border-radius: var(--ark-radius); border: 1px solid var(--ark-border); background: var(--ark-surface-2); color: var(--ark-text); }
.alert-success { border-color: rgba(var(--ark-accent-rgb), 0.4); background: var(--ark-accent-dim); }
.alert-danger { border-color: rgba(var(--ark-danger-rgb), 0.4); background: rgba(var(--ark-danger-rgb), 0.1); }
.badge { font-weight: 600; letter-spacing: 0.02em; border-radius: var(--ark-radius-sm); padding: 0.3em 0.6em; }
.bg-theme, .badge.bg-theme, .bg-success { background: var(--ark-accent) !important; color: var(--ark-on-accent) !important; }
.light-pastel-grey { background: var(--ark-accent-dim) !important; }
.highlight_document div { background: var(--ark-accent-dim); border-left: 3px solid var(--ark-accent); padding-left: 0.5rem; border-radius: 4px; }
.progress { background: var(--ark-surface-3); border-radius: 999px; }
.progress-bar { background: var(--ark-accent); }
#progress-div { border-color: var(--ark-border); border-radius: var(--ark-radius); background: var(--ark-surface-2); }
#progress-bar { background: var(--ark-accent); }

/* --------------------------------------------------------------------------
   10. Toasts and SweetAlert
   -------------------------------------------------------------------------- */
/* toasts (toastr): a glassy card; the type is carried by a tinted glyph tile, a hairline ring and the progress line,
   all in --ark-toast. toastr.min.css loads after this file with !important icons, hence the body prefix. Opacity is
   left normal so toastr's own fade in/out still runs. */
body #toast-container > .toast {
    --ark-toast: var(--ark-info);
    position: relative; overflow: hidden; width: 360px; max-width: calc(100vw - 2rem); margin: 0 0 0.6rem !important;
    padding: 0.8rem 2.75rem 0.8rem 3.4rem !important; border: 0; border-radius: var(--ark-radius-lg) !important;
    /* text is centred in the card, and the icon tile on the card's middle line, so the two line up at any length */
    display: flex; flex-direction: column; justify-content: center; min-height: 3.35rem;
    font: 500 0.85rem/1.45 var(--ark-font); color: var(--ark-text) !important; opacity: 1; cursor: default;
    background-color: color-mix(in srgb, var(--ark-surface-2) 97%, transparent) !important;
    background-image: radial-gradient(circle at 1.675rem 50%, color-mix(in srgb, var(--ark-toast) 22%, transparent), transparent 4.5rem) !important;
    background-position: 0 0 !important; background-size: 100% 100%; background-repeat: no-repeat; /* toastr offsets its icon 15px */
    -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ark-toast) 24%, transparent), var(--ark-lift), 0 18px 40px -16px rgba(0, 0, 0, 0.7) !important;
    animation: ark-toast-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
body #toast-container > .toast:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ark-toast) 42%, transparent), var(--ark-lift), 0 22px 48px -16px rgba(0, 0, 0, 0.75) !important; }
body #toast-container > .toast-success { --ark-toast: var(--ark-mod-correspondence); }
body #toast-container > .toast-error { --ark-toast: var(--ark-danger); }
body #toast-container > .toast-warning { --ark-toast: var(--ark-warning); }
/* the tile (::before) and its glyph (::after) share one centre: the glyph is an SVG mask, not a font character, so
   no fallback font can push it off-centre */
body #toast-container > .toast::before, body #toast-container > .toast::after {
    content: ""; position: absolute; top: 50%; translate: 0 -50%;
}
body #toast-container > .toast::before {
    left: 0.8rem; width: 1.75rem; height: 1.75rem; border-radius: 0.55rem;
    background: color-mix(in srgb, var(--ark-toast) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ark-toast) 32%, transparent);
}
body #toast-container > .toast::after {
    --ark-toast-glyph: var(--ark-i-info);
    left: calc(0.8rem + (1.75rem - 0.95rem) / 2); width: 0.95rem; height: 0.95rem; background: var(--ark-toast);
    -webkit-mask: var(--ark-toast-glyph) center / contain no-repeat; mask: var(--ark-toast-glyph) center / contain no-repeat;
}
body #toast-container > .toast-success::after { --ark-toast-glyph: var(--ark-i-check); }
body #toast-container > .toast-error::after { --ark-toast-glyph: var(--ark-i-x); }
body #toast-container > .toast-warning::after { --ark-toast-glyph: var(--ark-i-alert); }
body #toast-container > .toast .toast-title { margin-bottom: 0.1rem; font-weight: 600; color: var(--ark-text); }
body #toast-container > .toast .toast-message { color: var(--ark-text); word-wrap: break-word; }
body #toast-container > .toast .toast-title + .toast-message { color: var(--ark-text-2); }
body #toast-container > .toast .toast-close-button {
    position: absolute; top: 50%; translate: 0 -50%; right: 0.55rem; float: none; width: 1.6rem; height: 1.6rem; margin: 0; padding: 0;
    display: grid; place-items: center; border-radius: 0.45rem; font: 400 1.15rem/1 var(--ark-font); text-shadow: none; opacity: 1;
    color: var(--ark-muted) !important; background: transparent; transition: background 0.15s, color 0.15s;
}
body #toast-container > .toast .toast-close-button:hover, body #toast-container > .toast .toast-close-button:focus-visible { color: var(--ark-text) !important; background: var(--ark-tint); opacity: 1; }
body #toast-container > .toast .toast-progress { height: 2px; opacity: 0.75; background: var(--ark-toast); }
@keyframes ark-toast-in { from { translate: 14px 0; } to { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { body #toast-container > .toast { animation: none; } }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) #toast-container > .toast {
    background-color: color-mix(in srgb, #fff 98%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ark-toast) 28%, transparent), 0 14px 34px -14px rgba(15, 23, 42, 0.28) !important;
}
/* SweetAlert confirms: the same panel as the Bootstrap modals (accent hairline on top, footer band), with the stock
   ring icon swapped for a tinted glyph tile like the toasts'. --ark-swal is the dialog's tone: red for a warning
   with a danger button (every delete confirm), amber for a plain warning, green success, red error, blue info. */
.swal-overlay { background-color: rgba(3, 6, 10, 0.75); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.swal-modal {
    --ark-swal: var(--ark-accent); --ark-swal-on: var(--ark-on-accent);
    position: relative; overflow: hidden; width: min(420px, calc(100% - 2rem)); margin: 1rem auto; padding: 1.75rem 0 0;
    background-color: var(--ark-surface) !important; border-radius: var(--ark-radius-xl); font-family: var(--ark-font); color: var(--ark-text);
    background-image: radial-gradient(ellipse 75% 60% at 50% 0%, color-mix(in srgb, var(--ark-swal) 11%, transparent), transparent 70%);
}
.swal-modal:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ark-swal), transparent); pointer-events: none; }
.swal-modal:has(.swal-icon--warning) { --ark-swal: var(--ark-warning); --ark-swal-on: #1a1203; }
.swal-modal:has(.swal-icon--warning):has(.swal-button--danger), .swal-modal:has(.swal-icon--error) { --ark-swal: var(--ark-danger); --ark-swal-on: #fff; }
.swal-modal:has(.swal-icon--success) { --ark-swal: var(--ark-mod-correspondence); --ark-swal-on: var(--ark-on-accent); }
.swal-modal:has(.swal-icon--info) { --ark-swal: var(--ark-info); --ark-swal-on: #fff; }
/* a dialog without an icon that ends in a danger button (the bulk-delete summary) still reads as a delete */
.swal-modal:not(:has(.swal-icon)):has(.swal-button--danger) { --ark-swal: var(--ark-danger); --ark-swal-on: #fff; }
.swal-overlay--show-modal .swal-modal { animation: arkSwalIn 0.22s var(--ark-ease); }
@keyframes arkSwalIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

.swal-icon:not(.swal-icon--custom) {
    --ark-swal-glyph: var(--ark-i-alert);
    width: 3.25rem; height: 3.25rem; margin: 0 auto 1rem; border: 0; border-radius: 0.95rem; animation: none;
    background: color-mix(in srgb, var(--ark-swal) 15%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ark-swal) 32%, transparent), 0 8px 24px -8px color-mix(in srgb, var(--ark-swal) 55%, transparent);
}
.swal-icon:not(.swal-icon--custom) > * { display: none !important; }
.swal-icon:not(.swal-icon--custom):before { content: none; }
.swal-icon:not(.swal-icon--custom):after {
    content: ""; position: absolute; inset: 0; width: 1.5rem; height: 1.5rem; margin: auto; border-radius: 0; transform: none; animation: none;
    background: var(--ark-swal); -webkit-mask: var(--ark-swal-glyph) center / contain no-repeat; mask: var(--ark-swal-glyph) center / contain no-repeat;
}
.swal-icon--success { --ark-swal-glyph: var(--ark-i-check) !important; }
.swal-icon--error { --ark-swal-glyph: var(--ark-i-x) !important; }
.swal-icon--info { --ark-swal-glyph: var(--ark-i-info) !important; }

.swal-title { padding: 0 1.75rem; margin: 0 0 0.45rem; font-size: 1.1rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--ark-heading); }
.swal-title:first-child { margin-top: 0.25rem; }
.swal-text { display: block; max-width: none; padding: 0 1.75rem; margin: 0; font-size: 0.875rem; line-height: 1.55; text-align: center; color: var(--ark-text-2); }
.swal-content { padding: 0 1.75rem; margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.55; color: var(--ark-text-2); }
.swal-content ul { padding-left: 1.1rem; margin-bottom: 0.5rem; }
.swal-content strong, .swal-content b { color: var(--ark-text); font-weight: 600; }
.swal-content__input, .swal-content__textarea { background: var(--ark-input-bg); color: var(--ark-text); border: 0; border-radius: var(--ark-radius); box-shadow: inset 0 0 0 1px var(--ark-border); padding: 0.6rem 0.8rem; }
.swal-content__input:focus, .swal-content__textarea:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--ark-accent), 0 0 0 3px rgba(var(--ark-accent-rgb), 0.14); }

.swal-footer {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1.5rem 0 0; padding: 1rem 1.4rem;
    border-top: 1px solid var(--ark-border); border-radius: 0; background: rgba(0, 0, 0, 0.15); text-align: center;
}
.swal-button-container { margin: 0; }
.swal-button {
    min-width: 6.5rem; min-height: 2.5rem; padding: 0.5rem 1.2rem; border-radius: var(--ark-radius);
    font: 600 0.875rem/1.35 var(--ark-font); letter-spacing: 0.01em;
    transition: background var(--ark-t), color var(--ark-t), box-shadow var(--ark-t), transform var(--ark-t);
}
.swal-button:focus { box-shadow: none; }
.swal-button:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--ark-accent-ring) !important; }
.swal-button--cancel { font-weight: 500; }
/* the danger confirm is a solid button in the dialog's tone, shaped like the accent primary */
.swal-button.swal-button--danger, .swal-button.swal-button--confirm.swal-button--danger {
    color: var(--ark-swal-on) !important; border: 1px solid transparent !important;
    background: linear-gradient(135deg, var(--ark-swal) 0%, color-mix(in srgb, var(--ark-swal) 82%, #000) 100%) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--ark-swal) 30%, transparent);
}
.swal-button.swal-button--danger:not([disabled]):hover, .swal-button.swal-button--confirm.swal-button--danger:not([disabled]):hover {
    color: var(--ark-swal-on) !important; background: color-mix(in srgb, var(--ark-swal) 82%, #000) !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--ark-swal) 38%, transparent); transform: translateY(-1px);
}
.swal-button.swal-button--danger:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ark-swal) 40%, transparent) !important; }

/* --------------------------------------------------------------------------
   11. Dashboard
   -------------------------------------------------------------------------- */
.app-content.dashboard { padding-top: 1.5rem; }
.app-content.dashboard:before { content: "Dashboard"; display: block !important; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ark-heading); margin: 0 0 1rem; }
.dashboard .row.parent_box { row-gap: 1rem; margin-bottom: 1rem !important; }
.dashboard .card { height: 100%; margin-bottom: 0 !important; background: var(--ark-surface-2) !important; transition: border-color var(--ark-t), box-shadow var(--ark-t); }
.dashboard .card:hover { border-color: rgba(var(--ark-accent-rgb), 0.3) !important; }
/* the dashboard script pins .child_box heights before the charts render; let flex do the equal heights instead */
.dashboard .child_box { height: auto !important; }
.dashboard .child_box:not(.card) { display: flex; flex-direction: column; }
.dashboard .col-lg-8 > .child_box { display: flex; flex-direction: column; gap: 1rem; }
.dashboard .col-lg-8 > .child_box > .multi_child_box { flex: 1 1 auto; }
.dashboard .multi_child_box + .multi_child_box { margin-top: 1rem; }
.dashboard .child_box .card.multi_child_box { height: auto; }
.dashboard .card > .card-body { padding: 0.85rem 1rem 1rem; }
/* card head: an uppercase label band with an accent marker */
.dashboard .card-body > .d-flex.fw-bold.small { align-items: center; gap: 0.5rem; margin: -0.85rem -1rem 0.85rem !important; padding: 0.7rem 1rem; border-bottom: 1px solid rgba(var(--ark-accent-rgb), 0.08); }
.dashboard .card-body > .d-flex.fw-bold.small span.flex-grow-1 { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ark-muted); }
.dashboard .card-body > .d-flex.fw-bold.small span.flex-grow-1:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ark-accent); box-shadow: 0 0 6px rgba(var(--ark-accent-rgb), 0.8); flex: none; }
.dashboard .card-body > .d-flex.fw-bold.small h5 { font-size: 1.5rem !important; font-weight: 800; color: var(--ark-accent); letter-spacing: -0.03em; line-height: 1; }
/* stat tiles: icon left, label and value stacked beside it */
.dashboard .counts_card .org_count { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.85rem; row-gap: 0.1rem; align-items: center; }
.dashboard .counts_card .org_count > .d-flex.fw-bold.small { grid-column: 2; grid-row: 1; margin: 0 !important; padding: 0; border: 0; align-self: end; }
.dashboard .counts_card .org_count > .d-flex.fw-bold.small span.flex-grow-1:before { content: none; }
.dashboard .counts_card .org_count > .row { display: contents; }
.dashboard .counts_card .org_count > .row > .col-7 { grid-column: 2; grid-row: 2; width: auto; padding: 0; align-self: start; }
.dashboard .counts_card .org_count > .row > .col-5 { grid-column: 1; grid-row: 1 / 3; width: auto; padding: 0; }
.dashboard .counts_card h3 { font-size: 1.6rem; font-weight: 800; line-height: 1.15; color: var(--ark-accent); letter-spacing: -0.03em; }
.dashboard .counts_card .org_count .text-end { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: var(--ark-accent-dim); border-radius: var(--ark-radius); border: 0; }
.dashboard .counts_card .org_count svg { width: 20px; height: 20px; display: block; }
.dashboard .counts_card .org_count svg path { fill: var(--ark-accent); }
.dashboard .counts_card { padding: 0.15rem 0; }
.dashboard .counts_card > .card-body { padding: 1rem 1.15rem; }
.dashboard .small { font-size: 0.8rem; color: var(--ark-text-2); }
.dashboard .table tr > th { font-size: 0.65rem; }
.dashboard .table > thead > tr > th, .dashboard .table thead th { background: transparent; padding: 0.55rem 0.65rem; border-bottom: 1px solid rgba(var(--ark-accent-rgb), 0.15); }
.dashboard .table > thead > tr > th:first-child, .dashboard .table > tbody > tr > td:first-child { padding-left: 0.65rem; }
.dashboard .table > thead > tr > th:last-child, .dashboard .table > tbody > tr > td:last-child { padding-right: 0.65rem; }
.dashboard .table > tbody > tr:hover > td:first-child { box-shadow: none; }
.counts_card table tbody td { border-bottom: 1px solid rgba(var(--ark-accent-rgb), 0.06); padding: 0.3rem 0; font-size: 0.8rem; color: var(--ark-muted); }
.counts_card table tbody tr:last-child td { border-bottom: 0; }
.counts_card table thead td { color: var(--ark-text); font-size: 0.8rem; font-weight: 600; padding-bottom: 0.4rem; }
.counts_card .btn-sm { padding: 0.2rem 0.6rem; font-size: 0.7rem; min-height: 0; }
.ledger_label li { font-size: 0.8rem; color: var(--ark-muted); }
.ledger_label li .text-white { color: var(--ark-heading) !important; font-weight: 700; }
.ledger_label li .rounded-pill { width: 8px; height: 8px; }
.no_chart_box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: var(--ark-muted); padding: 1.5rem 0; letter-spacing: 0.06em; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; }
.no_chart_box img { height: 110px; opacity: 0.45; filter: grayscale(1) brightness(1.3); }
.dashboard .chart_box, .dashboard_charts .chart_box { border: 0; border-radius: var(--ark-radius); }
.tab_view_card .nav-pills { padding: 0; margin: 0 0 0.75rem !important; gap: 0.3rem; background: transparent; border: 0; }
.tab_view_card .nav-pills .nav-link { font-weight: 600; font-size: 0.72rem; padding: 0.3rem 0.65rem; border-radius: var(--ark-radius); color: var(--ark-muted); }
.tab_view_card .nav-pills .nav-link:hover { color: var(--ark-accent); }
.dashboard .tab_view_card .table td, .dashboard .tab_view_card .table th { padding: 0.6rem 0.65rem; font-size: 0.78rem; }
.dashboard .tab_view_card .table td[align="center"] { color: var(--ark-muted); padding: 1.2rem; }
.dashboard div:has(> table.table) { overflow-x: auto; }
.apexcharts-text, .apexcharts-legend-text { fill: var(--ark-text-2) !important; color: var(--ark-text-2) !important; font-family: var(--ark-font) !important; }
.apexcharts-gridline { stroke: var(--ark-border); }
.apexcharts-tooltip { background: var(--ark-surface-2) !important; border: 1px solid var(--ark-border) !important; color: var(--ark-text) !important; box-shadow: var(--ark-shadow) !important; }
.apexcharts-tooltip-title { background: var(--ark-surface-3) !important; border-bottom: 1px solid var(--ark-border) !important; }
.apexcharts-xaxistooltip { background: var(--ark-surface-2) !important; border-color: var(--ark-border) !important; color: var(--ark-text) !important; }

/* --------------------------------------------------------------------------
   12. Sign-in and the other auth pages
   -------------------------------------------------------------------------- */
body.pace-top { background: var(--ark-bg) !important; }
body.ark-auth:before {
    background-image:
        radial-gradient(ellipse 90% 70% at 50% 30%, rgba(var(--ark-accent-rgb), 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 70%, rgba(59, 130, 246, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 10% 80%, rgba(168, 85, 247, 0.03) 0%, transparent 45%) !important;
}
.app-without-header { padding-top: 0; }
.login { min-height: 100vh; padding: 2rem 1rem; display: flex; align-items: center; justify-content: center; }
.login .login-content { max-width: 380px; width: 100%; padding: 0; background: transparent; border: 0; box-shadow: none; position: relative; animation: arkRise 0.4s var(--ark-ease) backwards; }
.login .login-content:before { content: ""; display: block; height: 44px; width: 44px; margin: 0 auto 1.75rem; background: url(../img/ark-logo-160.png) center / contain no-repeat; filter: drop-shadow(0 6px 16px rgba(var(--ark-accent-rgb), 0.35)); }
.login .login-content form {
    position: relative; overflow: hidden; padding: 0 1.75rem 1.75rem;
    background: var(--ark-surface); border: 1px solid var(--ark-border); border-radius: var(--ark-radius-lg);
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.55), 0 0 80px -30px rgba(var(--ark-accent-rgb), 0.12);
}
.login .login-content form:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 10%, var(--ark-accent) 50%, transparent 90%); opacity: 0.5; }
.login .login-content h1 { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 -1.75rem 0.25rem; padding: 1.5rem 1.75rem 0; background: linear-gradient(180deg, rgba(var(--ark-accent-rgb), 0.035) 0%, transparent 100%); }
.login .login-content h1:before {
    content: "Portal"; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.7rem; border-radius: 999px;
    background: rgba(var(--ark-accent-rgb), 0.1); border: 1px solid rgba(var(--ark-accent-rgb), 0.18); color: var(--ark-accent);
    font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4;
}
.login .login-content form[action*="admin/login"] h1:before { content: "Admin"; }
.login .login-content form[action*="address-book"] h1:before, .login .login-content form[action*="address_book"] h1:before { content: "Address book"; }
.login .login-content .text-white.text-opacity-50.text-center.mb-4 { color: var(--ark-muted) !important; font-size: 0.8125rem; margin: 0 -1.75rem 1.25rem !important; padding: 0 1.75rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.login .login-content .form-label { color: var(--ark-text-2); font-size: 0.8125rem; margin-bottom: 0.3rem; }
.login .login-content .form-label .text-success { display: none; }
.login .login-content .mb-3 { margin-bottom: 0.875rem !important; }
.login .login-content .form-control-lg { background: var(--ark-input-bg) !important; min-height: 2.625rem; padding: 0.5rem 0.875rem 0.5rem 2.5rem; font-size: 0.875rem; background-repeat: no-repeat !important; background-position: 0.85rem center !important; background-size: 15px 15px !important; }
.login .login-content input[name="email"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8da3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='5' width='18' height='14' rx='2'/%3e%3cpath d='m3 7 9 6 9-6'/%3e%3c/svg%3e") !important; }
.login .login-content input[name="password"], .login .login-content input[name="password_confirmation"], .login .login-content input[name="confirm_password"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8da3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='4' y='11' width='16' height='10' rx='2'/%3e%3cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3e%3c/svg%3e") !important; }
.login .login-content input[name="email"]:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314b8a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='5' width='18' height='14' rx='2'/%3e%3cpath d='m3 7 9 6 9-6'/%3e%3c/svg%3e") !important; }
/* 2FA code: a shield-with-tick, same treatment as the email and password fields; password gets its focus tint too */
.login .login-content input[name="code"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8da3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 2.5 4.5 5.5v6c0 4.7 3.2 8.4 7.5 10 4.3-1.6 7.5-5.3 7.5-10v-6z'/%3e%3cpath d='m9 12 2 2 4-4'/%3e%3c/svg%3e") !important; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.login .login-content input[name="code"]:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314b8a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 2.5 4.5 5.5v6c0 4.7 3.2 8.4 7.5 10 4.3-1.6 7.5-5.3 7.5-10v-6z'/%3e%3cpath d='m9 12 2 2 4-4'/%3e%3c/svg%3e") !important; }
.login .login-content input[name="password"]:focus, .login .login-content input[name="password_confirmation"]:focus, .login .login-content input[name="confirm_password"]:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314b8a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='4' y='11' width='16' height='10' rx='2'/%3e%3cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3e%3c/svg%3e") !important; }
/* password eye: inside the field on the right, the field makes room for it; Edge's own reveal button is hidden so there's one eye */
.ark-pw { position: relative; }
.login .login-content .ark-pw .form-control-lg { padding-right: 2.75rem; }
.ark-pw input::-ms-reveal, .ark-pw input::-ms-clear { display: none; }
.ark-pw-toggle {
    position: absolute; top: 0; bottom: 0; right: 0.3rem; width: 2.25rem; margin: auto 0; height: 2rem; display: grid; place-items: center; padding: 0;
    border: 0; border-radius: var(--ark-radius-sm); background: transparent; color: var(--ark-muted); cursor: pointer; transition: color var(--ark-t), background var(--ark-t);
}
.ark-pw-toggle:hover { color: var(--ark-accent); background: var(--ark-tint); }
.ark-pw-toggle:focus-visible { outline: 0; color: var(--ark-accent); box-shadow: 0 0 0 3px var(--ark-accent-ring); }
.ark-pw-toggle[aria-pressed="true"] { color: var(--ark-accent); }
.ark-pw-toggle i { font-size: 0.85rem; }
.login .login-content .btn-lg { width: 100%; min-height: 2.625rem; padding: 0 1.25rem; font-size: 0.875rem; font-weight: 600; margin-top: 0.35rem; }
.login .login-content .btn-outline-theme.btn-lg { color: var(--ark-on-accent) !important; background: linear-gradient(135deg, var(--ark-accent), var(--ark-accent-hover)) !important; border-color: transparent !important; box-shadow: 0 2px 10px rgba(var(--ark-accent-rgb), 0.25); }
.login .login-content .btn-outline-theme.btn-lg:hover { background: var(--ark-accent-hover) !important; box-shadow: 0 4px 16px rgba(var(--ark-accent-rgb), 0.35); transform: translateY(-1px); }
.login .login-content .d-flex a.text-white { color: var(--ark-accent) !important; font-size: 0.75rem; font-weight: 500; }
.login .login-content .d-flex a.text-white:hover { color: var(--ark-accent-hover) !important; }
.login .login-content .form-label + a, .login .login-content .d-flex { align-items: baseline; }
.login .login-content .text-center.text-white.text-opacity-50:last-child { margin-top: 1.25rem; position: relative; }
.login .login-content .text-center.text-white.text-opacity-50:last-child:before { content: "or"; display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1rem; color: var(--ark-border-strong); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.login .login-content .text-center.text-white.text-opacity-50:last-child:before { background: linear-gradient(var(--ark-border), var(--ark-border)) left center / calc(50% - 1.4rem) 1px no-repeat, linear-gradient(var(--ark-border), var(--ark-border)) right center / calc(50% - 1.4rem) 1px no-repeat; justify-content: center; }
.login .login-content .text-center.text-white.text-opacity-50:last-child a { display: flex; align-items: center; justify-content: center; height: 2.375rem; border: 1px dashed var(--ark-border-strong); border-radius: var(--ark-radius); color: var(--ark-muted) !important; font-size: 0.8125rem; text-decoration: none; transition: border-color var(--ark-t), color var(--ark-t), background var(--ark-t); }
.login .login-content .text-center.text-white.text-opacity-50:last-child a:hover { border-color: rgba(var(--ark-accent-rgb), 0.4); color: var(--ark-accent) !important; background: rgba(var(--ark-accent-rgb), 0.05); }
.login .login-content #timer { color: var(--ark-accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.login .login-content #demo { display: none; }
.login .login-content .error { margin-top: 0.35rem; }

/* --------------------------------------------------------------------------
   13. Feature areas
   -------------------------------------------------------------------------- */
.mailbox .mailbox-detail, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .mailbox .mailbox-detail { border: 1px solid var(--ark-border); border-radius: var(--ark-radius-lg); background: var(--ark-surface); margin: 0 0 1rem; padding: 1.25rem; }
.mailbox .mailbox-detail .mailbox-detail-header { border-bottom: 1px solid var(--ark-border); }
.mailbox .mailbox-detail .mailbox-detail-body, .mailbox .mailbox-detail-content { color: var(--ark-text-2); }
.email_preview { border-radius: var(--ark-radius-lg); overflow: hidden; }
.activity_log_html tr td, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .activity_log_html tr td { border-bottom: 1px solid var(--ark-border); padding: 0.7rem 0.5rem; color: var(--ark-text-2); }
.activity_log_html .bg-white, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .activity_log_html .bg-white { background: var(--ark-accent-dim) !important; color: var(--ark-text) !important; border-radius: var(--ark-radius-sm); }
.app-theme-panel .app-theme-panel-content, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-theme-panel .app-theme-panel-content { background: var(--ark-surface); border-left: 1px solid var(--ark-border); box-shadow: var(--ark-shadow-lg); }
.app-theme-panel .app-theme-toggle-btn { background: var(--ark-surface-2); color: var(--ark-text); border: 1px solid var(--ark-border); border-radius: var(--ark-radius) 0 0 var(--ark-radius); }
.app-theme-panel .app-theme-toggle-btn:hover { color: var(--ark-accent); }

.app-content .flowchart-example-container, #content .flowchart-example-container { background: var(--ark-bg-mid); border: 1px solid var(--ark-border); border-radius: var(--ark-radius-lg); color: var(--ark-text); background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 1.25rem 1.25rem; }
.flowchart-operator { background: var(--ark-surface-2); color: var(--ark-text); border: 1px solid var(--ark-border-strong); border-radius: var(--ark-radius); box-shadow: var(--ark-shadow); overflow: hidden; }
.flowchart-operator.selected { border-color: var(--ark-accent); box-shadow: 0 0 0 3px var(--ark-accent-ring); }
.flowchart-operator .flowchart-operator-title { background: var(--ark-accent-dim); color: var(--ark-accent); font-weight: 600; border-bottom: 1px solid var(--ark-border); padding: 0.4rem 0.6rem; }
.flowchart-operator .flowchart-operator-inputs, .flowchart-operator .flowchart-operator-outputs { padding: 0.35rem 0.5rem; }
.flowchart-operator-connector-label { color: var(--ark-text-2); }
/* links take the accent (custom.css paints them grey, which already overrode the plugin's per-link colour in v1) */
.flowchart-link path { stroke: var(--ark-accent) !important; stroke-width: 3; }
.flowchart-link rect { fill: var(--ark-accent) !important; }
/* connector tips: custom.css forces rgb(46 46 46) !important on them, so they take the accent at higher specificity
   (a picked link colour applies to the line; the tips stay accent), and the selected link's tips go bright */
.flowchart-operator :is(.flowchart-operator-inputs, .flowchart-operator-outputs) .flowchart-operator-connector-small-arrow { border-left-color: var(--ark-accent) !important; }
.flowchart-operator :is(.flowchart-operator-inputs, .flowchart-operator-outputs) .flowchart-operator-connector-small-arrow[style*="0, 0, 85"] { border-left-color: var(--ark-text) !important; }
.flowchart-link:hover path { stroke-width: 4; }
/* the plugin paints a selected link #000055 and the in-progress drag line solid black: selected reads as a bright
   glowing line, the drag line takes the accent */
.flowchart-link path[stroke="#000055"] { stroke: var(--ark-text) !important; stroke-width: 4; filter: drop-shadow(0 0 5px rgba(var(--ark-accent-rgb), 0.9)); }
.flowchart-link:has(path[stroke="#000055"]) rect { fill: var(--ark-text) !important; }
.flowchart-temporary-link-layer line, .flowchart-temporary-link-layer path { stroke: var(--ark-accent) !important; stroke-width: 3; stroke-opacity: 0.85; }
.flowchart-operator-connector-arrow { border-left-color: rgba(var(--ark-accent-rgb), 0.45); }
.flowchart-operator-connector:hover .flowchart-operator-connector-arrow { border-left-color: var(--ark-accent); }

.text-signature, .text-signature-preview { border-radius: var(--ark-radius); border: 1px dashed var(--ark-border-strong); }
.signature-holder img, .legal-signature-holder img { background: #fff; border-radius: var(--ark-radius); padding: 0.5rem; }
/* first-project tour: the content column and the rest of the menu dim, the Projects item stays lit and
   pulses, and a coach card sits beside it (custom.js lines it up; .tour_floating centres it when the sidebar is hidden) */
.tour_popup { left: var(--ark-sidebar-w); z-index: 1035; background: rgba(3, 6, 10, 0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.app.app-sidebar-collapsed ~ .tour_popup, .tour_popup.tour_floating { left: 0; }
/* the top bar (menu toggler) stays usable when the sidebar is collapsed or off-canvas; an open mobile menu drops the card */
.app.app-sidebar-collapsed ~ .tour_popup { top: var(--ark-header-h); }
.app.app-sidebar-mobile-toggled ~ .tour_popup { display: none !important; }
.tour_popup .tour_content {
    left: 1.25rem; top: 50%; transform: translateY(-50%); width: min(22rem, calc(100vw - 2.5rem));
    display: block; margin: 0; text-align: left; padding: 1.2rem 1.25rem 1.1rem; border-radius: var(--ark-radius-lg);
    background: var(--ark-surface-2); color: var(--ark-text); font-family: var(--ark-font);
    box-shadow: var(--ark-lift), var(--ark-depth-lg), 0 0 0 1px rgba(var(--ark-accent-rgb), 0.35), 0 0 48px -14px rgba(var(--ark-accent-rgb), 0.5);
    animation: ark-tour-in 0.35s ease-out both;
}
.tour_popup .tour_content::before { content: ""; position: absolute; left: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: var(--ark-surface-2); transform: rotate(45deg); border-radius: 2px; box-shadow: -1px 1px 0 0 rgba(var(--ark-accent-rgb), 0.35); }
.tour_popup.tour_floating .tour_content { left: 50%; transform: translate(-50%, -50%); }
.tour_popup.tour_floating .tour_content::before { display: none; }
.tour_popup .tour_step { display: inline-block; margin-bottom: 0.35rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ark-accent); }
.tour_popup .tour_content h5 { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 600; color: var(--ark-text); }
.tour_popup .tour_content p { margin: 0 0 1rem; font-size: 0.85rem; line-height: 1.5; color: var(--ark-text-2); }
.tour_popup .tour_actions { display: flex; align-items: center; gap: 0.5rem; }
.tour_popup .tour_cta { padding: 0.5rem 0.95rem; border: 0; border-radius: var(--ark-radius); font-weight: 600; font-size: 0.85rem; color: var(--ark-on-accent) !important; background: linear-gradient(135deg, var(--ark-accent), color-mix(in srgb, var(--ark-accent) 72%, #000)); box-shadow: 0 6px 18px -8px rgba(var(--ark-accent-rgb), 0.8); }
.tour_popup .tour_cta:hover { filter: brightness(1.08); }
.tour_popup .tour_cta i { margin-right: 0.3rem; }
.tour_popup .tour_later { padding: 0.5rem 0.75rem; border: 0; background: transparent; font-size: 0.85rem; color: var(--ark-muted); }
.tour_popup .tour_later:hover { color: var(--ark-text); background: var(--ark-tint); }
.tour_open #sidebar .menu:after { background: rgba(3, 6, 10, 0.72); bottom: 0; z-index: 1; pointer-events: none; border-radius: var(--ark-radius); }
.tour_open #sidebar .menu > .menu-item.ark-mod-projects { position: relative; z-index: 2; }
.tour_open #sidebar .menu > .menu-item.ark-mod-projects > .btn { color: var(--ark-text) !important; background: var(--ark-accent-dim) !important; box-shadow: 0 0 0 1px rgba(var(--ark-accent-rgb), 0.6) !important; }
.tour_open #sidebar .menu > .menu-item.ark-mod-projects:after { content: ""; position: absolute; inset: 0; border-radius: var(--ark-radius); pointer-events: none; animation: ark-tour-pulse 2s ease-out infinite; }
@keyframes ark-tour-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--ark-accent-rgb), 0.45); } 70%, 100% { box-shadow: 0 0 0 10px rgba(var(--ark-accent-rgb), 0); } }
@keyframes ark-tour-in { from { opacity: 0; translate: -8px 0; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 991.98px) { .tour_popup { left: 0; top: var(--ark-header-h); } }
@media (prefers-reduced-motion: reduce) { .tour_popup .tour_content, .tour_open #sidebar .menu > .menu-item.ark-mod-projects:after { animation: none; } }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .tour_popup, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)).tour_open #sidebar .menu:after { background: rgba(15, 23, 42, 0.38); }
.avtar_capture .preview_image { border-radius: var(--ark-radius); }
.form_builder p { color: var(--ark-text-2); }
.revision_diff, .revise_highlight { background: var(--ark-accent-dim); }
.ViewSDK_parentRelativeHeight { border-radius: var(--ark-radius); overflow: hidden; }
.lg-backdrop { background: rgba(3, 6, 10, 0.92); }

/* --------------------------------------------------------------------------
   14. Motion: content rises once; overlays pop; nothing else moves by itself
   -------------------------------------------------------------------------- */
@keyframes arkRise { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }
/* list tables: paperclip after the format icon when a correspondence carries an attachment */
.table > tbody > tr > td > .default_doc_icon ~ a { white-space: nowrap; }
/* A number cell (file icon, paperclip, number) stays on one line however narrow the column is dragged; the number
   is cut with an ellipsis instead of dropping under the icons. Beats the resized table's overflow-wrap: anywhere. */
table.dataTable > tbody > tr > td:has(> .default_doc_icon) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.ark-attach-icon { margin: 0 0.45rem 0 -0.1rem; font-size: 0.72rem; color: var(--ark-muted); vertical-align: middle; }
/* revision history: the page renders oldest first and highlights each version against the first one, so the order
   is flipped visually to put the latest on top; the revision sits in each heading and the number in the band */
#accordionExample { display: flex; flex-direction: column-reverse; }
.accordion-button:has(> .header_title1) { display: flex; align-items: center; gap: 0.75rem; }
.accordion-button > .header_title1, .accordion-button > .header_title2 { flex: 1 1 0; width: auto !important; min-width: 0; }
.ark-rev-chip { flex: none; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ark-accent); background: var(--ark-accent-dim); box-shadow: inset 0 0 0 1px rgba(var(--ark-accent-rgb), 0.3); }
.ark-doc-chip { display: inline-flex; align-items: center; margin-right: 0.5rem; padding: 0.4rem 0.8rem; border-radius: var(--ark-radius); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ark-text); background: var(--ark-tint); font-variant-numeric: tabular-nums; }
/* Documentation, Display All Revisions: each row names its revision; revisions a later one replaced are muted */
#documentation_datatables .ark-rev-chip { display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.45rem; font-size: 0.68rem; vertical-align: 1px; }
.ark-superseded { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ark-muted); background: var(--ark-tint); vertical-align: 1px; }
#documentation_datatables tr.ark-row-superseded > td { color: var(--ark-muted); }
#documentation_datatables tr.ark-row-superseded > td > a, #documentation_datatables tr.ark-row-superseded > td > .default_doc_icon { opacity: 0.7; }
/* correspondence view: Reply / Reply All / Forward as visible buttons */
.mailbox-detail-content > .d-flex:has(> .email_preview) { flex-wrap: wrap; }
.mailbox-detail-content > .d-flex > .mailbox-toolbar:has(> .ark-mail-actions) { order: -1; flex: 0 0 100%; display: flex; justify-content: flex-end; margin-bottom: 0.75rem; padding: 0; }
.ark-mail-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ark-mail-action { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; border-radius: var(--ark-radius); font-size: 0.8rem; font-weight: 600; color: var(--ark-text-2) !important; background: var(--ark-surface-2); box-shadow: var(--ark-lift), 0 0 0 1px var(--ark-border); text-decoration: none; }
.ark-mail-action:hover, .ark-mail-action:focus-visible { color: var(--ark-accent) !important; background: var(--ark-accent-dim); }
/* template colours hard-coded white that vanish on the light theme's white surfaces */
.datepicker table tr th.dow { color: var(--ark-muted) !important; }
.mailbox-attachment, .mailbox-attachment .document-name, .mailbox-attachment a { color: var(--ark-text) !important; }
@keyframes arkFade { from { opacity: 0; } to { opacity: 1; } }
/* backwards, not both: a filling opacity animation keeps each wrapper a stacking context, which traps the signature
   overlay and the pages' own modals under their backdrop */
.app-content > .container, .app-content > .row, .app-content > form, .app-content > .card { animation: arkFade 0.25s var(--ark-ease) backwards; }

/* --------------------------------------------------------------------------
   15. Loading and busy states
   Only restyles signals the scripts already toggle: .spinner_loader (global
   ajax, .hide toggled), .btn_with_loader, .dataTables_processing, and the
   signature area's .page-loader__spinner. The global one used to sit in flow
   at the top of the page and shove it down on every call; it is a fixed
   overlay now, same element, same toggle. The page-load bar is pace.js.
   -------------------------------------------------------------------------- */
@keyframes arkBarSlide { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(300%, 0, 0); } }
@keyframes arkSpin { to { transform: rotate(360deg); } }
.app > .row:has(> .spinner_loader) { margin: 0; }
.app > .row:has(> .spinner_loader.hide) { display: none; }
.spinner_loader { position: fixed; inset: 0; z-index: 12000; margin: 0 !important; display: flex; align-items: center; justify-content: center; background: rgba(3, 6, 10, 0.45); animation: arkFade 0.15s var(--ark-ease) both; }
.spinner_loader:before { content: ""; position: fixed; left: var(--ark-sidebar-w); top: 0; right: 0; height: 2px; background: rgba(var(--ark-accent-rgb), 0.12); }
.spinner_loader:after { content: ""; position: fixed; left: var(--ark-sidebar-w); top: 0; height: 2px; width: 28%; background: var(--ark-accent); border-radius: 0 3px 3px 0; box-shadow: 0 0 8px rgba(var(--ark-accent-rgb), 0.5); animation: arkBarSlide 1.05s var(--ark-ease) infinite; }
.spinner_loader.hide { display: none !important; }
.spinner_loader .spinner-border { width: 2.4rem !important; height: 2.4rem !important; border-width: 3px; border-style: solid; border-color: rgba(var(--ark-accent-rgb), 0.2); border-top-color: var(--ark-accent); color: var(--ark-accent) !important; filter: none; animation: arkSpin 0.7s linear infinite; }
.btn_with_loader { position: relative; }
.btn_with_loader .spinner-border { width: 0.95rem !important; height: 0.95rem !important; border-width: 2px; border-color: rgba(255, 255, 255, 0.3); border-top-color: currentColor; position: static !important; margin: 0 0 0 0.15rem !important; animation: arkSpin 0.65s linear infinite; }
.btn_with_loader .spinner-border.hide { display: none !important; }
.dataTables_wrapper .dataTables_processing {
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: 100% !important; height: 2px !important; margin: 0 !important; padding: 0 !important;
    background: rgba(var(--ark-accent-rgb), 0.12) !important; border: 0 !important; box-shadow: none !important; font-size: 0 !important; color: transparent !important; overflow: hidden; z-index: 5;
}
.dataTables_wrapper .dataTables_processing:after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 33%; background: var(--ark-accent); animation: arkBarSlide 1.05s var(--ark-ease) infinite; }
.page-loader__spinner { display: inline-flex; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 3px solid rgba(var(--ark-accent-rgb), 0.2); border-top-color: var(--ark-accent); animation: arkSpin 0.7s linear infinite; }
.spinner-border { border-width: 2px; animation: arkSpin 0.7s linear infinite; }
.spinner-border.text-success { color: var(--ark-accent) !important; }
/* pace.js: along the very top of the content column only, no spinner */
.pace { position: fixed; top: 0; left: var(--ark-sidebar-w); right: 0; height: 2px; z-index: 2000; overflow: hidden; pointer-events: none; }
.pace .pace-progress { position: absolute; top: 0 !important; right: 100%; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(var(--ark-accent-rgb), 0.5), var(--ark-accent)); box-shadow: 0 0 8px rgba(var(--ark-accent-rgb), 0.6); }
.pace .pace-progress-inner { display: none; }
.pace .pace-activity { display: none !important; }
.pace.pace-inactive { display: none; }
body:has(.app.app-sidebar-collapsed) .pace, body:has(.app.app-sidebar-collapsed) .spinner_loader:before, body:has(.app.app-sidebar-collapsed) .spinner_loader:after { left: 0; }
body.ark-auth .pace { left: 0; }

/* tables settling in: every list table fills by ajax after paint, so while
   the body has no rows the wrapper holds its eventual height with a row
   skeleton and the table stays invisible. (:has() cannot nest.) */
.dataTables_wrapper:not(:has(table.dataTable tbody tr)) { position: relative; min-height: 34rem; }
.dataTables_wrapper:not(:has(table.dataTable tbody tr)) table.dataTable { visibility: hidden; }
.dataTables_wrapper:not(:has(table.dataTable tbody tr))::after {
    content: ""; position: absolute; left: 1.25rem; right: 1.25rem; top: 3.4rem; height: 27rem; pointer-events: none; grid-area: table;
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 0.85rem, transparent 0.85rem 3.35rem),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0 3.3rem, var(--ark-border) 3.3rem 3.35rem);
    -webkit-mask: linear-gradient(90deg, #000 60%, transparent), linear-gradient(180deg, #000, transparent 95%);
    -webkit-mask-composite: source-in; mask: linear-gradient(90deg, #000 60%, transparent), linear-gradient(180deg, #000, transparent 95%); mask-composite: intersect;
    animation: arkSkeleton 1.4s ease-in-out infinite;
}
@keyframes arkSkeleton { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.dataTables_wrapper { transition: min-height 0.35s var(--ark-ease) 0.12s; }
.dataTables_wrapper table.dataTable { opacity: 1; transition: opacity 0.3s var(--ark-ease) 0.08s; }
.dataTables_wrapper:not(:has(table.dataTable tbody tr)) table.dataTable { opacity: 0; transition: none; }

/* --------------------------------------------------------------------------
   16. Light theme
   -------------------------------------------------------------------------- */
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) {
    --ark-bg: #f1f5f9;
    --ark-bg-mid: #f8fafc;
    --ark-surface: #ffffff;
    --ark-surface-2: #f8fafc;
    --ark-surface-3: #eef2f6;
    --ark-input-bg: #ffffff;
    --ark-header-bg: rgba(255, 255, 255, 0.94);
    --ark-border: #e2e8f0;
    --ark-border-strong: #cbd5e1;
    --ark-divider: rgba(15, 23, 42, 0.06);
    --ark-text: #0f172a;
    --ark-text-2: #334155;
    --ark-muted: #64748b;
    --ark-heading: #0f172a;
    --ark-danger: #dc2626; --ark-danger-rgb: 220, 38, 38;
    --ark-warning: #d97706;
    --ark-info: #2563eb;
    --ark-mod-dashboard: #0d9488;        --ark-mod-dashboard-rgb: 13, 148, 136;
    --ark-mod-correspondence: #16a34a;   --ark-mod-correspondence-rgb: 22, 163, 74;
    --ark-mod-documentation: #7e22ce;    --ark-mod-documentation-rgb: 126, 34, 206;
    --ark-mod-workflow: #ea580c;         --ark-mod-workflow-rgb: 234, 88, 12;
    --ark-mod-packages: #2563eb;         --ark-mod-packages-rgb: 37, 99, 235;
    --ark-mod-address-book: #db2777;     --ark-mod-address-book-rgb: 219, 39, 119;
    --ark-mod-projects: #a16207;         --ark-mod-projects-rgb: 161, 98, 7; /* amber-700: project names on white read at ~4.9:1 */
    --ark-mod-admin: #0d9488;            --ark-mod-admin-rgb: 13, 148, 136;
    --ark-on-accent: #ffffff;
    --ark-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --ark-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.18);
    --ark-shadow-lg: 0 20px 48px -16px rgba(15, 23, 42, 0.25);
    --ark-close-filter: none;
    --ark-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    --ark-cke-icon-filter: brightness(0) opacity(0.7);
    --ark-cke-icon-filter-hover: brightness(0);
    color: var(--ark-text);
    background-image: none !important;
}
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)):before {
    background-image:
        radial-gradient(ellipse 120% 70% at 50% -25%, rgba(var(--ark-accent-rgb), 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 80% 50% at 100% 40%, rgba(59, 130, 246, 0.04) 0%, transparent 45%),
        radial-gradient(ellipse 60% 40% at 0% 80%, rgba(168, 85, 247, 0.025) 0%, transparent 40%) !important;
}
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)):has(.app-content):after { opacity: 0.05; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .h1, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .h2, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .h3, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .h4, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .h5, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .h6,
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) h1, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) h2, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) h3, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) h4, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) h5, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) h6 { color: var(--ark-heading) !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .text-white { color: var(--ark-text) !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-sidebar { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%); border-right: 1px solid #e2e8f0; box-shadow: 2px 0 20px -4px rgba(0, 0, 0, 0.06), inset -1px 0 0 rgba(var(--ark-accent-rgb), 0.05); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-sidebar:before { background-image: radial-gradient(rgba(15, 23, 42, 0.07) 1px, transparent 1px); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-sidebar:after { background: radial-gradient(ellipse at 50% -10%, rgba(var(--ark-accent-rgb), 0.12) 0%, transparent 65%); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-side-brand { background: linear-gradient(180deg, rgba(var(--ark-accent-rgb), 0.1) 0%, rgba(var(--ark-accent-rgb), 0.03) 60%, transparent 100%); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-side-brand:after { background: linear-gradient(90deg, transparent 5%, rgba(var(--ark-accent-rgb), 0.35) 50%, transparent 95%); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-collapse-btn:hover { background: rgba(15, 23, 42, 0.05); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-side-project .project_dropdown { color: var(--ark-text); box-shadow: 0 2px 10px rgba(var(--ark-accent-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-side-project .project_dropdown:hover { color: var(--ark-heading); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-side-theme form { background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 3px rgba(15, 23, 42, 0.06); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-side-theme form:before { background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(var(--ark-accent-rgb), 0.3); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-side-theme .form-check-label { color: rgba(15, 23, 42, 0.45); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-side-theme form:hover .form-check-label { color: rgba(15, 23, 42, 0.7); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) body .form-switch .form-check-input:not(.theme_mode) { background-color: #cbd5e1 !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-sidebar .app-sidebar-content .menu .menu-item > .btn { color: var(--ark-text) !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-sidebar .app-sidebar-content .menu .menu-item > .btn:hover { background: rgba(var(--ark-mod-rgb), 0.1) !important; color: var(--ark-heading) !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-sidebar .app-sidebar-content .menu .menu-item.active > .btn { color: var(--ark-mod) !important; background: rgba(var(--ark-mod-rgb), 0.1) !important; box-shadow: 0 0 0 1px rgba(var(--ark-mod-rgb), 0.35), 0 2px 12px rgba(var(--ark-mod-rgb), 0.18) !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-sidebar .app-sidebar-content .menu .menu-item.active > .btn .menu-icon { filter: none; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-side-footer { background: linear-gradient(0deg, #f1f5f9 0%, #f8fafc 100%); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-side-user:hover, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-side-user[aria-expanded="true"] { background: rgba(15, 23, 42, 0.04); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-side-user .menu-img { background: #fff; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-side-user .menu-img.online:after { border-color: #fff; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-side-user-more { background: #fff; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-header { background: var(--ark-header-bg); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-header .menu-toggler .bar { background: var(--ark-text-2) !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-header .menu-toggler:hover { background: rgba(15, 23, 42, 0.05); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-page-band, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-content .row:has(> [class*="col-xl-"] > div > .breadcrumb), :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-content .row:has(> [class*="col-xl-"] > .breadcrumb:only-child),
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-content [class*="col-"] > .breadcrumb:has(+ #formControls), :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-content [class*="col-"] > .breadcrumb:has(+ #datatable), :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-content [class*="col-"] > .breadcrumb:has(+ .card),
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-content [class*="col-"] > .breadcrumb:has(+ .ark-metadata-tabs) { background: #fff; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .breadcrumb-item:not(:last-child):after { color: var(--ark-border-strong); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-metadata-tabs, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .nav-tabs, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .nav.nav-tabs.nav-tabs-v2 { background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.08) !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-metadata-tab, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .nav-tabs .nav-link, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .nav.nav-tabs.nav-tabs-v2 > .nav-item > .nav-link { color: rgba(15, 23, 42, 0.5) !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-metadata-tab:hover:not(.active), :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .nav-tabs .nav-link:hover, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .nav.nav-tabs.nav-tabs-v2 > .nav-item > .nav-link:hover { background: rgba(15, 23, 42, 0.06); color: rgba(15, 23, 42, 0.8) !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-metadata-tab.active, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .nav-tabs .nav-link.active, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .nav.nav-tabs.nav-tabs-v2 > .nav-item > .nav-link.active { background: #fff; color: var(--ark-accent) !important; box-shadow: 0 1px 6px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.06); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .card { --bs-border-color: var(--ark-border); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .table, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .dropdown-item, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .breadcrumb-item.active,
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .picker .pc-select .pc-list ul > li, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .picker .pc-select .pc-element, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .form-select, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .picker > .pc-element .pc-close, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .picker > .pc-element { color: var(--ark-text); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .picker > .pc-element { background: var(--ark-accent-dim) !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .form-control, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .picker .pc-select .pc-list input[type=search], :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .picker { border: 1px solid var(--ark-border) !important; color: var(--ark-text) !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .form-control:focus, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .form-select:focus, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .picker:focus-within { background-color: #fff !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .dropdown-menu, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .picker .pc-select .pc-list { border: 1px solid var(--ark-border) !important; background: #fff !important; box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.18); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) tr { border-color: var(--ark-border); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .table > :not(caption) > * > * { border-bottom-color: var(--ark-border); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .table > thead > tr > th { color: var(--ark-muted); background: linear-gradient(180deg, #f8fafc 0%, #fff 100%); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) table.dataTable > thead .sorting:after { background: rgba(15, 23, 42, 0.06); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .table .dropdown-toggle { background: #fff; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .modal-content { background: var(--ark-surface) !important; color: var(--ark-text); border-color: var(--ark-border) !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .modal-header { border-bottom: 1px solid var(--ark-border) !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .modal-footer { border-top: 1px solid var(--ark-border) !important; background: var(--ark-surface-2); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .modal-backdrop { background: #0f172a; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .modal-backdrop.show { opacity: 0.55; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .btn-close { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f172a'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .note-editor.note-frame, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .note-editor.note-frame .note-toolbar .note-btn-group > .note-btn, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .page-link { color: var(--ark-text); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .note-editor.note-frame .note-toolbar { border-color: var(--ark-border); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .form-select-sm, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .dropdown-divider { border-color: var(--ark-border); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .form-select, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .picker .pc-select .pc-element { background-image: var(--ark-select-arrow); background-size: 14px 10px; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) input::file-selector-button { color: var(--ark-text-2); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .form-check .form-check-input { border: 1.5px solid var(--ark-border-strong) !important; border-radius: 4px !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .form-check .form-check-input[type="radio"] { border-radius: 50% !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .form-check .form-check-input:checked { border-color: var(--ark-accent) !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .swal-modal { background-color: var(--ark-surface) !important; background-image: radial-gradient(ellipse 75% 60% at 50% 0%, color-mix(in srgb, var(--ark-swal) 5%, transparent), transparent 70%); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .swal-icon:not(.swal-icon--custom) { background: color-mix(in srgb, var(--ark-swal) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ark-swal) 24%, transparent), 0 6px 16px -8px color-mix(in srgb, var(--ark-swal) 40%, transparent); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .swal-overlay { background-color: rgba(15, 23, 42, 0.55); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .swal-footer { background: var(--ark-surface-2); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .swal-content__input, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .swal-content__textarea { background: #f8fafc; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .apexcharts-text, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .apexcharts-legend-text { fill: var(--ark-text-2) !important; color: var(--ark-text-2) !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .flowchart-operator { color: var(--ark-text); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-content .flowchart-example-container { background-image: radial-gradient(rgba(15, 23, 42, 0.12) 1px, transparent 1px); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .iti__country-list { background: var(--ark-surface); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .dashboard .card { background: #fff !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .dashboard .small { color: var(--ark-text-2); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .no_chart_box img { opacity: 0.4; filter: none; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .spinner_loader { background: rgba(255, 255, 255, 0.55); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .dataTables_wrapper:not(:has(table.dataTable tbody tr))::after {
    background:
        repeating-linear-gradient(180deg, rgba(15, 23, 42, 0.07) 0 0.85rem, transparent 0.85rem 3.35rem),
        repeating-linear-gradient(180deg, rgba(15, 23, 42, 0.03) 0 3.3rem, var(--ark-border) 3.3rem 3.35rem);
}
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .login .login-content form { box-shadow: 0 20px 50px -20px rgba(15, 23, 42, 0.25); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .login .login-content .text-white.text-opacity-50.text-center.mb-4 { border-bottom-color: var(--ark-border); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .login .login-content .btn-outline-theme.btn-lg { color: #fff !important; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-side-footer .dropdown-item, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .dropdown-item { color: var(--ark-text-2); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) input:-webkit-autofill, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) input:-webkit-autofill:hover, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) input:-webkit-autofill:focus, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) textarea:-webkit-autofill { -webkit-text-fill-color: var(--ark-text); -webkit-box-shadow: 0 0 0 1000px #fff inset; }
/* light scrollbars keep the accent thumb on a paler track. scrollbar-color stays Firefox-only here too: set
   unconditionally it switched Chromium to its thin standard bars and left them at 18% grey, nearly invisible */
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) ::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.07); box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.14); }
@supports not selector(::-webkit-scrollbar) { :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) * { scrollbar-color: rgba(var(--ark-accent-rgb), 0.6) rgba(15, 23, 42, 0.08); } }

/* --------------------------------------------------------------------------
   17. Responsive and motion budget
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .app-content { padding: 1.25rem 1.25rem 2.5rem; }
}
/* the list-page band: title above the toolbar so the buttons never push past the viewport */
@media (max-width: 991.98px) {
    .app-content .row > [class*="col-xl-"]:has(> div > .breadcrumb), .app-content .row > [class*="col-xl-"]:has(> .breadcrumb:only-child),
    .app-content .row > [class*="col-xl-"]:has(> .d-flex.float-end) { flex: 0 0 100%; width: 100%; max-width: 100%; }
    .d-flex.float-end.mb-2 { justify-content: flex-start; }
    .column_visible_btn, .column_visible_btn .btn-group, .column_visible_btn .multiselect.btn { max-width: 100%; }
}
@media (max-width: 767.98px) {
    .app { padding-top: var(--ark-header-h); }
    .app-header { display: flex; }
    .app-header .mobile-toggler { display: flex; }
    .app-header .desktop-toggler { display: none; }
    .app-sidebar { top: 0; left: calc(-1 * var(--ark-sidebar-w)); border-right: 1px solid var(--ark-border); }
    .app.app-sidebar-collapsed .app-sidebar { margin-left: 0; }
    .app-content { margin-left: 0; padding: 1rem 1rem 2rem; }
    body:has(.app-content):after, .pace, .spinner_loader:before, .spinner_loader:after { left: 0; }
    .ark-side-brand .ark-collapse-btn { display: none; }
    .d-flex.float-end.mb-2 { float: none !important; justify-content: flex-start; }
    .table > thead > tr > th:first-child, .table > tbody > tr > td:first-child { padding-left: 1rem; }
    .table > thead > tr > th:last-child, .table > tbody > tr > td:last-child { padding-right: 1rem; }
    .dataTables_wrapper { grid-template-columns: minmax(0, 1fr); grid-template-areas: "table" "hbar" "len" "pager"; }
    .dataTables_wrapper > .row:first-child, .dataTables_wrapper > .d-flex.align-items-center, .dataTables_wrapper > .row:last-child:not(:has(table.dataTable)):not(:first-child) { padding: 0.75rem 1rem; }
    .dataTables_wrapper > .d-flex.align-items-center, .dataTables_wrapper > .row:last-child:not(:has(table.dataTable)):not(:first-child) { border-top: 0; padding-top: 0; justify-content: flex-start; }
    .dataTables_wrapper > .d-flex > .me-auto, .dataTables_wrapper > .row:last-child > .col-md-5 { flex: 0 0 auto; }
    .pagination { justify-content: flex-start; }
    .ark-metadata-tabs, .nav-tabs { border-radius: var(--ark-radius-lg); }
    .ark-metadata-tab, .nav-tabs .nav-link { border-radius: var(--ark-radius); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .spinner_loader .spinner-border, .page-loader__spinner, .btn_with_loader .spinner-border { animation: arkSpin 1.4s linear infinite !important; }
}

/* ==========================================================================
   18. Icons
   The template's stock pictures - the inline dashboard SVGs, the "no data"
   PNG and the teal file-type PNGs - are replaced by one-colour glyphs drawn
   with CSS masks, so they take the module accent and the theme. The images
   stay in the markup; they are just not what gets painted.
   ========================================================================== */
:root {
    --ark-i-building: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='4' y='3' width='16' height='18' rx='2'/%3e%3cpath d='M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2M10 21v-3h4v3'/%3e%3c/svg%3e");
    --ark-i-users: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='9' cy='8' r='3.5'/%3e%3cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M21.5 20a6.5 6.5 0 0 0-4.5-6.2'/%3e%3c/svg%3e");
    --ark-i-shield: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 2.5 4.5 5.5v6c0 4.7 3.2 8.4 7.5 10 4.3-1.6 7.5-5.3 7.5-10v-6z'/%3e%3cpath d='m9 12 2 2 4-4.5'/%3e%3c/svg%3e");
    --ark-i-globe: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='9'/%3e%3cpath d='M3 12h18M12 3c2.7 2.7 4 5.7 4 9s-1.3 6.3-4 9c-2.7-2.7-4-5.7-4-9s1.3-6.3 4-9z'/%3e%3c/svg%3e");
    --ark-i-mail: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='5' width='18' height='14' rx='2.5'/%3e%3cpath d='m3.5 7.5 8.5 6 8.5-6'/%3e%3c/svg%3e");
    --ark-i-file: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M14 2.5H7a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7.5z'/%3e%3cpath d='M14 2.5v5h5'/%3e%3c/svg%3e");
    --ark-i-file-text: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M14 2.5H7a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7.5z'/%3e%3cpath d='M14 2.5v5h5M9 12h6M9 16h6'/%3e%3c/svg%3e");
    --ark-i-list-check: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m3 6.5 1.5 1.5 3-3M3 12.5l1.5 1.5 3-3M3 18.5l1.5 1.5 3-3M11 7h10M11 13h10M11 19h10'/%3e%3c/svg%3e");
    --ark-i-box: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m12 2.5 8.5 4.75v9.5L12 21.5l-8.5-4.75v-9.5z'/%3e%3cpath d='M3.7 7.4 12 12l8.3-4.6M12 12v9.3'/%3e%3c/svg%3e");
    --ark-i-chart: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3 3v18h18'/%3e%3cpath d='m7 15 4-5 3 3 5-6'/%3e%3c/svg%3e");
    --ark-i-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3.5' y='4' width='17' height='16' rx='2.5'/%3e%3ccircle cx='9' cy='9.5' r='1.6'/%3e%3cpath d='m20 15-4.5-4.5L7 19'/%3e%3c/svg%3e");
    --ark-i-sheet: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3.5' y='4' width='17' height='16' rx='2.5'/%3e%3cpath d='M3.5 10h17M3.5 15h17M10 4v16'/%3e%3c/svg%3e");
    --ark-i-slides: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='12' rx='2.5'/%3e%3cpath d='M12 16v4M8.5 20h7M8 12v-2M12 12V8M16 12v-4'/%3e%3c/svg%3e");
    --ark-i-cad: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3 21 17.5 6.5l-2-2L3 18z'/%3e%3cpath d='m15.5 4.5 3-1.5 1.5 1.5-1.5 3M8 16l-2 2M11 13l-2 2M14 10l-2 2'/%3e%3c/svg%3e");
    --ark-i-archive: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M14 2.5H6.5a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V8z'/%3e%3cpath d='M14 2.5V8h5.5M10.5 5.5h1M10.5 8.5h1M10.5 11.5h1M10 14.5h2v3h-2z'/%3e%3c/svg%3e");
    --ark-i-alert: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3e%3cpath d='M12 9v4M12 17h.01'/%3e%3c/svg%3e");
    --ark-i-check: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6 9 17l-5-5'/%3e%3c/svg%3e");
    --ark-i-x: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M18 6 6 18M6 6l12 12'/%3e%3c/svg%3e");
    --ark-i-info: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='9'/%3e%3cpath d='M12 16v-4.5M12 8h.01'/%3e%3c/svg%3e");
}
/* file-type icons in list tables: the PNG shrinks to nothing and its padding box paints the glyph */
img.default_doc_icon {
    width: 0 !important; height: 0 !important; padding: 9px; margin: 0 0.5rem 0 0; box-sizing: content-box; vertical-align: -4px; opacity: 1;
    background: var(--ark-file-colour, var(--ark-muted));
    -webkit-mask: var(--ark-file-icon, var(--ark-i-file)) center / contain no-repeat; mask: var(--ark-file-icon, var(--ark-i-file)) center / contain no-repeat;
}
img.default_doc_icon[src*="pdf_icon"] { --ark-file-colour: #f87171; --ark-file-icon: var(--ark-i-file-text); }
img.default_doc_icon[src*="doc_icon"], img.default_doc_icon[src*="docm_icon"], img.default_doc_icon[src*="odt_icon"], img.default_doc_icon[src*="rtf_icon"], img.default_doc_icon[src*="wpd_icon"], img.default_doc_icon[src*="wps_icon"] { --ark-file-colour: #60a5fa; --ark-file-icon: var(--ark-i-file-text); }
img.default_doc_icon[src*="sheet_icon"], img.default_doc_icon[src*="csv_icon"], img.default_doc_icon[src*="ods_icon"], img.default_doc_icon[src*="xlr_icon"], img.default_doc_icon[src*="xlsm_icon"], img.default_doc_icon[src*="wks_icon"] { --ark-file-colour: #4ade80; --ark-file-icon: var(--ark-i-sheet); }
img.default_doc_icon[src*="ppt_icon"], img.default_doc_icon[src*="pps_icon"], img.default_doc_icon[src*="ppsx_icon"], img.default_doc_icon[src*="pptm_icon"], img.default_doc_icon[src*="odp_icon"] { --ark-file-colour: #fb923c; --ark-file-icon: var(--ark-i-slides); }
img.default_doc_icon[src*="photo_icon"], img.default_doc_icon[src*="eps_icon"], img.default_doc_icon[src*="ps_icon"] { --ark-file-colour: #c084fc; --ark-file-icon: var(--ark-i-image); }
img.default_doc_icon[src*="dwg_icon"], img.default_doc_icon[src*="dxf_icon"], img.default_doc_icon[src*="cad_icon"] { --ark-file-colour: #e879f9; --ark-file-icon: var(--ark-i-cad); }
img.default_doc_icon[src*="eml_icon"], img.default_doc_icon[src*="msg_icon"] { --ark-file-colour: #60a5fa; --ark-file-icon: var(--ark-i-mail); }
img.default_doc_icon[src*="txt_icon"] { --ark-file-colour: var(--ark-text-2); --ark-file-icon: var(--ark-i-file-text); }
img.default_doc_icon[src*="3d_icon"] { --ark-file-colour: #22d3ee; --ark-file-icon: var(--ark-i-box); }
img.default_doc_icon[src*="zip_icon"] { --ark-file-colour: #fbbf24; --ark-file-icon: var(--ark-i-archive); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) img.default_doc_icon[src*="pdf_icon"] { --ark-file-colour: #dc2626; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) img.default_doc_icon[src*="doc_icon"], :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) img.default_doc_icon[src*="docm_icon"], :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) img.default_doc_icon[src*="odt_icon"] { --ark-file-colour: #2563eb; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) img.default_doc_icon[src*="sheet_icon"], :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) img.default_doc_icon[src*="csv_icon"] { --ark-file-colour: #16a34a; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) img.default_doc_icon[src*="ppt_icon"] { --ark-file-colour: #ea580c; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) img.default_doc_icon[src*="photo_icon"] { --ark-file-colour: #9333ea; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) img.default_doc_icon[src*="dwg_icon"], :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) img.default_doc_icon[src*="dxf_icon"], :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) img.default_doc_icon[src*="cad_icon"] { --ark-file-colour: #c026d3; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) img.default_doc_icon[src*="eml_icon"], :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) img.default_doc_icon[src*="msg_icon"] { --ark-file-colour: #2563eb; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) img.default_doc_icon[src*="3d_icon"] { --ark-file-colour: #0891b2; }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) img.default_doc_icon[src*="zip_icon"] { --ark-file-colour: #b45309; }

/* dashboard card heads: an accent glyph in place of the dot, chosen by the card's position */
.dashboard .card-body > .d-flex.fw-bold.small span.flex-grow-1:before {
    content: ""; width: 0.95rem; height: 0.95rem; border-radius: 0; background: var(--ark-accent); box-shadow: none; opacity: 0.85;
    -webkit-mask: var(--ark-head-icon, var(--ark-i-chart)) center / contain no-repeat; mask: var(--ark-head-icon, var(--ark-i-chart)) center / contain no-repeat;
}
.app-content.dashboard > .row:nth-of-type(1) > :nth-child(1) { --ark-head-icon: var(--ark-i-building); }
.app-content.dashboard > .row:nth-of-type(1) > :nth-child(2) { --ark-head-icon: var(--ark-i-users); }
.app-content.dashboard > .row:nth-of-type(1) > :nth-child(3) { --ark-head-icon: var(--ark-i-shield); }
.app-content.dashboard > .row:nth-of-type(1) > :nth-child(4) { --ark-head-icon: var(--ark-i-globe); }
.app-content.dashboard > .row:nth-of-type(2) > :nth-child(1) { --ark-head-icon: var(--ark-i-mail); }
.app-content.dashboard > .row:nth-of-type(2) > :nth-child(2) { --ark-head-icon: var(--ark-i-file); }
.app-content.dashboard > .row:nth-of-type(3) > :nth-child(1) { --ark-head-icon: var(--ark-i-file-text); }
.app-content.dashboard > .row:nth-of-type(4) > :nth-child(1) { --ark-head-icon: var(--ark-i-list-check); }
.app-content.dashboard > .row:nth-of-type(4) > :nth-child(2) { --ark-head-icon: var(--ark-i-box); }
/* stat tiles: the inline SVG gives way to the same glyph on an accent tile */
.dashboard .counts_card .org_count > .d-flex.fw-bold.small span.flex-grow-1:before { content: none; }
.dashboard .counts_card .org_count svg { display: none; }
.dashboard .counts_card .org_count .text-end { position: relative; }
.dashboard .counts_card .org_count .text-end:before {
    content: ""; width: 1.25rem; height: 1.25rem; background: var(--ark-accent);
    -webkit-mask: var(--ark-head-icon, var(--ark-i-chart)) center / contain no-repeat; mask: var(--ark-head-icon, var(--ark-i-chart)) center / contain no-repeat;
}
/* the "no data" placeholder: a glyph and a caption instead of the picture */
.no_chart_box img { display: none; }
.no_chart_box { gap: 0.6rem; padding: 2rem 0; }
.no_chart_box:before { content: ""; width: 2.6rem; height: 2.6rem; background: var(--ark-muted); opacity: 0.55; -webkit-mask: var(--ark-i-chart) center / contain no-repeat; mask: var(--ark-i-chart) center / contain no-repeat; }
.no_chart_box:after { content: "No data to display"; }

/* ==========================================================================
   19. Smooth surfaces
   Panels read as solid tonal shapes, not outlined boxes: no hairline around
   cards, bands, inputs, pills or menus. Depth comes from the tone step
   against the ground, a faint lit top edge and a soft shadow. Hairlines
   survive only as dividers inside a surface, and only at low alpha.
   ========================================================================== */
:root {
    --ark-border: rgba(255, 255, 255, 0.06);
    --ark-border-strong: rgba(255, 255, 255, 0.1);
    --ark-lift: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    --ark-depth: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
    --ark-depth-lg: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
    --ark-tint: rgba(255, 255, 255, 0.04);
    --ark-tint-2: rgba(255, 255, 255, 0.07);
}
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) {
    --ark-border: rgba(15, 23, 42, 0.07);
    --ark-border-strong: rgba(15, 23, 42, 0.12);
    --ark-lift: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --ark-depth: 0 6px 20px -10px rgba(15, 23, 42, 0.18), 0 1px 2px rgba(15, 23, 42, 0.04);
    --ark-depth-lg: 0 24px 56px -24px rgba(15, 23, 42, 0.3);
    --ark-tint: rgba(15, 23, 42, 0.04);
    --ark-tint-2: rgba(15, 23, 42, 0.07);
}
/* panels */
.card, .dashboard .card, .modal-content, .mailbox .mailbox-detail, .accordion-item, .swal-modal { border: 0 !important; box-shadow: var(--ark-lift), var(--ark-depth); }
.modal-content, .swal-modal { box-shadow: var(--ark-lift), var(--ark-depth-lg); }
.dashboard .card:hover { border-color: transparent !important; box-shadow: var(--ark-lift), 0 14px 36px -14px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(var(--ark-accent-rgb), 0.12); }
:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .dashboard .card:hover { box-shadow: var(--ark-lift), 0 10px 26px -12px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(var(--ark-accent-rgb), 0.12); }
.dashboard .card-body > .d-flex.fw-bold.small { border-bottom-color: var(--ark-border); }
.card .card-header { border-bottom-color: var(--ark-border); }
/* page header bands, attached or standalone */
.app-content .row:has(> [class*="col-xl-"] > div > .breadcrumb), .app-content .row:has(> [class*="col-xl-"] > .breadcrumb:only-child),
.app-content [class*="col-"] > .breadcrumb:has(+ #formControls), .app-content [class*="col-"] > .breadcrumb:has(+ #datatable), .app-content [class*="col-"] > .breadcrumb:has(+ .card),
.app-content [class*="col-"] > .breadcrumb:has(+ .ark-metadata-tabs) { border: 0; box-shadow: var(--ark-lift); }
.app-content:has(.ark-metadata-tabs) .row:has(> [class*="col-xl-"] > div > .breadcrumb), .app-content [class*="col-"] > .breadcrumb:has(+ .ark-metadata-tabs) { border: 0; box-shadow: var(--ark-lift), var(--ark-depth); }
.app-content .row:has(> [class*="col-xl-"] > div > .breadcrumb) + * #datatable > .card,
.app-content [class*="col-"] > .breadcrumb + #datatable > .card, .app-content [class*="col-"] > .breadcrumb + #formControls > .card, .app-content [class*="col-"] > .breadcrumb + .card,
.app-content .col-xl-12:has(> .row > [class*="col-xl-"] > div > .breadcrumb) + .col-xl-12 > .row > .col-xl-12 > #datatable > .card { box-shadow: var(--ark-depth); }
/* the seam between band and card is a soft divider, not an edge */
#datatable > .card > .card-body, #formControls > .card > .card-body { border-top: 1px solid var(--ark-border); border-radius: 0; }
.app-content:has(.ark-metadata-tabs) #datatable > .card > .card-body, .ark-metadata-tabs + #formControls > .card > .card-body { border-top: 0; }
/* tables: dividers only, the header line in the accent at low alpha */
.table > thead > tr > th, .table thead th { border-bottom: 1px solid rgba(var(--ark-accent-rgb), 0.18); }
.table > :not(caption) > * > * { border-bottom-color: var(--ark-border); }
.dataTables_wrapper > .row:first-child, .dataTables_wrapper > .d-flex.align-items-center, .dataTables_wrapper > .row:last-child:not(:has(table.dataTable)):not(:first-child) { border-top-color: var(--ark-border); }
/* controls: tonal fills instead of outlines */
.form-control, .form-select, .picker, .form-control-lg, .note-editor.note-frame, .form-group .note-editor.note-frame, textarea.form-control, .dataTables_wrapper .dataTables_filter input, .picker .pc-select .pc-list input[type=search],
:where(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked))) .form-control, :where(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked))) .picker, :where(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked))) .picker .pc-select .pc-list input[type=search] {
    border-color: transparent !important; box-shadow: inset 0 0 0 1px var(--ark-border);
}
:where(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked))) .form-control, :where(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked))) .form-select, :where(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked))) .picker, :where(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked))) textarea.form-control { background-color: #f8fafc !important; }
.form-control:hover, .form-select:hover { border-color: transparent !important; box-shadow: inset 0 0 0 1px var(--ark-border-strong); }
.form-control:focus, .form-select:focus, .picker:focus-within, .note-editor.note-frame:focus-within, .form-control-lg:focus { border-color: transparent !important; box-shadow: inset 0 0 0 1.5px var(--ark-accent), 0 0 0 3px rgba(var(--ark-accent-rgb), 0.14) !important; }
.form-control.error, .form-select.error, .picker.error { box-shadow: inset 0 0 0 1.5px var(--ark-danger) !important; }
.form-check-input, .form-check .form-check-input, :where(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked))) .form-check .form-check-input { border-color: transparent !important; background-color: var(--ark-tint-2); box-shadow: inset 0 0 0 1px var(--ark-border-strong); }
.form-check-input:checked, .form-check .form-check-input:checked { box-shadow: 0 0 8px -2px rgba(var(--ark-accent-rgb), 0.6); }
.input-group-text, .show_password .input-group-text { border: 0; background: var(--ark-tint-2); }
.form-control::file-selector-button, .form-control::-webkit-file-upload-button { border: 0 !important; background: var(--ark-tint-2) !important; }
.btn-outline-theme, .btn-outline-success, .btn-outline-primary, .btn-outline-default, .top_button.export_excel, .btn-success.top_button.export_excel, .btn-default, .btn-secondary, .btn-light, .swal-button--cancel,
.modal .btn-outline-theme[data-bs-dismiss], .modal .btn_cancel_delete, .column_visible_btn .dropdown-toggle, .column_visible_btn .multiselect.btn,
.d-flex.float-end.mb-2 > .btn-success:not(.top_button), .d-flex.float-end.mb-2 > .top_button:has(> .fa-arrow-left) { border-color: transparent !important; background: var(--ark-tint-2) !important; box-shadow: var(--ark-lift); }
:where(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked))) .btn-outline-theme, :where(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked))) .btn-default, :where(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked))) .top_button.export_excel, :where(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked))) .column_visible_btn .multiselect.btn,
:where(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked))) .modal .btn-outline-theme[data-bs-dismiss], :where(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked))) .d-flex.float-end.mb-2 > .btn-success:not(.top_button) { background: #fff !important; box-shadow: var(--ark-depth); }
.btn-outline-theme:hover, .btn-outline-success:hover, .btn-outline-primary:hover, .btn-outline-default:hover, .top_button.export_excel:hover, .btn-success.top_button.export_excel:hover, .btn-default:hover, .btn-secondary:hover, .btn-light:hover,
.modal .btn-outline-theme[data-bs-dismiss]:hover, .modal .btn_cancel_delete:hover, .column_visible_btn .dropdown-toggle:hover, .column_visible_btn .multiselect.btn:hover,
.d-flex.float-end.mb-2 > .btn-success:not(.top_button):hover, .d-flex.float-end.mb-2 > .top_button:has(> .fa-arrow-left):hover { border-color: transparent !important; background: var(--ark-accent-dim) !important; box-shadow: none; }
.btn-danger, .btn-outline-danger, .top_button.delete_class, .btn-success.top_button.delete_class { border-color: transparent !important; }
.reset_data { border: 1px dashed rgba(var(--ark-danger-rgb), 0.5) !important; }
.table .dropdown-toggle { border: 0; background: var(--ark-tint-2); box-shadow: var(--ark-lift); }
.table .dropdown-toggle:hover, .table .dropdown-toggle[aria-expanded="true"] { border: 0; background: var(--ark-accent-dim); }
:where(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked))) .table .dropdown-toggle { background: var(--ark-tint); }
.pagination .page-link, .page-link, :where(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked))) .pagination .page-link { border-color: transparent !important; background: var(--ark-tint) !important; }
.pagination .page-link:hover { border-color: transparent !important; background: var(--ark-accent-dim) !important; }
.page-item.disabled .page-link, :where(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked))) .page-item.disabled .page-link { border-color: transparent !important; }
.dataTables_wrapper .dataTables_length .form-select { box-shadow: none; background-color: var(--ark-tint-2) !important; }
/* pill strips */
.ark-metadata-tabs, .nav-tabs, .nav.nav-tabs.nav-tabs-v2, .ark-side-theme form, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-metadata-tabs, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .nav-tabs, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .ark-side-theme form { border-color: transparent !important; }
.ark-metadata-tab.active, .nav-tabs .nav-link.active, .nav.nav-tabs.nav-tabs-v2 > .nav-item > .nav-link.active { box-shadow: var(--ark-lift), 0 2px 10px rgba(0, 0, 0, 0.3); }
/* menus and pop-overs float on shadow alone */
.dropdown-menu, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .dropdown-menu, .picker .pc-select .pc-list, :where(:is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked))) .picker .pc-select .pc-list, .datepicker.dropdown-menu, .datepicker.datepicker-dropdown, .iti__country-list, .multiselect-container.dropdown-menu, .note-dropdown-menu {
    border: 0 !important; box-shadow: var(--ark-lift), var(--ark-depth-lg), 0 0 0 1px var(--ark-border);
}
/* white on the template's orange is unreadable; the warning badge ("In Progress") takes dark text */
.badge.bg-warning { color: #1c1300 !important; }
.modal-header { border-bottom-color: var(--ark-border) !important; }
.modal-footer { border-top-color: var(--ark-border) !important; }
.alert { border: 0; }
.dropzone { border-color: var(--ark-border-strong) !important; }
.cke_chrome, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .cke_chrome { border: 0 !important; box-shadow: inset 0 0 0 1px var(--ark-border) !important; }
.cke_toolgroup, .cke_combo_button, .note-editor.note-frame .note-toolbar .note-btn-group > .note-btn, .note-btn { border: 0 !important; }
.app-content .flowchart-example-container, #content .flowchart-example-container { border: 0; box-shadow: inset 0 0 0 1px var(--ark-border); }
.flowchart-operator { border: 0; box-shadow: var(--ark-lift), var(--ark-depth); }
.text-signature, .text-signature-preview { border-color: var(--ark-border-strong); }
/* sidebar: a seam of shadow instead of a rule, and the switcher as a tinted pill */
.app-sidebar, :is(#light_theme:not(:has(.theme_mode)), body:has(.theme_mode:checked)) .app-sidebar { border-right: 0; }
.ark-side-theme, .ark-side-footer { border-color: var(--ark-border); }
.ark-side-project .project_dropdown { border-color: transparent; box-shadow: var(--ark-lift), 0 0 0 1px rgba(var(--ark-accent-rgb), 0.28), 0 4px 16px -6px rgba(var(--ark-accent-rgb), 0.35); }
.ark-side-project .project_dropdown:hover, .ark-side-project .project_dropdown[aria-expanded="true"] { border-color: transparent; box-shadow: var(--ark-lift), 0 0 0 1px rgba(var(--ark-accent-rgb), 0.5), 0 6px 22px -6px rgba(var(--ark-accent-rgb), 0.45); }
.ark-side-user .menu-img { border: 0; box-shadow: 0 0 0 2px rgba(var(--ark-accent-rgb), 0.4); }
.ark-side-user:hover .menu-img { box-shadow: 0 0 0 2px var(--ark-accent), 0 4px 16px rgba(var(--ark-accent-rgb), 0.3); }
.ark-side-user-more, .ark-collapse-btn { border: 0; background: var(--ark-tint); }
.ark-side-user:hover .ark-side-user-more, .ark-side-user[aria-expanded="true"] .ark-side-user-more { background: var(--ark-accent-dim); }
.app-header { border-bottom: 0; box-shadow: var(--ark-depth); }
/* sign-in */
.login .login-content form { border: 0; box-shadow: var(--ark-lift), 0 24px 60px -20px rgba(0, 0, 0, 0.6), 0 0 80px -30px rgba(var(--ark-accent-rgb), 0.15); }
.login .login-content .text-white.text-opacity-50.text-center.mb-4 { border-bottom-color: var(--ark-border); }
.login .login-content .text-center.text-white.text-opacity-50:last-child a { border-color: var(--ark-border-strong); }

/* the sidebar navigation keeps its own fills whatever the ghost-button rules say */
.app-sidebar .app-sidebar-content .menu .menu-item > .btn { box-shadow: none !important; }
/* the template draws its own decorative lines on every card; off */
.card::before, .card::after { content: none !important; display: none !important; }