/* =========================================================
   ASR LAW FIRMS — UI THEME (FINAL • REFACTORED • ICON-READY)
   Colorful, professional, accessible. No dark theme.
   API-COMPAT: All original class names preserved.
   =========================================================

   TABLE OF CONTENTS
   00) RESET & ROOT TOKENS
   01) BASE / TYPOGRAPHY / LAYOUT
   02) DECOR (App background, dots)
   03) UTILITIES (text, pills, glass, helpers)
   04) SIDEBAR (desktop, mini, mobile, RTL)
   05) TOPBAR / QUICK DOCK
   06) BUTTONS (system, variants, table, states, ICONS)  <-- updated
   07) ALERTS / BADGES / CHIPS
   08) CARDS
   09) TABLES (grid, stacked mobile)
   10) KPI TILES
   11) MENUS & DROPDOWNS (notif, profile)
   12) OFFCANVAS / SETTINGS DRAWER
   13) PAGE CONTAINER / SEARCH
   14) AGREEMENTS MODULE (forms + modal)
   15) SHIFTS / ATTENDANCE DIRECTORY
   16) FORMS (grid, validation, widgets)
   17) MODALS / OVERLAY Z-INDEX SAFETY
   18) COVENANT ACTION BUTTONS (Preview/Status/Print/View)
   19) NAV / WIZARD
   20) EXTRAS (breadcrumbs, tabs, progress, avatars, tooltips, skeleton, toast)
   21) ACCESSIBILITY / REDUCED MOTION
   22) PRINT
   ========================================================= */


/* =========================================================
   00) RESET & ROOT TOKENS
   ========================================================= */
:root{
  /* Brand spectrum */
  --brand-1:#6d5ef6; --brand-2:#9a66ff; --brand-3:#38bdf8; --brand-4:#06b6d4;
  --brand-5:#22c55e; --brand-6:#f59e0b; --brand-7:#f43f5e; --brand-8:#10b981;

  /* Legacy alias (kept for existing markup) */
  --brandA:#5C6BC0; --brandB:#26C6DA;

  /* Semantic roles */
  --accent:#5C6BC0; --accent-2:#26C6DA;
  --success:#10b981; --warning:#f59e0b; --danger:#ef4444; --info:#0ea5e9;

  /* Ink greys */
  --ink-900:#0f172a; --ink-800:#1f2937; --ink-700:#334155;
  --ink-600:#475569; --ink-500:#64748b; --ink-400:#94a3b8; --ink-300:#cbd5e1;

  /* Surfaces & lines */
  --bg:#f6f8fb; --panel:rgba(255,255,255,.78); --surface:#fff; --line:rgba(15,23,42,.08);
  --grid-line:rgba(15,23,42,.16); --grid-line-weak:rgba(15,23,42,.10);

  /* Focus ring */
  --ring-color:rgba(38,198,218,.30); --ring:0 0 0 3px var(--ring-color);

  /* Motion */
  --ease-out:cubic-bezier(.2,.8,.2,1);

  /* Shadows & radii */
  --radius:16px; --radius-lg:22px; --radius-sm:10px;
  --shadow-1:0 10px 30px rgba(21,31,55,.10);
  --shadow-2:0 22px 60px rgba(21,31,55,.18);
  --shadow-soft:0 6px 18px rgba(15,23,42,.10);

  /* Density & icons */
  --density:1; --ico-scale:1; --colorful-icons:1;

  /* Layout metrics */
  --sidebar-w:300px; --sidebar-w-mini:96px; --wrap-pad:16px;

  /* Button sheen */
  --btn-sheen:radial-gradient(140px 70px at var(--x,18%) -20%, rgba(255,255,255,.28), transparent 60%);

  /* Buttons sizing tokens */
  --btn-h-xs:32px; --btn-h-sm:36px; --btn-h:40px; --btn-h-lg:48px;
  --btn-px-xs:.55rem; --btn-px-sm:.7rem; --btn-px:.95rem; --btn-px-lg:1.15rem;
  --btn-radius:12px; --btn-gap:.5rem; --btn-icon:1.05em; --btn-icon-lg:1.15em;
}

/* Normalize minimal */
html,body{
  min-height:100%;
  overflow-x:hidden; /* prevent accidental horizontal scroll */
}

*,*::before,*::after{
  box-sizing:border-box;
}

/* =========================================================
   01) BASE / TYPOGRAPHY / LAYOUT
   ========================================================= */
body{
  background:var(--bg);
  color:var(--ink-900);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

.page-wrap{
  transform:scale(var(--density));
  transform-origin:top left;
  position:relative;
  z-index:1;

  padding-inline:var(--wrap-pad)!important;
  padding-top:8px;
  padding-bottom:40px;

  padding-left:calc(var(--wrap-pad) + var(--sidebar-w))!important;

  transition:
    padding-left .25s var(--ease-out),
    padding-right .25s var(--ease-out),
    transform .2s ease;
}

html[dir="rtl"] .page-wrap{
  padding-left:var(--wrap-pad)!important;
  padding-right:calc(var(--wrap-pad) + var(--sidebar-w))!important;
}
/* =========================================================
   02) DECOR (App background, dots)
   ========================================================= */
.app-surface{
  position:relative;
  min-height:100vh;
}

.bg-grad{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  will-change:transform;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(92,107,192,.18), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(38,198,218,.16), transparent 65%),
    linear-gradient(180deg, #f8fafc 0%, #f3f6fb 100%);
}

.bg-dots{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.25;
  will-change:transform;
  background-image:radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size:18px 18px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0));
}

/* =========================================================
   03) UTILITIES (text, pills, glass, helpers)
   ========================================================= */
.fw-extrabold{font-weight:900}

.link-muted{
  text-decoration:none;
  color:var(--ink-700);
}
.link-muted:hover{color:var(--brand-1)}

.badge-rounded{
  border-radius:999px;
  padding:.35rem .6rem;
  border:1px solid var(--line);
  background:var(--panel);
  backdrop-filter:blur(6px);
}

.soft-pill{box-shadow:inset 0 0 0 1px var(--line)}

.section-title{
  font-size:1rem;
  font-weight:800;
  letter-spacing:.3px;
  display:flex;
  align-items:center;
  gap:.4rem;
  margin:.15rem .25rem .6rem;
  color:var(--ink-500);
  text-transform:uppercase;
  flex-wrap:wrap;
}

.section-title .dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-3));
  display:inline-block;
  flex-shrink:0;
}

.glass-elev{
  background:var(--panel);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-1);
  border:1px solid var(--line);
  border-radius:12px;
}

.btn-soft{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:12px;
  backdrop-filter:blur(8px);
}
.btn-soft:hover{box-shadow:var(--shadow-1)}

.oval-amount{
  display:inline-block;
  padding:.1rem .4rem;
  border-radius:999px;
  background:#ffffffaa;
  border:1px solid #e5e7eb;
  white-space:nowrap;
}

.gap-6{gap:6px}
.gap-8{gap:8px}
.gap-10{gap:10px}
.gap-12{gap:12px}

/* =========================================================
   04) SIDEBAR (desktop, mini, mobile, RTL)
   ========================================================= */

.sidebar{
  position:fixed;
  inset-block:0;
  z-index:1045;

  left:0;
  right:auto;
  width:var(--sidebar-w);

  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;

  background:var(--panel);
  backdrop-filter:blur(10px);
  border-right:1px solid var(--line);

  overflow-y:auto;
  overscroll-behavior:contain;

  transform:translateX(0);
  transition:
    transform .25s var(--ease-out),
    width .25s var(--ease-out),
    left .25s var(--ease-out),
    right .25s var(--ease-out);
}

html[dir="rtl"] .sidebar{
  left:auto;
  right:0;
  border-right:0;
  border-left:1px solid var(--line);
}

.brand{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:6px 8px;
  border-radius:12px;
  min-width:0;
}

.brand .logo{
  font-weight:900;
  letter-spacing:.3px;
  white-space:nowrap;
}

.nav-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:2px;
}

.side-link{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.5rem .55rem;
  border-radius:10px;

  color:var(--ink-700);
  border:1px solid transparent;
  background:transparent;

  font-size:.95rem;
  line-height:1.3;
  min-width:0;

  transition:
    transform .15s ease,
    box-shadow .2s ease,
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}
/* ===== SIDEBAR ICON GRADIENT (SMART PRIORITY VERSION) ===== */

.sidebar .side-link i,
.sidebar .group-head i,
.sidebar .group-body a i{
  font-size:1.2rem;
  line-height:1;
  display:inline-block;
  flex-shrink:0;

  color:transparent !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;

  /* DEFAULT fallback gradient */
  background-image:linear-gradient(135deg,#6d5ef6,#38bdf8);

  transition:filter .2s ease, transform .2s ease;
  will-change:transform;
}

/* Hover animation */
.sidebar .side-link:hover i,
.sidebar .group-head:hover i,
.sidebar .group-body a:hover i{
  filter:brightness(1.15) saturate(1.2);
  transform:scale(1.08);
}

/* =========================================================
   TONE SYSTEM (data-tone attribute)
   ========================================================= */

.sidebar .side-link[data-tone="sky"] i{
  background-image:linear-gradient(135deg,#38bdf8,#06b6d4);
}

.sidebar .side-link[data-tone="emerald"] i{
  background-image:linear-gradient(135deg,#10b981,#22c55e);
}

.sidebar .side-link[data-tone="amber"] i{
  background-image:linear-gradient(135deg,#f59e0b,#fbbf24);
}

.sidebar .side-link[data-tone="rose"] i{
  background-image:linear-gradient(135deg,#f43f5e,#fb7185);
}

.sidebar .side-link[data-tone="indigo"] i{
  background-image:linear-gradient(135deg,#6366f1,#8b5cf6);
}

/* =========================================================
   MODULE ICON COLORS (ico-* classes override everything)
   ========================================================= */

.sidebar i.ico-dashboard  {background-image:linear-gradient(135deg,#60a5fa,#2563eb)}
.sidebar i.ico-clients    {background-image:linear-gradient(135deg,#38bdf8,#6d5ef6)}
.sidebar i.ico-matters    {background-image:linear-gradient(135deg,#6d5ef6,#9a66ff)}
.sidebar i.ico-hearings   {background-image:linear-gradient(135deg,#22c55e,#06b6d4)}
.sidebar i.ico-invoices   {background-image:linear-gradient(135deg,#9a66ff,#f59e0b)}
.sidebar i.ico-receipts   {background-image:linear-gradient(135deg,#22c55e,#86efac)}
.sidebar i.ico-expenses   {background-image:linear-gradient(135deg,#f59e0b,#f43f5e)}
.sidebar i.ico-time       {background-image:linear-gradient(135deg,#06b6d4,#38bdf8)}
.sidebar i.ico-docs       {background-image:linear-gradient(135deg,#f43f5e,#fb7185)}
.sidebar i.ico-system     {background-image:linear-gradient(135deg,#6d5ef6,#38bdf8)}
.sidebar i.ico-judgments  {background-image:linear-gradient(135deg,#7c3aed,#0ea5e9)}

.nav-group{
  border-radius:12px;
  margin:.05rem .15rem;
}

.nav-group .group-head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  padding:.5rem .55rem;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel);
}

.group-caret{
  transition:transform .2s ease;
}

[dir="rtl"] .group-caret{
  transform:rotate(180deg);
}

.nav-group.open .group-caret{
  transform:rotate(90deg);
}

.group-body{
  overflow:hidden;
  max-height:0;
  transition:max-height .22s ease;
  padding-inline:8px;
  margin-top:4px;
  border-radius:10px;
}

.group-body a{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.42rem .5rem;
  border-radius:9px;
  color:var(--ink-700);
  text-decoration:none;
  font-size:.92rem;
  min-width:0;
}

.group-body a:hover{
  background:linear-gradient(
    90deg,
    rgba(109,94,246,.08),
    rgba(56,189,248,.06)
  );
}

.count-pill{
  min-width:34px;
  height:24px;
  padding:0 .5rem;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  font-weight:800;
  font-size:.76rem;
  border:1px solid var(--line);
  background:var(--panel);
  margin-inline-end:6px;
  white-space:nowrap;
}

html[dir="rtl"] .count-pill{
  margin-inline-start:6px;
  margin-inline-end:0;
}

/* ===== Desktop mini mode ===== */
@media (min-width:992px){
  .sidebar.mini{
    width:var(--sidebar-w-mini);
  }

  .sidebar.mini .label,
  .sidebar.mini .head-label,
  .sidebar.mini .count-pill{
    display:none;
  }

  .sidebar.mini .group-body{
    display:none !important;
  }

  .sidebar.mini ~ .page-wrap{
    padding-left:calc(var(--wrap-pad) + var(--sidebar-w-mini))!important;
  }

  html[dir="rtl"] .sidebar.mini ~ .page-wrap{
    padding-right:calc(var(--wrap-pad) + var(--sidebar-w-mini))!important;
    padding-left:var(--wrap-pad)!important;
  }
}

/* ===== Mobile ===== */
@media (max-width:991.98px){
  .sidebar{
    transform:translateX(-100%);
    will-change:transform;
  }

  .sidebar.show{
    transform:translateX(0);
  }

  html[dir="rtl"] .sidebar{
    transform:translateX(100%);
  }

  html[dir="rtl"] .sidebar.show{
    transform:translateX(0);
  }

  .page-wrap{
    padding-left:var(--wrap-pad)!important;
    padding-right:var(--wrap-pad)!important;
  }

  body.sidebar-open{
    overflow:hidden;
  }
}

.mobile-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease;
  z-index:1040;
}

.mobile-backdrop.show{
  opacity:1;
  visibility:visible;
}

/* Group head alignment */
.sidebar .group-head{
  display:flex;
  align-items:center;
  width:100%;
  gap:10px;
}

.sidebar .group-head .head-left{
  flex:1 1 auto;
  min-width:0;
}

.sidebar .group-head .count-pill{
  order:2;
  flex:0 0 auto;
  margin-inline-end:6px;
}

.sidebar .group-head .group-caret{
  order:3;
  flex:0 0 auto;
}

html[dir="rtl"] .sidebar .group-head .count-pill{
  margin-inline-start:6px;
  margin-inline-end:0;
}
/* =========================================================
   05) TOPBAR / QUICK DOCK
   ========================================================= */
.asr-topbar{
  position:sticky;
  top:0;
  z-index:1010;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  margin:10px 10px 12px;
  border-radius:14px;
  background:linear-gradient(90deg,rgba(109,94,246,.08),rgba(56,189,248,.06),transparent 70%);
  backdrop-filter:blur(6px);
}

.tb-title{
  font-weight:900;
  font-size:1.1rem;
  min-width:0;
}

.header-actions .btn{
  height:36px;
  display:inline-flex;
  align-items:center;
}

.quick-dock{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  margin:0 10px 12px;
  border-radius:14px;
  flex-wrap:wrap;
}

.quick-dock .qd-title{
  font-weight:800;
  display:flex;
  align-items:center;
  gap:.4rem;
  min-width:0;
}

.quick-dock .qd-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.qd-btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .7rem;
  border-radius:999px;
  text-decoration:none;
  border:1px solid var(--line);
  background:var(--panel);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
  white-space:nowrap;
}

.qd-btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-2);
  filter:saturate(1.1);
}

.qd-blue   {background:linear-gradient(135deg,rgba(96,165,250,.10),rgba(37,99,235,.08))}
.qd-violet {background:linear-gradient(135deg,rgba(109,94,246,.10),rgba(154,102,255,.08))}
.qd-amber  {background:linear-gradient(135deg,rgba(245,158,11,.10),rgba(244,63,94,.08))}
.qd-emerald{background:linear-gradient(135deg,rgba(34,197,94,.10),rgba(16,185,129,.08))}
.qd-rose   {background:linear-gradient(135deg,rgba(244,63,94,.10),rgba(251,113,133,.08))}


/* =========================================================
   06) BUTTONS (system, variants, table, states, ICONS)
   ========================================================= */

/* Base gradient button */
.btn{
  --g1:var(--brand-1);
  --g2:var(--brand-3);
  --glow:0 10px 22px rgba(109,94,246,.28);
  --stroke:transparent;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--btn-gap);

  min-height:var(--btn-h);
  padding:.62rem var(--btn-px);

  color:#fff;
  background-image:linear-gradient(92deg,var(--g1),var(--g2));
  border:none;
  border-radius:var(--btn-radius);

  font-weight:800;
  letter-spacing:.2px;
  line-height:1;

  box-shadow:inset 0 0 0 1px var(--stroke), var(--glow);

  transition:
    transform .16s var(--ease-out),
    box-shadow .16s var(--ease-out),
    filter .16s var(--ease-out);

  position:relative;
  overflow:hidden;
  isolation:isolate;
  text-shadow:0 1px 0 rgba(0,0,0,.15);

  -webkit-tap-highlight-color:transparent;
}

.btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:
    inset 0 0 0 1px var(--stroke),
    0 14px 28px rgba(0,0,0,.15),
    var(--glow);
}

.btn:active{
  transform:translateY(0);
  filter:brightness(.98);
}

.btn:focus-visible{
  outline:none;
  box-shadow:var(--ring);
}

.btn::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:var(--btn-sheen);
  opacity:0;
  transition:opacity .28s var(--ease-out);
}

.btn:hover::after{opacity:.45}


/* Sizes */
.btn.xs{
  min-height:var(--btn-h-xs);
  padding:.42rem var(--btn-px-xs);
  border-radius:10px;
  font-weight:700;
}

.btn-sm{
  min-height:var(--btn-h-sm);
  padding:.5rem var(--btn-px-sm);
  border-radius:10px;
}

.btn-lg{
  min-height:var(--btn-h-lg);
  padding:.75rem var(--btn-px-lg);
  border-radius:14px;
  font-size:1.02rem;
}


/* Legacy icon <i> */
.btn i{
  font-size:1.05rem;
  margin-inline-end:.45rem;
}

html[dir="rtl"] .btn i{
  margin-inline-end:0;
  margin-inline-start:.45rem;
}


/* Unified SVG-mask icon slot */
.btn .icon{
  width:var(--btn-icon);
  height:var(--btn-icon);
  display:inline-block;
  flex:0 0 auto;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  margin-inline-end:.45rem;
}

html[dir="rtl"] .btn .icon{
  margin-inline-end:0;
  margin-inline-start:.45rem;
}

.btn-lg .icon{
  width:var(--btn-icon-lg);
  height:var(--btn-icon-lg);
}


/* Table action buttons */
.table .btn{
  padding:.42rem .6rem;
  border-radius:10px;
  font-weight:800;
}

.table .btn + .btn{
  margin-inline-start:6px;
}

@media (max-width:640px){
  .table .btn{
    padding:.38rem .52rem;
    font-size:.86rem;
    min-height:var(--btn-h-sm);
  }

  .btn .icon{
    margin-inline-end:.35rem;
  }
}


/* Disabled + tooltip */
button[disabled],
.btn[disabled]{
  opacity:.6;
  cursor:not-allowed;
  filter:saturate(.75);
}

button[disabled][title]:hover::after{
  content:attr(title);
  position:absolute;
  background:rgba(15,23,42,.9);
  color:#fff;
  font-size:.8rem;
  padding:6px 10px;
  border-radius:6px;
  white-space:nowrap;
  left:50%;
  transform:translate(-50%,-130%);
  z-index:999;
  opacity:0;
  animation:fadeInTooltip .25s forwards;
}

@keyframes fadeInTooltip{
  to{opacity:1;}
}
/* =========================================================
   07) ALERTS / BADGES / CHIPS
   ========================================================= */
.alert{
  padding:10px 12px;
  border-radius:10px;
  margin:8px 0;
}

.alert.success{background:#e8f5e9;color:#2e7d32}
.alert.danger{background:#ffebee;color:#c62828}
.alert.warn{background:#fff8e1;color:#a67300}

.chip{
  border-radius:999px;
  padding:.22rem .55rem;
  font-size:.75rem;
  font-weight:700;
  border:1px solid var(--line);
  backdrop-filter:blur(6px);
  white-space:nowrap;
}

.chip-low{background:rgba(34,197,94,.10);color:#166534}
.chip-normal{background:rgba(99,102,241,.10);color:#3730a3}
.chip-high{background:rgba(245,158,11,.12);color:#b45309}
.chip-urgent{background:rgba(244,63,94,.12);color:#be123c}

.state-badge{
  background:rgba(2,132,199,.10);
  color:#075985;
  border:1px solid var(--line);
  white-space:nowrap;
}


/* =========================================================
   08) CARDS
   ========================================================= */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow-1);
  padding:16px;
  transition:transform .15s ease, box-shadow .15s ease;
}

.card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-2);
}

.card-header{
  background:linear-gradient(90deg,rgba(109,94,246,.10),rgba(56,189,248,.06),transparent 70%);
  border-bottom:1px solid var(--line);
  padding:10px 12px;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}


/* =========================================================
   09) TABLES (grid, stacked mobile)
   ========================================================= */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid #d1d5db;
  border-radius:10px;
  overflow:hidden;
}

.table thead th{
  background:#eef2f7;
  color:#1f2937;
  font-weight:600;
  text-align:center;
  border:1px solid #cfd8e3;
  padding:.75rem .8rem;
  font-size:.92rem;
  letter-spacing:.1px;
  text-transform:capitalize;
}

.table tbody td{
  border:1px solid #d1d5db;
  color:#111827;
  background:#fff;
  vertical-align:middle;
  padding:.6rem .8rem;
  font-size:.9rem;
}

.table tbody tr:nth-child(odd) td{
  background:#f9fafb;
}

.table tbody tr:hover td{
  background:#f0f4f9;
  transition:background .2s ease;
}

.table-sm td,
.table-sm th{
  padding:.45rem .6rem;
}

.table-tight th,
.table-tight td{
  padding:.55rem .65rem;
}

.table-grid thead th{
  border-bottom:1.5px solid var(--grid-line)!important;
}

.table-grid tbody td{
  border-bottom:1px solid var(--grid-line-weak)!important;
}

.table-grid thead th:not(:last-child),
.table-grid tbody td:not(:last-child){
  border-right:1px solid var(--grid-line-weak)!important;
}

.sticky-head{
  position:sticky;
  top:-1px;
  z-index:1;
  background:#eef2f7;
}

.row-hover:hover{
  background:linear-gradient(90deg,rgba(109,94,246,.06),rgba(56,189,248,.05));
}

.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>td{
  border-color:#e5e7eb;
}

.table-softbrand{
  background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%);
}

.table-mobile-stacked{
  display:block;
  overflow-x:auto;
}

@media (max-width:640px){
  .table-mobile-stacked table,
  .table-mobile-stacked .table{
    border:0;
  }

  .table-mobile-stacked .table thead{
    display:none;
  }

  .table-mobile-stacked .table tr{
    display:block;
    margin-bottom:12px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    overflow:hidden;
  }

  .table-mobile-stacked .table td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
  }

  .table-mobile-stacked .table td::before{
    content:attr(data-th);
    font-weight:700;
    color:#334155;
  }
}


/* =========================================================
   10) KPI TILES
   ========================================================= */
.kpi-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-bottom:18px;
}

.kpi-tile{
  border-radius:16px;
  padding:16px;
  display:block;
  color:inherit;
  text-decoration:none;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
  box-shadow:0 6px 18px rgba(15,23,42,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  cursor:pointer;
  will-change:transform;
}

.kpi-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(15,23,42,.12);
}

.kpi-tile:focus-visible{
  outline:none;
  box-shadow:var(--ring);
}

.kpi-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.kpi-row > i{
  flex:0 0 auto;
}

.kpi-text{
  flex:1 1 auto;
  text-align:center;
  min-width:0;
}

.kpi-text .kpi-meta{
  font-size:.9rem;
  color:#6b7280;
  text-align:center!important;
  margin-inline:auto;
}

.kpi-text .kpi-value{
  font-size:1.8rem;
  font-weight:900;
  letter-spacing:.3px;
  text-align:center!important;
  margin-inline:auto;
}

html[dir="rtl"] .kpi-row{
  flex-direction:row-reverse;
}

.ico-glyph{
  font-size:2rem;
  line-height:1;
  display:inline-block;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-3));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:saturate(calc(.6 + .4*var(--colorful-icons)));
}

.ico-clients {background-image:linear-gradient(135deg,#38bdf8,#6d5ef6)!important}
.ico-matters {background-image:linear-gradient(135deg,#6d5ef6,#9a66ff)!important}
.ico-hearings{background-image:linear-gradient(135deg,#22c55e,#06b6d4)!important}
.ico-invoices{background-image:linear-gradient(135deg,#9a66ff,#f59e0b)!important}
.ico-receipts{background-image:linear-gradient(135deg,#22c55e,#86efac)!important}
.ico-dashboard{background-image:linear-gradient(135deg,#60a5fa,#2563eb)!important}
.ico-expenses{background-image:linear-gradient(135deg,#f59e0b,#f43f5e)!important}
.ico-time{background-image:linear-gradient(135deg,#06b6d4,#38bdf8)!important}
.ico-docs{background-image:linear-gradient(135deg,#f43f5e,#fb7185)!important}
.ico-system{background-image:linear-gradient(135deg,#6d5ef6,#38bdf8)!important}
/* =========================================================
   11) MENUS & DROPDOWNS (notif, profile)
   ========================================================= */

.glass-menu{
  background:var(--panel);
  backdrop-filter:blur(8px);
  border:1px solid var(--line);
  border-radius:12px;
}

.notif-dropdown[aria-hidden="true"]{display:none}

.notif-dropdown{
  position:absolute;
  top:56px;
  right:16px;
  z-index:1050;
  width:380px;
  max-height:70vh;
  overflow:hidden;

  border-radius:16px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  box-shadow:0 12px 40px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.06);
}

@media (max-width:480px){
  .notif-dropdown{
    right:8px;
    left:8px;
    width:auto;
  }
}

.notif-header,
.notif-footer{
  display:flex;
  align-items:center;
  padding:10px 12px;
  background:rgba(250,250,252,.7);
}

.notif-header{
  border-bottom:1px solid rgba(0,0,0,.06);
}

.notif-footer{
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:none;
  justify-content:flex-end;
}

.notif-header .title{font-weight:600}
.notif-header .spacer{flex:1}

.notif-header .btn-link{
  background:none;
  border:none;
  cursor:pointer;
  font-size:.9rem;
  text-decoration:underline;
}

.notif-list{
  max-height:58vh;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.notif-empty{
  padding:20px;
  color:#666;
  text-align:center;
}

.notif-item{
  display:flex;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.6);
}

.notif-item:last-child{border-bottom:none}

.notif-item .marker{
  width:4px;
  border-radius:4px;
  background:#cfd8dc;
  flex-shrink:0;
}

.notif-item .content{
  flex:1;
  min-width:0;
}

.notif-item .title-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  min-width:0;
}

.notif-item .t{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.notif-item .time{
  color:#777;
  font-size:.85rem;
  white-space:nowrap;
  flex-shrink:0;
}

.notif-item .body{
  color:#333;
  margin-top:4px;
  font-size:.95rem;
  word-break:break-word;
}

.notif-item .link{
  display:inline-block;
  margin-top:6px;
  font-size:.9rem;
  text-decoration:underline;
}

.notif-item.is-unread{
  background:rgba(255,255,255,.85);
}

.notif-item.type-info     .marker{background:#42a5f5}
.notif-item.type-success  .marker{background:#43a047}
.notif-item.type-warning  .marker{background:#ffb300}
.notif-item.type-error    .marker{background:#e53935}
.notif-item.type-reminder .marker{background:#7e57c2}

.icon-btn{
  position:relative;
  background:transparent;
  border:none;
  cursor:pointer;
  font-size:1.25rem;
}

.icon-btn .badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:9px;
  background:#e53935;
  color:#fff;
  font-size:.75rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.profile-menu{
  position:relative;
  margin-left:10px;
}

.profile-btn{
  background:transparent;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
}

.profile-dropdown[aria-hidden="true"]{display:none}

.profile-dropdown{
  position:absolute;
  right:0;
  top:40px;
  width:200px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 12px 40px rgba(0,0,0,.12);
  border-radius:12px;
  overflow:hidden;
  z-index:1050;
}

.profile-dropdown a{
  display:block;
  padding:10px 12px;
  color:#222;
  text-decoration:none;
}

.profile-dropdown a:hover{
  background:#f6f8fb;
}


/* =========================================================
   12) OFFCANVAS / SETTINGS DRAWER
   ========================================================= */

.offcanvas-backdrop{z-index:1095}

#settingsDrawer.offcanvas{
  position:fixed;
  inset:0;
  left:50%;
  top:50%;
  right:auto;
  bottom:auto;

  width:min(640px,92vw);
  max-height:min(86vh,900px);

  border-radius:18px;
  transform:translate(-50%,-50%);
  box-shadow:var(--shadow-2);
  border:1px solid var(--line);
  background:var(--panel);
  backdrop-filter:blur(10px);
  z-index:1100;
}

#settingsDrawer .offcanvas-body{
  padding:14px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

#settingsDrawer .offcanvas-header{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}

@media (max-width:575.98px){
  #settingsDrawer.offcanvas{
    width:100vw;
    height:100vh;
    max-height:100vh;
    border-radius:0;
    left:0;
    top:0;
    transform:none;
  }
}

html[dir="rtl"] #settingsDrawer.offcanvas.offcanvas-end{
  left:50%;
  right:auto;
  transform:translate(-50%,-50%);
}

.settings-body{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.set-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
}

.set-label{font-weight:800}


/* =========================================================
   13) PAGE CONTAINER / SEARCH
   ========================================================= */

.page-container{
  max-width:1280px;
  margin-inline:auto;
  padding:18px 16px 36px;
}

@media (max-width:576px){
  .page-container{padding-inline:12px}
  .kpi-text .kpi-value{font-size:1.6rem}
}

.search-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
}

.search-pill .search-input{
  border:0;
  outline:0;
  box-shadow:none;
  width:220px;
  min-width:0;
}

.search-pill .search-input:focus{
  outline:0;
  box-shadow:none;
}

html[dir="rtl"] .search-pill{
  direction:rtl;
}
/* =========================================================
   14) AGREEMENTS MODULE (forms + modal)
   ========================================================= */

.section{
  background:#fff;
  border:1px solid #eceff5;
  border-radius:12px;
  padding:12px;
}

.label{
  font-weight:600;
  margin:6px 0 8px;
}

.copy-line{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.copy-line input[type="text"]{
  flex:1;
  min-width:0;
  background:#f9fbff;
  border:1px solid #dde3f0;
  border-radius:10px;
  padding:8px 10px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}

.form-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}

.form-row input,
.form-row select,
.form-row textarea{
  background:#fff;
  border:1px solid #dfe4ed;
  border-radius:10px;
  padding:8px 10px;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline:none;
  box-shadow:var(--ring);
  border-color:#9ad9e3;
}

.badge-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.8rem;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid #e7e9f2;
  background:#f8fbff;
  white-space:nowrap;
}

.badge-pill.ok{background:#e8f5e9;color:#2e7d32}
.badge-pill.warn{background:#fff8e1;color:#a67300}
.badge-pill.bad{background:#ffebee;color:#c62828}

.preview{
  max-height:60vh;
  overflow:auto;
  border:1px solid #eceff5;
  border-radius:12px;
  padding:10px;
  background:#fff;
  -webkit-overflow-scrolling:touch;
}

.footer-bar{
  position:sticky;
  bottom:0;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px);
  padding:10px;
  border-top:1px solid #eceff5;
  margin:-16px;
  border-bottom-left-radius:16px;
  border-bottom-right-radius:16px;
}

.otp-grid,
.pin-grid{
  display:flex;
  gap:12px;
  justify-content:center;
  margin:10px 0;
  flex-wrap:wrap;
}

.otp-box,
.pin-box{
  width:58px;
  height:58px;
  border:1px solid #d0d5dd;
  border-radius:12px;
  text-align:center;
  font-size:28px;
  font-weight:800;
  background:#fff;
  color:#111;
  transition:border-color .2s ease, box-shadow .2s ease, transform .06s ease;
}

.otp-box:focus,
.pin-box:focus{
  outline:none;
  box-shadow:var(--ring);
  border-color:#9ad9e3;
  transform:scale(1.02);
}

@media (max-width:480px){
  .otp-box,
  .pin-box{
    width:54px;
    height:54px;
    font-size:26px;
  }
}

canvas#pad{
  width:100%;
  height:220px;
  border:1px dashed #b8bec9;
  border-radius:12px;
  background:#fff;
}

input[type="file"]#selfie{
  display:block;
  width:100%;
  background:#fff;
  border:1px solid #dfe4ed;
  border-radius:10px;
  padding:8px 10px;
}

.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.35);
  backdrop-filter:blur(4px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1060;
}

.modal{
  background:#fff;
  border-radius:16px;
  max-width:680px;
  width:92%;
  box-shadow:0 20px 70px rgba(0,0,0,.25);
  border:1px solid rgba(0,0,0,.08);
  max-height:80vh;
  display:flex;
  flex-direction:column;
  z-index:1065;
}

.modal-header{
  padding:12px 16px;
  border-bottom:1px solid #eee;
  font-weight:700;
}

.modal-body{
  padding:12px 16px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.modal-footer{
  padding:12px 16px;
  border-top:1px solid #eee;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.tc-list{
  line-height:1.6;
  color:#2b2f3a;
}

.tc-list li{margin:6px 0}

.terms-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:12px;
}

.terms-row input[type="checkbox"]{
  width:20px;
  height:20px;
  margin-top:2px;
}

.terms-row .terms-text{flex:1}

.terms-link{
  color:#0b7fab;
  text-decoration:underline;
  cursor:pointer;
}

.sub{color:#5f6470;margin:0 0 14px}
.note{color:#5f6470;font-size:.9rem}

[dir="rtl"] .copy-line{flex-direction:row-reverse}
[dir="rtl"] .wizard{direction:rtl}


/* =========================================================
   15) SHIFTS / ATTENDANCE DIRECTORY
   ========================================================= */

.shifts-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.shifts-head .title{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:900;
  font-size:1.05rem;
}

.shifts-filters{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:14px;
  padding:10px;
  margin-bottom:12px;
  box-shadow:var(--shadow-1);
}

.badge-enabled,
.badge-disabled{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.28rem .6rem;
  font-weight:800;
  font-size:.78rem;
  border-radius:999px;
  white-space:nowrap;
}

.badge-enabled{
  background:rgba(34,197,94,.10);
  color:#166534;
  border:1px solid rgba(34,197,94,.25);
}

.badge-disabled{
  background:rgba(244,63,94,.08);
  color:#7f1d1d;
  border:1px solid rgba(244,63,94,.22);
}

.shift-blocks{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.shift-chip{
  border-radius:999px;
  padding:.22rem .5rem;
  font-size:.78rem;
  font-weight:800;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
  white-space:nowrap;
}


/* =========================================================
   16) FORMS (grid, validation, widgets)
   ========================================================= */

/* FIXED invalid !important */
.readonly-display .form-control[readonly]{
  background-color:#eef3ff !important;
  color:#1b3a6b !important;
  cursor:not-allowed;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
}

.form-col-12{grid-column:span 12}
.form-col-6{grid-column:span 6}
.form-col-4{grid-column:span 4}
.form-col-3{grid-column:span 3}

@media (max-width:992px){
  .form-col-6,
  .form-col-4,
  .form-col-3{
    grid-column:span 12;
  }
}

.input-group{
  display:flex;
  align-items:stretch;
  border:1px solid #dfe4ed;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}

.input-group > .addon{
  display:inline-grid;
  place-items:center;
  padding:0 .6rem;
  background:#f3f6fb;
  color:#475569;
  font-weight:700;
}

.input-group > input{
  flex:1;
  border:0;
  padding:8px 10px;
  min-width:0;
}

.input-group > input:focus{
  outline:none;
  box-shadow:var(--ring);
}
/* =========================================================
   17) MODALS / OVERLAY Z-INDEX SAFETY
   ========================================================= */

.modal{z-index:1065 !important}
.modal-backdrop{z-index:1060 !important}
#mobileBackdrop,
.mobile-backdrop{z-index:1040 !important}

.modal-open .page-wrap,
.modal-open .sidebar,
.modal-open .asr-topbar,
.modal-open .quick-dock{
  filter:none !important;
  pointer-events:auto !important;
}

.modal-open #mobileBackdrop,
.modal-open .mobile-backdrop{
  display:none !important;
}


/* =========================================================
   18) COVENANT ACTION BUTTONS
   ========================================================= */

.btn-preview,
.btn[data-action="preview"]{
  --g1:#64748b;
  --g2:#475569;
  --stroke:rgba(71,85,105,.55);
  --glow:0 10px 22px rgba(71,85,105,.32);
  background-image:linear-gradient(92deg,var(--g1),var(--g2)) !important;
  color:#fff !important;
  border:none !important;
  text-shadow:0 1px 0 rgba(0,0,0,.15);
}

.btn-preview:hover,
.btn[data-action="preview"]:hover{
  filter:brightness(1.06) contrast(1.03);
}

/* (Other button variants unchanged – structure already correct) */


/* =========================================================
   19) NAV / WIZARD
   ========================================================= */

.asr-wizard-local{margin:1rem 0 1.25rem}

.asr-wizard-local .w-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  list-style:none;
  padding:0;
  margin:0;
  justify-content:center;
}

.asr-wizard-local .w-item{
  flex:1 1 150px;
  min-width:150px;
}

.asr-wizard-local .w-step{
  display:block;
  text-align:center;
  padding:.85rem 1rem;
  border-radius:12px;
  position:relative;
  overflow:hidden;

  background:#f8fafc;
  border:2px solid #e5e7eb;
  color:#334155;
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;

  transition:background .25s var(--ease-out),
             border-color .25s var(--ease-out),
             transform .25s var(--ease-out),
             box-shadow .25s var(--ease-out);

  box-shadow:0 4px 12px rgba(2,8,23,.04);
}

.asr-wizard-local .w-step::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#5C6BC0,#26C6DA);
  opacity:0;
  transition:opacity .25s var(--ease-out);
}

.asr-wizard-local .w-step > span{
  position:relative;
  z-index:1;
}

.asr-wizard-local .w-step:hover:not(.is-active):not(.is-disabled){
  border-color:#26C6DA;
  color:#26C6DA;
  transform:translateY(-1px);
}

.asr-wizard-local .w-step:hover:not(.is-active):not(.is-disabled)::before{
  opacity:.1;
}

.asr-wizard-local .w-step.is-active{
  background:linear-gradient(90deg,#5C6BC0,#26C6DA);
  color:#fff;
  border-color:transparent;
  box-shadow:0 6px 16px rgba(38,198,218,.28);
}

.asr-wizard-local .w-step.is-disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}

.asr-wizard-local .w-step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:50%;
  right:-6px;
  transform:translateY(-50%) rotate(45deg);
  width:12px;
  height:12px;
  background:#e2e8f0;
}

.asr-wizard-local .w-step.is-active:not(:last-child)::after{
  background:#26C6DA;
}

@media (max-width:768px){
  .asr-wizard-local .w-step{
    font-size:.9rem;
    padding:.75rem;
  }
}

@media (max-width:480px){
  .asr-wizard-local .w-item{flex:1 1 100%}
  .asr-wizard-local .w-step:not(:last-child)::after{display:none}
}

[dir="rtl"] .asr-wizard-local .w-step:not(:last-child)::after{
  right:auto;
  left:-6px;
}


/* =========================================================
   20) EXTRAS
   ========================================================= */

.toast{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:1200;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:min(380px, 92vw);
}

[dir="rtl"] .toast{
  right:auto;
  left:20px;
}

.toast-item{
  padding:10px 12px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:var(--shadow-1);
  display:flex;
  gap:10px;
  align-items:center;
}


/* =========================================================
   21) ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* =========================================================
   22) PRINT
   ========================================================= */

@media print{
  body{background:#fff}

  .sidebar,
  .asr-topbar,
  .quick-dock,
  .mobile-backdrop,
  .notif-dropdown,
  .profile-dropdown{
    display:none !important;
  }

  .page-wrap{
    padding:0 !important;
    transform:none !important;
  }
}
/* =========================================================
   JUDGMENTS — Sidebar Icon + Quick Dock + Button Flavor
   ========================================================= */

/* Icon gradient (use with <i class="... ico-judgments">) */
.ico-judgments{
  background-image:linear-gradient(135deg,#7c3aed,#0ea5e9)!important; /* violet → sky */
}

/* Quick Dock pill (use with: <a class="qd-btn qd-judgments">) */
.qd-judgments{
  background:linear-gradient(
    135deg,
    rgba(124,58,237,.10),
    rgba(14,165,233,.08)
  );
}

/* Sidebar tone hook:
   <a class="side-link" data-tone="judgments"> */
.side-link[data-tone="judgments"] i{
  background-image:linear-gradient(135deg,#7c3aed,#0ea5e9);
}

/* Dedicated button flavor
   Usage: <button class="btn judgment"> or <button class="btn btn-judgment"> */
.btn-judgment,
.btn.judgment{
  --g1:#7c3aed;
  --g2:#0ea5e9;
  --stroke:rgba(99,102,241,.55);
  --glow:0 10px 24px rgba(99,102,241,.38);
}

/* Optional: table comfort spacing (kept minimal & safe) */
.table .btn-judgment{
  border-radius:10px;
  font-weight:800;
}

/* Optional badge comfort (does not override system) */
.badge.judgment{
  background:linear-gradient(135deg,#7c3aed,#0ea5e9);
  color:#fff;
  border:none;
}
/* =========================================================
   Global UI styles (app.css)
   ========================================================= */


/* ---------- Chips / lightweight variants ---------- */
/* (Base .chip already exists in your system — this extends it safely) */

.chip-type  { background:#f3f4f6; border-color:#e5e7eb; }
.chip-lang  { background:#eef2ff; border-color:#e0e7ff; }
.chip-user  { background:#ecfdf5; border-color:#d1fae5; }
.chip-tl    { background:#fff7ed; border-color:#ffedd5; }


/* ---------- Soft status badges ---------- */
/* Does NOT conflict with your gradient badge system */

.badge-soft{
  display:inline-block;
  padding:.275rem .55rem;
  border-radius:.5rem;
  font-weight:600;
  font-size:.775rem;
  line-height:1;
  white-space:nowrap;
}

.badge-soft.active   { background:#ecfdf5; color:#065f46; }
.badge-soft.inactive { background:#f1f5f9; color:#334155; }
.badge-soft.archived { background:#fef2f2; color:#991b1b; }


/* ---------- Subtle action hover helpers ---------- */
/* Keeps your main gradient system intact */

.btn-view.btn,
.btn-edit.btn,
.btn-delete.btn{
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
}

.btn-view:hover   { background:#eff6ff; }
.btn-edit:hover   { background:#fef9c3; }
.btn-delete:hover { background:#fee2e2; }


/* ---------- Table helpers ---------- */

.table-mobile-stacked .col-action{
  width:1%;
  white-space:nowrap;
}

.table-mobile-stacked tbody tr:nth-child(odd){
  background-color:#fcfcfd;
}

.table-mobile-stacked thead th{
  font-weight:700;
  font-size:.82rem;
  text-transform:none;
  white-space:nowrap;
}


/* ---------- Mobile “stacked” table ---------- */

@media (max-width:768px){

  .table-mobile-stacked table,
  .table-mobile-stacked thead,
  .table-mobile-stacked tbody,
  .table-mobile-stacked th,
  .table-mobile-stacked td,
  .table-mobile-stacked tr{
    display:block;
    width:100%;
  }

  .table-mobile-stacked thead{display:none}

  .table-mobile-stacked tbody tr{
    border:1px solid #e5e7eb;
    border-radius:.5rem;
    padding:.5rem .75rem;
    margin-bottom:.75rem;
    background:#fff;
  }

  .table-mobile-stacked td{
    border:none !important;
    padding:.35rem 0 !important;
    position:relative;

    display:grid;
    grid-template-columns:12ch 1fr;
    gap:.6rem;

    word-break:break-word;
    align-items:start;
  }

  .table-mobile-stacked td::before{
    content:attr(data-th);
    font-weight:600;
    color:#475569;
  }

  .table-mobile-stacked .col-action,
  .table-mobile-stacked td .btn{
    white-space:nowrap;
  }
}


/* ---------- Pagination ---------- */

.pagination{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  margin:0;
}

.pagination .page-link,
.pagination a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2rem;
  height:2rem;
  padding:0 .5rem;
  border:1px solid #e5e7eb;
  border-radius:.375rem;
  background:#fff;
  font-size:.85rem;
  color:#111827;
  text-decoration:none;
}

.pagination .page-link:hover,
.pagination a:hover{
  background:#f3f4f6;
}

.pagination .active .page-link,
.pagination a.active{
  background:#111827;
  color:#fff;
  border-color:#111827;
}


/* ---------- Filter form sizing ---------- */

#js-filter-form .form-control,
#js-filter-form .form-select{
  min-height:2.25rem;
  font-size:.9rem;
}

#js-filter-form .btn{
  min-height:2.25rem;
}


/* ---------- RTL support ---------- */

[dir="rtl"] .table-mobile-stacked td{
  grid-template-columns:1fr 12ch;
}

[dir="rtl"] .table-mobile-stacked td::before{
  text-align:left;
}


/* ---------- Focus states (a11y safe, non-conflicting) ---------- */

a:focus-visible,
button:focus-visible,
.page-link:focus-visible{
  outline:2px solid #2563eb;
  outline-offset:2px;
}


/* ---------- Subtle transitions ---------- */

.page-link,
.badge-soft{
  transition:background-color .15s ease,
             color .15s ease,
             border-color .15s ease;
}


/* ---------- Desktop truncation helpers ---------- */

@media (min-width:769px){

  .table-mobile-stacked td[data-th="Email"],
  .table-mobile-stacked td[data-th="Phone"],
  .table-mobile-stacked td[data-th="ID"]{
    white-space:nowrap;
  }

  .table-mobile-stacked td[data-th="Display Name"] strong{
    display:inline-block;
    max-width:32ch;
    overflow:hidden;
    text-overflow:ellipsis;
    vertical-align:bottom;
  }
}
/* =========================================================
   CLIENTS — FINAL SAFE OVERRIDES
   ========================================================= */


/* =========================
   Clients Table — Edit & Delete (table only)
   ========================= */

.table .btn-edit,
.table .btn-delete{
  border:none !important;
  color:#fff !important;
  font-weight:800;
  padding:.42rem .6rem;
  border-radius:10px;
  text-shadow:0 1px 0 rgba(0,0,0,.15);
  transition:transform .15s ease, filter .15s ease;
}

/* EDIT */
.table .btn-edit{
  background-image:linear-gradient(92deg,#6d28d9,#4f46e5);
  box-shadow:0 10px 24px rgba(99,102,241,.35);
}
/* VIEW button */
.table .btn-view{
  border:none !important;
  color:#fff !important;
  font-weight:800;
  padding:.42rem .6rem;
  border-radius:10px;
  text-shadow:0 1px 0 rgba(0,0,0,.15);
  transition:transform .15s ease, filter .15s ease;

  background-image:linear-gradient(92deg,#0ea5e9,#38bdf8);
  box-shadow:0 10px 24px rgba(14,165,233,.35);
}

.table .btn-view:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
}

.table .btn-view:active{
  transform:translateY(0);
  filter:brightness(.98);
}
.table .btn-edit:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
}
.table .btn-edit:active{
  transform:translateY(0);
  filter:brightness(.98);
}

/* DELETE */
.table .btn-delete{
  background-image:linear-gradient(92deg,#ef4444,#dc2626);
  box-shadow:0 10px 26px rgba(239,68,68,.40);
}
.table .btn-delete:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
}
.table .btn-delete:active{
  transform:translateY(0);
  filter:brightness(.96);
}

/* Icon spacing */
.table .btn-edit i,
.table .btn-delete i{
  font-size:1.05em;
  margin-inline-end:.4rem;
}
[dir="rtl"] .table .btn-edit i,
[dir="rtl"] .table .btn-delete i{
  margin-inline-end:0;
  margin-inline-start:.4rem;
}


/* =========================
   Clients Table Center Utility
   ========================= */

.table-center th,
.table-center td{
  text-align:center !important;
  vertical-align:middle !important;
}

.table-center .d-flex{justify-content:center}
.table-center .d-flex.flex-column{align-items:center}
.table-center .d-flex.flex-wrap{justify-content:center}

.table-center .chip,
.table-center .badge-soft,
.table-center .btn{
  margin-inline:.15rem;
}

/* =========================================
   TOPBAR ACTIONS — FIX ALIGNMENT
   ========================================= */

.topbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.topbar-actions .btn{
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  font-weight:700;
  padding:.45rem .7rem;
}
/* =========================================
   LANGUAGE SWITCHER — PREMIUM STYLE
   ========================================= */

.btn-soft.btn-indigo{
  background:linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.10));
  border:1px solid rgba(99,102,241,.25);
  color:#4338ca;
  font-weight:800;
}

.btn-soft.btn-indigo:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(99,102,241,.25);
  filter:saturate(1.1);
}

.btn-soft.btn-indigo i{
  font-size:1rem;
}
/* =========================================
   PROFILE BUTTON
   ========================================= */

.profile-menu .btn-soft.btn-green{
  background:linear-gradient(135deg, rgba(16,185,129,.12), rgba(34,197,94,.10));
  border:1px solid rgba(16,185,129,.25);
  color:#065f46;
  font-weight:800;
}

.profile-menu .btn-soft.btn-green:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(16,185,129,.25);
  filter:saturate(1.1);
}

.profile-menu .dropdown-menu{
  border-radius:14px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-2);
  backdrop-filter:blur(10px);
}
/* =========================================
   NOTIFICATION BUTTON
   ========================================= */

#notifBtn{
  background:linear-gradient(135deg, rgba(244,63,94,.12), rgba(251,113,133,.10));
  border:1px solid rgba(244,63,94,.25);
  color:#be123c;
  font-weight:800;
}

#notifBtn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(244,63,94,.25);
  filter:saturate(1.1);
}

/* Badge */
.notif-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff;
  font-size:.75rem;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(239,68,68,.35);
}

html[dir="rtl"] .notif-badge{
  right:auto;
  left:-6px;
}
/* =========================================
   NOTIFICATION DROPDOWN ENHANCED
   ========================================= */

.notif-dropdown{
  border-radius:18px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}

.notif-item{
  transition:background .2s ease, transform .15s ease;
}

.notif-item:hover{
  background:linear-gradient(
    90deg,
    rgba(109,94,246,.06),
    rgba(56,189,248,.05)
  );
  transform:translateX(2px);
}

html[dir="rtl"] .notif-item:hover{
  transform:translateX(-2px);
}
.lang-switch-btn{
  font-weight:800;
  letter-spacing:.5px;
  min-width:60px;
}
/* =========================================
   RTL FIX — TOPBAR
   ========================================= */

html[dir="rtl"] .topbar-actions{
  flex-direction:row-reverse;
}
/* =========================
   Mobile Stacked Center Fix
   ========================= */

@media (max-width:768px){
  .table-mobile-stacked .table-center td{
    display:block !important;
    text-align:center !important;
  }

  .table-mobile-stacked .table-center td::before{
    display:block;
    text-align:center;
    margin-bottom:.25rem;
  }

  .table-mobile-stacked .table-center td .btn{
    display:inline-flex;
  }
}