/* ============================================================
   Support System — Checkoff Finance theme
   Magenta primary · bold typography · card-based layout
   ============================================================ */
:root{
  /* Brand */
  --brand-magenta:       #B01E7E;
  --brand-magenta-dark:  #8C1863;
  --brand-magenta-hover: #9C1A6E;
  --brand-magenta-soft:  #F7E9F3;
  --brand-orange:        #F5A623;
  --brand-pink:          #C21E7C;

  /* Surfaces */
  --bg:        #FFFFFF;
  --bg-soft:   #FAFAFB;
  --card:      #FFFFFF;
  --border:    #E8E8EC;
  --border-2:  #F1F1F4;

  /* Text */
  --fg:        #14141A;
  --fg-2:      #4B4B55;
  --muted:     #7A7A85;

  /* Status */
  --success:   #16A34A;
  --warning:   #D97706;
  --danger:    #DC2626;

  /* Decorative card accents (from Bankvole page) */
  --accent-magenta: #B01E7E;
  --accent-gray:    #E4E4E8;
  --accent-green:   #DCE9AE;
  --accent-purple:  #CFDDF5;

  /* Layout */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(15, 15, 30, .04);
  --shadow:    0 1px 3px rgba(15, 15, 30, .06), 0 8px 24px rgba(15, 15, 30, .04);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg-soft);
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--brand-magenta);text-decoration:none;font-weight:500}
a:hover{color:var(--brand-magenta-dark);text-decoration:underline}
code{
  background:#F4F4F6;padding:.15rem .4rem;border-radius:5px;
  font-size:12.5px;color:#333;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- Headings ---------- */
h1,h2,h3,h4{color:var(--fg);letter-spacing:-.02em;font-weight:800;margin:0 0 .75rem}
h1{font-size:26px;line-height:1.2}
h2{font-size:20px;margin:1.5rem 0 .75rem}
h3{font-size:16px;margin:1rem 0 .5rem;letter-spacing:-.01em}
h4{font-size:14px;letter-spacing:0;font-weight:700}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:.5rem;
  padding:.6rem 1.1rem;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.topbar .brand{
  position:relative;
  display:inline-flex;align-items:center;
  padding:.25rem .4rem .25rem 1.75rem;
  font-weight:800;font-size:16px;letter-spacing:-.02em;
  color:var(--fg);white-space:nowrap;
  border-radius:6px;
}
.topbar .brand::before{
  content:"";
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, var(--brand-orange) 0 35%, transparent 36%),
    var(--brand-magenta);
}
.topbar .brand::after{
  content:"";
  position:absolute;left:11px;top:50%;transform:translateY(-50%) rotate(0deg);
  width:6px;height:6px;border-radius:50%;
  background:#fff;opacity:.9;
}
.topbar .brand:hover{background:var(--brand-magenta-soft);text-decoration:none;color:var(--brand-magenta-dark)}

.topbar .nav{
  display:flex;align-items:center;gap:.1rem;flex:1;flex-wrap:nowrap;overflow:visible;
  margin-left:.5rem;
}
.topbar .nav > a,
.topbar .nav > details > summary{
  padding:.42rem .7rem;
  border-radius:8px;
  color:var(--fg-2);
  font-size:14px;font-weight:600;
  cursor:pointer;list-style:none;white-space:nowrap;
  transition:background .12s,color .12s;
}
.topbar .nav > a:hover,
.topbar .nav > details > summary:hover{
  background:#F5F5F7;color:var(--fg);text-decoration:none;
}
.topbar .nav > a.on,
.topbar .nav > details > summary.on{
  background:var(--brand-magenta-soft);color:var(--brand-magenta-dark);
}
.topbar .nav > details{position:relative}
.topbar .nav > details > summary::-webkit-details-marker{display:none}
.topbar .nav > details > summary::after{content:" ▾";font-size:9px;opacity:.55;margin-left:.15rem}

.topbar .nav-drop-menu{
  position:absolute;top:100%;left:0;margin-top:.35rem;min-width:220px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:.35rem;
  display:none;flex-direction:column;gap:.05rem;
}
.topbar .nav > details[open] .nav-drop-menu{display:flex}
.topbar .nav-drop-menu a{
  padding:.5rem .75rem;border-radius:7px;color:var(--fg-2);font-size:13.5px;font-weight:500;
}
.topbar .nav-drop-menu a:hover{background:#F5F5F7;color:var(--fg);text-decoration:none}

.topbar .user{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.topbar .user-name{
  font-size:13.5px;font-weight:600;color:var(--fg);
  white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;
}
.topbar .signout{
  font-size:13px;font-weight:600;
  padding:.38rem .75rem;
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--brand-magenta);
  white-space:nowrap;
  transition:background .12s,border-color .12s;
}
.topbar .signout:hover{background:var(--brand-magenta-soft);border-color:var(--brand-magenta);text-decoration:none}

/* Hamburger (mobile) */
.nav-toggle-btn{
  display:none;width:36px;height:36px;
  border:1px solid var(--border);border-radius:8px;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:#fff;
}
.nav-toggle-btn span{display:block;width:16px;height:2px;background:var(--fg);border-radius:1px}

/* ---------- Main container ---------- */
.container{max-width:1200px;margin:0 auto;padding:1.5rem 1.1rem 3rem}

/* ---------- Cards ---------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:var(--shadow-sm);
  margin-bottom:1rem;
}
.card h3:first-child{margin-top:0}

/* ---------- Grid ---------- */
.grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1rem;margin-bottom:1rem;
}

/* ---------- Forms ---------- */
label{display:block;font-size:13px;color:var(--fg-2);margin-bottom:.15rem;font-weight:500}
input[type="text"],input[type="email"],input[type="password"],input[type="number"],
input[type="date"],input[type="datetime-local"],input[type="time"],input[type="search"],
input[type="tel"],input[type="url"],input:not([type]),
select,textarea{
  width:100%;padding:.55rem .75rem;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:14px;font-family:inherit;
  background:#fff;color:var(--fg);
  transition:border-color .12s, box-shadow .12s;
}
input:hover,select:hover,textarea:hover{border-color:#D5D5DC}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand-magenta);
  box-shadow:0 0 0 3px rgba(176,30,126,.14);
}
textarea{min-height:88px;resize:vertical}
input[type="checkbox"],input[type="radio"]{width:auto;accent-color:var(--brand-magenta)}
input:disabled,select:disabled,textarea:disabled{background:#F7F7F9;color:var(--muted);cursor:not-allowed}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.form-row-inline{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.form-row-inline input[type="text"],
.form-row-inline input:not([type]){flex:1;min-width:120px}

/* ---------- Buttons ---------- */
button{font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;border-radius:var(--radius-sm);transition:background .12s,color .12s,border-color .12s}

.btn-primary,button.btn-primary,input[type="submit"].btn-primary{
  background:var(--brand-magenta);color:#fff;border:1px solid var(--brand-magenta);
  padding:.55rem 1rem;display:inline-block;
}
.btn-primary:hover,button.btn-primary:hover{
  background:var(--brand-magenta-hover);border-color:var(--brand-magenta-hover);
  color:#fff;text-decoration:none;
}
.btn-primary:active,button.btn-primary:active{background:var(--brand-magenta-dark)}

.btn-sm{
  background:#fff;color:var(--fg);border:1px solid var(--border);
  padding:.35rem .65rem;font-size:13px;display:inline-block;
}
.btn-sm:hover{background:#F5F5F7;border-color:#D5D5DC}

.btn-link{
  background:none;border:none;color:var(--brand-magenta);padding:.3rem .5rem;font-weight:600;
}
.btn-link:hover{text-decoration:underline}

/* ---------- Badges ---------- */
.badge{
  display:inline-block;padding:.18rem .55rem;border-radius:999px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
}
.badge.gray  {background:#EFEFF3;color:#4B4B55}
.badge.blue  {background:#DDE7FB;color:#1E40AF}
.badge.green {background:#DBF3E1;color:#166534}
.badge.red   {background:#FCE3E3;color:#991B1B}
.badge.orange{background:#FDE8D3;color:#9A3412}
.badge.yellow{background:#FDF2CE;color:#854D0E}
.badge.purple{background:#EFE2F2;color:var(--brand-magenta-dark)}

/* ---------- Chips ---------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem;padding:0;margin:0}
.chips li{
  background:#F2F2F5;color:#4B4B55;font-size:11.5px;font-weight:600;
  padding:.18rem .55rem;border-radius:999px;
}

/* ---------- Tables ---------- */
table{
  width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
}
th,td{
  padding:.6rem .85rem;text-align:left;font-size:13.5px;
  border-bottom:1px solid var(--border-2);vertical-align:top;
}
th{
  background:#FAFAFC;font-weight:700;color:var(--fg-2);
  font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FCFCFD}
td a{color:var(--brand-magenta);font-weight:600}

/* ---------- Flash messages ---------- */
.flash{
  padding:.75rem 1rem;border-radius:var(--radius-sm);font-size:14px;font-weight:500;
  margin-bottom:1rem;border-left:4px solid;
}
.flash-success,.flash.success{background:#F0FDF4;border-color:var(--success);color:#14532D}
.flash-error,  .flash.error  {background:#FEF2F2;border-color:var(--danger);color:#7F1D1D}
.flash-info,   .flash.info   {background:var(--brand-magenta-soft);border-color:var(--brand-magenta);color:var(--brand-magenta-dark)}
.flash-warning,.flash.warning{background:#FFFBEB;border-color:var(--warning);color:#78350F}

/* ---------- Misc ---------- */
.muted{color:var(--muted)}
.notice{
  background:#FFF9EC;border-left:4px solid var(--warning);
  padding:.7rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;
}

.ticket-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.85rem;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);padding:1.1rem;margin-bottom:1.1rem;
}
.ticket-meta > div{font-size:13.5px}
.ticket-meta strong{
  display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);margin-bottom:.2rem;
}

/* ---------- Conversation ---------- */
.messages{margin-bottom:1rem}
.msg{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:.85rem 1.1rem;margin-bottom:.55rem;
}
.msg.internal{background:#FFF9EC;border-color:#FBE4A8}
.msg-head{
  display:flex;justify-content:space-between;font-size:12px;
  color:var(--muted);margin-bottom:.4rem;gap:.5rem;font-weight:600;
}
.msg-body{white-space:pre-wrap;font-size:14px;color:var(--fg)}

/* ---------- Login card ---------- */
.login-card{
  max-width:400px;margin:3rem auto;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius);
  padding:2rem 1.75rem;box-shadow:var(--shadow);
}
.login-card h1{
  font-size:22px;text-align:center;margin-bottom:.25rem;
  letter-spacing:-.02em;
}
.login-card .muted{text-align:center;margin-bottom:1.25rem;font-size:13.5px}
.login-card label{margin-top:.6rem}
.login-card button,.login-card .btn-primary{
  width:100%;margin-top:1.1rem;padding:.65rem 1rem;
}

/* ---------- Admin tabs ---------- */
.tabs{
  display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
  gap:.2rem;margin-bottom:1.1rem;padding:0 0 .55rem;
  border-bottom:1px solid var(--border);
}
.tabs::-webkit-scrollbar{display:none}
.tabs a{
  flex:0 0 auto;padding:.42rem .85rem;border-radius:8px;
  color:var(--fg-2);font-size:13px;font-weight:600;white-space:nowrap;
  transition:background .12s,color .12s;
}
.tabs a:hover{background:#F5F5F7;color:var(--fg);text-decoration:none}
.tabs a.active,.tabs a.active:hover{
  background:var(--brand-magenta);color:#fff;
}

/* ---------- Accent cards (dashboard widgets) ---------- */
.card.accent-magenta,
.card.accent-gray,
.card.accent-green,
.card.accent-purple{
  border:none;color:var(--fg);
}
.card.accent-magenta{background:var(--accent-magenta);color:#fff}
.card.accent-magenta h3, .card.accent-magenta .muted{color:#fff;opacity:.9}
.card.accent-gray   {background:var(--accent-gray)}
.card.accent-green  {background:var(--accent-green)}
.card.accent-purple {background:var(--accent-purple)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .container{padding:1.1rem .85rem 2.5rem}
  .nav-toggle-btn{display:flex}
  .topbar{flex-wrap:wrap;padding:.55rem .85rem}
  .topbar .nav{
    display:none;flex-basis:100%;
    flex-direction:column;align-items:stretch;
    margin:.5rem 0 0 0;padding-top:.5rem;
    border-top:1px solid var(--border);gap:.05rem;
  }
  .nav-toggle-input:checked ~ .nav{display:flex}
  .topbar .nav > a,
  .topbar .nav > details > summary{
    padding:.7rem .6rem;font-size:15px;width:100%;
  }
  .topbar .nav-drop-menu{
    position:static;box-shadow:none;border:none;
    padding:.15rem 0 .35rem .85rem;background:transparent;
  }
  .topbar .user-name{display:none}
  .form-row{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  h1{font-size:22px}
  h2{font-size:17px}
}
@media (max-width:520px){
  h1{font-size:20px}
  h2{font-size:16px}
  .card{padding:1rem}
  .ticket-meta{grid-template-columns:1fr}
}

/* ---------- Accent card content (dashboard widgets) ---------- */
/* accent-card-content */
.card.accent-magenta,
.card.accent-magenta h3,
.card.accent-magenta p,
.card.accent-magenta strong,
.card.accent-magenta .muted{color:#fff}
.card.accent-magenta a{color:#fff;text-decoration:underline;font-weight:600}
.card.accent-magenta input,
.card.accent-magenta textarea,
.card.accent-magenta select{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff}
.card.accent-magenta input::placeholder{color:rgba(255,255,255,.75)}

.card.accent-gray h3,
.card.accent-green h3,
.card.accent-purple h3{color:var(--fg)}
.card.accent-gray p,
.card.accent-green p,
.card.accent-purple p{color:var(--fg)}
.card.accent-gray .muted,
.card.accent-green .muted,
.card.accent-purple .muted{color:var(--fg-2)}



/* Refined dashboard widget styling. Applied to any .card that has an
   .accent-* class. Just a thin top bar + coloured number. */

.card.accent-magenta,
.card.accent-gray,
.card.accent-green,
.card.accent-purple{
  background:#ffffff;
  color:var(--fg);
  position:relative;
  padding-top:1.35rem;
}
.card.accent-magenta::before,
.card.accent-gray::before,
.card.accent-green::before,
.card.accent-purple::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;
  border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);
}
.card.accent-magenta::before{background:var(--brand-magenta)}
.card.accent-purple::before {background:#7C9EE8}
.card.accent-green::before  {background:#89B64A}
.card.accent-gray::before   {background:#B5B5BE}

.card.accent-magenta h3,
.card.accent-gray h3,
.card.accent-green h3,
.card.accent-purple h3{
  color:var(--fg);
  font-size:13px;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
}
.card.accent-magenta .muted,
.card.accent-gray .muted,
.card.accent-green .muted,
.card.accent-purple .muted{
  color:var(--muted);
}

/* The big number inside accent cards — smaller, brand-coloured */
.card.accent-magenta > p:first-of-type,
.card.accent-purple  > p:first-of-type,
.card.accent-green   > p:first-of-type,
.card.accent-gray    > p:first-of-type{
  font-size:26px;
  font-weight:800;
  letter-spacing:-.02em;
  margin:.4rem 0 .5rem;
  line-height:1.1;
}
.card.accent-magenta > p:first-of-type{color:var(--brand-magenta)}
.card.accent-purple  > p:first-of-type{color:#3B6FD4}
.card.accent-green   > p:first-of-type{color:#4D8A1F}
.card.accent-gray    > p:first-of-type{color:var(--fg-2)}

/* Buttons / links inside accent cards keep normal treatment */
.card.accent-magenta a,
.card.accent-gray a,
.card.accent-green a,
.card.accent-purple a{
  color:var(--brand-magenta);
  font-weight:600;
}



.dash{max-width:1180px;margin:0 auto}

/* ---------- hero ---------- */
.dash-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.75rem}
.dash-greeting{font-size:28px;font-weight:800;letter-spacing:-.03em;margin:0;line-height:1.15;color:var(--fg)}
.dash-greeting-sub{color:var(--muted);font-size:13.5px;margin:.35rem 0 0;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.dash-greeting-sub .dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--border);opacity:.9}
.dash-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.dash-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .95rem;border-radius:9px;font-size:13.5px;font-weight:600;text-decoration:none;border:1px solid transparent;transition:background .12s,border-color .12s,color .12s,box-shadow .12s;line-height:1.1}
.dash-btn svg{flex-shrink:0}
.dash-btn-primary{background:var(--brand-magenta);color:#fff;border-color:var(--brand-magenta)}
.dash-btn-primary:hover{background:var(--brand-magenta-hover);border-color:var(--brand-magenta-hover);color:#fff;text-decoration:none;box-shadow:0 4px 14px rgba(176,30,126,.28)}
.dash-btn-ghost{background:#fff;color:var(--fg);border-color:var(--border)}
.dash-btn-ghost:hover{background:#F5F5F7;border-color:#D5D5DC;color:var(--fg);text-decoration:none}

/* ---------- stat strip ---------- */
.dash-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.5rem}
@media (max-width:960px){.dash-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.dash-stats{grid-template-columns:1fr}}
.stat{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.15rem;display:flex;flex-direction:column;gap:.75rem;transition:box-shadow .15s,transform .15s,border-color .15s;position:relative;overflow:hidden}
.stat:hover{box-shadow:0 8px 24px rgba(15,15,30,.06);border-color:#E0E0E6;transform:translateY(-1px)}
.stat-chip{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px}
.stat-chip.blue{background:#E4EEFB;color:#2563EB}
.stat-chip.green{background:#E4F5E6;color:#16A34A}
.stat-chip.red{background:#FCE6E6;color:#DC2626}
.stat-chip.amber{background:#FDF3DD;color:#B45309}
.stat-chip.gray{background:#EEEEF2;color:#4B4B55}
.stat-chip.magenta{background:#F7E9F3;color:var(--brand-magenta)}
.stat-body{display:flex;flex-direction:column;gap:.15rem}
.stat-value{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.stat-value.warn{color:#DC2626}
.stat-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stat-cta{margin-top:auto;font-size:12.5px;font-weight:600;color:var(--brand-magenta);display:inline-flex;align-items:center;gap:.3rem;text-decoration:none}
.stat-cta:hover{color:var(--brand-magenta-dark);text-decoration:none}
.stat-cta svg{transition:transform .15s}
.stat-cta:hover svg{transform:translateX(2px)}

/* ---------- main grid ---------- */
.dash-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:1.25rem}
@media (max-width:900px){.dash-grid{grid-template-columns:1fr}}
.dash-col-main,.dash-col-side{display:flex;flex-direction:column;gap:1.25rem;min-width:0}

/* ---------- panels ---------- */
.panel{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.25rem 1.25rem}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem;gap:.5rem}
.panel-head h3{font-size:13.5px;font-weight:700;margin:0;letter-spacing:0;text-transform:none;color:var(--fg)}
.panel-head a{font-size:12.5px;font-weight:600;color:var(--brand-magenta);text-decoration:none}
.panel-head a:hover{text-decoration:underline}
.panel-table{width:100%;border-collapse:collapse;border:none;background:transparent}
.panel-table th{background:transparent;border-bottom:1px solid var(--border-2);padding:.3rem .35rem .5rem;font-size:10.5px;letter-spacing:.06em}
.panel-table td{padding:.6rem .35rem;border-bottom:1px solid var(--border-2);font-size:13.5px;vertical-align:middle}
.panel-table tbody tr:last-child td{border-bottom:none}
.panel-table tbody tr:hover{background:transparent}
.panel-table td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;white-space:nowrap}
.panel-table td.mono a{color:var(--brand-magenta);font-weight:600}

/* ---------- list items ---------- */
.list-clean{list-style:none;margin:0;padding:0}
.list-clean li{border-bottom:1px solid var(--border-2)}
.list-clean li:last-child{border-bottom:none}
.list-clean a{display:block;padding:.65rem .1rem;text-decoration:none;color:inherit;transition:padding-left .12s}
.list-clean a:hover{padding-left:.3rem;text-decoration:none}
.list-title{display:block;font-size:13.5px;font-weight:600;color:var(--fg);line-height:1.35}
.list-meta{display:block;font-size:12px;color:var(--muted);margin-top:.15rem}

/* ---------- dept info ---------- */
.dept-info{display:flex;flex-direction:column;gap:.2rem;padding:.25rem .1rem}
.dept-name{font-size:15px;font-weight:700;color:var(--fg)}
.dept-email{font-size:12.5px;color:var(--muted)}

/* ---------- empty state ---------- */
.empty-state{padding:1.4rem .5rem;text-align:center;color:var(--muted);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.empty-state p{margin:0}
.empty-state .dash-btn{font-size:12.5px;padding:.45rem .85rem}



/* Hide the default .login-card styling when the new split layout is used. */
.lgn-wrap{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  max-width:1040px;margin:2.5rem auto 1.5rem;
  background:#fff;border:1px solid var(--border);border-radius:18px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(15,15,30,.06),0 24px 60px rgba(15,15,30,.08);
  min-height:560px;
}
@media (max-width:820px){
  .lgn-wrap{grid-template-columns:1fr;min-height:0;margin:1.5rem auto;border-radius:14px}
}

/* ---------- Left: brand + live stats ---------- */
.lgn-left{
  background:linear-gradient(160deg,#1A1A22 0%,#250E1E 55%,#3A0F2B 100%);
  color:#fff;padding:2.5rem 2.5rem 2rem;
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  position:relative;overflow:hidden;
}
.lgn-left::before{
  content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;
  border-radius:50%;background:radial-gradient(circle,rgba(176,30,126,.35) 0%,transparent 70%);
  pointer-events:none;
}
.lgn-left::after{
  content:"";position:absolute;left:-80px;bottom:-80px;width:240px;height:240px;
  border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,.18) 0%,transparent 70%);
  pointer-events:none;
}
.lgn-left-top{position:relative;z-index:1}

.lgn-brand{display:flex;align-items:center;gap:.6rem;margin-bottom:2rem}
.lgn-brand-mark{
  position:relative;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#F5A623 0 32%,transparent 34%),var(--brand-magenta);
  flex-shrink:0;
}
.lgn-brand-mark::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:#fff;opacity:.85}
.lgn-brand-name{font-weight:800;font-size:16px;letter-spacing:-.02em}

.lgn-headline{
  font-size:30px;font-weight:800;line-height:1.15;letter-spacing:-.03em;
  color:#fff;margin:0 0 .65rem;
}
.lgn-sub{color:rgba(255,255,255,.62);font-size:14px;margin:0;max-width:34ch;line-height:1.55}

.lgn-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:.75rem;position:relative;z-index:1;
}
.lgn-metric{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:.9rem 1rem;
  display:flex;flex-direction:column;gap:.4rem;
  transition:background .15s,border-color .15s;
}
.lgn-metric:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)}
.lgn-metric-icon{color:#F5A623;display:inline-flex}
.lgn-metric-value{
  font-size:28px;font-weight:800;letter-spacing:-.03em;color:#fff;
  line-height:1.05;font-variant-numeric:tabular-nums;
}
.lgn-metric-value.bump{animation:lgn-bump .5s ease-out}
@keyframes lgn-bump{
  0%{transform:scale(1)}
  30%{transform:scale(1.08);color:#F5A623}
  100%{transform:scale(1);color:#fff}
}
.lgn-metric-label{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.55);
}

.lgn-live{
  display:flex;align-items:center;gap:.5rem;position:relative;z-index:1;
  font-size:12px;color:rgba(255,255,255,.55);
}
.lgn-live-dot{
  width:8px;height:8px;border-radius:50%;background:#7A7A85;
  position:relative;flex-shrink:0;
}
.lgn-live.ok .lgn-live-dot{background:#22C55E}
.lgn-live.ok .lgn-live-dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  background:#22C55E;opacity:.45;animation:lgn-pulse 2s ease-out infinite;
}
@keyframes lgn-pulse{
  0%{transform:scale(.6);opacity:.55}
  80%,100%{transform:scale(1.9);opacity:0}
}

/* ---------- Right: form ---------- */
.lgn-right{display:flex;align-items:center;padding:2.5rem 2.5rem}
.lgn-right-inner{width:100%;max-width:340px;margin:0 auto}
@media (max-width:820px){.lgn-right{padding:2rem 1.5rem}}

.lgn-title{font-size:24px;font-weight:800;letter-spacing:-.025em;margin:0 0 .35rem;color:var(--fg)}
.lgn-title-sub{color:var(--muted);font-size:13.5px;margin:0 0 1.5rem}

.lgn-form{display:flex;flex-direction:column;gap:1rem}
.lgn-field{display:block;margin:0}
.lgn-field-label{
  display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--fg-2);margin-bottom:.35rem;
}
.lgn-field-input{
  position:relative;display:flex;align-items:center;
  border:1px solid var(--border);border-radius:10px;background:#fff;
  transition:border-color .12s,box-shadow .12s;
}
.lgn-field-input:focus-within{
  border-color:var(--brand-magenta);
  box-shadow:0 0 0 4px rgba(176,30,126,.12);
}
.lgn-field-icon{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);padding-left:.75rem;flex-shrink:0;
}
.lgn-field-input input{
  flex:1;border:none;background:transparent;outline:none;
  padding:.7rem .85rem .7rem .6rem;font-size:14px;color:var(--fg);
  width:100%;
}
.lgn-field-input input::placeholder{color:#B5B5BE}
.lgn-field-input input:focus{box-shadow:none}

.lgn-submit{
  margin-top:.5rem;width:100%;padding:.75rem 1rem;
  border:none;border-radius:10px;
  background:var(--brand-magenta);color:#fff;
  font-size:14px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;
  transition:background .12s,box-shadow .12s,transform .08s;
}
.lgn-submit:hover{background:var(--brand-magenta-hover);box-shadow:0 6px 18px rgba(176,30,126,.28)}
.lgn-submit:active{transform:translateY(1px)}

.lgn-divider{
  position:relative;text-align:center;margin:1.25rem 0 .9rem;
}
.lgn-divider::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--border);
}
.lgn-divider span{
  position:relative;background:#fff;padding:0 .6rem;
  font-size:11.5px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;
}

.lgn-oauth{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.7rem 1rem;border:1px solid var(--border);border-radius:10px;
  background:#fff;color:var(--fg);text-decoration:none;
  font-size:13.5px;font-weight:600;
  transition:background .12s,border-color .12s,box-shadow .12s;
}
.lgn-oauth:hover{background:#FAFAFC;border-color:#D5D5DC;text-decoration:none;box-shadow:var(--shadow-sm)}

.lgn-footer{margin:1.5rem 0 0;text-align:center;font-size:13px}
.lgn-footer a{color:var(--brand-magenta);font-weight:600;text-decoration:none}
.lgn-footer a:hover{text-decoration:underline}



/* Repaint the login left panel in Checkoff magenta. */
.lgn-left{
  background:
    radial-gradient(circle at 90% 10%, rgba(245,166,35,.28) 0%, transparent 42%),
    radial-gradient(circle at 10% 95%, rgba(255,90,180,.22) 0%, transparent 48%),
    linear-gradient(155deg, #2A0A1C 0%, #5C1038 45%, #A81B70 100%);
  color:#fff;
}
.lgn-left::before{
  background:radial-gradient(circle, rgba(245,166,35,.45) 0%, transparent 70%);
  right:-100px;top:-100px;
}
.lgn-left::after{
  background:radial-gradient(circle, rgba(255,120,200,.28) 0%, transparent 70%);
  left:-90px;bottom:-90px;
}

.lgn-brand-name{color:#fff}

.lgn-headline{color:#fff}
.lgn-sub{color:rgba(255,255,255,.7)}

.lgn-metric{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}
.lgn-metric:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(245,166,35,.4);
}
.lgn-metric-icon{color:#F5A623}
.lgn-metric-value{color:#fff}
.lgn-metric-label{color:rgba(255,255,255,.6)}

.lgn-live{color:rgba(255,255,255,.62)}

/* Add a subtle bottom accent strip in Checkoff orange + magenta */
.lgn-left .lgn-live::after{
  content:"";
  display:block;
}

/* Form-side accent, ties the two halves together */
.lgn-right{position:relative}
.lgn-right::before{
  content:"";
  position:absolute;top:0;left:0;width:100%;height:3px;
  background:linear-gradient(90deg, #B01E7E 0%, #F5A623 100%);
  opacity:0;
  pointer-events:none;
}
@media (max-width:820px){
  .lgn-right::before{opacity:1}
}

/* Login submit button keeps the exact Checkoff magenta */
.lgn-submit{background:#B01E7E}
.lgn-submit:hover{background:#9C1A6E}

/* Focus ring in the same magenta */
.lgn-field-input:focus-within{
  border-color:#B01E7E;
  box-shadow:0 0 0 4px rgba(176,30,126,.14);
}



/* ============================================================
   Checkoff / Bankvole-style login page
   ============================================================ */
.cf{
  max-width:1180px;margin:0 auto;padding:1.75rem 1.5rem 2rem;
}

/* ---------- Top bar ---------- */
.cf-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 0 1.5rem;
  border-bottom:1px solid var(--border);
  margin-bottom:2.5rem;
}
.cf-logo{display:flex;align-items:center;gap:.6rem}
.cf-logo-mark{
  position:relative;width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle at 28% 28%, #F5A623 0 34%, transparent 36%),
             var(--brand-magenta);
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(176,30,126,.24);
}
.cf-logo-mark::after{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:9px;height:9px;border-radius:50%;
  background:#fff;opacity:.9;
}
.cf-logo-name{
  font-weight:800;font-size:17px;letter-spacing:-.03em;
  color:var(--fg);
}
.cf-bar-right{}
.cf-bar-label{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}

/* ---------- Layout ---------- */
.cf-main{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);
  gap:3.5rem;
  align-items:center;
  padding-bottom:2rem;
}
@media (max-width:900px){
  .cf-main{grid-template-columns:1fr;gap:2.5rem}
}

/* ---------- Intro column ---------- */
.cf-kicker{
  font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-magenta);
  margin:0 0 1rem;
}
.cf-headline{
  font-size:clamp(30px, 4.2vw, 46px);
  font-weight:800;letter-spacing:-.035em;
  line-height:1.05;color:var(--fg);
  margin:0 0 1.1rem;
}
.cf-lead{
  font-size:15px;line-height:1.6;color:var(--fg-2);
  margin:0 0 2rem;max-width:46ch;
}

/* ---------- Stat cards (Bankvole plan-card style) ---------- */
.cf-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:.9rem;
  margin-bottom:1.5rem;
}
@media (max-width:520px){.cf-stats{grid-template-columns:1fr}}
.cf-stat{
  border-radius:16px;padding:1.15rem 1.2rem 1.2rem;
  display:flex;flex-direction:column;gap:.55rem;
  min-height:135px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cf-stat:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,15,30,.09)}
.cf-stat-magenta{background:#B01E7E;color:#fff}
.cf-stat-gray   {background:#E9E9EE;color:var(--fg)}
.cf-stat-green  {background:#DCE9AE;color:var(--fg)}
.cf-stat-purple {background:#CFDDF5;color:var(--fg)}

.cf-pill{
  display:inline-block;align-self:flex-start;
  padding:.2rem .6rem;border-radius:999px;
  background:rgba(255,255,255,.22);
  color:inherit;
  font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
}
.cf-stat-gray .cf-pill,
.cf-stat-green .cf-pill,
.cf-stat-purple .cf-pill{
  background:rgba(255,255,255,.72);color:var(--fg-2);
}

.cf-stat-value{
  font-size:36px;font-weight:800;letter-spacing:-.04em;
  line-height:1;margin-top:auto;
  font-variant-numeric:tabular-nums;
}
.cf-stat-value.bump{animation:cf-bump .55s ease-out}
@keyframes cf-bump{
  0%  {transform:scale(1)}
  35% {transform:scale(1.07)}
  100%{transform:scale(1)}
}
.cf-stat-label{
  font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  opacity:.75;
}
.cf-stat-magenta .cf-stat-label{opacity:.85}

/* ---------- Live indicator ---------- */
.cf-live{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:12.5px;color:var(--muted);font-weight:600;
}
.cf-live-dot{
  width:8px;height:8px;border-radius:50%;background:#C4C4CC;
  position:relative;flex-shrink:0;
}
.cf-live.ok .cf-live-dot{background:#22C55E}
.cf-live.ok .cf-live-dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  background:#22C55E;opacity:.4;
  animation:cf-pulse 2s ease-out infinite;
}
@keyframes cf-pulse{
  0%  {transform:scale(.6);opacity:.5}
  80%,100%{transform:scale(1.9);opacity:0}
}

/* ---------- Form panel ---------- */
.cf-panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:2.25rem 2rem;
  box-shadow:0 1px 3px rgba(15,15,30,.05), 0 24px 60px rgba(15,15,30,.06);
  max-width:420px;width:100%;justify-self:end;
}
@media (max-width:900px){.cf-panel{justify-self:center}}
@media (max-width:520px){.cf-panel{padding:1.75rem 1.35rem}}

.cf-panel-title{
  font-size:22px;font-weight:800;letter-spacing:-.03em;
  margin:0 0 .35rem;color:var(--fg);
}
.cf-panel-sub{
  font-size:13.5px;color:var(--muted);
  margin:0 0 1.5rem;
}

.cf-form{display:flex;flex-direction:column;gap:1.1rem}
.cf-field{display:block;margin:0}
.cf-field-label{
  display:block;
  font-size:11px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-2);margin-bottom:.4rem;
}
.cf-field-input{
  display:flex;align-items:center;
  border:1.5px solid var(--border);border-radius:11px;
  background:#fff;
  transition:border-color .13s, box-shadow .13s;
}
.cf-field-input:focus-within{
  border-color:var(--brand-magenta);
  box-shadow:0 0 0 4px rgba(176,30,126,.12);
}
.cf-field-icon{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);padding-left:.8rem;flex-shrink:0;
}
.cf-field-input input{
  flex:1;border:none;background:transparent;outline:none;
  padding:.75rem .85rem .75rem .55rem;
  font-size:14px;color:var(--fg);width:100%;font-family:inherit;
}
.cf-field-input input::placeholder{color:#B7B7C0}
.cf-field-input input:focus{box-shadow:none}

.cf-submit{
  margin-top:.35rem;width:100%;
  padding:.85rem 1rem;
  border:none;border-radius:11px;
  background:var(--brand-magenta);color:#fff;
  font-size:14.5px;font-weight:700;letter-spacing:.005em;
  cursor:pointer;font-family:inherit;
  transition:background .13s, box-shadow .13s, transform .08s;
}
.cf-submit:hover{background:#9C1A6E;box-shadow:0 8px 20px rgba(176,30,126,.28)}
.cf-submit:active{transform:translateY(1px)}

.cf-divider{
  position:relative;text-align:center;margin:1.5rem 0 1rem;
}
.cf-divider::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--border);
}
.cf-divider span{
  position:relative;background:#fff;padding:0 .65rem;
  font-size:11px;font-weight:700;color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase;
}

.cf-oauth{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1rem;
  border:1.5px solid var(--border);border-radius:11px;
  background:#fff;color:var(--fg);text-decoration:none;
  font-size:14px;font-weight:600;
  transition:background .13s, border-color .13s;
}
.cf-oauth:hover{background:#FAFAFC;border-color:#D5D5DC;text-decoration:none}

.cf-footer{margin:1.5rem 0 0;text-align:center;font-size:13.5px}
.cf-footer a{color:var(--brand-magenta);font-weight:600;text-decoration:none}
.cf-footer a:hover{text-decoration:underline}

/* ---------- Page footer ---------- */
.cf-foot{
  display:flex;align-items:center;justify-content:center;gap:.85rem;
  margin-top:2.5rem;padding-top:1.5rem;
  border-top:1px solid var(--border);
  font-size:12px;color:var(--muted);
}
.cf-foot-sep{
  width:4px;height:4px;border-radius:50%;background:var(--border);
}



.att{max-width:1180px;margin:0 auto}
.att-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.att-title{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:0}
.att-sub{color:var(--muted);font-size:13.5px;margin:.3rem 0 0}
.att-head-actions{display:flex;gap:.5rem;flex-wrap:wrap}

.att-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .95rem;border-radius:9px;font-size:13.5px;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s,color .12s,box-shadow .12s}
.att-btn-primary{background:var(--brand-magenta);color:#fff;border-color:var(--brand-magenta)}
.att-btn-primary:hover{background:var(--brand-magenta-hover);color:#fff;text-decoration:none;box-shadow:0 4px 14px rgba(176,30,126,.24)}
.att-btn-ghost{background:#fff;color:var(--fg);border-color:var(--border)}
.att-btn-ghost:hover{background:#F5F5F7;text-decoration:none;color:var(--fg)}

/* Clock card */
.att-clock-card,.dash-clock{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem;transition:border-color .15s}
.dash-clock{margin-bottom:1.25rem}
.att-clock-in{border-color:#BCE5C7;background:linear-gradient(180deg,#F7FDF9 0%,#fff 70%)}
.att-clock-out{border-color:#E5E5EA}
.att-clock-left{display:flex;align-items:center;gap:.85rem;min-width:0}
.att-clock-dot{width:10px;height:10px;border-radius:50%;background:#B5B5BE;flex-shrink:0}
.att-clock-in .att-clock-dot{background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.att-clock-out .att-clock-dot{background:#94A3B8}
.att-clock-title{font-size:15px;font-weight:700;color:var(--fg);letter-spacing:-.01em}
.att-clock-sub{font-size:12.5px;color:var(--muted);margin-top:.15rem}
.att-clock-right{display:flex;gap:.5rem;flex-wrap:wrap}
.att-done{font-size:13px;color:var(--muted);font-weight:600;padding:.55rem .9rem}

/* Panel + table */
.att-panel{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.25rem 1.25rem}
.att-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem}
.att-panel-head h2{font-size:13.5px;font-weight:700;margin:0;letter-spacing:0;text-transform:none}
.att-table{width:100%;border-collapse:collapse;background:transparent;border:none}
.att-table th{background:transparent;border-bottom:1px solid var(--border-2);padding:.35rem .5rem .55rem;font-size:10.5px;letter-spacing:.06em}
.att-table td{padding:.6rem .5rem;border-bottom:1px solid var(--border-2);font-size:13.5px;vertical-align:middle}
.att-table tbody tr:last-child td{border-bottom:none}
.att-table td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;white-space:nowrap}
.att-open{display:inline-block;padding:.1rem .45rem;border-radius:999px;background:#FEF3C7;color:#854D0E;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}

/* Filters strip */
.att-filters{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;background:#fff;border:1px solid var(--border);border-radius:14px;padding:.9rem 1rem;margin-bottom:1rem}
.att-filters label{display:flex;flex-direction:column;gap:.25rem;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.att-filters input,.att-filters select{font-size:13.5px;padding:.45rem .6rem;border:1px solid var(--border);border-radius:8px;background:#fff;font-family:inherit;font-weight:500;color:var(--fg);min-width:140px}
.att-filters input:focus,.att-filters select:focus{outline:none;border-color:var(--brand-magenta);box-shadow:0 0 0 3px rgba(176,30,126,.12)}

.att-summary{font-size:12.5px;color:var(--muted);margin:0 0 .75rem;padding-left:.25rem}
.att-empty{padding:1.5rem 1rem;text-align:center;color:var(--muted);font-size:13.5px}

@media (max-width:760px){
  .att-clock-card,.dash-clock{flex-direction:column;align-items:stretch}
  .att-clock-right{justify-content:flex-end}
  .att-filters{flex-direction:column;align-items:stretch}
  .att-filters input,.att-filters select{width:100%}
  .att-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
}



.att-clock-body,.dash-clock-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.att-clock-label{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--fg-2);text-transform:uppercase}
.att-live-clock{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-top:.15rem}
.att-live-clock-digits{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:36px;font-weight:800;letter-spacing:-.02em;line-height:1;
  color:var(--brand-magenta);
  font-variant-numeric:tabular-nums;
}
.att-clock-in .att-live-clock-digits{
  color:#16A34A;
  text-shadow:0 0 22px rgba(34,197,94,.20);
}
.att-live-clock-digits.stopped{color:var(--fg-2)}
.att-live-clock-digits.idle{color:#C4C4CC}
.att-live-clock-status{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}

.att-clock-in .att-clock-dot{animation:att-dot-pulse 2.2s ease-out infinite}
@keyframes att-dot-pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}
  70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* dashboard clock card */
.dash-clock{
  background:#fff;border:1px solid var(--border);border-radius:14px;
  padding:1.1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem;
}
.dash-clock-left{display:flex;align-items:center;gap:.85rem;min-width:0}
.dash-clock-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.att-clock-card{
  background:#fff;border:1px solid var(--border);border-radius:14px;
  padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem;
}
.att-clock-left{display:flex;align-items:center;gap:.85rem;min-width:0}
.att-clock-right{display:flex;gap:.5rem;flex-wrap:wrap}
.att-clock-in{border-color:#BCE5C7;background:linear-gradient(180deg,#F7FDF9 0%,#fff 70%)}
.att-clock-dot{width:10px;height:10px;border-radius:50%;background:#B5B5BE;flex-shrink:0}
.att-clock-in .att-clock-dot{background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.att-clock-out .att-clock-dot{background:#94A3B8}

.att-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.att-title{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:0}
.att-sub{color:var(--muted);font-size:13.5px;margin:.3rem 0 0}
.att-head-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.att-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .95rem;border-radius:9px;font-size:13.5px;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit}
.att-btn-primary{background:var(--brand-magenta);color:#fff;border-color:var(--brand-magenta)}
.att-btn-primary:hover{background:var(--brand-magenta-hover);color:#fff;text-decoration:none}
.att-btn-ghost{background:#fff;color:var(--fg);border-color:var(--border)}
.att-btn-ghost:hover{background:#F5F5F7;text-decoration:none;color:var(--fg)}
.att-panel{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.25rem 1.25rem}
.att-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem}
.att-panel-head h2{font-size:13.5px;font-weight:700;margin:0;letter-spacing:0}
.att-table{width:100%;border-collapse:collapse;background:transparent;border:none}
.att-table th{background:transparent;border-bottom:1px solid var(--border-2);padding:.35rem .5rem .55rem;font-size:10.5px;letter-spacing:.06em}
.att-table td{padding:.6rem .5rem;border-bottom:1px solid var(--border-2);font-size:13.5px;vertical-align:middle}
.att-table tbody tr:last-child td{border-bottom:none}
.att-table td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;white-space:nowrap}
.att-open{display:inline-block;padding:.1rem .45rem;border-radius:999px;background:#FEF3C7;color:#854D0E;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.att-empty{padding:1.5rem 1rem;text-align:center;color:var(--muted);font-size:13.5px}
.att-done{font-size:13px;color:var(--muted);font-weight:600;padding:.55rem .9rem}

@media (max-width:760px){
  .att-clock-card,.dash-clock{flex-direction:column;align-items:stretch}
  .att-clock-right,.dash-clock-actions{justify-content:flex-end}
  .att-table{display:block;overflow-x:auto;white-space:nowrap}
  .att-live-clock-digits{font-size:28px}
}



.att-notice{padding:.7rem 1rem;border-radius:9px;font-size:13.5px;margin-bottom:1rem;border-left:4px solid}
.att-notice-info{background:#EFF6FF;border-color:#2563EB;color:#1E3A8A}

.att-settings{margin-bottom:1rem}
.att-settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1rem}
.att-settings-grid > label{display:flex;flex-direction:column;gap:.3rem;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.att-settings-grid input[type=time]{font-size:14px;padding:.5rem .65rem;border:1px solid var(--border);border-radius:8px;background:#fff;font-family:inherit;font-weight:500;color:var(--fg)}
.att-toggle{flex-direction:row !important;align-items:flex-start;gap:.6rem !important;text-transform:none;letter-spacing:0;font-weight:600;font-size:13.5px;color:var(--fg);align-self:end;grid-column:1/-1}
.att-toggle small{display:block;font-weight:400;font-size:12px;margin-top:.15rem;color:var(--muted)}
.att-toggle input[type=checkbox]{margin-top:.25rem}

.att-days{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:.75rem}
.att-days-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.att-days-inline{display:flex;gap:.35rem;flex-wrap:wrap}
.att-day{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .65rem;border:1px solid var(--border);border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;user-select:none;background:#fff}
.att-day.on{background:var(--brand-magenta);color:#fff;border-color:var(--brand-magenta)}
.att-day input{display:none}

.att-settings-hint{font-size:12.5px;margin:0;line-height:1.55}
.att-settings-hint code{background:#F4F4F6;padding:.1rem .35rem;border-radius:4px;font-size:11.5px}



.att-presets{background:#fff;border:1px solid var(--border);border-radius:14px;padding:.9rem 1rem;margin-bottom:1rem;display:flex;flex-direction:column;gap:.7rem}
.att-preset-row{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.att-preset-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);padding-right:.4rem}
.att-preset{display:inline-flex;align-items:center;padding:.35rem .75rem;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--fg-2);background:#F5F5F7;text-decoration:none;border:1px solid transparent}
.att-preset:hover{background:#EBEBEF;text-decoration:none;color:var(--fg)}
.att-preset.on{background:var(--brand-magenta);color:#fff;border-color:var(--brand-magenta)}
.att-preset.on:hover{background:var(--brand-magenta-hover);color:#fff}

.att-mini{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin:0}
.att-mini input[type=date],.att-mini select{font-size:13px;padding:.4rem .55rem;border:1px solid var(--border);border-radius:8px;background:#fff;font-family:inherit;font-weight:500;color:var(--fg)}
.att-mini input[type=date]:focus,.att-mini select:focus{outline:none;border-color:var(--brand-magenta);box-shadow:0 0 0 3px rgba(176,30,126,.12)}
.att-dash{color:var(--muted);font-weight:600}
.att-summary strong{font-weight:700}

@media (max-width:760px){
  .att-preset-row{flex-direction:column;align-items:stretch}
  .att-mini{flex-direction:column;align-items:stretch}
  .att-mini input[type=date],.att-mini select,.att-mini button{width:100%}
  .att-dash{display:none}
}



.att-sec-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--brand-magenta);margin:.9rem 0 .5rem}
.att-sec-title:first-child{margin-top:0}
.att-toggle{flex-direction:row !important;align-items:flex-start;gap:.6rem !important;text-transform:none !important;letter-spacing:0 !important;font-weight:600;font-size:13.5px;color:var(--fg);grid-column:1/-1}
.att-toggle small{display:block;font-weight:400;font-size:12px;margin-top:.15rem;color:var(--muted)}
.att-toggle input[type=checkbox]{margin-top:.25rem}

.att-mail-status{display:flex;flex-direction:column;gap:.35rem;font-size:13.5px}
.att-mail-line{font-size:13px;color:var(--fg-2)}

.att-badge-ok{display:inline-block;background:#DCFCE7;color:#166534;padding:.15rem .5rem;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.att-badge-warn{display:inline-block;background:#FEF3C7;color:#854D0E;padding:.15rem .5rem;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-left:.35rem}
.att-badge-bad{display:inline-block;background:#FEE2E2;color:#991B1B;padding:.15rem .5rem;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.att-row-flag{background:#FFFBEB !important}

.att-verify-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1rem}
.att-verify-stat{background:#FAFAFC;border:1px solid var(--border);border-radius:10px;padding:.85rem 1rem}
.att-verify-stat strong{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1}
.att-verify-stat span{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:.2rem}
.att-verify-stat.ok strong{color:#16A34A}
.att-verify-stat.bad strong{color:#DC2626}
.att-verify-stat.muted strong{color:var(--muted)}
.att-notice-bad{background:#FEF2F2;border-left:4px solid #DC2626;color:#7F1D1D;padding:.75rem 1rem;border-radius:9px;font-size:13.5px;margin:.5rem 0 1rem}

/* Selfie modal */
.att-selfie-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem}
.att-selfie-backdrop{position:absolute;inset:0;background:rgba(15,15,30,.55)}
.att-selfie-card{position:relative;background:#fff;border-radius:14px;padding:1.4rem;max-width:460px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.att-selfie-stage{width:100%;aspect-ratio:4/3;background:#0f0f17;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.att-selfie-stage video,.att-selfie-stage img{width:100%;height:100%;object-fit:cover;display:block}
.att-selfie-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.85rem}
@media (max-width:600px){.att-verify-summary{grid-template-columns:1fr 1fr}}



/* Make the HTML [hidden] attribute actually hide, even when
   another class on the element sets display:flex/inline-flex. */
[hidden]{display:none !important}

/* Slightly safer stage so a working feed is always visible */
.att-selfie-stage{background:#0f0f17;position:relative}
.att-selfie-stage video{transform:scaleX(-1)}
.att-selfie-stage img{transform:scaleX(-1)}
.att-selfie-msg{color:#fff;opacity:.8;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;font-size:13px}



.ue{max-width:1180px;margin:0 auto}
.ue-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}
.ue-title{font-size:24px;font-weight:800;letter-spacing:-.03em;margin:.35rem 0 .2rem}
.ue-sub{font-size:13px;color:var(--muted);margin:0}

.ue-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
@media (max-width:900px){.ue-grid{grid-template-columns:1fr}}
.ue-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.25rem 1.35rem}
.ue-card-wide{grid-column:1/-1}
.ue-card-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--brand-magenta);margin:0 0 .9rem}
.ue-sec{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:1rem 0 .5rem}

.ue-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1rem}
.ue-grid-1{display:grid;grid-template-columns:1fr;gap:.6rem}
@media (max-width:700px){.ue-grid-2{grid-template-columns:1fr}}
.ue-grid-2 label,.ue-grid-1 label{display:flex;flex-direction:column;gap:.25rem;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ue-grid-2 input,.ue-grid-2 select,.ue-grid-1 input,.ue-grid-1 select,.ue-grid-1 textarea{font-size:14px;padding:.5rem .65rem;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--fg);font-family:inherit;font-weight:500}
.ue-grid-2 input:focus,.ue-grid-2 select:focus,.ue-grid-1 input:focus,.ue-grid-1 select:focus,.ue-grid-1 textarea:focus{outline:none;border-color:var(--brand-magenta);box-shadow:0 0 0 3px rgba(176,30,126,.12)}

.ue-roles{display:flex;flex-wrap:wrap;gap:.35rem}
.ue-role{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .75rem;border:1px solid var(--border);border-radius:999px;font-size:12.5px;font-weight:600;background:#fff;cursor:pointer;user-select:none;color:var(--fg)}
.ue-role.on{background:var(--brand-magenta);color:#fff;border-color:var(--brand-magenta)}
.ue-role input{display:none}

.ue-sec-block{border-top:1px solid var(--border-2);padding-top:1rem;margin-top:1rem}
.ue-sec-block:first-child{border-top:none;padding-top:0;margin-top:0}
.ue-radio-row{display:flex;gap:1rem;font-size:13px;margin-bottom:.5rem}
.ue-radio-row label{display:flex;align-items:center;gap:.35rem;text-transform:none;letter-spacing:0;font-weight:500;color:var(--fg);margin:0}
#ue-custom-pw{font-size:14px;padding:.5rem .65rem;border:1px solid var(--border);border-radius:8px;width:100%;font-family:inherit}
#ue-custom-pw:disabled{background:#F7F7F9;color:var(--muted)}

.ue-meta{width:100%;border-collapse:collapse;background:transparent;border:none}
.ue-meta td{padding:.45rem 0;font-size:13px;border-bottom:1px solid var(--border-2)}
.ue-meta tr:last-child td{border-bottom:none}
.ue-meta td:first-child{color:var(--muted);font-size:12px;font-weight:600;width:45%}



.ue-role{
  transition: background .12s, color .12s, border-color .12s, transform .06s;
}
.ue-role:hover{ background:#F5F5F7; border-color:#D5D5DC; }
.ue-role.on:hover{ background:var(--brand-magenta-hover); border-color:var(--brand-magenta-hover); color:#fff; }
.ue-role:active{ transform:scale(.97); }
.ue-role:focus{ outline:none; box-shadow:0 0 0 3px rgba(176,30,126,.18); }
.ue-role.on:focus{ box-shadow:0 0 0 3px rgba(176,30,126,.28); }

/* Make sure the checkbox stays clickable for accessibility tools,
   but stays visually hidden. */
.ue-role input[type=checkbox]{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.ue-role{ position:relative; }



/* ---------- Role pills on user_edit ---------- */
.ue-role{position:relative;transition:background .12s,color .12s,border-color .12s,transform .06s}
.ue-role:hover{background:#F5F5F7;border-color:#D5D5DC}
.ue-role.on:hover{background:var(--brand-magenta-hover);border-color:var(--brand-magenta-hover);color:#fff}
.ue-role:active{transform:scale(.97)}
.ue-role:focus{outline:none;box-shadow:0 0 0 3px rgba(176,30,126,.18)}
.ue-role input[type=radio],.ue-role input[type=checkbox]{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0
}

/* ---------- Role editor page ---------- */
.re{max-width:1180px;margin:0 auto}
.re-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem;margin-bottom:1.25rem}
.re-title{font-size:24px;font-weight:800;letter-spacing:-.03em;margin:.35rem 0 .2rem}
.re-sub{font-size:13px;color:var(--muted);margin:0}
.re-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:1rem;align-items:start}
@media (max-width:900px){.re-grid{grid-template-columns:1fr}}
.re-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.25rem 1.35rem}
.re-card-wide{grid-column:2/3}
@media (max-width:900px){.re-card-wide{grid-column:1/-1}}
.re-card-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--brand-magenta);margin:0 0 .9rem}
.re-field{display:flex;flex-direction:column;gap:.25rem;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.75rem}
.re-field input{font-size:14px;padding:.5rem .65rem;border:1px solid var(--border);border-radius:8px;background:#fff;font-family:inherit;font-weight:500;color:var(--fg)}
.re-field input:focus{outline:none;border-color:var(--brand-magenta);box-shadow:0 0 0 3px rgba(176,30,126,.12)}

.re-toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.re-toolbar input[type=search]{flex:1;min-width:200px;font-size:13.5px;padding:.5rem .75rem;border:1px solid var(--border);border-radius:8px;background:#fff;font-family:inherit}
.re-toolbar input[type=search]:focus{outline:none;border-color:var(--brand-magenta);box-shadow:0 0 0 3px rgba(176,30,126,.12)}

.re-group{margin-bottom:1rem}
.re-group-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-2);margin:.5rem 0 .5rem;border-top:1px solid var(--border-2);padding-top:.75rem}
.re-group:first-child .re-group-title{border-top:none;padding-top:0;margin-top:0}
.re-perms{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.4rem}
.re-perm{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem .7rem;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:pointer;transition:background .1s,border-color .1s}
.re-perm:hover{background:#FAFAFC;border-color:#D5D5DC}
.re-perm.on{background:#FDF2F9;border-color:var(--brand-magenta)}
.re-perm input[type=checkbox]{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);opacity:0}
.re-perm-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.re-perm-slug{font-size:12.5px;font-weight:600;color:var(--fg);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.re-perm-desc{font-size:11.5px;color:var(--muted);line-height:1.35}
.re-perm.on .re-perm-slug{color:var(--brand-magenta-dark)}
.re-perm::before{content:'';width:14px;height:14px;border-radius:4px;border:1.5px solid var(--border);background:#fff;flex-shrink:0;margin-top:2px;transition:background .1s,border-color .1s}
.re-perm.on::before{background:var(--brand-magenta);border-color:var(--brand-magenta);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'><path d='M6.5 11.4L3.2 8.1l1.1-1.1L6.5 9.2l5.2-5.2 1.1 1.1z'/></svg>");background-size:14px;background-position:center;background-repeat:no-repeat}

.re-save-bar{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border-2);display:flex;align-items:center;gap:1rem}



/* Toolbar: preset select */
.re-toolbar select{font-size:13px;padding:.45rem .65rem;border:1px solid var(--border);border-radius:8px;background:#fff;font-family:inherit;font-weight:500;color:var(--fg)}
.re-toolbar select:focus{outline:none;border-color:var(--brand-magenta);box-shadow:0 0 0 3px rgba(176,30,126,.12)}

/* Group header with select-all */
.re-group-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:.5rem 0 .5rem;border-top:1px solid var(--border-2);padding-top:.75rem}
.re-group:first-child .re-group-head{border-top:none;padding-top:0;margin-top:0}
.re-group-toggle{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none;text-transform:none;letter-spacing:0}
.re-group-toggle input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand-magenta);cursor:pointer}
.re-group-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-2)}
.re-group-count{font-size:11.5px;font-weight:700;color:var(--muted);padding:.15rem .55rem;border-radius:999px;background:#F5F5F7}
.re-group-count.all{background:#DCFCE7;color:#166534}
.re-group-count.none{background:#F5F5F7;color:var(--muted)}

/* Small divider in the left card */
.re-divider{border-top:1px solid var(--border-2);margin:1rem 0 0}

/* Copy-from-role select */
.re-field select{font-size:14px;padding:.5rem .65rem;border:1px solid var(--border);border-radius:8px;background:#fff;font-family:inherit;font-weight:500;color:var(--fg)}
.re-field select:focus{outline:none;border-color:var(--brand-magenta);box-shadow:0 0 0 3px rgba(176,30,126,.12)}



.ls-box{
  position:absolute;top:calc(100% + .35rem);left:0;right:0;z-index:60;
  background:#fff;border:1px solid var(--border);border-radius:10px;
  box-shadow:0 12px 30px rgba(15,15,30,.10);
  max-height:360px;overflow:auto;padding:.35rem;
}
.ls-box .ls-item{
  display:flex;gap:.65rem;align-items:flex-start;
  padding:.5rem .65rem;border-radius:8px;color:var(--fg);text-decoration:none;
}
.ls-box .ls-item:hover{background:#F5F5F7;text-decoration:none}
.ls-box .ls-item + .ls-item{border-top:1px solid var(--border-2)}
.ls-box .ls-badge{
  display:inline-block;flex-shrink:0;padding:.15rem .5rem;border-radius:999px;
  background:var(--brand-magenta-soft);color:var(--brand-magenta-dark);
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  margin-top:2px;
}
.ls-box .ls-text{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.ls-box .ls-title{font-size:13.5px;font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-box .ls-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-box .ls-empty{padding:.75rem;color:var(--muted);font-size:13px;text-align:center}

/* Login button busy state */
button[aria-busy="true"],.btn-primary[aria-busy="true"]{
  opacity:.9;cursor:progress
}
.spin{
  display:inline-block;width:14px;height:14px;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  border-radius:50%;
  animation:patch49-spin .8s linear infinite;
  vertical-align:-2px;margin-right:.45em;
}
@keyframes patch49-spin{to{transform:rotate(360deg)}}



.cf-login-bar{
  height:4px;border-radius:999px;background:#F3F3F6;overflow:hidden;
  margin:0 0 1rem;
}
.cf-login-bar-fill{
  width:0;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#B01E7E 0%,#F5A623 100%);
  transition:width 1.2s ease-out;
}
/* The button already has a busy style from patch49; keep it in sync. */
button[aria-busy="true"],.btn-primary[aria-busy="true"]{
  opacity:.9;cursor:progress
}



.pager{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-2)}
.pager-btn{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 .65rem;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--fg);font-size:13.5px;font-weight:600;text-decoration:none;transition:background .1s,border-color .1s,color .1s}
.pager-btn:hover{background:#F5F5F7;border-color:#D5D5DC;color:var(--fg);text-decoration:none}
.pager-btn.active{background:var(--brand-magenta);border-color:var(--brand-magenta);color:#fff;cursor:default}
.pager-btn.active:hover{background:var(--brand-magenta);color:#fff}
.pager-btn.disabled{opacity:.45;cursor:not-allowed;background:#FAFAFC}
.pager-ellipsis{padding:0 .25rem;color:var(--muted);font-weight:700}
.pager-info{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:600;padding-left:.5rem}
@media (max-width:520px){
  .pager-info{margin-left:0;width:100%;order:99;padding:.5rem 0 0}
  .pager-btn{min-width:30px;height:30px;padding:0 .5rem;font-size:12.5px}
}

/* Per-page selector inside the pager row */
.pager-pp{display:inline-flex;align-items:center;gap:.35rem;font-size:12px;color:var(--muted);font-weight:600;margin-left:.6rem}
.pager-pp select{font-size:12.5px;padding:.25rem .4rem;border:1px solid var(--border);border-radius:6px;background:#fff;font-family:inherit}



a[href*="p=print"][target="_blank"]{white-space:nowrap}
@media print {
  .topbar,.tabs,.pager,.no-print{display:none !important}
  body{background:#fff !important}
  .container{max-width:none !important;padding:0 !important}
  table{page-break-inside:auto}
  tr{page-break-inside:avoid;page-break-after:auto}
}



.vis{max-width:1180px;margin:0 auto}
.vis-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
.vis-title{font-size:24px;font-weight:800;letter-spacing:-.03em;margin:0}
.vis-sub{font-size:13.5px;color:var(--muted);margin:.3rem 0 0}
.vis-head-actions{display:flex;gap:.4rem;flex-wrap:wrap}
.vis-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.25rem 1.25rem;margin-bottom:1rem}
.vis-card-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--brand-magenta);margin:0 0 .9rem}
.vis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}
.vis-grid label{display:flex;flex-direction:column;gap:.25rem;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.vis-grid input,.vis-grid select,.vis-grid textarea{font-size:14px;padding:.5rem .65rem;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--fg);font-family:inherit;font-weight:500}
.vis-grid input:focus,.vis-grid select:focus,.vis-grid textarea:focus{outline:none;border-color:var(--brand-magenta);box-shadow:0 0 0 3px rgba(176,30,126,.12)}
.vis-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;border-radius:9px;font-size:13.5px;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s,color .12s,box-shadow .12s}
.vis-btn-primary{background:var(--brand-magenta);color:#fff;border-color:var(--brand-magenta)}
.vis-btn-primary:hover{background:var(--brand-magenta-hover);color:#fff;text-decoration:none}
.vis-btn-ghost{background:#fff;color:var(--fg);border-color:var(--border)}
.vis-btn-ghost:hover{background:#F5F5F7;text-decoration:none;color:var(--fg)}
.vis-table{width:100%;border-collapse:collapse;background:transparent;border:none}
.vis-table th{background:transparent;border-bottom:1px solid var(--border-2);padding:.4rem .5rem .55rem;font-size:10.5px;letter-spacing:.06em}
.vis-table td{padding:.55rem .5rem;border-bottom:1px solid var(--border-2);font-size:13.5px;vertical-align:middle}
.vis-table tbody tr:last-child td{border-bottom:none}
.vis-table td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;white-space:nowrap}
.vis-empty{padding:1.25rem;text-align:center;color:var(--muted);font-size:13.5px}
.vis-filters{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end}
.vis-filters label{display:flex;flex-direction:column;gap:.25rem;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.vis-filters input,.vis-filters select{font-size:13.5px;padding:.45rem .6rem;border:1px solid var(--border);border-radius:8px;background:#fff;font-family:inherit;font-weight:500;color:var(--fg)}
.vis-filters input:focus,.vis-filters select:focus{outline:none;border-color:var(--brand-magenta);box-shadow:0 0 0 3px rgba(176,30,126,.12)}
@media (max-width:760px){
  .vis-grid{grid-template-columns:1fr}
  .vis-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .vis-filters{flex-direction:column;align-items:stretch}
  .vis-filters input,.vis-filters select,.vis-filters button{width:100%}
}



.vis-card-code{background:linear-gradient(180deg,#FDF6FB 0%,#fff 60%);border-color:#F3D6E8}
.vis-code-form{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.vis-code-form input{flex:1;min-width:200px;font-size:14px;padding:.55rem .7rem;border:1px solid var(--border);border-radius:8px;font-family:ui-monospace,Menlo,monospace;letter-spacing:.06em}
.vis-code-form input:focus{outline:none;border-color:var(--brand-magenta);box-shadow:0 0 0 3px rgba(176,30,126,.14)}
.vis-lookup{margin-top:.85rem;padding:.75rem .85rem;background:#fff;border:1px solid var(--border);border-radius:10px}
.vis-lookup-head{font-size:15px;font-weight:700;margin-bottom:.15rem}
.vis-lookup-meta{font-size:12.5px;color:var(--muted);margin-bottom:.6rem}
.vis-lookup-form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.vis-lookup-form input{font-size:13.5px;padding:.5rem .65rem;border:1px solid var(--border);border-radius:8px;font-family:inherit}
.vis-code{color:var(--brand-magenta);font-weight:700}
.vis-no-photo{display:inline-block;width:40px;height:40px;border:1px dashed #D5D5DC;border-radius:6px;color:#B5B5BE;font-size:9px;text-align:center;line-height:40px;font-weight:700;text-transform:uppercase}
.vis-consent{margin:.75rem 0 0;font-size:12.5px;color:var(--fg-2);line-height:1.5}
.vis-consent input{accent-color:var(--brand-magenta);margin-top:.15rem}

/* Photo modal */
.vis-photo-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem}
.vis-photo-backdrop{position:absolute;inset:0;background:rgba(15,15,30,.55)}
.vis-photo-card{position:relative;background:#fff;border-radius:14px;padding:1.4rem;max-width:500px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.vis-photo-stage{position:relative;width:100%;aspect-ratio:4/3;background:#0f0f17;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.vis-photo-stage video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.vis-photo-stage img{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.vis-photo-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;opacity:.85;text-align:center;padding:1rem;font-size:13px}
.vis-photo-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.85rem}
[hidden]{display:none !important}



.vo-popup{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1rem}
.vo-popup-backdrop{position:absolute;inset:0;background:rgba(15,15,30,.55)}
.vo-popup-card{position:relative;background:#fff;border-radius:14px;padding:1.4rem 1.5rem;max-width:720px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.35);max-height:85vh;overflow:auto}
.vo-popup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.vo-popup-head h3{margin:0;font-size:17px;letter-spacing:-.02em;color:var(--brand-magenta-dark)}
.vo-popup-head p{margin:.25rem 0 0;font-size:13px}
.vo-popup-x{background:none;border:none;font-size:24px;line-height:1;color:#9CA3AF;cursor:pointer;padding:0 .25rem}
.vo-popup-x:hover{color:#111}
.vo-popup-table{width:100%;border-collapse:collapse;margin-bottom:1rem}
.vo-popup-table th,.vo-popup-table td{padding:.5rem .6rem;border-bottom:1px solid #EEEEF2;font-size:13.5px;text-align:left}
.vo-popup-table th{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.vo-popup-actions{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}
.vo-popup-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .95rem;border-radius:9px;font-size:13.5px;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit}
.vo-popup-btn-primary{background:var(--brand-magenta);color:#fff;border-color:var(--brand-magenta)}
.vo-popup-btn-primary:hover{background:var(--brand-magenta-hover);color:#fff;text-decoration:none}
.vo-popup-btn-ghost{background:#fff;color:var(--fg);border-color:var(--border)}
.vo-popup-btn-ghost:hover{background:#F5F5F7}



/* On-site list: prominent, compact, one line per visitor */
.vis-card-onsite{border:1px solid var(--border);border-left:4px solid var(--brand-magenta);border-radius:14px;padding:1.1rem 1.25rem 1.25rem;background:#fff;margin-bottom:1rem}
.vis-card-onsite .vis-card-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.6rem}
.vis-card-onsite .vis-card-title{color:var(--brand-magenta);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}
.vis-card-onsite .vis-count{background:var(--brand-magenta);color:#fff;border-radius:999px;padding:.05rem .5rem;font-size:12px;font-weight:800;margin-left:.3rem}

ul.vis-onsite-list{list-style:none;margin:0;padding:0}
.vis-onsite-row{display:flex;align-items:center;gap:.75rem;padding:.6rem .25rem;border-top:1px solid var(--border-2)}
.vis-onsite-row:first-child{border-top:none}
.vis-onsite-photo img,.vis-onsite-photo .vis-no-photo-sm{width:38px;height:38px;border-radius:8px;object-fit:cover;display:block}
.vis-onsite-photo .vis-no-photo-sm{border:1px dashed #D5D5DC;display:flex;align-items:center;justify-content:center;color:#B5B5BE;font-weight:800;font-size:14px}
.vis-onsite-info{flex:1;min-width:0}
.vis-onsite-name{font-weight:700;font-size:14px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vis-onsite-meta{font-size:12px;color:var(--muted);margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vis-onsite-actions{margin:0}

/* Collapsible cards */
.vis-collapse{background:#fff;border:1px solid var(--border);border-radius:14px;margin-bottom:1rem;overflow:hidden}
.vis-collapse > summary{list-style:none;cursor:pointer;padding:.9rem 1.25rem;display:flex;align-items:center;gap:.6rem;user-select:none}
.vis-collapse > summary::-webkit-details-marker{display:none}
.vis-collapse > summary::before{content:'▸';display:inline-block;transition:transform .15s;color:var(--brand-magenta);font-size:14px}
.vis-collapse[open] > summary::before{transform:rotate(90deg)}
.vis-collapse-title{font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--fg)}
.vis-collapse-hint{margin-left:auto;font-size:12px;color:var(--muted);font-weight:600}
.vis-collapse[open] > summary{border-bottom:1px solid var(--border-2);background:#FAFAFC}
.vis-collapse-body{padding:1rem 1.25rem 1.25rem}



.vis-returning{margin-bottom:1.1rem;padding:.85rem 1rem;border:1px dashed #E5D2E5;border-radius:10px;background:#FDF8FC}
.vis-returning-label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-magenta);margin-bottom:.4rem}
.vis-returning-search input{width:100%;font-size:14px;padding:.55rem .7rem;border:1px solid var(--border);border-radius:8px;background:#fff;font-family:inherit}
.vis-returning-search input:focus{outline:none;border-color:var(--brand-magenta);box-shadow:0 0 0 3px rgba(176,30,126,.14)}

.vis-returning-results{margin-top:.6rem;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(15,15,30,.06);padding:.35rem;max-height:340px;overflow:auto}
.vis-rv-row{display:flex;align-items:center;gap:.75rem;padding:.55rem .65rem;border-radius:8px}
.vis-rv-row + .vis-rv-row{border-top:1px solid var(--border-2)}
.vis-rv-photo img,.vis-rv-photo .vis-no-photo-sm{width:40px;height:40px;border-radius:8px;object-fit:cover;display:block}
.vis-rv-info{flex:1;min-width:0}
.vis-rv-name{font-weight:700;font-size:13.5px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vis-rv-meta{font-size:12px;color:var(--muted);margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vis-rv-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;padding:.1rem .4rem;border-radius:999px;background:var(--brand-magenta-soft);color:var(--brand-magenta-dark);margin-left:.4rem;vertical-align:middle}
.vis-rv-badge.onsite{background:#FEF3C7;color:#854D0E}
.vis-rv-empty{padding:.75rem .5rem;text-align:center;color:var(--muted);font-size:13px}

.vis-returning-banner{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#F0FDF4;border-left:4px solid #16A34A;border-radius:10px;margin-bottom:1rem}
.vis-returning-banner-photo img,.vis-returning-banner-photo .vis-no-photo-sm{width:44px;height:44px;border-radius:8px;object-fit:cover;display:block}
.vis-returning-banner-info{flex:1;min-width:0}
.vis-returning-banner-name{font-weight:700;font-size:14px;color:#14532D}
.vis-returning-banner-meta{font-size:12px;color:#166534;margin-top:.1rem}
.vis-returning-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;padding:.1rem .45rem;border-radius:999px;background:#16A34A;color:#fff;margin-left:.4rem;vertical-align:middle}



.topbar .brand.brand-logo{padding:0 !important;background:none !important}
.topbar .brand.brand-logo::before,
.topbar .brand.brand-logo::after{display:none !important;content:none !important;background:none !important}
.topbar .brand.brand-logo:hover{background:none !important;text-decoration:none}
.topbar .brand-img{display:block;height:32px;width:auto;max-width:240px;object-fit:contain}

.cf-logo-img{display:block;height:34px;width:auto;max-width:240px;object-fit:contain}
.cf-logo{gap:.6rem}

@media (max-width:520px){
  .topbar .brand-img{height:28px}
}

/* ================================================================
   @patched:admin-sidebar-pro — Professional admin sidebar
   ================================================================ */
.admin-sidebar {
    background: #FAFBFC;
    border-right: 1px solid #EEF1F5;
    padding: 1.25rem 0.65rem !important;
    scrollbar-width: thin;
    scrollbar-color: #E2E8F0 transparent;
}
.admin-sidebar::-webkit-scrollbar { width: 6px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 3px; }
.admin-sidebar::-webkit-scrollbar-thumb:hover { background: #CBD5E1; }

.admin-sidebar > div:first-child {
    padding: 0 0.75rem 0.9rem !important;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid #EEF1F5;
}

.admin-sidebar-group { margin-bottom: 1.25rem !important; }

.admin-sidebar-group h4 {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    color: #94A3B8 !important;
    padding: 0 0.75rem !important;
    margin: 0 0 0.45rem 0 !important;
}

.admin-sidebar a {
    display: flex !important;
    align-items: center !important;
    gap: 0.7rem !important;
    padding: 0.55rem 0.75rem !important;
    border-radius: 7px !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background 0.12s ease, color 0.12s ease !important;
    position: relative !important;
    margin-bottom: 0.1rem !important;
}
.admin-sidebar a:hover {
    background: #F1F5F9 !important;
    color: #0F172A !important;
}
.admin-sidebar a.active {
    background: #FDF2F8 !important;
    color: #B01E7E !important;
    font-weight: 600 !important;
}
.admin-sidebar a.active::before {
    content: '' !important;
    position: absolute !important;
    left: -0.65rem !important;
    top: 20% !important;
    bottom: 20% !important;
    width: 3px !important;
    border-radius: 0 3px 3px 0 !important;
    background: #B01E7E !important;
}
.admin-sidebar a svg {
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0 !important;
    opacity: 0.55 !important;
    transition: opacity 0.12s ease !important;
}
.admin-sidebar a:hover svg,
.admin-sidebar a.active svg { opacity: 1 !important; }

/* ================================================================
   @patched:dashboard-modules — Dashboard module card grid
   ================================================================ */
.dash-modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
    margin: 0 0 1.75rem;
}
.dash-module {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    background: #fff;
    border: 1px solid #E9EBEF;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.dash-module:hover {
    border-color: #D5D5DC;
    box-shadow: 0 6px 20px -6px rgba(15,23,42,0.10);
    transform: translateY(-1px);
    text-decoration: none;
    color: inherit;
}
.dash-module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #FDF2F8;
    color: #B01E7E;
}
.dash-module-icon svg { width: 20px; height: 20px; }
.dash-module-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dash-module-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-module-desc {
    font-size: 11.5px;
    color: #94A3B8;
    line-height: 1.35;
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-module-arrow {
    color: #CBD5E1;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    transition: color 0.12s, transform 0.12s;
}
.dash-module:hover .dash-module-arrow {
    color: #B01E7E;
    transform: translateX(2px);
}
/* ================================================================
   @patched:admin-collapse-pro — Obvious collapse toggle + smooth UX
   ================================================================ */
.admin-sidebar > div:first-child {
    padding-bottom: .75rem !important;
    margin-bottom: .85rem !important;
    border-bottom: 1px solid #EEF1F5 !important;
}
.admin-sidebar-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
    border: 1px solid #E5E7EB !important;
    background: #fff !important;
    color: #64748B !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
}
.admin-sidebar-toggle:hover {
    color: #B01E7E !important;
    border-color: #F0ABFC !important;
    background: #FDF2F8 !important;
}
.admin-sidebar-toggle svg {
    width: 14px !important;
    height: 14px !important;
    transition: transform .2s ease !important;
}
.admin-sidebar.collapsed .admin-sidebar-toggle svg {
    transform: rotate(180deg) !important;
}

/* Make the collapsed rail visually tighter and cleaner */
.admin-sidebar.collapsed {
    width: 64px !important;
    padding: 1.25rem .45rem !important;
}
.admin-sidebar.collapsed > div:first-child {
    justify-content: center !important;
    padding: .25rem 0 !important;
}
.admin-sidebar.collapsed > div:first-child .sidebar-group-title {
    display: none !important;
}
.admin-sidebar.collapsed .admin-sidebar-group {
    margin-bottom: .85rem !important;
}
.admin-sidebar.collapsed .admin-sidebar-group h4 {
    display: none !important;
}
.admin-sidebar.collapsed .admin-sidebar a {
    justify-content: center !important;
    padding: .65rem .5rem !important;
    gap: 0 !important;
}
.admin-sidebar.collapsed .sidebar-link-text {
    display: none !important;
}

/* Tooltips on hover in collapsed mode — the title attribute handles it,
   but a subtle visual cue helps */
.admin-sidebar.collapsed .admin-sidebar a {
    position: relative !important;
}

/* Smooth width transition */
.admin-sidebar {
    transition: width .2s ease, padding .2s ease !important;
}