/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  --bg:           #0d1117;
  --surface:      #161b25;
  --card:         #1c2333;
  --card-hover:   #202840;
  --border:       #2d3a50;
  --border-light: #3a4a63;
  --primary:      #14b8a6;
  --primary-dark: #0f9688;
  --primary-glow: rgba(20,184,166,.18);
  --accent:       #6366f1;
  --text:         #e2e8f0;
  --text-muted:   #7a8faa;
  --text-dim:     #4a5a72;
  --danger:       #ef4444;
  --warning:      #f59e0b;
  --success:      #22c55e;
  --sidebar-w:    260px;
  --topbar-h:     56px;
  --radius:       10px;
  --radius-lg:    14px;
  --shadow:       0 4px 24px rgba(0,0,0,.4);
  --shadow-sm:    0 2px 8px rgba(0,0,0,.3);
  --trans:        .18s ease;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
}
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--primary-dark); }
img { max-width:100%; }

/* ── Layout ────────────────────────────────────────────────────────────────── */
.app-wrapper { display:flex; min-height:100vh; }

/* Topbar (mobile only) */
.topbar {
  display:none;
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--topbar-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  align-items:center;
  padding:0 1rem;
  gap:1rem;
}
.topbar-brand { font-weight:700; font-size:1.1rem; color:var(--primary); flex:1; }
.topbar-user .user-pill {
  font-size:.8rem; background:var(--card); border:1px solid var(--border);
  border-radius:20px; padding:.25rem .75rem; color:var(--text-muted);
}

/* Hamburger */
.hamburger {
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; gap:5px; padding:4px;
}
.hamburger span {
  display:block; width:22px; height:2px;
  background:var(--text); border-radius:2px; transition:var(--trans);
}

/* Sidebar */
.sidebar {
  width:var(--sidebar-w);
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0;
  z-index:150; overflow-y:auto;
  transition:transform var(--trans);
}
.sidebar-brand {
  display:flex; align-items:center; gap:.75rem;
  padding:1.5rem 1.25rem 1rem;
  border-bottom:1px solid var(--border);
}
.brand-icon {
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:grid; place-items:center;
  font-weight:800; font-size:1rem; color:#fff;
  flex-shrink:0;
}
.brand-name { font-weight:700; font-size:1rem; color:var(--text); }
.brand-sub  { font-size:.7rem; color:var(--text-dim); }

.sidebar-user {
  display:flex; align-items:center; gap:.75rem;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--border);
}
.user-avatar {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--primary));
  display:grid; place-items:center;
  font-weight:700; font-size:.9rem; color:#fff; flex-shrink:0;
}
.user-name { font-size:.85rem; font-weight:600; color:var(--text); }
.user-role { font-size:.72rem; color:var(--text-muted); }

.sidebar-nav { flex:1; padding:.75rem 0; }
.nav-item {
  display:flex; align-items:center; gap:.75rem;
  padding:.65rem 1.25rem;
  color:var(--text-muted);
  border-left:3px solid transparent;
  transition:var(--trans);
  cursor:pointer;
}
.nav-item:hover { background:var(--card); color:var(--text); }
.nav-item.active {
  background:var(--primary-glow);
  color:var(--primary);
  border-left-color:var(--primary);
}
.nav-icon { font-size:1rem; width:1.2rem; text-align:center; flex-shrink:0; }
.nav-label { font-size:.875rem; font-weight:500; }

/* Sub-nav */
.nav-group { display: flex; flex-direction: column; }
.nav-sub {
  background: rgba(0,0,0,0.2);
  margin-top: 2px;
  display: flex;
  flex-direction: column;
}
.nav-sub-item {
  padding: 0.6rem 1.25rem 0.6rem 3.2rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  display: block;
  transition: var(--trans);
  text-decoration: none;
}
.nav-sub-item:hover { background: rgba(255,255,255,0.03); color: var(--primary); }
.nav-sub-item.active { color: var(--primary); font-weight: 600; background: rgba(20,184,166,0.05); }

/* Grid Utilities */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 991px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.sidebar-footer { padding:.75rem 0; border-top:1px solid var(--border); }
.nav-logout:hover { color:var(--danger) !important; background:rgba(239,68,68,.08) !important; }

/* Main content */
.main-content {
  flex:1;
  margin-left:var(--sidebar-w);
  display:flex; flex-direction:column;
  min-height:100vh;
}
.brand-logo img {
  height: 42px;
  width: 42px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  padding: 2px;
  margin-right: 12px;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  padding: 1.5rem;
}
.page-header {
  padding:1.5rem 2rem 0;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.page-title {
  font-size:1.4rem; font-weight:700;
  color:var(--text); padding-bottom:0.5rem;
}
.page-description {
  font-size: 0.9rem;
  color: var(--text-muted);
  padding-bottom: 1.25rem;
  max-width: 800px;
  line-height: 1.5;
}
.flash-messages { padding:0 2rem; margin-top:1rem; }
.content-area   { padding:1.5rem 2rem 2rem; flex:1; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  box-shadow:var(--shadow-sm);
}
.card-title {
  font-size:1rem; font-weight:600;
  color:var(--text); margin-bottom:1rem;
  display:flex; align-items:center; gap:.5rem;
}
.card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;
}
.card-interactive {
  cursor: pointer;
  transition: var(--trans);
  border: 1px solid var(--border);
}
.card-interactive:hover {
  background: var(--card-hover);
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.card-interactive:active {
  transform: translateY(-1px);
}
.stat-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.25rem 1.5rem;
  transition:var(--trans);
  position:relative; overflow:hidden;
}
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
}
.stat-card-compact.border-success { border-left-color: var(--success); }
.stat-card-compact.border-warning { border-left-color: var(--warning); }
.stat-label { font-size:.78rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.stat-value { font-size:1.8rem; font-weight:700; color:var(--text); margin:.25rem 0; }
.stat-sub   { font-size:.78rem; color:var(--text-dim); }

/* ── Tables ────────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; border-radius:var(--radius); }
table {
  width:100%; border-collapse:collapse;
  font-size:.875rem;
}
thead th {
  background:var(--surface);
  color:var(--text-muted);
  font-size:.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  padding:.75rem 1rem; text-align:left;
  border-bottom:1px solid var(--border);
  white-space:normal;
  line-height:1.2;
}
tbody tr {
  border-bottom:1px solid var(--border);
  transition:background var(--trans);
}
tbody tr:hover { background:var(--card-hover); }
tbody tr:last-child { border-bottom:none; }
td { padding:.75rem 1rem; color:var(--text); vertical-align:middle; }
td.muted { color:var(--text-muted); font-size:.82rem; }

/* Mobile table → card stack */
@media (max-width:767px) {
  .table-card thead { display:none; }
  .table-card tr {
    display:block; background:var(--card);
    border:1px solid var(--border); border-radius:var(--radius);
    margin-bottom:.75rem; padding:.75rem;
  }
  .table-card td {
    display:flex; justify-content:space-between; align-items:flex-start;
    padding:.3rem 0; border:none; font-size:.85rem;
  }
  .table-card td::before {
    content:attr(data-label);
    font-size:.72rem; color:var(--text-muted); font-weight:600;
    text-transform:uppercase; letter-spacing:.05em;
    flex-shrink:0; width:40%; padding-right:.5rem;
  }
}

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center;
  padding:.2rem .65rem; border-radius:20px;
  font-size:.72rem; font-weight:600; letter-spacing:.04em; white-space:nowrap;
}
.badge-gray   { background:rgba(100,116,139,.18); color:#94a3b8; }
.badge-yellow { background:rgba(245,158,11,.15);  color:#fbbf24; }
.badge-blue   { background:rgba(59,130,246,.15);  color:#60a5fa; }
.badge-purple { background:rgba(139,92,246,.15);  color:#a78bfa; }
.badge-green  { background:rgba(34,197,94,.15);   color:#4ade80; }
.badge-red    { background:rgba(239,68,68,.15);   color:#f87171; }
.badge-orange { background:rgba(249,115,22,.15);  color:#fb923c; }
.badge-teal   { background:rgba(20,184,166,.15);  color:#2dd4bf; }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.55rem 1.1rem; border-radius:var(--radius);
  font-size:.875rem; font-weight:500; cursor:pointer;
  border:1px solid transparent; transition:var(--trans); line-height:1;
  white-space:nowrap;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary  { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); }
.btn-outline  { background:transparent; color:var(--text); border-color:var(--border-light); }
.btn-outline:hover { background:var(--card-hover); }
.btn-danger   { background:rgba(239,68,68,.12); color:var(--danger); border-color:rgba(239,68,68,.3); }
.btn-danger:hover { background:rgba(239,68,68,.22); }
.btn-success  { background:rgba(34,197,94,.12); color:var(--success); border-color:rgba(34,197,94,.3); }
.btn-success:hover { background:rgba(34,197,94,.22); }
.btn-warning  { background:rgba(245,158,11,.12); color:var(--warning); border-color:rgba(245,158,11,.3); }
.btn-sm { padding:.35rem .75rem; font-size:.8rem; }
.btn-group { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ── Forms ──────────────────────────────────────────────────────────────────── */
.form-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;
}
.form-group { display:flex; flex-direction:column; gap:.4rem; }
.form-group.full { grid-column:1/-1; }
label { font-size:.8rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
input,select,textarea {
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  padding:.6rem .85rem;
  font-family:inherit; font-size:.875rem;
  transition:border-color var(--trans);
  width:100%;
}
input:focus,select:focus,textarea:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
}
textarea { resize:vertical; min-height:90px; }
.form-hint { font-size:.75rem; color:var(--text-dim); }
.form-section {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.25rem; margin-bottom:1rem;
}
.form-section-title {
  font-size:.85rem; font-weight:700; color:var(--primary);
  text-transform:uppercase; letter-spacing:.07em;
  margin-bottom:1rem; display:flex; align-items:center; gap:.5rem;
}

/* ── Alerts ─────────────────────────────────────────────────────────────────── */
.alert {
  padding:.85rem 1.1rem; border-radius:var(--radius);
  font-size:.875rem; margin-bottom:.75rem;
  border-left:4px solid;
}
.alert-success { background:rgba(34,197,94,.1);   border-color:var(--success); color:#4ade80; }
.alert-error   { background:rgba(239,68,68,.1);   border-color:var(--danger);  color:#f87171; }
.alert-warning { background:rgba(245,158,11,.1);  border-color:var(--warning); color:#fbbf24; }
.alert-info    { background:rgba(99,102,241,.1);  border-color:var(--accent);  color:#a78bfa; }

.filter-row-compact {
  display:flex; align-items:flex-end; gap:1rem; flex-wrap:wrap;
}
.filter-group { display:flex; flex-direction:column; gap:.35rem; }
.filter-group label { font-size:.68rem; color:var(--text-dim); }
.filter-group select, .filter-group input { padding:.45rem .75rem; font-size:.82rem; min-width:140px; }
.filter-actions { display:flex; gap:.5rem; }

/* ── Toolbar / Search bar ────────────────────────────────────────────────────── */
.toolbar {
  display:flex; align-items:center; gap:.75rem;
  flex-wrap:wrap; margin-bottom:1.25rem;
}
.toolbar-search {
  display:flex; gap:.5rem; flex:1; min-width:200px;
}
.toolbar-search input { max-width:300px; }

/* ── Pagination ─────────────────────────────────────────────────────────────── */
.pagination { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:1.25rem; }
.page-btn {
  padding:.4rem .8rem; border-radius:8px; font-size:.82rem;
  border:1px solid var(--border); background:var(--card); color:var(--text-muted);
  cursor:pointer; text-decoration:none; transition:var(--trans);
}
.page-btn:hover { border-color:var(--primary); color:var(--primary); }
.page-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }

/* ── Timeline ───────────────────────────────────────────────────────────────── */
.timeline { position:relative; padding-left:1.5rem; }
.timeline::before {
  content:''; position:absolute; left:6px; top:0; bottom:0;
  width:2px; background:var(--border);
}
.timeline-item { position:relative; margin-bottom:1.25rem; }
.timeline-dot {
  width:14px; height:14px; border-radius:50%;
  background:var(--primary); border:2px solid var(--bg);
  position:absolute; left:-1.5rem; top:4px;
}
.timeline-dot.advisory { background:var(--accent); }
.timeline-dot.rejected  { background:var(--danger); }
.timeline-meta { font-size:.75rem; color:var(--text-dim); margin-bottom:.2rem; }
.timeline-action { font-size:.82rem; font-weight:600; color:var(--text); text-transform:capitalize; }
.timeline-comment { font-size:.83rem; color:var(--text-muted); margin-top:.2rem; }

/* ── Document grid ──────────────────────────────────────────────────────────── */
.doc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.75rem; }
.doc-item {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:.75rem; text-align:center;
  transition:var(--trans);
}
.doc-item:hover { border-color:var(--primary); }
.doc-thumb { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px; margin-bottom:.5rem; }
.doc-icon { font-size:2.5rem; margin-bottom:.5rem; }
.doc-name { font-size:.72rem; color:var(--text-muted); word-break:break-all; }
.doc-actions { display:flex; gap:.25rem; justify-content:center; margin-top:.5rem; }

/* ── Upload zone ────────────────────────────────────────────────────────────── */
.upload-zone {
  border:2px dashed var(--border-light);
  border-radius:var(--radius);
  padding:2rem; text-align:center;
  cursor:pointer; transition:var(--trans);
  position:relative; overflow:hidden;
}
.upload-zone:hover { border-color:var(--primary); background:var(--primary-glow); }
.upload-zone input[type=file] {
  position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
}
.upload-zone-icon { font-size:2rem; margin-bottom:.5rem; }
.upload-zone-text { font-size:.875rem; color:var(--text-muted); }
.upload-zone-hint { font-size:.75rem; color:var(--text-dim); margin-top:.25rem; }

/* ── Login page ─────────────────────────────────────────────────────────────── */
.login-page {
  min-height:100vh; display:grid; place-items:center;
  background:radial-gradient(ellipse at 30% 50%,rgba(20,184,166,.08) 0%,transparent 60%),
             radial-gradient(ellipse at 70% 20%,rgba(99,102,241,.08) 0%,transparent 60%),
             var(--bg);
}
.login-box {
  width:100%; max-width:400px; padding:1rem;
}
.login-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.5rem 2rem;
  box-shadow:var(--shadow);
}
.login-logo {
  text-align:center; margin-bottom:1rem;
}
.brand-logo-large img {
  width: 100px; height: 100px;
  object-fit: contain; background: #fff;
  border-radius: 16px; padding: 8px;
  margin-bottom: 0.75rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.login-logo-icon {
  width:48px; height:48px; border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:inline-grid; place-items:center;
  font-size:1.4rem; font-weight:900; color:#fff; margin-bottom:0.75rem;
}
.login-logo h1 { font-size:1.2rem; font-weight:800; color:var(--text); }
.login-logo p  { font-size:.8rem; color:var(--text-muted); margin-top:.25rem; }

/* ── Modals / Inline panels ─────────────────────────────────────────────────── */
.panel {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.25rem; margin-bottom:1rem;
}
.panel-title {
  font-size:.85rem; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.07em;
  margin-bottom:1rem; display:flex; align-items:center; gap:.5rem;
}
.collapse-toggle { cursor:pointer; user-select:none; }
.collapse-body { overflow:hidden; transition:max-height .3s ease; }

/* ── Privilege indicator ────────────────────────────────────────────────────── */
.privilege-tag {
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.7rem; font-weight:700; color:#f59e0b;
  background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3);
  border-radius:4px; padding:.15rem .5rem; text-transform:uppercase; letter-spacing:.06em;
}

/* ── Detail rows ────────────────────────────────────────────────────────────── */
.detail-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:.75rem;
}
.detail-label { font-size:.72rem; color:var(--text-dim); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.detail-value { font-size:.9rem; color:var(--text); margin-top:.15rem; }

/* ── Tabs ───────────────────────────────────────────────────────────────────── */
.tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:1.25rem; overflow-x:auto; }
.tab-btn {
  padding:.65rem 1.2rem; font-size:.875rem; font-weight:500;
  color:var(--text-muted); cursor:pointer;
  border-bottom:2px solid transparent; background:none;
  border-top:none; border-left:none; border-right:none;
  transition:var(--trans); white-space:nowrap;
}
.tab-btn:hover   { color:var(--text); }
.tab-btn.active  { color:var(--primary); border-bottom-color:var(--primary); }
.tab-pane        { display:none; }
.tab-pane.active { display:block; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width:1023px) {
  :root { --sidebar-w:220px; }
}

@media (max-width:767px) {
  .topbar { display:flex; }
  .sidebar {
    transform:translateX(calc(-1 * var(--sidebar-w)));
    top:0; /* Ensure it covers full height when open */
    bottom:0;
    height: 100vh;
  }
  .sidebar.open { transform:translateX(0); box-shadow:4px 0 24px rgba(0,0,0,.5); }
  .main-content { margin-left:0; padding-top:var(--topbar-h); }
  .page-header  { padding:1rem; }
  .content-area { padding:1rem; }
  .flash-messages { padding:0 1rem; }
  .page-title   { font-size:1.15rem; }
  .card         { padding:1rem; }
  
  /* Form Density */
  .form-grid    { grid-template-columns: 1fr !important; gap: 1rem; }
  .detail-grid  { grid-template-columns: 1fr !important; }
  
  /* Button stacking for actions */
  .btn-group    { flex-direction:column; gap: 0.75rem; width: 100%; }
  .btn-group .btn, .btn-group a.btn { width: 100%; justify-content: center; min-height: 44px; }
  
  /* Filter Row stacking */
  .filter-row-compact { flex-direction: column; align-items: stretch; gap: 1rem; }
  .filter-group { flex-direction: column; align-items: flex-start; }
  .filter-actions { flex-direction: column; }
  .filter-actions button, .filter-actions a { width: 100%; justify-content: center; }

  /* Dashboard stats */
  .grid-stats { grid-template-columns: 1fr !important; }
}

@media (max-width:479px) {
  .card-grid { grid-template-columns:1fr; }
  .stat-value { font-size:1.4rem; }
  .login-card { padding:1.5rem; }
}

/* ── Overlay (mobile sidebar backdrop) ─────────────────────────────────────── */
.sidebar-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.5); z-index:140;
}
.sidebar-overlay.visible { display:block; }

/* ── Misc ───────────────────────────────────────────────────────────────────── */
.text-muted  { color:var(--text-muted); }
.text-danger { color:var(--danger); }
.text-success{ color:var(--success); }
.text-warning{ color:var(--warning); }
.text-small  { font-size:.8rem; }
.text-tiny   { font-size:.7rem; }
.muted       { color:var(--text-muted); opacity:0.8; }
.mt-1 { margin-top:.5rem; }
.mt-2 { margin-top:1rem; }
.mt-3 { margin-top:1.5rem; }
.mb-1 { margin-bottom:.5rem; }
.mb-2 { margin-bottom:1rem; }
.d-flex { display:flex; }
.align-center { align-items:center; }
.text-right { text-align: right !important; }
.gap-1 { gap:.5rem; }
.gap-2 { gap:1rem; }
.w-100 { width:100%; }
.divider { border:none; border-top:1px solid var(--border); margin:1.25rem 0; }

/* ── Modals ─────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px); z-index: 2000;
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-content {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); width: 100%;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  animation: modalIn 0.3s ease-out;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-header {
  padding: 1.25rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-body { padding: 1.25rem; }
.close-btn {
  background: none; border: none; font-size: 1.5rem;
  color: var(--text-muted); cursor: pointer; line-height: 1;
}
.close-btn:hover { color: var(--text); }

/* ── Translation UI ─────────────────────────────────────────────────────────── */
.translatable-wrap  { position: relative; }

/* Language badge: small pill next to field label */
.lang-badge {
  display: inline-flex; align-items: center;
  font-size: .65rem; font-weight: 700; letter-spacing: .06em;
  padding: .12rem .45rem; border-radius: 4px;
  text-transform: uppercase; vertical-align: middle;
  margin-left: .4rem;
}
.lang-badge.ta { background: rgba(251,191,36,.15); color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }
.lang-badge.si { background: rgba(139,92,246,.15);  color: #a78bfa; border: 1px solid rgba(139,92,246,.3); }
.lang-badge.en { background: rgba(20,184,166,.12);  color: #2dd4bf; border: 1px solid rgba(20,184,166,.3); }

/* Translate button */
.translate-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 500;
  padding: .2rem .6rem; border-radius: 20px;
  background: transparent;
  color: var(--primary); border: 1px solid rgba(20,184,166,.35);
  cursor: pointer; transition: var(--trans);
  margin-top: .35rem;
  white-space: nowrap;
}
.translate-btn:hover  { background: var(--primary-glow); }
.translate-btn:disabled { opacity: .5; cursor: not-allowed; }
.translate-btn.done   { color: var(--success); border-color: rgba(34,197,94,.35); cursor: default; }

/* Translation result container */
.translation-result {
  margin-top: .5rem;
  padding: .6rem .85rem;
  border-left: 3px solid var(--primary);
  background: rgba(20,184,166,.06);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .875rem; color: var(--text);
  line-height: 1.6;
  animation: fadeInUp .25s ease;
}
.translation-result-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--primary); margin-bottom: .25rem;
}
.translation-error {
  margin-top: .4rem; font-size: .78rem;
  color: var(--danger); font-style: italic;
}

/* Spinner shimmer */
@keyframes spin { to { transform: rotate(360deg); } }
.translate-spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid rgba(20,184,166,.3);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: middle;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Language selector on forms */
.lang-select-group {
  display: flex; align-items: center; gap: .6rem;
  background: rgba(20,184,166,.06); border: 1px solid rgba(20,184,166,.2);
  border-radius: var(--radius); padding: .5rem .85rem;
  margin-bottom: 1rem;
}
.lang-select-group label { font-size: .78rem; color: var(--primary); font-weight: 600; margin: 0; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.lang-select-group select { width: auto; min-width: 160px; padding: .3rem .65rem; font-size: .82rem; }