* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#0b1020; color:#e7eaf3; }

.app { display:flex; min-height:100vh; }
.sidebar { width:260px; background:#0f1730; border-right:1px solid rgba(255,255,255,0.08); padding:16px; }
.main { flex:1; display:flex; flex-direction:column; }

.brand { margin-bottom:16px; }
.brand-title { font-weight:700; font-size:18px; }
.brand-sub { font-size:12px; opacity:0.7; margin-top:4px; }

.nav { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.nav-item { display:block; padding:10px 10px; border-radius:10px; color:#e7eaf3; text-decoration:none; background:rgba(255,255,255,0.03); }
.nav-item:hover { background:rgba(255,255,255,0.06); }
.nav-item.active { background:rgba(120,140,255,0.18); border:1px solid rgba(120,140,255,0.25); }
.nav-item.disabled { opacity:0.45; cursor:not-allowed; }

.sidebar-foot { margin-top:16px; font-size:12px; opacity:0.7; }

.topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.08); background:#0c1430; }
.crumb { font-size:13px; opacity:0.8; }

.btn { display:inline-block; padding:8px 12px; border-radius:10px; background:rgba(255,255,255,0.06); color:#e7eaf3; text-decoration:none; border:1px solid rgba(255,255,255,0.10); }
.btn:hover { background:rgba(255,255,255,0.10); }

.content { padding:18px; }
h1 { margin:0 0 14px 0; font-size:22px; }

.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:12px; }
.card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:14px; }
.card-title { font-weight:700; margin-bottom:8px; }
.card-body { opacity:0.9; }
.muted { opacity:0.7; }

/* --- Auth (login) --- */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:
    radial-gradient(1200px 600px at 30% 10%, rgba(120,140,255,0.18), transparent 60%),
    radial-gradient(1200px 600px at 70% 90%, rgba(120,255,190,0.10), transparent 60%),
    #0b1020;
}

.auth-card{
  width:420px;
  max-width:100%;
  display:block;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 40px rgba(0,0,0,0.35);
}

.auth-head{ margin-bottom:14px; }
.auth-title{ font-size:22px; font-weight:800; }
.auth-sub{ font-size:13px; opacity:0.75; margin-top:4px; }

.auth-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
}
.field span{ opacity:0.8; }

.field input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:#e7eaf3;
  outline:none;
}

.field select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:#e7eaf3;
  outline:none;
}

.field input:focus,
.field select:focus{
  border-color:rgba(120,140,255,0.45);
  box-shadow:0 0 0 3px rgba(120,140,255,0.15);
}

.btn.primary{
  width:100%;
  text-align:center;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(120,140,255,0.22);
  border:1px solid rgba(120,140,255,0.30);
  color:#e7eaf3;
  font-weight:700;
}
.btn.primary:hover{ background:rgba(120,140,255,0.28); }

.auth-foot{ margin-top:4px; font-size:12px; opacity:0.7; }

.alert{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  margin-bottom: 10px;
  font-size: 13px;
}
.alert.error{
  border-color: rgba(255,120,120,0.25);
  background: rgba(255,120,120,0.08);
}

/* --- Auth language selector (login) --- */
.auth-lang{
  display:flex;
  align-items:center;
  gap:8px;
  margin: 10px 0 12px 0;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.auth-spacer{ height:14px; }

.lang-pill{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #e7eaf3;
  text-decoration: none;
  font-size: 12px;
}
.lang-pill:hover{
  background: rgba(255,255,255,0.08);
}
.lang-pill.active{
  background: rgba(120,140,255,0.22);
  border-color: rgba(120,140,255,0.30);
  font-weight: 700;
}

/* -----------------------------------------------------------
   Admin Tables + Badges + Flash (Users/RBAC UI)
----------------------------------------------------------- */
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.flash{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  margin: 0 0 12px 0;
  font-size:13px;
}
.flash-ok{
  border-color: rgba(120,255,190,0.25);
  background: rgba(120,255,190,0.10);
}
.flash-err{
  border-color: rgba(255,120,120,0.25);
  background: rgba(255,120,120,0.10);
}

.tbl{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}

.tbl thead th{
  text-align:left;
  font-size:12px;
  letter-spacing:0.2px;
  opacity:0.85;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.tbl tbody td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  font-size:13px;
  vertical-align:middle;
}

.tbl tbody tr:hover td{
  background: rgba(255,255,255,0.03);
}

.tbl tbody tr:last-child td{
  border-bottom:none;
}

.badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  font-size:12px;
  line-height:1;
}

.badge-ok{
  border-color: rgba(120,255,190,0.30);
  background: rgba(120,255,190,0.12);
}

.badge-no{
  border-color: rgba(255,120,120,0.30);
  background: rgba(255,120,120,0.12);
}

/* Buttons: variants */
.btn.btn-ghost{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.10);
}
.btn.btn-ghost:hover{
  background: rgba(255,255,255,0.07);
}

/* VOL5: danger button (Delete) */
.btn.btn-danger{
  background: rgba(255,120,120,0.10);
  border: 1px solid rgba(255,120,120,0.28);
}
.btn.btn-danger:hover{
  background: rgba(255,120,120,0.16);
}

.btn:disabled{
  opacity:0.55;
  cursor:not-allowed;
}

/* -----------------------------------------------------------
   Users list layout polish (VOL5)
----------------------------------------------------------- */

/* 1) Tee content laiemaks, et tabel ei oleks “kitsas” */
.content { 
  width:100%; 
  max-width:1600px; 
}

/* 2) Users table spacing */
.tbl thead th,
.tbl tbody td{
  padding: 12px 16px;
}

.tbl thead th{
  font-weight: 700;
}

/* Users columns widths (fallback) */
.tbl td:nth-child(1),
.tbl th:nth-child(1){ width: 12%; }
.tbl td:nth-child(2),
.tbl th:nth-child(2){ width: 12%; }
.tbl td:nth-child(3),
.tbl th:nth-child(3){ width: 22%; }
.tbl td:nth-child(4),
.tbl th:nth-child(4){ width: 8%;  white-space: nowrap; }
.tbl td:nth-child(5),
.tbl th:nth-child(5){ width: 16%; }

.tbl td:nth-child(6),
.tbl th:nth-child(6),
.tbl td:nth-child(7),
.tbl th:nth-child(7){
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tbl td:nth-child(8),
.tbl th:nth-child(8){
  width: 320px;
  white-space: nowrap;
}

.tbl-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.tbl-actions .inline-form,
.tbl-actions .form-inline{
  display:inline;
  margin:0;
}

.tbl td:last-child{ white-space: nowrap; }

/* Head / button spacing */
.card-head{
  margin-bottom: 16px;
}
.card-head .muted{
  max-width: 520px;
}
.card-head .btn{
  margin-left: 12px;
}

@media (max-width: 1100px){
  .content{ max-width: 100%; }
  .card-head{
    flex-direction: column;
    align-items: flex-start;
  }
  .card-head .btn{
    margin-left: 0;
    margin-top: 10px;
  }
  .tbl-actions{ flex-wrap:wrap; }
}

/* --- CSP-safe helpers (no inline styles) --- */
.logout-form{ margin:0; }
.form-inline{ display:inline; }

.debug-pre{
  white-space: pre-wrap;
  color:#fff;
  background:#300;
  padding:12px;
  border-radius:10px;
}

/* -----------------------------------------------------------
   Forms (Create Admin / future forms)
----------------------------------------------------------- */
.form{ margin-top: 8px; }

.form-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 720px;
}

.form .field span{ opacity: 0.85; }

.check{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  opacity: 0.95;
  margin-top: 4px;
  margin-bottom: 14px;
}
.check input{
  width: 16px;
  height: 16px;
}

.form-actions{
  display:flex;
  gap:10px;
  margin-top: 0;
}

.form-inline{ display:inline; }

/* --- Roles UI helpers (CSP safe) --- */
.input-pill{
  padding:10px 12px;
  border-radius:12px;
  min-width:220px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:#e7eaf3;
  outline:none;
}
.select-pill{
  padding:10px 12px;
  border-radius:12px;
  min-width:260px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:#e7eaf3;
  outline:none;
}

/* -----------------------------------------------------------
   Settings (Tabs + Language audit) — CSP safe
----------------------------------------------------------- */
.tabbar{
  display:flex;
  gap:10px;
  margin-top: 6px;
}

.tab-btn{
  border-radius: 12px;
}

.tab-divider{
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 14px 0;
}

.tab-body{
  padding-top: 2px;
}

.h2-tight{
  margin-top: 0;
  margin-bottom: 10px;
}

.h3-tight{
  margin: 0 0 6px 0;
}

.h3-help{
  margin-top: 0;
}

.lang-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top: 10px;
}

.lang-compare-form{
  display:flex;
  align-items:flex-end;
  gap:10px;
}

.lang-compare-field{
  max-width:260px;
}

.lang-stats{
  margin-top: 10px;
  margin-bottom: 10px;
}

.table-wrap{
  margin-top: 10px;
}

.tbl-lang .th-key{ width: 220px; }
.tbl-lang .th-status{ width: 140px; white-space: nowrap; }
.tbl-lang .th-actions{ width: 240px; white-space: nowrap; }

.pill{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  font-size:12px;
  line-height:1.2;
}

.pill-ok{
  border-color: rgba(120,255,190,0.30);
  background: rgba(120,255,190,0.12);
}

.pill-warn{
  border-color: rgba(255,200,120,0.30);
  background: rgba(255,200,120,0.10);
}

.pill-ghost{
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
}

.row-missing td{
  background: rgba(255,200,120,0.03);
}

.row-danger td{
  background: rgba(255,120,120,0.05);
}

.lang-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  white-space: nowrap;
}

.lang-edit-form{
  display:flex;
  align-items:center;
  gap:8px;
}

.lang-edit-input{
  width: 100%;
  min-width: 260px;
  max-width: 620px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:#e7eaf3;
  outline:none;
}

.lang-edit-input:focus{
  border-color:rgba(120,140,255,0.45);
  box-shadow:0 0 0 3px rgba(120,140,255,0.15);
}

.lang-extra-box{
  margin-top: 16px;
}

.lang-extra-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.lang-next{
  margin-top: 16px;
}

@media (max-width: 1100px){
  .lang-tools{
    flex-direction: column;
    align-items: flex-start;
  }
  .lang-compare-form{
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .lang-actions{
    flex-wrap: wrap;
  }
}

/* --- Settings: Actions in one row (table) --- */
.tbl td.actions { white-space: nowrap; }
.actions-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.inline { display: inline; margin: 0; }

/* smaller buttons for tight table cells */
.btn.btn-xs {
  padding: 6px 10px;
  line-height: 1;
  font-size: 12px;
  border-radius: 10px;
}

/* ============================================================
   Settings → Language: Missing/Extra boxes + pills
   (append-only block)
   ============================================================ */

.lang-missing-box,
.lang-extra-box {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.h3-help {
  margin-top: 4px;
  margin-bottom: 10px;
}

.lang-missing-pills,
.lang-extra-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Generic pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.10);
  text-decoration: none;
  user-select: none;
}

.pill code {
  font-size: 12px;
}

/* Pill variants */
.pill-ok {
  border-color: rgba(40, 167, 69, 0.35);
  background: rgba(40, 167, 69, 0.08);
}

.pill-warn {
  border-color: rgba(255, 193, 7, 0.35);
  background: rgba(255, 193, 7, 0.08);
}

.pill-ghost {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.02);
}

/* Hover only for links */
a.pill:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
}

/* Table row highlight for missing */
.tbl-lang .row-missing td {
  background: rgba(255, 193, 7, 0.05);
}

.tbl-lang .row-danger td {
  background: rgba(220, 53, 69, 0.06);
}

/* Actions layout */
.lang-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* Edit input */
.lang-edit-input {
  min-width: 280px;
  max-width: 720px;
  width: 100%;
}

.lang-next {
  margin-top: 10px;
}

/* ============================================================
   SETTINGS LANG: readability overrides (append-only)
   ============================================================ */

/* Make pill text readable (avoid link-blue) */
.pill,
.pill:visited {
  color: rgba(255, 255, 255, 0.88);
}

/* Code inside pill should NOT be blue */
.pill code {
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
}

/* Links: keep readable, not bright blue */
a.pill,
a.pill:visited {
  color: rgba(255, 255, 255, 0.90);
}

/* Missing pills: a bit brighter background for contrast */
.pill-warn {
  border-color: rgba(255, 193, 7, 0.55);
  background: rgba(255, 193, 7, 0.14);
}

/* Hover: subtle, not neon */
a.pill:hover {
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}

/* Extra pills: keep calm */
.pill-ghost {
  color: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
}

/* Settings → General: select + save button spacing */
.form-inline {
  display: flex;
  align-items: flex-end;
  gap: 10px; /* teeb vahe sisse */
  flex-wrap: wrap;
}

/* kui sul on juba .form-inline olemas ja ei taha igal pool mõjutada, kasuta kitsamat selektorit: */
.tab-body .form-inline {
  gap: 10px;
}

/* -----------------------------------------------------------
   Settings > Security tab spacing
----------------------------------------------------------- */
.security-form{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  max-width:520px;
  width:100%;
  margin-top:8px;
}

.security-field{
  width:100%;
  gap:8px;
}

.security-field + .security-field{
  margin-top:2px;
}

.security-field input,
.security-field select{
  min-height:44px;
}

.security-actions{
  margin-top:8px;
  padding-top:4px;
}

.security-note{
  margin-top:14px;
}

.security-help-line{
  margin-top:12px;
}

/* -----------------------------------------------------------
   Settings > Mail
----------------------------------------------------------- */
.mail-card{
  margin-top: 16px;
}

.mail-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.mail-head-meta{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mail-head-action{
  flex: 0 0 auto;
}

.mail-note{
  margin-top: 12px;
}

.mail-empty{
  padding: 4px 0;
}

/* table base */
.mail-table{
  width: 100%;
  table-layout: auto;
}

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

.mail-table thead th{
  text-align: left !important;
  padding-left: 4px;
  white-space: nowrap;
}

/* jäta alles ainult siis, kui globaalne .table rikub joondust */
.table.mail-table th,
.table.mail-table td{
  text-align: left !important;
}

/* column sizing */
.mail-col-code{ width: 240px; }
.mail-col-name{ width: 220px; }
.mail-col-profile{ width: 110px; }
.mail-col-format{ width: 90px; }
.mail-col-status{ width: 110px; }
.mail-col-default{ width: 120px; }
.mail-col-actions{ width: 360px; }
.mail-col-from{ width: 260px; }
.mail-col-reply{ width: 200px; }

/* content helpers */
.mail-from{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mail-cell-muted{
  margin-top: 2px;
  color: #9eabc9;
}

/* action column */
.mail-actions-cell{
  min-width: 360px;
  white-space: normal;
  text-align: left !important;
}

.mail-actions{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.mail-action-buttons{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.mail-inline-form{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.mail-test-form{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0;
}

/* compact controls */
.mail-test-lang{
  width: 72px;
  min-width: 72px;
  height: 34px;
  background: #121a30;
  color: #e7ebff;
  border: 1px solid #2b3657;
}

.mail-test-lang option{
  background: #121a30;
  color: #e7ebff;
}

.mail-test-email{
  width: 160px;
  min-width: 160px;
  max-width: 160px;
  height: 34px;
  background: #121a30;
  color: #e7ebff;
  border: 1px solid #2b3657;
}

.mail-test-email::placeholder{
  color: #93a0c4;
  opacity: 1;
}

.mail-test-email:focus,
.mail-test-lang:focus,
.lang-dark-select:focus{
  outline: none;
  border-color: #3a4b7a;
  box-shadow: 0 0 0 2px rgba(58, 75, 122, 0.18);
}

.mail-test-btn,
.mail-mini-btn{
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 10px;
}

.mail-pill-btn{
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 12px;
}

/* Language tab compare select */
.lang-dark-select{
  background: #121a30;
  color: #e7ebff;
  border: 1px solid #2b3657;
}

.lang-dark-select option{
  background: #121a30;
  color: #e7ebff;
}

/* responsive */
@media (max-width: 1200px){
  .mail-col-actions{
    width: 320px;
  }

  .mail-actions-cell{
    min-width: 320px;
  }

  .mail-action-buttons,
  .mail-test-form{
    flex-wrap: wrap;
  }

  .mail-test-email{
    width: 145px;
    min-width: 145px;
    max-width: 145px;
  }
}

/* desktop compact override */
@media (min-width: 1201px){
  .mail-col-code{ width: 200px; }
  .mail-col-name{ width: 180px; }
  .mail-col-from{ width: 210px; }
  .mail-col-reply{ width: 170px; }
  .mail-col-profile{ width: 95px; }
  .mail-col-format{ width: 80px; }
  .mail-col-status{ width: 95px; }
  .mail-col-default{ width: 90px; }
  .mail-col-actions{ width: 300px; }

  .mail-actions-cell{
    min-width: 300px;
    white-space: nowrap;
  }

  .mail-actions{
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .mail-action-buttons{
    flex-wrap: nowrap;
  }

  .mail-test-form{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .mail-test-lang{
    width: 60px;
    min-width: 60px;
  }

  .mail-test-email{
    width: 130px;
    min-width: 130px;
    max-width: 130px;
  }
}

/* -----------------------------------------------------------
   Mail edit screen
----------------------------------------------------------- */
.mail-edit-form{
  max-width: 820px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mail-edit-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px;
}

.mail-edit-lang{
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px;
  margin: 0;
}

.mail-edit-lang legend{
  padding: 0 8px;
  color: #cfd7ef;
  font-weight: 700;
}

.mail-edit-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.checkbox-row{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 900px){
  .mail-edit-grid{
    grid-template-columns: 1fr;
  }
}

.inline-note{
  display:inline-block;
  margin-left:8px;
}

.b9-modal .card { box-shadow: 0 20px 60px rgba(0,0,0,.45); }

/* -----------------------------------------------------------
   Settings > Modules
----------------------------------------------------------- */
.modules-card{
  margin-top: 16px;
}

.modules-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.modules-head-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.modules-head-action{
  flex:0 0 auto;
}

.modules-table{
  width:100%;
  table-layout:auto;
}

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

.modules-col-code{ width: 34%; }
.modules-col-route{ width: 20%; }
.modules-col-status{ width: 12%; }
.modules-col-sort{ width: 10%; }
.modules-col-actions{ width: 24%; }

.modules-name{
  font-weight:700;
  color:#e7eaf3;
}

.modules-code{
  margin-top:4px;
  color:#9eabc9;
  font-size:13px;
}

.modules-desc{
  margin-top:4px;
  color:#9eabc9;
  font-size:13px;
}

.modules-route{
  color:#e7eaf3;
}

.modules-actions-cell{
  min-width:260px;
  white-space:normal;
}

.modules-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.modules-inline-form{
  display:inline-flex;
  align-items:center;
  margin:0;
}

.modules-empty{
  padding:6px 0 2px 0;
}

@media (max-width: 1100px){
  .modules-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .modules-actions{
    flex-wrap:wrap;
  }
}

/* -----------------------------------------------------------
   Deposit forms
----------------------------------------------------------- */
.deposit-form{
  max-width: 860px;
  width: 100%;
}

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

.deposit-form-grid .field-full{
  grid-column: 1 / -1;
}

.deposit-form-note{
  margin-top: 10px;
}

.deposit-form-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.deposit-form .field input,
.deposit-form .field select,
.deposit-form .field textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #1b2236;
  color: #e7eaf3;
  outline: none;
}

.deposit-form .field select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #1b2236;
  color: #e7eaf3;
  background-image: linear-gradient(45deg, transparent 50%, #9eabc9 50%), linear-gradient(135deg, #9eabc9 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.deposit-form .field select option{
  background: #1b2236;
  color: #e7eaf3;
}

.deposit-form .field select option:checked{
  background: #27314d;
  color: #ffffff;
}

.deposit-form .field input:focus,
.deposit-form .field select:focus,
.deposit-form .field textarea:focus{
  border-color: rgba(120,140,255,0.45);
  box-shadow: 0 0 0 3px rgba(120,140,255,0.15);
}

.deposit-form .field textarea{
  min-height: 110px;
  resize: vertical;
}

.deposit-form .field span{
  opacity: 0.85;
}

.deposit-inline-help{
  margin-top: 4px;
  font-size: 12px;
  color: #9eabc9;
}

@media (max-width: 900px){
  .deposit-form-grid{
    grid-template-columns: 1fr;
  }
}