/* @import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Geist:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Sora:wght@100..800&display=swap');
/* =============================================================================
   TMIS DMS — app.css  (refined)
   Consolidated stylesheet for index, criterion-admin, workflow-admin,
   module-rights, versions, and login pages.

   Section map:
     1.  Reset + design tokens
     2.  Background orbs (login)
     3.  Primitives  (buttons, inputs, badges, toasts)
     4.  Layout      (sidebar, topbar, content, container)
     5.  Modals      (generic, confirm, sign, decline, logout)
     6.  Dashboard   (stat cards, doc list, version feed)
     7.  Criterion admin (tree, drag-and-drop, docs panel)
     8.  Workflow admin  (stages, approvers, preview)
     9.  Module rights   (rights table, templates, user info)
     10. Versions / audit (feed items, audit rows)
     11. Login
     12. Animations
     13. Responsive
   ============================================================================= */

/* =============================================================================
   1. RESET + DESIGN TOKENS
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Surfaces */
    --bg:       #060c19;
    --bg1:      #0b1325;
    --bg2:      #101b30;
    --bg3:      #162038;

    /* Accents */
    --cyan:     #22d3ee;
    --cyan-d:   rgba(34,211,238,0.10);
    --cyan-b:   rgba(34,211,238,0.30);
    --cyan2:    #0891b2;

    --purple:   #a78bfa;
    --purple-d: rgba(167,139,250,0.10);
    --purple-b: rgba(167,139,250,0.28);

    --green:    #10b981;
    --green-d:  rgba(16,185,129,0.10);
    --green-b:  rgba(16,185,129,0.28);

    --amber:    #f59e0b;
    --amber-d:  rgba(245,158,11,0.10);
    --amber-b:  rgba(245,158,11,0.28);

    --red:      #ef4444;
    --red-d:    rgba(239,68,68,0.10);
    --red-b:    rgba(239,68,68,0.28);

    /* Neutrals — improved contrast */
    --white:    #eef4ff;
    --slate:    #90abc8;
    --light:    #ccdcee;
    --muted:    #6888a6;
    --border:   rgba(40, 90, 150, 0.28);
    --border2:  rgba(40, 90, 150, 0.52);

    /* Typography — Sora for headings, DM Sans for body */
    --fh: 'DM Sans', system-ui, sans-serif;
    /* --fb: 'DM Sans', system-ui, sans-serif; */
    --fb: 'Inter', system-ui, sans-serif;

    /* Geometry / motion */
    --r:  10px;
    --r2: 16px;
    --tr: .2s cubic-bezier(.4, 0, .2, 1);

    /* Elevation */
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
}

@media (max-width: 768px) {
    :root {
        --r:  8px;
        --r2: 12px;
    }
}

html { scroll-behavior: smooth; }

body {
    background:    var(--bg);
    color:         var(--white);
    font-family:   var(--fb);
    font-size:     15.5px;
    line-height:   1.65;
    overflow-x:    hidden;
    min-height:    100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar          { width: 5px; height: 5px; }
::-webkit-scrollbar-track    { background: var(--bg1); }
::-webkit-scrollbar-thumb    { background: var(--border2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan2); }

/* =============================================================================
   2. BACKGROUND ORBS  (login page atmosphere)
   ============================================================================= */
.bg-orbs {
    position:       fixed;
    inset:          0;
    pointer-events: none;
    z-index:        0;
    overflow:       hidden;
}

.orb {
    position:      absolute;
    border-radius: 50%;
    filter:        blur(90px);
    opacity:       .12;
    animation:     float 9s ease-in-out infinite;
}
.orb-1 { width: 560px; height: 560px; background: #22d3ee; top: -120px; left: -120px; animation-delay: 0s; }
.orb-2 { width: 440px; height: 440px; background: #7c3aed; bottom: -120px; right: -120px; animation-delay: 3s; }
.orb-3 { width: 320px; height: 320px; background: #f59e0b; top: 50%; left: 50%; animation-delay: 1.5s; }

/* =============================================================================
   3. PRIMITIVES — buttons, inputs, badges, toasts
   ============================================================================= */
.btn {
    padding:        8px 16px;
    border-radius:  8px;
    font-size:      13.5px;
    font-weight:    600;
    cursor:         pointer;
    border:         none;
    transition:     all var(--tr);
    font-family:    var(--fb);
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    user-select:    none;
    letter-spacing: 0.01em;
}
.btn:disabled                    { opacity: .45; cursor: not-allowed; }
.btn-pri                         { background: var(--cyan); color: #06101e; font-weight: 700;font-size: 16px; }
.btn-pri:hover:not(:disabled)    { background: #38e4f7; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(34,211,238,0.3); }
.btn-pri:active:not(:disabled)   { transform: translateY(0); box-shadow: none; }
.btn-dan, .btn-rej               { background: var(--red); color: #fff; }
.btn-dan:hover:not(:disabled),
.btn-rej:hover:not(:disabled)    { opacity: .88; transform: translateY(-1px); }
.btn-app                         { background: var(--green); color: #fff; }
.btn-app:hover:not(:disabled)    { opacity: .88; transform: translateY(-1px); }
.btn-ghost, .btn-gh              {
    background:   var(--bg2);
    color:        var(--light);
    border:       1px solid var(--border);
}
.btn-ghost:hover:not(:disabled),
.btn-gh:hover:not(:disabled)     { background: var(--bg3); border-color: var(--border2); color: var(--white); }
.btn-sm                          { padding: 5px 10px; font-size: 12.5px; }
.btn-xs                          { padding: 3px 8px;  font-size: 12.2px; }
.btn-group-active {
    background:   var(--cyan-d) !important;
    color:        var(--cyan) !important;
    border-color: var(--cyan-b) !important;
}

/* Form inputs */
.fi, .input {
    width:         100%;
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: var(--r);
    padding:       11px 14px;
    color:         var(--white);
    font-family:   var(--fb);
    font-size:     15px;
    outline:       none;
    transition:    border-color var(--tr), box-shadow var(--tr);
    line-height:   1.5;
}
.fi:focus, .input:focus {
    border-color: var(--cyan);
    box-shadow:   0 0 0 3px rgba(34,211,238,0.08);
}
.fi::placeholder,
.input::placeholder              { color: var(--muted); }

select.fi option,
select.input option              { background: var(--bg2); color: var(--white); }

textarea.fi, textarea.input {
    min-height: 88px;
    resize:     vertical;
}

/* Field label */
.label, .fl {
    display:        block;
    font-size:      13px;
    font-weight:    700;
    color:          var(--muted);
    margin-bottom:  6px;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.fg, .input-group { margin-bottom: 20px; }

/* Status badges */
.badge {
    font-size:     12px;
    font-weight:   600;
    padding:       3px 10px;
    border-radius: 99px;
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    white-space:   nowrap;
    letter-spacing: 0.02em;
}
.badge.active,
.badge.approved      { background: var(--green-d);  color: #34d399;     border: 1px solid var(--green-b); }
.badge.pending       { background: var(--amber-d);  color: #fbbf24;     border: 1px solid var(--amber-b); }
.badge.rejected      { background: var(--red-d);    color: #f87171;     border: 1px solid var(--red-b); }
.badge.draft         { background: var(--purple-d); color: #c4b5fd;     border: 1px solid var(--purple-b); }
.badge.review        { background: var(--cyan-d);   color: var(--cyan); border: 1px solid var(--cyan-b); }
.badge.archived      { background: var(--bg3);      color: var(--slate); border: 1px solid var(--border); }

.default-badge {
    font-size:      11px;
    font-weight:    700;
    padding:        2px 8px;
    border-radius:  99px;
    background:     rgba(130,153,180,.15);
    color:          var(--slate);
    border:         1px solid rgba(130,153,180,.3);
    letter-spacing: .04em;
    white-space:    nowrap;
}

/* Toast container */
.toasts {
    position:        fixed;
    bottom:          24px;
    right:           24px;
    z-index:         300;
    display:         flex;
    flex-direction:  column;
    gap:             8px;
    pointer-events:  none;
}
.toast {
    background:    var(--bg1);
    border:        1px solid var(--border2);
    border-radius: var(--r);
    padding:       12px 16px;
    display:       flex;
    align-items:   center;
    gap:           10px;
    font-size:     14px;
    font-weight:   500;
    min-width:     280px;
    animation:     slideUp .22s ease;
    box-shadow:    var(--shadow-md);
    pointer-events: auto;
    color:         var(--white);
}
.toast.ok  { border-left: 3px solid var(--green); }
.toast.err { border-left: 3px solid var(--red); }
.toast.inf { border-left: 3px solid var(--cyan); }

/* Back button */
.back-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         7px 13px;
    background:      var(--bg2);
    border:          1px solid var(--border);
    border-radius:   var(--r);
    color:           var(--light);
    font-size:       13.5px;
    font-weight:     500;
    text-decoration: none;
    transition:      all var(--tr);
    white-space:     nowrap;
}
.back-btn:hover {
    background:   var(--bg3);
    border-color: var(--cyan-b);
    color:        var(--cyan);
}

/* Generic cards */
.card {
    background:    var(--bg1);
    border:        2px solid var(--border);
    border-radius: var(--r2);
    padding:       28px;
    margin-bottom: 24px;
    overflow:      hidden;
}
.card-header, .card-h {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   22px;
    padding-bottom:  16px;
    border-bottom:   2px solid var(--border);
    gap:             12px;
    flex-wrap:       wrap;
}
.card-title, .card-t {
    font-family: var(--fh);
    font-size:   21px;
    font-weight: 700;
    color:       var(--white);
    letter-spacing: -0.01em;
}
.card-b { padding: 0; }
.cact   { font-size: 12px; color: var(--cyan); cursor: pointer; }

/* Page container */
.container       { max-width: 1200px; margin: 0 auto; padding: 32px 32px; }
.container.wide  { max-width: 1440px; }

/* Page header */
.page-header {
    display:       flex;
    align-items:   center;
    gap:           20px;
    margin-bottom: 32px;
}
.page-header .back-btn { margin-bottom: 0; flex-shrink: 0; }
.page-header > div     { display: flex; flex-direction: column; }
.page-title {
    font-family:    var(--fh);
    font-size:      28px;
    font-weight:    800;
    margin-bottom:  4px;
    letter-spacing: -0.03em;
    line-height:    1.2;
    color:          var(--white);
}
.page-sub    { color: var(--slate); font-size: 16px; line-height: 1.5; }


/* =============================================================================
   4. LAYOUT — sidebar, topbar, content (index page)
   ============================================================================= */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width:           268px;
    flex-shrink:     0;
    background:      var(--bg1);
    border-right:    1px solid var(--border);
    display:         flex;
    flex-direction:  column;
    position:        fixed;
    top:             0;
    left:            0;
    bottom:          0;
    z-index:         155;
}
.sb-logo {
    padding:         26px 20px 20px;
    display:         flex;
    align-items:     center;
    gap:             12px;
    border-bottom:   1px solid var(--border);
    background:      linear-gradient(160deg, rgba(34,211,238,0.05) 0%, transparent 70%);
}
.logo-icon {
    width:           44px;
    height:          44px;
    background:      linear-gradient(140deg, var(--cyan), var(--purple));
    border-radius:   12px;
    display:         grid;
    place-items:     center;
    flex-shrink:     0;
    box-shadow:      0 4px 18px rgba(34,211,238,0.25);
    font-size:       25px;
}
.logo-txt             { font-family: var(--fh); line-height: 1.25; }
.logo-brand           { font-weight: 800; font-size: 20px; letter-spacing: -0.03em; color: var(--white); }
.logo-txt span        { color: var(--cyan); }
.logo-sub             { color: var(--muted); font-size: 14px; font-weight: 500; display: block; margin-top: 2px; letter-spacing: 0.02em; }

.sb-nav               { flex: 1; padding: 12px 10px; overflow-y: auto; }
.nav-sec {
    font-size:        14px;
    font-weight:      700;
    letter-spacing:   .16em;
    color:            var(--muted);
    padding:          22px 12px 7px;
    text-transform:   uppercase;
}
.sb-nav .nav-sec:first-child { padding-top: 10px; }

.nav-item {
    display:          flex;
    align-items:      center;
    gap:              11px;
    padding:          15px 14px;
    border-radius:    9px;
    cursor:           pointer;
    font-size:        16px;
    font-weight:      500;
    color:            var(--slate);
    transition:       all var(--tr);
    margin-bottom:    3px;
    user-select:      none;
}
.nav-item:hover     { background: var(--bg2); color: var(--white); }
.nav-item.active    {
    background: var(--cyan-d);
    color:      var(--cyan);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--cyan-b);
}
.nav-item .ni       { width: 18px; text-align: center; font-size: 16px; flex-shrink: 0; opacity: .85; }
.nav-item.active .ni { opacity: 1; }

.nbadge {
    margin-left:     auto;
    font-size:       11px;
    font-weight:     700;
    padding:         2px 7px;
    border-radius:   99px;
    background:      var(--cyan);
    color:           var(--bg);
    letter-spacing:  0.02em;
}
.nbadge.a           { background: var(--amber); color: #1a0a00; }
.nbadge.r           { background: var(--red);   color: #fff; }

.sb-foot {
    padding:          14px 16px;
    border-top:       1px solid var(--border);
    display:          flex;
    align-items:      center;
    gap:              10px;
    background:       linear-gradient(0deg, rgba(0,0,0,0.12) 0%, transparent 100%);
}
.avatar {
    width:            36px;
    height:           36px;
    border-radius:    50%;
    background:       linear-gradient(140deg, var(--purple), var(--cyan));
    display:          grid;
    place-items:      center;
    font-size:        15px;
    font-weight:      700;
    flex-shrink:      0;
    box-shadow:       0 2px 8px rgba(0,0,0,0.3);
}
.av-name            { font-size: 15px; font-weight: 600; color: var(--white); line-height: 1.3; }
.av-role            { font-size: 13px; color: var(--muted); margin-top: 1px; }

.logout-btn {
    width:            30px;
    height:           30px;
    border-radius:    8px;
    background:       transparent;
    border:           1px solid transparent;
    color:            var(--muted);
    display:          grid;
    place-items:      center;
    cursor:           pointer;
    transition:       all var(--tr);
    flex-shrink:      0;
    padding:          0;
}
.logout-btn:hover {
    background:       var(--red-d);
    border-color:     var(--red-b);
    color:            var(--red);
}
.logout-btn:active  { opacity: .75; }

.main {
    flex:             1;
    margin-left:      268px;
    display:          flex;
    flex-direction:   column;
    min-width:        0;
}
.topbar {
    padding:          16px 28px;
    background:       var(--bg1);
    border-bottom:    1px solid var(--border);
    display:          flex;
    align-items:      center;
    gap:              16px;
    position:         sticky;
    top:              0;
    z-index:          100;
    backdrop-filter:  blur(12px);
}
.tb-title           {
    font-family:  var(--fh);
    font-size:    25px;
    font-weight:  700;
    color:        var(--white);
    letter-spacing: -0.02em;
    white-space:  nowrap;
}
.search {
    display:          flex;
    align-items:      center;
    gap:              9px;
    background:       var(--bg2);
    border:           1px solid var(--border);
    border-radius:    var(--r);
    padding:          8px 14px;
    flex:             1;
    max-width:        400px;
    margin-left:      auto;
    transition:       border-color var(--tr);
}
.search:focus-within { border-color: var(--cyan-b); }
.search input {
    background:       none;
    border:           none;
    outline:          none;
    color:            var(--white);
    font-size:        15px;
    font-family:      var(--fb);
    flex:             1;
}
.search input::placeholder { color: var(--muted); }

.ib {
    width:            40px;
    height:           40px;
    border-radius:    9px;
    background:       var(--cyan);
    color:            #06101e;
    display:          grid;
    place-items:      center;
    font-size:        22px;
    font-weight:      700;
    cursor:           pointer;
    transition:       all var(--tr);
    flex-shrink:      0;
}
.ib:hover { background: #38e4f7; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(34,211,238,0.3); }

.content            { padding: 24px 26px; flex: 1; overflow-x: hidden; }

.view               { display: none; }
.view.active        { display: block; }

/* Mobile sidebar trigger */
.mob-menu-btn {
    display:          none;
    position:         fixed;
    top:              14px;
    left:             14px;
    width:            38px;
    height:           38px;
    background:       var(--cyan);
    color:            #06101e;
    border:           none;
    border-radius:    9px;
    font-size:        18px;
    cursor:           pointer;
    z-index:          200;
    box-shadow:       var(--shadow-md);
}
.sidebar-overlay {
    display:          none;
    position:         fixed;
    inset:            0;
    background:       rgba(0,0,0,0.6);
    z-index:          154;
    backdrop-filter:  blur(2px);
}
.sidebar-overlay.open { display: block; }

/* Document upload zone */
.up-zone {
    border:          2px dashed var(--border2);
    border-radius:   var(--r);
    padding:         32px 20px;
    text-align:      center;
    cursor:          pointer;
    transition:      all var(--tr);
    background:      var(--bg2);
    font-size:       14px;
    color:           var(--slate);
}
.up-zone:hover, .up-zone.drag-over {
    border-color:  var(--cyan);
    background:    var(--cyan-d);
    color:         var(--cyan);
}

.file-display {
    display:         none;
    margin-top:      10px;
    padding:         9px 13px;
    background:      var(--green-d);
    border:          1px solid var(--green-b);
    border-radius:   var(--r);
    color:           #34d399;
    font-size:       13.5px;
    font-weight:     500;
}

/* Confirm dialog */
.confirm-ov {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,0.6);
    z-index:         400;
    display:         none;
    place-items:     center;
    backdrop-filter: blur(6px);
}
.confirm-ov.open { display: grid; }
.confirm-box {
    background:    var(--bg1);
    border:        1px solid var(--border2);
    border-radius: var(--r2);
    padding:       28px 28px 24px;
    width:         380px;
    max-width:     90vw;
    box-shadow:    var(--shadow-lg);
    animation:     slideUp .2s ease;
}
.confirm-title { font-family: var(--fh); font-size: 17px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.02em; }
.confirm-msg   { font-size: 14.5px; color: var(--light); margin-bottom: 22px; opacity: .85; line-height: 1.55; }
.confirm-acts  { display: flex; gap: 9px; justify-content: flex-end; }

/* Logout overlay */
.logout-ov {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,0.6);
    z-index:         500;
    display:         none;
    place-items:     center;
    backdrop-filter: blur(8px);
}
.logout-ov.open { display: grid; }
.logout-card {
    background:    var(--bg1);
    border:        1px solid var(--border2);
    border-radius: var(--r2);
    padding:       32px 28px 26px;
    width:         340px;
    max-width:     90vw;
    text-align:    center;
    animation:     slideUp .22s ease;
    box-shadow:    var(--shadow-lg);
}
.logout-icon {
    width:           56px;
    height:          56px;
    margin:          0 auto 16px;
    background:      var(--red-d);
    border:          1px solid var(--red-b);
    border-radius:   50%;
    display:         grid;
    place-items:     center;
}
.logout-title  { font-family: var(--fh); font-size: 19px; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.03em; }
.logout-msg    { font-size: 14px; color: var(--slate); margin-bottom: 18px; line-height: 1.55; }
.logout-user {
    display:          flex;
    align-items:      center;
    gap:              10px;
    padding:          10px 14px;
    background:       var(--bg2);
    border-radius:    var(--r);
    margin-bottom:    20px;
    justify-content:  center;
    border:           1px solid var(--border);
}
.logout-avatar {
    width:           34px;
    height:          34px;
    border-radius:   50%;
    background:      linear-gradient(140deg, var(--purple), var(--cyan));
    display:         grid;
    place-items:     center;
    font-size:       12px;
    font-weight:     700;
}
.logout-uname     { font-size: 13px; font-weight: 600; }
.logout-acts      { display: flex; gap: 8px; }
.btn-logout-cancel {
    flex: 1;
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--white);
    padding: 10px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--tr);
    font-family: var(--fb);
}
.btn-logout-cancel:hover { background: var(--bg3); }
.btn-logout-confirm {
    flex: 1;
    background: var(--red);
    border: none;
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--tr);
    font-family: var(--fb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-logout-confirm:hover { opacity: .88; }

/* Modals */
.modal-ov {
    position:         fixed;
    inset:            0;
    background:       rgba(0,0,0,0.65);
    z-index:          200;
    display:          none;
    place-items:      center;
    backdrop-filter:  blur(6px);
    padding:          20px;
    overflow-y:       auto;
}
.modal-ov.open { display: grid; }
.modal {
    background:    var(--bg1);
    border:        1px solid var(--border2);
    border-radius: var(--r2);
    padding:       32px;
    width:         560px;
    max-width:     95vw;
    max-height:    92vh;
    overflow-y:    auto;
    box-shadow:    var(--shadow-lg);
    animation:     slideUp .25s cubic-bezier(.16,1,.3,1);
}
.modal-t {
    font-family:    var(--fh);
    font-size:      25px;
    font-weight:    800;
    margin-bottom:  6px;
    letter-spacing: -0.03em;
    color:          var(--white);
}
.modal-s {
    font-size:     14px;
    color:         var(--slate);
    margin-bottom: 22px;
    line-height:   1.5;
}
.modal-acts {
    display:          flex;
    justify-content:  flex-end;
    gap:              10px;
    margin-top:       24px;
    padding-top:      20px;
    border-top:       1px solid var(--border);
}

/* Signature modal */
.sig-modal-ov {
    position:         fixed;
    inset:            0;
    background:       rgba(0,0,0,0.65);
    z-index:          400;
    display:          none;
    place-items:      center;
    backdrop-filter:  blur(6px);
    padding:          20px;
    overflow-y:       auto;
}
.sig-modal-ov.open { display: grid; }
.sig-modal {
    background:    var(--bg1);
    border:        1px solid var(--border2);
    border-radius: var(--r2);
    padding:       26px 28px;
    width:         600px;
    max-width:     95vw;
    max-height:    95vh;
    overflow-y:    auto;
    box-shadow:    var(--shadow-lg);
}

.sig-stage-info {
    padding:       11px 14px;
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: var(--r);
    font-size:     12.5px;
    color:         var(--slate);
    margin-bottom: 14px;
    line-height:   1.55;
}

.sig-tabs {
    display:          flex;
    gap:              3px;
    background:       var(--bg2);
    border-radius:    10px;
    padding:          3px;
    margin-bottom:    16px;
    border:           1px solid var(--border);
}
.sig-tab {
    flex:             1;
    text-align:       center;
    padding:          8px 12px;
    border-radius:    8px;
    cursor:           pointer;
    font-size:        12px;
    font-weight:      600;
    color:            var(--slate);
    transition:       all var(--tr);
    user-select:      none;
}
.sig-tab.active { background: var(--bg3); color: var(--white); box-shadow: var(--shadow-sm); }

.sig-panel        { display: none; }
.sig-panel.active { display: block; }

#sig-canvas, .sig-preview-canvas {
    width:         100%;
    background:    #ffffff;
    border:        1px solid var(--border);
    border-radius: var(--r);
    cursor:        crosshair;
    touch-action:  none;
    display:       block;
}
.sig-preview-canvas { background: #fff; }

.sig-type-input {
    width:         100%;
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: var(--r);
    padding:       12px 14px;
    color:         var(--white);
    font-size:     14px;
    outline:       none;
    font-family:   var(--fb);
    transition:    border-color var(--tr);
}
.sig-type-input:focus { border-color: var(--cyan); }

.sig-upload-zone {
    border:        2px dashed var(--border2);
    border-radius: var(--r);
    padding:       28px 14px;
    text-align:    center;
    cursor:        pointer;
    transition:    all var(--tr);
    background:    var(--bg2);
}
.sig-upload-zone:hover {
    border-color: var(--cyan);
    background:   var(--cyan-d);
}

.sig-saved-note {
    display:          flex;
    padding:          9px 14px;
    background:       var(--green-d);
    border:           1px solid var(--green-b);
    border-radius:    var(--r);
    color:            #34d399;
    font-size:        12.5px;
    font-weight:      500;
    margin-bottom:    12px;
    align-items:      center;
    gap:              8px;
}

/* Decline reason overlay */
.sig-decline-ov {
    position:         fixed;
    inset:            0;
    background:       rgba(0,0,0,0.6);
    z-index:          500;
    display:          none;
    place-items:      center;
    backdrop-filter:  blur(6px);
    padding:          20px;
}
.sig-decline-ov.open { display: grid; }
.sig-decline-box {
    background:    var(--bg1);
    border:        1px solid var(--border2);
    border-radius: var(--r2);
    padding:       26px;
    width:         440px;
    max-width:     95vw;
    box-shadow:    var(--shadow-lg);
}

/* PDF position-picker modal */
#pdf-pos-modal .sig-modal {
    width:      900px;
    max-width:  95vw;
}
#pdfContainer canvas { box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.signature-box {
    position:     absolute;
    border:       2px dashed var(--cyan);
    /* No background fill — the inside of the box must look like the final
       PDF page (no shading, no tint). The dashed cyan border alone marks
       the editable zone. */
    background:   transparent;
    color:        var(--cyan);
    cursor:       move;
    user-select:  none;
    box-sizing:   border-box;
}
.signature-box:hover {
    /* Keep hover affordance subtle — a faint cyan wash on the border only,
       still no fill inside, so the WYSIWYG match with the PDF is preserved
       even while interacting. */
    border-color: #38e4f7;
}
/* Stage number badge — top-left corner of the box, helpful when several
   stages stack on one page. This is editor chrome, not part of the rendered
   PDF output, so it keeps the cyan styling. */
.signature-box .sb-stage-pill {
    position: absolute;
    top: -10px; left: -10px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--cyan);
    color: #06101e;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
/* Inner preview elements — positions are set inline by JS so they track
   the box dimensions and zoom precisely. Visual styling is intentionally
   minimal here so the preview matches the final PDF output: no fills, no
   borders, no opacity tricks — just black text on whatever the page
   background is, exactly as pdf-lib stamps it. */
.signature-box .sb-img {
    position: absolute;
    /* No border, no background — the final PDF has no image frame either.
       The signature image (or placeholder text) just floats on the page. */
    display: grid;
    place-items: center;
    pointer-events: none;
}
.signature-box .sb-img-placeholder {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 11px;
    /* Solid black — same as every other text element in the final PDF. */
    color: #000;
    font-style: italic;
    font-weight: 500;
}
.signature-box .sb-divider {
    position: absolute;
    height: 1px;
    /* Matches pdf-lib's rgb(0.82, 0.82, 0.82) divider (pdfUtils.js:422). */
    background: rgb(209, 209, 209);
    pointer-events: none;
}
.signature-box .sb-name,
.signature-box .sb-role,
.signature-box .sb-date {
    position: absolute;
    /* Helvetica is the closest browser-side approximation to pdf-lib's
       StandardFonts.Helvetica — text width will be within a pixel or two
       at typical zoom levels. */
    font-family: Helvetica, Arial, sans-serif;
    /* Solid black. Final PDF uses rgb(0.06, 0.06, 0.06) for the name and
       rgb(0.25, 0.25, 0.25) for role/date. The visual difference between
       those and pure #000 is imperceptible on screen, so we use a single
       black token to keep the preview crisp and unambiguous. */
    color: #000;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}
.signature-box .sb-name { font-weight: 700; text-align: center; }
.signature-box .sb-role { /* left-aligned — set inline */ }
.signature-box .sb-date { /* right-aligned — set inline */ }

/* Resize handles — 8 around the perimeter. They sit *on top of* the box
   border (slight outset) so they're easy to grab without misclicking the
   inner preview. pointer-events:auto overrides the inner preview's none. */
.signature-box .sb-handle {
    position: absolute;
    width:  10px;
    height: 10px;
    background: var(--cyan);
    border: 1.5px solid #06101e;
    border-radius: 2px;
    pointer-events: auto;
    z-index: 2;
}
.signature-box .sb-handle:hover { background: #38e4f7; }

/* Corner handles — diagonal cursors */
.signature-box .sb-h-nw { top: -6px; left: -6px;  cursor: nwse-resize; }
.signature-box .sb-h-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.signature-box .sb-h-sw { bottom: -6px; left: -6px;  cursor: nesw-resize; }
.signature-box .sb-h-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
/* Edge handles — straight cursors, centered on each edge */
.signature-box .sb-h-n  { top: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.signature-box .sb-h-s  { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.signature-box .sb-h-w  { top: 50%; left: -6px; transform: translateY(-50%); cursor: ew-resize; }
.signature-box .sb-h-e  { top: 50%; right: -6px; transform: translateY(-50%); cursor: ew-resize; }


/* =============================================================================
   6. DASHBOARD — stat cards, doc list, version feed
   ============================================================================= */
.stats {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:                   16px;
    margin-bottom:         24px;
}
.sc {
    background: var(--bg1);
    border: 2px solid var(--border);
    border-radius: var(--r2);
    padding: 24px;
    transition: all var(--tr);
    position: relative;
    overflow: hidden;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sc-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sc::before {
    content:       '';
    position:      absolute;
    inset:         0;
    opacity:       0;
    transition:    opacity var(--tr);
    border-radius: inherit;
}
.sc.cy::before  { background: radial-gradient(circle at 0% 0%, rgba(34,211,238,0.07) 0%, transparent 60%); }
.sc.gr::before  { background: radial-gradient(circle at 0% 0%, rgba(16,185,129,0.07) 0%, transparent 60%); }
.sc.am::before  { background: radial-gradient(circle at 0% 0%, rgba(245,158,11,0.07) 0%, transparent 60%); }
.sc.pu::before  { background: radial-gradient(circle at 0% 0%, rgba(167,139,250,0.07) 0%, transparent 60%); }
.sc:hover::before { opacity: 1; }
.sc:hover       { border-color: var(--border2); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.sc.cy:hover    { border-color: var(--cyan-b); }
.sc.gr:hover    { border-color: var(--green-b); }
.sc.am:hover    { border-color: var(--amber-b); }
.sc.pu:hover    { border-color: var(--purple-b); }
.sc-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
    font-size: 60px;
    flex-shrink: 0;
}
.sc-lbl         { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.sc-val         { font-family: var(--fh); font-size: 45px; font-weight: 800; line-height: 1; margin-top: 6px; letter-spacing: -0.03em; }
.sc-val.cy      { color: var(--cyan); }
.sc-val.gr      { color: var(--green); }
.sc-val.am      { color: var(--amber); }
.sc-val.pu      { color: var(--purple); }
.sc-sub         { font-size: 13px; color: var(--muted); margin-top: 5px; }

/* Document rows */
.doc-list  { display: flex; flex-direction: column; }
.doc-item {
    display:        flex;
    align-items:    center;
    gap:            14px;
    padding:        19px 19px;
    border-bottom:  2px solid var(--border);
    transition:     background var(--tr);
}
.doc-item:last-child  { border-bottom: none; }
.doc-item:hover       { background: rgba(255,255,255,0.025); }
.doc-ico {
    width:          38px;
    height:         38px;
    border-radius:  10px;
    display:        grid;
    place-items:    center;
    font-size:      20px;
    flex-shrink:    0;
}
.doc-meta             { flex: 1; min-width: 0; }
.doc-name {
    font-size:         16px;
    font-weight:       600;
    white-space:       nowrap;
    overflow:          hidden;
    text-overflow:     ellipsis;
    margin-bottom:     3px;
    display:           flex;
    align-items:       center;
    gap:               8px;
    color:             var(--white);
}
.doc-name-text {
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
    min-width:      0;
}

/* Inline status pill */
.badge-inline {
    font-size:      11px;
    font-weight:    600;
    padding:        2px 8px;
    border-radius:  99px;
    display:        inline-flex;
    align-items:    center;
    gap:            3px;
    white-space:    nowrap;
    flex-shrink:    0;
    letter-spacing: 0.02em;
}
.badge-inline.approved { background: var(--green-d);  color: #34d399;     border: 1px solid var(--green-b); }
.badge-inline.pending  { background: var(--amber-d);  color: #fbbf24;     border: 1px solid var(--amber-b); }
.badge-inline.rejected { background: var(--red-d);    color: #f87171;     border: 1px solid var(--red-b); }
.badge-inline.draft    { background: var(--purple-d); color: #c4b5fd;     border: 1px solid var(--purple-b); }
.badge-inline.review   { background: var(--cyan-d);   color: var(--cyan); border: 1px solid var(--cyan-b); }
.badge-inline.archived { background: var(--bg3);      color: var(--slate); border: 1px solid var(--border); }

.doc-info {
    font-size:         14px;
    color:             var(--slate);
    display:           flex;
    gap:               10px;
    flex-wrap:         wrap;
    word-spacing:      3px;
    padding-top:       3px;
}
.doc-acts {
    display:           flex;
    align-items:       center;
    gap:               6px;
    flex-shrink:       0;
    flex-wrap:         wrap;
}

/* Approvals */
.ap-item {
    padding:           16px 20px;
    border:            1px solid var(--border);
    border-radius:     var(--r);
    background:        var(--bg2);
    margin-bottom:     10px;
}
.ap-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.ap-acts  { display: flex; gap: 8px; flex-wrap: wrap; }

/* Version rows */
.v-list   { display: flex; flex-direction: column; gap: 8px; }
.v-item   { padding: 10px 12px; background: var(--bg3); border-radius: var(--r); border: 1px solid var(--border); }

/* Comparison / diff */
.comp-line {
    padding:         2px 8px;
    white-space:     pre-wrap;
    word-break:      break-word;
    border-left:     3px solid transparent;
    font-family:     'DM Mono', 'Fira Code', monospace;
    font-size:       12px;
}
.comp-line.comp-add     { background: #033a16; color: #22c55e; border-color: var(--green); }
.comp-line.comp-remove  { background: #3b0a0a; color: #ef4444; border-color: var(--red); }
.comp-line.comp-context { color: var(--slate); }

.comparison-container {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   8px;
}
.comp-col       { background: #0a1826; border-radius: 8px; padding: 10px; max-height: 320px; overflow: auto; }
.comp-col-title {
    font-size:       11px;
    font-weight:     700;
    color:           var(--cyan);
    text-transform:  uppercase;
    letter-spacing:  .07em;
    padding-bottom:  5px;
    margin-bottom:   5px;
    border-bottom:   1px solid var(--border);
}
.search-highlight {
    background:    var(--amber);
    color:         #000;
    padding:       0 2px;
    border-radius: 2px;
}
.search-box {
    width:         100%;
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: var(--r);
    padding:       7px 12px;
    color:         var(--white);
    font-size:     12.5px;
    font-family:   var(--fb);
    outline:       none;
    margin-bottom: 8px;
}
.search-box:focus { border-color: var(--cyan); }
.export-btn {
    background:    var(--cyan-d);
    color:         var(--cyan);
    border:        1px solid var(--cyan-b);
    padding:       4px 10px;
    border-radius: 6px;
    font-size:     11.5px;
    font-weight:   600;
    cursor:        pointer;
    transition:    all var(--tr);
    font-family:   var(--fb);
}
.export-btn:hover { background: var(--cyan); color: #06101e; }

/* Document group headers */
.cat-group           { margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.cat-group-header {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          12px 18px;
    background:       var(--bg2);
    cursor:           pointer;
    transition:       background var(--tr);
}
.cat-group-header:hover  { background: var(--bg3); }
.cat-chevron             { font-size: 11px; color: var(--cyan); transition: transform var(--tr); }
.cat-group-icon          { font-size: 15px; }
.cat-group-name          { font-weight: 600; font-size: 15px; color: var(--white); }
.cat-group-count {
    font-size:       10.5px;
    color:           var(--slate);
    background:      var(--bg3);
    padding:         2px 8px;
    border-radius:   99px;
    border:          1px solid var(--border);
}
.cat-group-summary       { font-size: 11px; color: var(--muted); }
.cat-group-body          { display: flex; flex-direction: column; }

/* Tabs (doc filter) */
.tabs {
    display:          flex;
    gap:              5px;
    background:       var(--bg);
    border:           1px solid var(--border);
    border-radius:    8px;
    padding:          3px;
}
.tab {
    padding:          5px 12px;
    border-radius:    6px;
    font-size:        14px;
    font-weight:      600;
    cursor:           pointer;
    color:            var(--slate);
    transition:       all var(--tr);
    user-select:      none;
}
.tab:hover     { color: var(--white); }
.tab.active    { background: var(--bg3); color: var(--white); box-shadow: var(--shadow-sm); }


/* =============================================================================
   7. CRITERION ADMIN — tree, drag-and-drop, side docs panel
   ============================================================================= */
.criterion-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   18px;
}
.criterion-card {
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: var(--r2);
    padding:       22px;
    position:      relative;
    overflow:      hidden;
    transition:    all var(--tr);

    /* Flex column so the action footer can anchor to the bottom regardless of
       description length. The CSS Grid container already equalises card heights
       per row via the default `align-items: stretch`; this rule distributes the
       resulting slack inside the card. */
    display:        flex;
    flex-direction: column;
    min-height:     100%;
}
.criterion-card:hover {
    border-color:  var(--border2);
    box-shadow:    var(--shadow-md);
    transform:     translateY(-1px);
}
.criterion-name { font-family: var(--fh); font-size: 15px; font-weight: 700; margin-bottom: 6px; color: var(--white); letter-spacing: -0.02em; }
.criterion-code {
    display:         inline-block;
    font-size:       12px;
    font-weight:     700;
    color:           var(--cyan);
    background:      var(--cyan-d);
    border:          1px solid var(--cyan-b);
    padding:         2px 9px;
    border-radius:   99px;
    margin-bottom:   9px;
    letter-spacing:  .04em;
}
/* Description absorbs vertical slack so the meta row + actions row below it
   are pushed to the bottom of the card. `min-height: 0` lets it shrink inside
   a flex column when needed; `flex: 1 1 auto` lets it grow to fill. */
.criterion-desc {
    font-size:     13.5px;
    color:         var(--slate);
    margin-bottom: 12px;
    line-height:   1.5;
    flex:          1 1 auto;
    min-height:    0;
}
/* `margin-top: auto` is a safety net: even if `.criterion-desc` is ever
   removed or empty (e.g. the Others card with no description), the actions
   row will still pin to the bottom of the card. This guarantees uniform
   footer alignment across every card regardless of content. */
.criterion-actions {
    display:     flex;
    gap:         6px;
    margin-top:  auto;
    flex-wrap:   wrap;
}
.criterion-card.is-default {
    border-style:  dashed !important;
    opacity:       .82;
}

/* Tree view — container must be a column flex */
.criterion-tree {
    flex-direction: column;
    gap:            2px;
}

.criterion-node {
    display:          flex;
    align-items:      center;
    gap:              9px;
    padding:          10px 14px;
    border-radius:    var(--r);
    cursor:           pointer;
    transition:       background var(--tr), box-shadow var(--tr);
    margin-bottom:    2px;
    font-size:        14.5px;
    border:           1px solid transparent;
}
.criterion-node:hover {
    background:   var(--bg2);
    border-color: var(--border);
}
.criterion-node[data-level="1"] { padding-left: 14px; }
.criterion-node[data-level="2"] { font-size: 14px; }
.criterion-node[data-level="3"] { font-size: 13.5px; }

.criterion-node .chev {
    color:      var(--cyan);
    font-size:  11px;
    transition: transform var(--tr);
    flex-shrink: 0;
    width:      16px;
    text-align: center;
}
.criterion-node .chev.collapsed { transform: rotate(-90deg); }
.criterion-node .icon           { font-size: 18px; flex-shrink: 0; }
.criterion-node .label {
    flex:        1;
    font-size:   inherit;
    font-weight: 500;
    min-width:   0;
    color:       var(--light);
    overflow:    hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.criterion-node .label .code {
    color:        var(--cyan);
    font-weight:  700;
    margin-right: 7px;
    font-size:    1em;
}
.criterion-node .meta {
    font-size:    14px;
    color:        var(--muted);
    margin-right: 8px;
    white-space:  nowrap;
    flex-shrink:  0;
    background:   var(--bg3);
    padding:      2px 8px;
    border-radius: 99px;
    border:       1px solid var(--border);
}
.criterion-node .acts { display: flex; gap: 4px; flex-shrink: 0; }

/* Indented child container — clear visual hierarchy */
.criterion-children {
    padding-left: 28px;
    position:     relative;
    margin-left:  20px;
    border-left:  2px solid var(--border);
    margin-bottom: 4px;
}

/* Drag-and-drop visuals */
.criterion-card.drop-target,
.criterion-node.drop-target {
    border-color: var(--cyan) !important;
    box-shadow:   0 0 0 3px rgba(34,211,238,0.15), 0 0 24px rgba(34,211,238,0.10);
    background:   rgba(34,211,238,.06) !important;
}
.criterion-card .drop-face {
    position:          absolute;
    inset:             0;
    z-index:           10;
    display:           none;
    border-radius:     inherit;
    align-items:       center;
    justify-content:   center;
    font-size:         13px;
    font-weight:       700;
    color:             var(--cyan);
    background:        rgba(34,211,238,.06);
    pointer-events:    none;
    letter-spacing:    .3px;
}
.criterion-card.drop-target .drop-face { display: flex; }

.doc-row {
    background:    var(--bg2);
    border:        2px solid var(--border);
    border-radius: var(--r);
    padding:       12px 14px;
    margin-bottom: 10px;
    display:       flex;
    align-items:   center;
    gap:           10px;
    cursor:        grab;
    transition:    background var(--tr), opacity var(--tr), transform var(--tr);
    user-select:   none;
}
.doc-row:hover            { background: var(--bg3); border-color: rgba(34,211,238,0.22); }
.doc-row.is-dragging      { opacity: .35; cursor: grabbing; transform: scale(.97); }
.doc-row .dh              { color: rgba(255,255,255,.22); font-size: 14px; flex-shrink: 0; }
.doc-row:hover .dh        { color: rgba(255,255,255,.55); }
.doc-row .dr-body         { flex: 1; min-width: 0; }
.doc-row .dr-title {
    font-size:        14px;
    font-weight:      600;
    color:            var(--white);
    white-space:      nowrap;
    overflow:         hidden;
    text-overflow:    ellipsis;
    margin-bottom:    2px;
}
.doc-row .dr-meta         { font-size: 12.5px; color: var(--slate); }

#dnd-ghost {
    position:         fixed;
    top:              -9999px;
    left:             -9999px;
    background:       #1a2a3e;
    border:           1.5px solid var(--cyan);
    border-radius:    8px;
    padding:          7px 14px;
    font-size:        13.5px;
    font-family:      var(--fb);
    color:            var(--light);
    pointer-events:   none;
    z-index:          9999;
    box-shadow:       var(--shadow-lg);
    white-space:      nowrap;
    max-width:        240px;
    overflow:         hidden;
    text-overflow:    ellipsis;
    opacity:          0;
    visibility:       hidden;
}
#dnd-ghost.active { opacity: 1; visibility: visible; }

#dnd-toast {
    position:         fixed;
    bottom:           28px;
    left:             50%;
    transform:        translateX(-50%) translateY(80px);
    background:       var(--bg1);
    border:           1px solid var(--border2);
    border-left:      4px solid var(--cyan);
    border-radius:    10px;
    padding:          13px 18px;
    font-size:        14px;
    color:            var(--white);
    display:          flex;
    align-items:      center;
    gap:              10px;
    box-shadow:       var(--shadow-lg);
    transition:       transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s;
    opacity:          0;
    pointer-events:   none;
    z-index:          9998;
    min-width:        280px;
    max-width:        420px;
}
#dnd-toast.show {
    transform:        translateX(-50%) translateY(0);
    opacity:          1;
    pointer-events:   auto;
}
#dnd-toast.dnd-err          { border-left-color: var(--red); }
#dnd-toast .dt-icon         { font-size: 17px; flex-shrink: 0; }
#dnd-toast .dt-text         { flex: 1; line-height: 1.4; }
#dnd-toast .dt-undo {
    background:    rgba(34,211,238,.14);
    border:        1px solid rgba(34,211,238,.28);
    border-radius: 6px;
    color:         var(--cyan);
    font-size:     12.5px;
    font-weight:   700;
    padding:       3px 11px;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background var(--tr);
    font-family:   var(--fb);
}
#dnd-toast .dt-undo:hover  { background: rgba(34,211,238,.26); }
#dnd-toast .dt-close {
    background:  none;
    border:      none;
    color:       rgba(255,255,255,.3);
    cursor:      pointer;
    font-size:   15px;
    padding:     0;
    flex-shrink: 0;
}
#dnd-toast .dt-close:hover { color: #fff; }

/* Side panel */
.docs-panel {
    position:           fixed;
    right:              -420px;
    top:                0;
    bottom:             0;
    width:              400px;
    background:         var(--bg1);
    border-left:        1px solid var(--border2);
    z-index:            150;
    transition:         right .3s cubic-bezier(.4, 0, .2, 1);
    display:            flex;
    flex-direction:     column;
    box-shadow:         -8px 0 40px rgba(0,0,0,0.4);
}
.docs-panel.open { right: 0; }

/* Icon / color pickers */
.color-picker, .icon-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.color-option {
    width:         40px;
    height:        40px;
    border-radius: 8px;
    cursor:        pointer;
    border:        2px solid transparent;
    transition:    all var(--tr);
}
.color-option.active {
    border-color:  var(--white);
    transform:     scale(1.1);
    box-shadow:    0 0 0 3px rgba(255,255,255,0.15);
}
.icon-option {
    width:         40px;
    height:        40px;
    border-radius: 8px;
    cursor:        pointer;
    border:        1px solid var(--border);
    transition:    all var(--tr);
    display:       grid;
    place-items:   center;
    font-size:     18px;
    background:    var(--bg3);
}
.icon-option:hover  { background: var(--bg2); border-color: var(--border2); }
.icon-option.active { border-color: var(--cyan); background: var(--cyan-d); }


/* =============================================================================
   8. WORKFLOW ADMIN — stages, approvers, preview
   ============================================================================= */
.workflow-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   18px;
}
.workflow-card {
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: var(--r2);
    padding:       22px;
    transition:    all var(--tr);
    /* Flex column so .workflow-actions (the last child) can be pushed to
       the bottom edge of the card with margin-top:auto. Without this the
       action row sits flush against the description, and cards whose
       names wrap to two lines end up with their buttons at a different
       vertical position than single-line cards — visually misaligned
       across the grid row even though the cards themselves are the same
       height (CSS Grid stretches siblings). */
    display:         flex;
    flex-direction:  column;
}
.workflow-card:hover {
    border-color:  var(--border2);
    box-shadow:    var(--shadow-md);
    transform:     translateY(-1px);
}
.workflow-name    { font-family: var(--fh); font-size: 17px; font-weight: 700; margin-bottom: 6px; color: var(--white); letter-spacing: -0.02em; }
.workflow-actions {
    display: flex;
    gap: 6px;
    /* `margin-top: auto` pushes this row to the bottom of the flex-column
       card, locking the action buttons to a consistent baseline across
       every card in the grid regardless of how much content sits above. */
    margin-top: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.stages-container {
    background:    var(--bg);
    border-radius: var(--r);
    padding:       16px;
    margin-bottom: 16px;
    border:        1px solid var(--border);
}
.stage-item {
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: var(--r);
    padding:       18px;
    margin-bottom: 12px;
    transition:    border-color var(--tr);
}
.stage-item:last-child { margin-bottom: 0; }
.stage-header        { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.stage-number {
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      var(--cyan-d);
    color:           var(--cyan);
    border:          1px solid var(--cyan-b);
    display:         grid;
    place-items:     center;
    font-weight:     700;
    font-size:       12px;
    font-family:     var(--fh);
    flex-shrink:     0;
}
.approvers-list {
    background:    var(--bg3);
    border-radius: var(--r);
    padding:       10px;
    margin-top:    10px;
    border:        1px solid var(--border);
}
.add-approver-btn {
    width:         100%;
    padding:       7px;
    background:    var(--bg);
    border:        1px dashed var(--border2);
    border-radius: var(--r);
    color:         var(--cyan);
    font-size:     16px;
    font-family:   var(--fb);
    font-weight:   400;
    cursor:        pointer;
    transition:    all var(--tr);
    margin-top:    8px;
}
.add-approver-btn:hover { background: var(--cyan-d); border-color: var(--cyan); }

.workflow-visual {
    background:    var(--bg);
    border-radius: var(--r2);
    padding:       18px;
    margin:        14px 0;
    display:       flex;
    align-items:   center;
    /* Horizontally centre the stage flow inside the preview box. With only
       2 stages on a wide modal, the default flex-start packing leaves the
       right half visually empty and looks unbalanced. `safe center` falls
       back to start-aligned when content overflows, so on narrow viewports
       the leading edge isn't clipped by the scroll container. */
    justify-content: safe center;
    gap:           12px;
    overflow-x:    auto;
    min-height:    110px;
    border:        1px solid var(--border);
}
.workflow-stage          { flex-shrink: 0; width: 120px; text-align: center; }
.workflow-stage-circle {
    width:           68px;
    height:          68px;
    border-radius:   50%;
    border:          2.5px solid var(--cyan);
    display:         grid;
    place-items:     center;
    margin:          0 auto 8px;
    font-weight:     700;
    font-family:     var(--fh);
    font-size:       20px;
    color:           var(--white);
}
.workflow-stage-name     { font-size: 13px; color: var(--slate); }

/* =============================================================================
   9. MODULE RIGHTS — table, templates, user info
   ============================================================================= */
.user-info-bar {
    display:          flex;
    align-items:      center;
    gap:              16px;
    padding:          16px 22px;
    background:       var(--bg2);
    border-radius:    var(--r);
    margin-bottom:    22px;
    border:           2px solid var(--border);
    flex-wrap:        wrap;
}
.user-avatar {
    width:            40px;
    height:           40px;
    border-radius:    50%;
    background:       linear-gradient(140deg, #a78bfa, #22d3ee);
    display:          grid;
    place-items:      center;
    font-size:        16px;
    font-weight:      700;
    flex-shrink:      0;
    box-shadow:       0 2px 8px rgba(0,0,0,0.3);
}

.template-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.template-btn {
    padding:          6px 14px;
    border-radius:    8px;
    font-size:        12.5px;
    font-weight:      600;
    cursor:           pointer;
    border:           1px solid var(--border);
    background:       var(--bg2);
    color:            var(--slate);
    transition:       all var(--tr);
    font-family:      var(--fb);
}
.template-btn:hover           { background: var(--bg3); color: var(--white); border-color: var(--border2); }
.template-btn.active          { background: var(--cyan-d); color: var(--cyan); border-color: var(--cyan-b); }

.rights-table { width: 100%; border-collapse: collapse; }
.rights-table th {
    padding:          12px 14px;
    text-align:       center;
    font-size:        12px;
    font-weight:      700;
    color:            var(--muted);
    text-transform:   uppercase;
    letter-spacing:   .08em;
    border-bottom:    1px solid var(--border);
    background:       var(--bg2);
    white-space:      nowrap;
}
.rights-table th:nth-child(1) { width: 110px; }
.rights-table th:nth-child(2) { width: 220px; }
.rights-table td {
    padding:          12px 14px;
    border-bottom:    1px solid var(--border);
    font-size:        14px;
    text-align:       center;
    vertical-align:   middle;
}
.rights-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.rights-table th:nth-child(1),
.rights-table th:nth-child(2),
.rights-table td:nth-child(1),
.rights-table td:nth-child(2) {
    text-align: left;
}
.rights-table th:nth-child(1) { padding-left: 16px; }
.rights-table th:nth-child(2) { padding-left: 24px; }
.rights-table td:nth-child(1) { padding-left: 16px; color: var(--muted); font-size: 13px; font-weight: 600; }
.rights-table td:nth-child(2) { padding-left: 24px; font-weight: 500; color: var(--light); }
.rights-table input[type="checkbox"] {
    width:         16px;
    height:        16px;
    cursor:        pointer;
    accent-color:  var(--cyan);
    display:       block;
    margin:        0 auto;
}
.check-all-row td {
    background:    var(--bg2);
    font-weight:   700;
    font-size:     12.5px;
    color:         var(--cyan);
    letter-spacing: 0.02em;
}

/* =============================================================================
   10. VERSIONS / AUDIT — feed + audit list
   ============================================================================= */
.view-tabs {
    display:          flex;
    gap:              3px;
    background:       var(--bg2);
    border:           1px solid var(--border);
    border-radius:    12px;
    padding:          4px;
    width:            fit-content;
    margin-bottom:    24px;
}
.view-tab {
    padding:          8px 20px;
    border-radius:    9px;
    font-size:        14px;
    font-weight:      600;
    cursor:           pointer;
    color:            var(--slate);
    transition:       all var(--tr);
    user-select:      none;
    display:          flex;
    align-items:      center;
    gap:              7px;
}
.view-tab.active             { background: var(--bg3); color: var(--white); box-shadow: var(--shadow-sm); }
.view-tab .tab-badge {
    font-size:         11px;
    font-weight:       700;
    padding:           1px 7px;
    border-radius:     99px;
    background:        var(--cyan);
    color:             var(--bg);
    letter-spacing:    0.02em;
}

.filters             { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.search-wrap {
    display:          flex;
    align-items:      center;
    gap:              8px;
    background:       var(--bg2);
    border:           1px solid var(--border);
    border-radius:    var(--r);
    padding:          8px 13px;
    min-width:        350px;
    transition:       border-color var(--tr);
}
.search-wrap:focus-within { border-color: var(--cyan-b); }
.search-wrap input {
    background:       none;
    border:           none;
    outline:          none;
    color:            var(--white);
    font-size:        14px;
    font-family:      var(--fb);
    width:            100%;
}
.search-wrap input::placeholder { color: var(--muted); }
.filter-select {
    background:       var(--bg2);
    border:           1px solid var(--border);
    border-radius:    var(--r);
    padding:          8px 12px;
    color:            var(--white);
    font-size:        14px;
    font-family:      var(--fb);
    outline:          none;
    cursor:           pointer;
    transition:       border-color var(--tr);
}
.filter-select:focus       { border-color: var(--cyan); }
.filter-select option      { background: var(--bg2); }

.feed-list           { display: flex; flex-direction: column; }
.feed-item {
    display:          flex;
    align-items:      center;
    gap:              16px;
    padding:          16px 24px;
    border-bottom:    1px solid var(--border);
    transition:       background var(--tr);
    cursor:           pointer;
}
.feed-item:last-child       { border-bottom: none; }
.feed-item:hover            { background: rgba(255,255,255,0.025); }
.feed-icon {
    width:            38px;
    height:           38px;
    border-radius:    10px;
    background:       var(--cyan-d);
    border:           1px solid var(--cyan-b);
    display:          grid;
    place-items:      center;
    font-size:        17px;
    flex-shrink:      0;
}
.feed-body                  { flex: 1; min-width: 0; }
.feed-title {
    font-size:          14.5px;
    font-weight:        600;
    color:              var(--white);
    white-space:        nowrap;
    overflow:           hidden;
    text-overflow:      ellipsis;
    margin-bottom:      3px;
}
.feed-meta {
    font-size:          13px;
    color:              var(--slate);
    display:            flex;
    align-items:        center;
    gap:                10px;
    flex-wrap:          wrap;
}
.feed-version {
    font-size:          12px;
    font-weight:        700;
    padding:            2px 9px;
    border-radius:      99px;
    background:         var(--cyan-d);
    color:              var(--cyan);
    border:             1px solid var(--cyan-b);
    white-space:        nowrap;
    letter-spacing:     0.02em;
}
.feed-right {
    display:            flex;
    flex-direction:     column;
    align-items:        flex-end;
    gap:                5px;
    flex-shrink:        0;
}

.audit-list           { display: flex; flex-direction: column; }
.audit-item, .audit-row {
    display:          flex;
    align-items:      center;
    gap:              14px;
    padding:          14px 24px;
    border-bottom:    1px solid var(--border);
    transition:       background var(--tr);
}
.audit-item:last-child, .audit-row:last-child { border-bottom: none; }
.audit-item:hover, .audit-row:hover           { background: rgba(255,255,255,.02); }

/* Audit rows tied to a document open the detail modal on click. The
   `.is-clickable` marker is set by the renderer only when the server
   returned a documentBusinessId for that row — login/logout/workflow/
   criterion rows have no document target and stay non-interactive. */
.audit-row.is-clickable                       { cursor: pointer; }
.audit-row.is-clickable:hover                 { background: rgba(255,255,255,.04); }

.audit-action-icon, .audit-icon {
    width:            38px;
    height:           38px;
    border-radius:    9px;
    display:          grid;
    place-items:      center;
    font-size:        17px;
    flex-shrink:      0;
}

.aicon-login,    .act-login    { background: rgba(167,139,250,.15); border: 1px solid rgba(167,139,250,.3); color: #c4b5fd; }
.aicon-logout                  { background: var(--bg3); border: 1px solid var(--border); color: var(--slate); }
.aicon-upload,   .act-upload   { background: var(--cyan-d); border: 1px solid var(--cyan-b); color: var(--cyan); }
.aicon-approve,  .act-approve  { background: var(--green-d); border: 1px solid var(--green-b); color: #34d399; }
.aicon-decline,  .act-decline,
.aicon-reject,   .act-reject   { background: var(--red-d); border: 1px solid var(--red-b); color: #f87171; }
.aicon-sign,     .act-sign     { background: var(--amber-d); border: 1px solid var(--amber-b); color: #fbbf24; }
.aicon-delete,   .act-delete   { background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.28); color: #ff6b6b; }
.aicon-submit,   .act-submit   { background: var(--cyan-d); border: 1px solid var(--cyan-b); color: var(--cyan); }
.aicon-category,
.aicon-criterion               { background: var(--bg3); border: 1px solid var(--border); color: var(--slate); }
.aicon-workflow                { background: var(--bg3); border: 1px solid var(--border); color: var(--slate); }
.aicon-other,    .act-other    { background: var(--bg3); border: 1px solid var(--border); color: var(--slate); }

.audit-body                   { flex: 1; min-width: 0; }
.audit-action                 { font-size: 14px; font-weight: 600; color: var(--white); }
.audit-who                    { font-size: 12.5px; color: var(--slate); margin-top: 2px; }
.audit-doc {
    font-size:        12.5px;
    color:            var(--cyan);
    margin-top:       2px;
    white-space:      nowrap;
    overflow:         hidden;
    text-overflow:    ellipsis;
    cursor:           pointer;
}
.audit-time                   { font-size: 12px; color: var(--muted); white-space: nowrap; flex-shrink: 0; text-align: right; }

.empty                        { text-align: center; padding: 56px 20px; color: var(--slate); }
.empty-icon                   { font-size: 42px; margin-bottom: 14px; opacity: .6; }
.load-more-wrap               { padding: 16px; text-align: center; border-top: 1px solid var(--border); }

/* =============================================================================
   11. LOGIN
   ============================================================================= */
.login-card {
    position:       relative;
    z-index:        1;
    width:          100%;
    max-width:      420px;
    background:     var(--bg1);
    border:         2px solid rgba(34,211,238,0.14);
    border-radius:  16px;
    padding:        48px 40px 42px;
    box-shadow:     0 25px 70px rgba(0,0,0,0.55),
                    0 0 0 1px rgba(34,211,238,0.04);
    animation:      slideUp .5s cubic-bezier(.16, 1, .3, 1);
}

.login-logo-area     { text-align: center; margin-bottom: 32px; }
.login-logo-icon {
    width:           64px;
    height:          64px;
    background:      linear-gradient(140deg, rgba(34,211,238,0.18), rgba(34,211,238,0.04));
    border:          1.5px solid rgba(34,211,238,0.28);
    border-radius:   18px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       28px;
    margin:          0 auto 16px;
    box-shadow:      0 0 32px rgba(34,211,238,0.12);
}
.login-logo-title    { font-family: var(--fh); font-size: 23px; font-weight: 800; color: var(--white); letter-spacing: -0.04em; }
.login-logo-sub      { font-size: 15px; color: var(--muted); margin-top: 5px; }

.login-divider {
    display:          flex;
    align-items:      center;
    gap:              12px;
    margin-bottom:    28px;
    color:            var(--muted);
    font-size:        14px;
    letter-spacing:   0.04em;
}
.login-divider::before,
.login-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--border);
}

.login-input-wrap { position: relative; }
.login-input-icon {
    position:         absolute;
    left:             14px;
    top:              50%;
    transform:        translateY(-50%);
    font-size:        16px;
    pointer-events:   none;
    opacity:          .65;
}

.login-input {
    width:         100%;
    padding:       12px 14px 12px 44px;
    background:    var(--bg3);
    border:        1.5px solid var(--border);
    border-radius: 10px;
    color:         var(--white);
    font-size:     16px;
    font-family:   var(--fb);
    outline:       none;
    transition:    border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
    appearance:    none;
}
.login-input:focus {
    border-color:  rgba(34,211,238,0.55);
    box-shadow:    0 0 0 3px rgba(34,211,238,0.08);
}
.login-input::placeholder { color: var(--muted); }

.show-pw {
    position:       absolute;
    right:          10px;
    top:            50%;
    transform:      translateY(-50%);
    background:     none;
    border:         none;
    color:          var(--muted);
    cursor:         pointer;
    font-size:      16px;
    padding:        8px;
    transition:     color .2s;
    min-width:      44px;
    min-height:     44px;
    display:        flex;
    align-items:    center;
    justify-content: center;
}
.show-pw:hover { color: var(--cyan); }

.btn-login {
    width:            100%;
    padding:          14px;
    margin-top:       8px;
    background:       linear-gradient(135deg, var(--cyan), var(--cyan2));
    border:           none;
    border-radius:    10px;
    color:            #06101e;
    font-size:        16px;
    font-family:      var(--fh);
    font-weight:      700;
    letter-spacing:   -0.01em;
    cursor:           pointer;
    transition:       opacity .2s, transform .15s, box-shadow .2s;
    box-shadow:       0 4px 22px rgba(34,211,238,0.28);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              8px;
    min-height:       50px;
    -webkit-appearance: none;
    appearance:       none;
}
.btn-login:hover:not(:disabled) {
    opacity:    .92;
    transform:  translateY(-1px);
    box-shadow: 0 6px 30px rgba(34,211,238,0.38);
}
.btn-login:active             { transform: translateY(0); }
.btn-login:disabled           { opacity: .45; cursor: not-allowed; transform: none; }

.login-spinner {
    width:            18px;
    height:           18px;
    border:           2px solid rgba(6,16,30,0.25);
    border-top-color: #06101e;
    border-radius:    50%;
    animation:        spin .7s linear infinite;
    display:          none;
}
.btn-login.loading .login-spinner  { display: block; }
.btn-login.loading .btn-text       { display: none; }

.alert {
    padding:          11px 14px;
    border-radius:    10px;
    font-size:        14px;
    margin-bottom:    18px;
    display:          none;
    align-items:      flex-start;
    gap:              10px;
    animation:        fadeIn .3s ease;
    line-height:      1.45;
}
.alert.show          { display: flex; }
.alert-error {
    background: rgba(239,68,68,.09);
    border:     1px solid rgba(239,68,68,.22);
    color:      #f87171;
}
.alert-success {
    background: rgba(16,185,129,.09);
    border:     1px solid rgba(16,185,129,.22);
    color:      #34d399;
}


/* =============================================================================
   12. ANIMATIONS
   ============================================================================= */
@keyframes slideUp {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes float {
    0%, 100% { transform: translateY(0)     scale(1);    }
    50%       { transform: translateY(-30px) scale(1.05); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* =============================================================================
   13. RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
    .stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .sidebar              { transform: translateX(-100%); transition: transform .3s ease; }
    .sidebar.mob-open     { transform: translateX(0); }
    .main                 { margin-left: 0; }
    .mob-menu-btn         { display: grid; place-items: center; }

    .topbar               { padding: 14px 14px 14px 60px; }
    .content              { padding: 16px; }

    .container            { padding: 16px 14px; }
    .container.wide       { padding: 16px 14px; }

    .criterion-grid,
    .workflow-grid        { grid-template-columns: 1fr; gap: 10px; }
    .stats                { grid-template-columns: 1fr 1fr; gap: 10px; }

    .modal                { width: 100%; max-width: 100vw; max-height: 100vh; height: 100%; border-radius: 0; padding: 20px 16px; }
    .sig-modal            { width: 100%; max-width: 100vw; max-height: 100vh; padding: 20px 16px; border-radius: 0; }
    .docs-panel           { width: 100%; right: -100%; }
    .docs-panel.open      { right: 0; }
    .confirm-box          { width: calc(100vw - 32px); margin: 0 16px; }

    .filters              { flex-direction: column; align-items: stretch; }
    .search-wrap          { min-width: 0; width: 100%; }
    .view-tabs            { width: 100%; overflow-x: auto; }
    .feed-right           { display: none; }
    .audit-time           { display: none; }
    .rights-table         { font-size: 11px; display: block; overflow-x: auto; }
    .rights-table th,
    .rights-table td      { padding: 8px 6px; white-space: nowrap; }

    .toasts               { bottom: 16px; right: 12px; left: 12px; }
    .toast                { min-width: 0; width: 100%; }

    input, select, textarea { font-size: 16px; }   /* prevent iOS zoom */
}

@media (max-width: 480px) {
    .stats                { grid-template-columns: 1fr; }
    .criterion-name,
    .workflow-name        { font-size: 14px; }
    .page-title           { font-size: 21px; }
    .login-card {
        max-width:     100%;
        min-height:    100vh;
        border-radius: 0;
        border:        none;
        padding:       40px 24px 32px;
        box-shadow:    none;
    }
}

/* =============================================================================
   PDF SIGNATURE POSITIONING
   ============================================================================= */
#pdf-pos-stack {
    display:     block;
    line-height: 0;
}
#pdf-pos-canvas {
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    background: #fff;
}
#pdf-pos-layer {
    cursor: default;
}
#pdf-pos-layer .signature-box {
    cursor: move;
}

/* =============================================================================
   DASHBOARD DnD
   ============================================================================= */
.doc-item[draggable="true"]     { cursor: grab; }
.doc-item[draggable="true"]:active { cursor: grabbing; }
.doc-item.is-dragging {
    opacity:   .35;
    transform: scale(.98);
}

.cat-group-header.drop-target {
    background:    rgba(34, 211, 238, 0.10);
    box-shadow:    inset 0 0 0 2px var(--cyan);
    border-radius: var(--r);
}
.cat-group-header.drop-target .cat-group-name {
    color: var(--cyan);
}

/* File-drop overlay */
#file-drop-ov {
    position:         fixed;
    inset:            0;
    z-index:          9990;
    background:       rgba(5, 10, 20, 0.88);
    backdrop-filter:  blur(5px);
    display:          none;
    align-items:      center;
    justify-content:  center;
    pointer-events:   none;
}
#file-drop-ov.show {
    display:        flex;
    pointer-events: auto;
}
.file-drop-card {
    border:         2px dashed var(--cyan);
    border-radius:  20px;
    padding:        64px 80px;
    background:     rgba(34, 211, 238, 0.05);
    text-align:     center;
    max-width:      480px;
    pointer-events: none;
}
.file-drop-icon  { font-size: 54px; margin-bottom: 16px; }
.file-drop-title {
    font-family:    var(--fh);
    font-size:      22px;
    font-weight:    800;
    color:          var(--white);
    margin-bottom:  6px;
    letter-spacing: -0.02em;
}
.file-drop-sub {
    font-size: 13px;
    color:     var(--slate);
}

/* ============================================================================
   2026-05 ADDITIONS — Version mode toggle, all-versions list, lifecycle
   timeline, new-version dropzone. All rules use the existing CSS-variable
   palette (--bg2, --cyan, --border, --slate, etc.) so the dark-cyan brand
   stays consistent across the new components.
   ============================================================================ */

/* ── Version-mode toggle (Documents header) ───────────────────────────────
   Two-pill segmented control. Sits next to the Group / Export / New buttons
   in the documents card header. Mirrors the .tabs/.tab visual pattern used
   for status filters but lives in a separate container so the two axes are
   visually distinct. */
.version-mode-toggle {
    display:        inline-flex;
    background:     var(--bg2);
    border:         1px solid var(--border);
    border-radius:  var(--r);
    padding:        3px;
    gap:            2px;
}
.vmt-btn {
    background:     transparent;
    border:         none;
    color:          var(--slate);
    cursor:         pointer;
    padding:        6px 12px;
    font-size:      12.5px;
    font-weight:    600;
    border-radius:  calc(var(--r) - 4px);
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    transition:     background var(--tr), color var(--tr), box-shadow var(--tr);
    white-space:    nowrap;
}
.vmt-btn:hover { color: var(--white); }
.vmt-btn.active {
    background:  var(--bg3);
    color:       var(--white);
    box-shadow:  var(--shadow-sm);
}
.vmt-btn:focus-visible {
    outline:        2px solid var(--cyan);
    outline-offset: 1px;
}

/* ── All-versions mode: per-document version-history group ────────────────
   Visually similar to .cat-group (criterion buckets) but one level inside,
   so we can nest criterion → document → versions when both grouping modes
   are active. Header row is clickable to expand/collapse the body. */
.ver-doc-group {
    background:     var(--bg2);
    border:         1px solid var(--border);
    border-radius:  var(--r);
    margin-bottom:  10px;
    overflow:       hidden;
}
.ver-doc-header {
    display:        flex;
    align-items:    center;
    gap:            10px;
    padding:        10px 14px;
    background:     var(--bg3);
    cursor:         pointer;
    user-select:    none;
    transition:     background var(--tr);
    border-bottom:  1px solid var(--border);
}
.ver-doc-header:hover { background: var(--bg2); }
.ver-doc-chevron {
    color:        var(--cyan);
    font-size:    12px;
    transition:   transform var(--tr);
    width:        14px;
    text-align:   center;
}
.ver-doc-icon { font-size: 20px; }
.ver-doc-title { flex: 1; min-width: 0; }
.ver-doc-name {
    font-size:      16px;
    font-weight:    700;
    color:          var(--white);
    margin-bottom:  2px;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}
.ver-doc-meta {
    font-size:    13px;
    color:        var(--slate);
    word-spacing: 2px;
}
.ver-doc-body {
    display:        flex;
    flex-direction: column;
    padding:        6px 10px 10px;
    gap:            6px;
}

/* Individual version row inside a ver-doc-group. Compact — no DnD, no
   submit/sign buttons. Just version label + meta + per-version download. */
.ver-row {
    display:        grid;
    grid-template-columns: 96px 1fr auto;
    align-items:    center;
    gap:            12px;
    padding:        8px 12px;
    background:     var(--bg1);
    border:         1px solid var(--border);
    border-radius:  var(--r);
    transition:     border-color var(--tr), background var(--tr);
}
.ver-row:hover {
    border-color: var(--border2);
    background:   var(--bg2);
}
.ver-row.is-head {
    border-left: 3px solid var(--cyan);
}
.ver-row-version {
    display:      flex;
    align-items:  center;
    gap:          6px;
    font-size:    14px;
}
.ver-row-current {
    font-size:      9.5px;
    color:          var(--green);
    background:     var(--green-d);
    padding:        1px 6px;
    border-radius:  8px;
    font-weight:    700;
    letter-spacing: 0.04em;
}
.ver-row-signed {
    color:          var(--cyan);
    background:     var(--cyan-d);
    padding:        1px 7px;
    border-radius:  8px;
    font-size:      10px;
    font-weight:    600;
}
.ver-row-auto {
    color:          var(--amber);
    background:     var(--amber-d);
    padding:        1px 7px;
    border-radius:  8px;
    font-size:      10px;
    font-weight:    600;
}
.ver-row-meta {
    display:      flex;
    flex-wrap:    wrap;
    align-items:  center;
    gap:          10px;
    font-size:    13px;
    color:        var(--slate);
}
.ver-row-acts {
    display:      flex;
    gap:          5px;
    flex-wrap:    wrap;
    justify-content: flex-end;
}

@media (max-width: 720px) {
    .ver-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .ver-row-acts { justify-content: flex-start; }
}

/* ── Lifecycle timeline (Document detail modal) ───────────────────────────
   Replaces the old approvalHistory-only renderer in #detail-status. Each
   row has an icon, action label, actor, optional comment, and timestamp.
   Tone classes (lt-tone-*) drive the left-edge accent colour so a glance
   at the list reveals what kind of events are present. The .collapsed
   modifier hides everything beyond the first 5 rows so the modal stays
   compact by default. */
.lifecycle-timeline {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    background:     var(--bg2);
    border:         1px solid var(--border);
    border-radius:  var(--r);
    padding:        8px;
    margin-bottom:  10px;
    max-height:     420px;
    overflow-y:     auto;
}
.lifecycle-timeline.collapsed .lt-row:nth-of-type(n+6) { display: none; }
.lt-row {
    display:        grid;
    grid-template-columns: 32px 1fr auto;
    gap:            10px;
    align-items:    flex-start;
    padding:        8px 10px;
    background:     var(--bg1);
    border-left:    3px solid var(--border);
    border-radius:  var(--r);
}
.lt-tone-cyan   { border-left-color: var(--cyan);  }
.lt-tone-green  { border-left-color: var(--green); }
.lt-tone-amber  { border-left-color: var(--amber); }
.lt-tone-red    { border-left-color: var(--red);   }

.lt-icon {
    width:           28px;
    height:          28px;
    border-radius:   8px;
    background:      var(--bg3);
    display:         grid;
    place-items:     center;
    font-size:       14px;
}
.lt-body { min-width: 0; }
.lt-action {
    font-size:      12.5px;
    font-weight:    600;
    color:          var(--white);
    display:        flex;
    align-items:    center;
    gap:            6px;
    flex-wrap:      wrap;
}
.lt-version {
    font-size:      10px;
    color:          var(--cyan);
    background:     var(--cyan-d);
    padding:        1px 6px;
    border-radius:  8px;
    font-weight:    700;
}
.lt-actor {
    font-size:      11px;
    color:          var(--slate);
    margin-top:     2px;
}
.lt-comment {
    font-size:      11px;
    color:          var(--light);
    margin-top:     4px;
    padding:        4px 8px;
    background:     var(--bg2);
    border-radius:  6px;
    line-height:    1.45;
    word-break:     break-word;
}
.lt-time {
    font-size:      10.5px;
    color:          var(--muted);
    white-space:    nowrap;
}

/* ── New-version modal: dropzone (file selected state, progress bar) ──────
   The base .up-zone styling is already defined earlier — we just add the
   .has-file modifier (subtle green tint when a file is staged) and the
   file-display / progress sub-elements. */
.up-zone.has-file {
    border-color:  var(--green);
    background:    var(--green-d);
    color:         var(--green);
}
.up-zone:focus-visible {
    outline:        2px solid var(--cyan);
    outline-offset: 2px;
}

.nv-file-selected {
    margin-top:     10px;
    padding:        10px 12px;
    background:     var(--bg2);
    border:         1px solid var(--border);
    border-radius:  var(--r);
}
.nv-fs-row {
    display:      flex;
    align-items:  center;
    gap:          8px;
    font-size:    12.5px;
}
.nv-fs-icon { font-size: 16px; }
.nv-fs-text {
    flex:           1;
    color:          var(--white);
    font-weight:    500;
    min-width:      0;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}
.nv-fs-size {
    color:        var(--slate);
    font-size:    11.5px;
}
.nv-fs-remove {
    background:     transparent;
    border:         1px solid var(--border);
    color:          var(--slate);
    width:          22px;
    height:         22px;
    border-radius:  50%;
    cursor:         pointer;
    display:        grid;
    place-items:    center;
    font-size:      11px;
    transition:     all var(--tr);
    padding:        0;
}
.nv-fs-remove:hover {
    background:     var(--red-d);
    border-color:   var(--red);
    color:          var(--red);
}

.nv-progress {
    margin-top:     8px;
    height:         4px;
    background:     var(--bg3);
    border-radius:  2px;
    overflow:       hidden;
}
.nv-progress-bar {
    height:       100%;
    width:        0%;
    background:   linear-gradient(90deg, var(--cyan), var(--cyan2));
    transition:   width 0.18s ease-out;
}

/* ── New-version modal: auto-approve checkbox ─────────────────────────────
   Custom-styled checkbox so the dark-theme look is consistent. The native
   <input> stays in the DOM (visually hidden) for accessibility — only its
   visual chrome is restyled. */
.nv-checkbox {
    display:        flex;
    align-items:    flex-start;
    gap:            10px;
    padding:        12px 14px;
    background:     var(--bg2);
    border:         1px solid var(--border);
    border-radius:  var(--r);
    cursor:         pointer;
    transition:     border-color var(--tr), background var(--tr);
    user-select:    none;
}
.nv-checkbox:hover { border-color: var(--border2); }
.nv-checkbox input[type="checkbox"] {
    /* Visually hidden but still focusable via keyboard. */
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
    pointer-events: none;
}
.nv-cb-box {
    width:           18px;
    height:          18px;
    border-radius:   4px;
    border:          2px solid var(--border2);
    background:      var(--bg1);
    display:         grid;
    place-items:     center;
    flex-shrink:     0;
    margin-top:      2px;
    transition:      all var(--tr);
    position:        relative;
}
.nv-checkbox input[type="checkbox"]:checked + .nv-cb-box {
    background:    var(--cyan);
    border-color:  var(--cyan);
}
.nv-checkbox input[type="checkbox"]:checked + .nv-cb-box::after {
    content:        '';
    width:          5px;
    height:         9px;
    border-right:   2px solid #06101e;
    border-bottom:  2px solid #06101e;
    transform:      rotate(45deg) translate(-1px, -1px);
}
.nv-checkbox input[type="checkbox"]:focus-visible + .nv-cb-box {
    box-shadow: 0 0 0 3px var(--cyan-b);
}
.nv-checkbox input[type="checkbox"]:disabled + .nv-cb-box {
    opacity: 0.5;
    cursor:  not-allowed;
}
.nv-checkbox:has(input:disabled) {
    cursor:  not-allowed;
    opacity: 0.7;
}
.nv-cb-label {
    flex:        1;
    font-size:   13px;
    font-weight: 600;
    color:       var(--white);
}
.nv-cb-hint {
    display:    block;
    margin-top: 3px;
    font-size:  11.5px;
    font-weight:400;
    color:      var(--slate);
    line-height: 1.45;
}