/* ===== Valvet – tema ===== */
:root{
  --bg:#eaf1fa;
  --surface:#ffffff;
  --surface-2:#f5f9ff;
  --primary:#1f6fe0;
  --primary-600:#155ec6;
  --primary-700:#1150aa;
  --primary-soft:#e4eefc;
  --primary-tint:#f1f7ff;
  --navy:#16243d;
  --ink:#1e2a40;
  --muted:#6a7890;
  --muted-2:#90a0b8;
  --border:#e3ebf5;
  --border-2:#eef3fa;
  --success:#16a06a;
  --success-soft:#e3f6ee;
  --warning:#d9912a;
  --warning-soft:#fcf2e1;
  --danger:#dc4d4d;
  --danger-soft:#fbe7e7;
  --radius:16px;
  --radius-sm:11px;
  --shadow-sm:0 1px 2px rgba(22,36,61,.05), 0 1px 3px rgba(22,36,61,.04);
  --shadow:0 6px 22px -8px rgba(22,36,61,.16);
  --shadow-lg:0 24px 60px -22px rgba(22,36,61,.30);
  --sidebar-w:264px;
}

*{ box-sizing:border-box; -webkit-font-smoothing:antialiased; }
*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Manrope', system-ui, -apple-system, sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  letter-spacing:-.005em;
}
a{ color:var(--primary); text-decoration:none; }

/* ===== Layout shell ===== */
.app{ display:flex; min-height:100vh; }
.sidebar{
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  background:var(--surface);
  border-right:1px solid var(--border);
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
  z-index:30;
}
.content{ flex:1; min-width:0; display:flex; flex-direction:column; }
.content-inner{ padding:26px 34px 60px; max-width:1240px; width:100%; margin:0 auto; }

/* ===== Brand ===== */
.brand{ display:flex; align-items:center; gap:11px; padding:22px 22px 18px; text-decoration:none; }
.brand-mark{
  width:38px; height:38px; border-radius:11px; flex:0 0 38px;
  background:linear-gradient(150deg, #2c80f0, #1150aa);
  display:grid; place-items:center; color:#fff;
  box-shadow:0 6px 14px -4px rgba(31,111,224,.5);
}
.brand-mark svg{ width:21px; height:21px; }
.brand-name{ font-weight:800; font-size:19px; color:var(--navy); letter-spacing:-.02em; line-height:1; }
.brand-sub{ font-size:11px; color:var(--muted-2); font-weight:600; margin-top:3px; letter-spacing:.01em; }

/* ===== Nav ===== */
.nav-section{ padding:6px 14px; flex:1; overflow-y:auto; }
.nav-label{ font-size:10.5px; font-weight:800; letter-spacing:.10em; text-transform:uppercase; color:var(--muted-2); padding:14px 12px 7px; }
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 13px; border-radius:11px; margin-bottom:2px;
  color:var(--ink); text-decoration:none; font-weight:600; font-size:14.5px;
  transition:background .15s, color .15s; width:100%; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left;
}
.nav-item i{ font-size:18px; color:var(--muted); width:20px; text-align:center; transition:color .15s; }
.nav-item:hover{ background:var(--surface-2); color:var(--navy); text-decoration:none; }
.nav-item:hover i{ color:var(--primary); }
.nav-item.active{ background:var(--primary-soft); color:var(--primary-700); }
.nav-item.active i{ color:var(--primary); }
.nav-item .badge-count{ margin-left:auto; background:#fff; color:var(--muted); font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; border:1px solid var(--border); }
.nav-item.active .badge-count{ background:#fff; color:var(--primary-700); border-color:transparent; }

.dash-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
@media (max-width:880px){ .dash-grid{ grid-template-columns:1fr; } }

.sidebar-foot{ padding:14px; border-top:1px solid var(--border); }
.lock-card{
  background:linear-gradient(160deg,#1150aa,#16243d);
  border-radius:14px; padding:15px 16px; color:#dbe7f8;
}
.lock-card .lc-title{ font-weight:700; font-size:13.5px; color:#fff; display:flex; align-items:center; gap:8px; }
.lock-card .lc-sub{ font-size:11.5px; color:#9db6da; margin:6px 0 12px; line-height:1.45; }

/* ===== Topbar ===== */
.topbar{
  display:flex; align-items:center; gap:16px;
  padding:16px 34px; background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20;
}
.search{ flex:1; max-width:420px; position:relative; }
.search i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted-2); font-size:16px; }
.search input{
  width:100%; border:1px solid var(--border); background:var(--surface-2);
  border-radius:11px; padding:10px 14px 10px 40px; font-size:14px; color:var(--ink);
  outline:none; transition:.15s; font-family:inherit;
}
.search input:focus{ border-color:var(--primary); background:#fff; box-shadow:0 0 0 4px var(--primary-soft); }
.topbar-spacer{ flex:1; }
.icon-btn{
  width:40px; height:40px; border-radius:11px; border:1px solid var(--border);
  background:#fff; color:var(--muted); display:grid; place-items:center; cursor:pointer;
  font-size:18px; transition:.15s; position:relative; text-decoration:none;
}
.icon-btn:hover{ color:var(--primary); border-color:var(--primary-soft); background:var(--primary-tint); }
.icon-btn .dot{ position:absolute; top:9px; right:10px; width:7px; height:7px; border-radius:50%; background:var(--danger); border:2px solid #fff; }
.avatar{
  width:40px; height:40px; border-radius:50%; flex:0 0 40px;
  background:linear-gradient(150deg,#3b8af2,#1150aa); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:14px;
}
.user-chip{ display:flex; align-items:center; gap:11px; cursor:pointer; color:inherit; text-decoration:none; }
.user-chip:hover{ text-decoration:none; }
.user-chip .uc-name{ font-weight:700; font-size:13.5px; color:var(--navy); line-height:1.2; }
.user-chip .uc-role{ font-size:11.5px; color:var(--muted); }

/* ===== Page heading ===== */
.page-head{ display:flex; align-items:flex-end; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.page-head h1{ font-size:27px; font-weight:800; color:var(--navy); margin:0; letter-spacing:-.02em; }
.page-head p{ margin:7px 0 0; color:var(--muted); font-size:14.5px; }
.page-head .ph-actions{ margin-left:auto; display:flex; gap:10px; }
.eyebrow{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); margin-bottom:7px; display:flex; align-items:center; gap:7px; }

/* ===== Cards ===== */
.card-x{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.card-x.pad{ padding:22px; }
.card-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.card-head h3{ font-size:16px; font-weight:800; color:var(--navy); margin:0; letter-spacing:-.01em; }
.card-head .ch-link{ margin-left:auto; font-size:13px; font-weight:700; color:var(--primary); text-decoration:none; display:flex; align-items:center; gap:5px; }
.card-head .ch-link:hover{ color:var(--primary-700); }

/* stat cards */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  text-decoration:none; color:inherit; display:block; transition:.18s;
}
.stat:hover{ box-shadow:var(--shadow); transform:translateY(-2px); border-color:var(--primary-soft); text-decoration:none; }
.stat .s-chip{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:22px; margin-bottom:16px; }
.stat .s-num{ font-size:30px; font-weight:800; color:var(--navy); line-height:1; letter-spacing:-.02em; }
.stat .s-label{ color:var(--muted); font-size:13.5px; font-weight:600; margin-top:7px; }
.stat .s-foot{ margin-top:13px; font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:5px; }

/* type chip */
.type-chip{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:20px; flex:0 0 42px; }
.type-chip.sm{ width:34px; height:34px; font-size:16px; border-radius:10px; flex-basis:34px; }
.type-chip.lg{ width:54px; height:54px; font-size:26px; border-radius:15px; flex-basis:54px; }

/* ===== Buttons ===== */
.btn-pri{
  background:var(--primary); color:#fff; border:none; border-radius:11px;
  padding:11px 20px; font-weight:700; font-size:14.5px; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; transition:.15s;
  box-shadow:0 8px 18px -8px rgba(31,111,224,.6); font-family:inherit;
}
.btn-pri:hover{ background:var(--primary-600); color:#fff; transform:translateY(-1px); text-decoration:none; }
.btn-ghost{
  background:#fff; color:var(--navy); border:1px solid var(--border); border-radius:11px;
  padding:11px 18px; font-weight:700; font-size:14.5px; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; transition:.15s; font-family:inherit;
}
.btn-ghost:hover{ border-color:var(--primary); color:var(--primary); background:var(--primary-tint); text-decoration:none; }
.btn-danger-soft{
  background:var(--danger-soft); color:var(--danger); border:1px solid transparent; border-radius:11px;
  padding:11px 18px; font-weight:700; font-size:14.5px; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; transition:.15s; font-family:inherit;
}
.btn-danger-soft:hover{ background:var(--danger); color:#fff; text-decoration:none; }
.btn-sm{ padding:8px 14px; font-size:13.5px; border-radius:10px; }
.btn-block{ width:100%; justify-content:center; }

/* ===== Badges ===== */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:30px; font-size:12px; font-weight:700; }
.pill-soft{ background:var(--surface-2); color:var(--muted); border:1px solid var(--border); }
.pill-blue{ background:var(--primary-soft); color:var(--primary-700); }
.pill-green{ background:var(--success-soft); color:var(--success); }
.pill-amber{ background:var(--warning-soft); color:var(--warning); }

/* ===== Doc rows ===== */
.doc-row{
  display:flex; align-items:center; gap:15px; padding:15px 18px;
  border:1px solid var(--border); border-radius:14px; background:#fff;
  text-decoration:none; transition:.15s; margin-bottom:11px; color:inherit;
}
.doc-row:hover{ border-color:var(--primary-soft); box-shadow:var(--shadow); transform:translateY(-1px); text-decoration:none; }
.doc-row .dr-title{ font-weight:700; color:var(--navy); font-size:15px; }
.doc-row .dr-meta{ font-size:12.5px; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dot-sep{ width:3px; height:3px; border-radius:50%; background:var(--muted-2); display:inline-block; }

/* ===== Vault cards ===== */
.vault-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.vault{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow-sm); transition:.18s; text-decoration:none; display:block; position:relative; overflow:hidden; color:inherit;
}
.vault:hover{ box-shadow:var(--shadow); transform:translateY(-3px); border-color:var(--primary-soft); text-decoration:none; }
.vault .v-top{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.vault .v-name{ font-weight:800; color:var(--navy); font-size:17px; letter-spacing:-.01em; }
.vault .v-desc{ color:var(--muted); font-size:13px; line-height:1.5; margin-bottom:18px; min-height:38px; }
.vault .v-foot{ display:flex; align-items:center; gap:18px; padding-top:15px; border-top:1px solid var(--border-2); }
.vault .v-stat{ font-size:12.5px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:6px; }
.vault .v-stat b{ color:var(--navy); font-weight:800; }
.vault .v-lock{ position:absolute; top:20px; right:20px; color:var(--muted-2); font-size:15px; }

/* ===== Template picker ===== */
.tpl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tpl{
  background:#fff; border:1.5px solid var(--border); border-radius:14px; padding:17px;
  cursor:pointer; transition:.15s; text-align:left; display:flex; gap:14px; align-items:flex-start; font-family:inherit; text-decoration:none; color:inherit;
}
.tpl:hover{ border-color:var(--primary); box-shadow:var(--shadow); transform:translateY(-2px); text-decoration:none; }
.tpl.selected{ border-color:var(--primary); background:var(--primary-tint); box-shadow:0 0 0 3px var(--primary-soft); }
.tpl .t-name{ font-weight:800; color:var(--navy); font-size:14.5px; }
.tpl .t-desc{ font-size:12px; color:var(--muted); margin-top:4px; line-height:1.45; }
.tpl .t-check{ margin-left:auto; color:var(--primary); font-size:20px; opacity:0; transition:.15s; }
.tpl.selected .t-check{ opacity:1; }

/* ===== Forms ===== */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-weight:700; font-size:13px; color:var(--navy); display:flex; align-items:center; gap:6px; }
.field label .req{ color:var(--danger); }
.field .hint{ font-size:11.5px; color:var(--muted-2); font-weight:500; }
.inp, .field input, .field select, .field textarea{
  border:1px solid var(--border); background:var(--surface-2); border-radius:10px;
  padding:11px 13px; font-size:14px; color:var(--ink); outline:none; transition:.15s;
  font-family:inherit; width:100%;
}
.inp:focus, .field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--primary); background:#fff; box-shadow:0 0 0 4px var(--primary-soft);
}
/* Radio/checkbox must not stretch to full width like text inputs. */
.field input[type=checkbox], .field input[type=radio]{
  width:auto; padding:0; margin:0; flex:0 0 auto; accent-color:var(--primary);
}
.field textarea{ resize:vertical; min-height:90px; }
.input-wrap{ position:relative; }
.input-wrap .toggle-eye{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:none; background:none; color:var(--muted); cursor:pointer; font-size:17px; padding:4px;
}
.input-wrap .toggle-eye:hover{ color:var(--primary); }

/* ===== Upload ===== */
.dropzone{
  border:2px dashed var(--border); border-radius:16px; background:var(--surface-2);
  padding:38px 24px; text-align:center; transition:.18s; cursor:pointer;
}
.dropzone:hover, .dropzone.drag{ border-color:var(--primary); background:var(--primary-tint); }
.dropzone .dz-icon{ width:58px; height:58px; border-radius:16px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center; font-size:27px; margin:0 auto 14px; }

/* ===== Tabs ===== */
.tabs{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:4px; gap:4px; }
.tab{ padding:9px 18px; border-radius:9px; font-weight:700; font-size:13.5px; color:var(--muted); cursor:pointer; border:none; background:none; font-family:inherit; transition:.15s; display:flex; align-items:center; gap:8px; }
.tab.active{ background:#fff; color:var(--primary-700); box-shadow:var(--shadow-sm); }

/* ===== Filters ===== */
.filter-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.chip-filter{ padding:8px 14px; border-radius:30px; border:1px solid var(--border); background:#fff; color:var(--muted); font-weight:700; font-size:13px; cursor:pointer; transition:.15s; display:flex; align-items:center; gap:7px; font-family:inherit; text-decoration:none; }
.chip-filter:hover{ border-color:var(--primary-soft); color:var(--primary); text-decoration:none; }
.chip-filter.active{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* ===== Toast ===== */
.toast-x{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--navy); color:#fff; padding:13px 20px; border-radius:13px;
  font-weight:700; font-size:14px; display:flex; align-items:center; gap:11px;
  box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:.28s; z-index:200;
}
.toast-x.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast-x i{ font-size:19px; color:#5fd6a0; }

/* ===== Empty state ===== */
.empty{ text-align:center; padding:54px 20px; }
.empty .e-icon{ width:72px; height:72px; border-radius:20px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center; font-size:34px; margin:0 auto 18px; }
.empty h3{ font-weight:800; color:var(--navy); font-size:18px; margin:0 0 8px; }
.empty p{ color:var(--muted); font-size:14px; margin:0 auto 20px; max-width:380px; }

/* ===== Modal ===== */
.modal-x{ position:fixed; inset:0; background:rgba(22,36,61,.45); backdrop-filter:blur(3px); display:none; place-items:center; z-index:150; padding:24px; }
.modal-x.show{ display:grid; }
.modal-card{ background:#fff; border-radius:20px; width:100%; max-width:480px; box-shadow:var(--shadow-lg); overflow:hidden; }
.modal-card .m-head{ padding:22px 24px 0; }
.modal-card .m-body{ padding:18px 24px; }
.modal-card .m-foot{ padding:16px 24px 22px; display:flex; gap:10px; justify-content:flex-end; }

/* ===== Misc ===== */
.divider{ height:1px; background:var(--border-2); margin:18px 0; }
.muted{ color:var(--muted); }
.row-gap{ display:flex; flex-direction:column; }
.grid-2{ display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:start; }
.security-meter{ height:8px; border-radius:10px; background:var(--border); overflow:hidden; }
.security-meter > span{ display:block; height:100%; border-radius:10px; background:linear-gradient(90deg,#16a06a,#3fc88b); }

@media (max-width:1080px){
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .vault-grid, .tpl-grid{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .sidebar{ display:none; }
  .form-grid{ grid-template-columns:1fr; }
  .stat-grid, .vault-grid, .tpl-grid{ grid-template-columns:1fr; }
  .content-inner, .topbar{ padding-left:18px; padding-right:18px; }
}

/* =====================================================================
   Auth layout (login / register / password)
   ===================================================================== */
.auth-layout{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#16243d 0%, #1150aa 100%);
  padding:2rem 1rem;
}
.auth-container{ width:100%; display:flex; justify-content:center; }
.auth-card{
  background:var(--surface); border-radius:20px; box-shadow:var(--shadow-lg);
  padding:34px 30px; width:100%; max-width:430px;
}
.auth-logo{ display:flex; align-items:center; gap:11px; margin-bottom:22px; }
.auth-logo .brand-mark{ width:42px; height:42px; flex-basis:42px; }
.auth-logo h1{ font-size:22px; font-weight:800; color:var(--navy); margin:0; letter-spacing:-.02em; }
.auth-card h2{ font-size:20px; font-weight:800; color:var(--navy); margin:0 0 4px; }
.auth-subtitle{ color:var(--muted); font-size:13.5px; margin-bottom:22px; }
.auth-footer{ margin-top:18px; text-align:center; font-size:13.5px; color:var(--muted); }

/* Auth submit loading state — fades the card and overlays a spinner. */
.auth-card.is-loading{ opacity:.5; pointer-events:none; transition:opacity .25s ease; }
.auth-loading-overlay{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(22,36,61,.35); backdrop-filter:blur(2px); z-index:300;
}
.auth-loading-overlay.show{ display:grid; }
.auth-loading-overlay .spinner-lg{
  width:48px; height:48px; border-radius:50%;
  border:4px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite;
}

/* =====================================================================
   Legacy compatibility — keeps not-yet-reskinned views looking on-brand.
   (Auth, Profile, Create/Edit/Details, Subscription, Mfa, PdfExport …)
   ===================================================================== */
.dashboard{ max-width:1240px; }
.page-header{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:24px; flex-wrap:wrap; }
.page-header h1{ font-size:27px; font-weight:800; color:var(--navy); letter-spacing:-.02em; margin:0; }
.page-header .subtitle{ color:var(--muted); margin-top:7px; font-size:14.5px; }
.page-actions{ display:flex; gap:.5rem; }

/* card */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:22px; margin-bottom:22px;
}
.card h2{ font-size:16px; font-weight:800; color:var(--navy); margin:0 0 16px; letter-spacing:-.01em; }

/* forms */
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-size:13px; font-weight:700; margin-bottom:7px; color:var(--navy); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
@media (max-width:760px){ .form-row{ grid-template-columns:1fr; } }
.form-control{
  display:block; width:100%; padding:11px 13px; font-size:14px; line-height:1.5;
  color:var(--ink); background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px; transition:.15s; outline:none; font-family:inherit;
}
.form-control:focus{ border-color:var(--primary); background:#fff; box-shadow:0 0 0 4px var(--primary-soft); }
.form-control-sm{ padding:7px 10px; font-size:13px; }
textarea.form-control{ resize:vertical; min-height:90px; }
.form-label-inline{ font-size:13px; font-weight:700; color:var(--navy); margin-right:8px; }
.form-row-between{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:13.5px; }
.checkbox-label{ display:flex; align-items:center; gap:.4rem; cursor:pointer; user-select:none; }
.link-small{ font-size:12.5px; }
.form-info{
  display:flex; align-items:center; gap:9px; background:var(--primary-tint);
  border:1px solid var(--primary-soft); border-radius:12px; padding:11px 14px;
  font-size:13px; color:var(--navy); font-weight:600; margin-bottom:16px;
}
.lock-icon{ font-size:1rem; }
.validation-message,.text-danger{ color:var(--danger); }
.small{ font-size:12.5px; }

/* buttons (bootstrap-style names mapped to theme) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 20px; font-size:14.5px; font-weight:700; border-radius:11px;
  border:1px solid transparent; cursor:pointer; transition:.15s; text-decoration:none;
  line-height:1.5; font-family:inherit;
}
.btn:hover{ text-decoration:none; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn-primary{ background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 8px 18px -8px rgba(31,111,224,.6); }
.btn-primary:hover{ background:var(--primary-600); border-color:var(--primary-600); color:#fff; transform:translateY(-1px); }
.btn-outline,.btn-outline-primary{ background:#fff; color:var(--primary); border-color:var(--border); }
.btn-outline:hover,.btn-outline-primary:hover{ background:var(--primary-tint); color:var(--primary); border-color:var(--primary); }
.btn-outline-danger{ background:#fff; color:var(--danger); border-color:var(--border); }
.btn-outline-danger:hover{ background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-secondary{ background:var(--surface-2); color:var(--navy); border-color:var(--border); }
.btn-secondary:hover{ background:var(--primary-tint); color:var(--primary); }
.btn-sm.btn,.btn.btn-sm{ padding:8px 14px; font-size:13px; border-radius:10px; }

/* alerts */
.alert{ border-radius:12px; padding:12px 16px; margin-bottom:16px; font-size:13.5px; font-weight:600; }
.alert-danger,.alert-error{ background:var(--danger-soft); border:1px solid #f3c6c6; color:#b23636; }
.alert-success{ background:var(--success-soft); border:1px solid #b6e6d0; color:#0f7a4f; }
.alert-info{ background:var(--primary-tint); border:1px solid var(--primary-soft); color:var(--primary-700); }
.alert-warning{ background:var(--warning-soft); border:1px solid #f0d9a8; color:#9a6816; }

/* tables */
.table{ width:100%; border-collapse:collapse; font-size:14px; }
.table thead th{ text-align:left; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); padding:10px 12px; border-bottom:1px solid var(--border); }
.table tbody td{ padding:12px; border-bottom:1px solid var(--border-2); color:var(--ink); vertical-align:middle; }
.table tbody tr:last-child td{ border-bottom:none; }

/* list-group */
.list-group{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.list-group-item{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:15px 18px; display:flex; align-items:center;
}

/* empty state (legacy) */
.empty-state{ background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius); padding:54px 24px; text-align:center; color:var(--muted); }
.empty-state h3{ color:var(--navy); font-size:18px; font-weight:800; margin-bottom:8px; }
.empty-state p{ margin-bottom:18px; font-size:14px; }
.empty-icon{ font-size:2.5rem; margin-bottom:12px; }

/* document list (legacy) */
.document-list{ display:flex; flex-direction:column; gap:11px; }
.document-row{
  display:flex; align-items:center; gap:15px; background:#fff; border:1px solid var(--border);
  border-radius:14px; padding:15px 18px; text-decoration:none; color:var(--ink); transition:.15s;
}
.document-row:hover{ text-decoration:none; color:var(--ink); border-color:var(--primary-soft); box-shadow:var(--shadow); transform:translateY(-1px); }
.document-row-icon{ font-size:1.4rem; }
.document-row-main{ flex:1; min-width:0; }
.document-row-title{ font-weight:700; font-size:15px; color:var(--navy); }
.document-row-meta{ color:var(--muted); font-size:12.5px; margin-top:3px; }
.document-row-arrow{ color:var(--muted-2); font-size:1.4rem; }

/* document card (detail/edit) */
.document-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:24px; max-width:760px; }
.document-field{ padding:14px 0; border-bottom:1px solid var(--border-2); }
.document-field:last-child{ border-bottom:none; }
.field-label{ font-size:12px; font-weight:800; color:var(--muted-2); text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
.field-value{ display:flex; align-items:center; gap:.5rem; font-size:15px; word-break:break-all; color:var(--ink); }
.field-secret{ font-family:'SF Mono', Consolas, monospace; }
.field-longtext{ display:block; background:var(--surface-2); border-radius:10px; padding:13px; font-family:'SF Mono', Consolas, monospace; font-size:13px; white-space:pre-wrap; margin:0; }
.btn-icon{ background:none; border:none; cursor:pointer; font-size:1rem; padding:.25rem .4rem; border-radius:6px; color:var(--muted); transition:.15s; }
.btn-icon:hover{ background:var(--surface-2); color:var(--navy); }
.btn-icon.btn-danger:hover{ background:var(--danger-soft); color:var(--danger); }

/* field editor */
.field-editor{ background:var(--surface-2); border-radius:12px; padding:13px; margin-bottom:12px; }
.field-editor-row{ display:flex; gap:.5rem; margin-bottom:.5rem; }
.field-title-input{ flex:2; }
.field-type-input{ flex:1; min-width:130px; }
.form-actions{ display:flex; gap:.75rem; margin-top:24px; padding-top:18px; border-top:1px solid var(--border); }

/* template picker (legacy) */
.template-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:14px; }
.template-card{
  display:flex; flex-direction:column; align-items:center; gap:.4rem; background:#fff;
  border:1.5px solid var(--border); border-radius:14px; padding:20px 14px; cursor:pointer;
  transition:.15s; font-family:inherit; text-decoration:none; color:var(--ink);
}
.template-card:hover{ border-color:var(--primary); transform:translateY(-2px); text-decoration:none; }
.template-icon{ font-size:1.75rem; }
.template-title{ font-weight:700; font-size:14px; text-align:center; color:var(--navy); }
.template-meta{ font-size:12px; color:var(--muted); }
.template-card-blank{ border-style:dashed; }

/* upload + storage */
.upload-row{ padding:.5rem 0; }
.storage-info{ margin-top:16px; padding:13px 16px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; font-size:13.5px; color:var(--muted); }

/* security rows (profile) */
.security-row{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--border-2); gap:1rem; }
.security-row:last-of-type{ border-bottom:none; }
.security-label{ font-weight:700; font-size:15px; color:var(--navy); }
.security-meta{ font-size:12.5px; color:var(--muted); margin-top:3px; }

/* mfa */
.mfa-container{ display:flex; flex-direction:column; gap:.75rem; }
.mfa-input{ text-align:center; font-size:1.5rem; letter-spacing:.4rem; font-weight:700; }

/* spinner */
.spinner{ display:inline-block; width:1rem; height:1rem; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* toast (legacy) */
.toast{ position:fixed; bottom:1.5rem; right:1.5rem; background:var(--navy); color:#fff; padding:13px 18px; border-radius:12px; font-size:13.5px; box-shadow:var(--shadow-lg); z-index:1000; }

/* bootstrap utility helpers used in views */
.text-muted{ color:var(--muted) !important; }
.d-inline{ display:inline; }
.d-flex{ display:flex; }
.justify-content-between{ justify-content:space-between; }
.align-items-center{ align-items:center; }
.ms-2{ margin-left:.5rem; }
.me-2{ margin-right:.5rem; }
.mt-2{ margin-top:.5rem; }
.mb-2{ margin-bottom:.5rem; }