/* ============================================================
   FileIt — single global stylesheet (sectioned by component)
   ============================================================ */

/* --- tokens & reset --- */
:root {
  /* Brand palette sampled from static/images/logo.png:
     blue #0c64ae · charcoal #373737 · deep blue #234969 */
  --navy-900: #0b2036;
  --navy-800: #234969;
  --navy-700: #1b598d;
  --ink: #373737;
  --muted: #5b6472;
  --line: #e3e7ee;
  --bg: #f7f9fc;
  --card: #ffffff;
  --accent: #0c64ae;
  --accent-dark: #0a5290;
  --accent-on-dark: #5ea7e0;   /* brand blue lightened for navy backgrounds */
  --danger: #c0392b;
  --warn-bg: #fdf6e3;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(16, 32, 54, .08), 0 8px 24px rgba(16, 32, 54, .06);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }   /* the HTML hidden attribute must beat component display rules */
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
a { color: var(--navy-800); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ============================================================
   APP SHELL — Stripe-style left sidebar (authenticated app only)
   ============================================================ */
body.app { background: var(--bg); }
.app-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 248px; z-index: 50;
  background: #fff; border-right: 1px solid var(--line); color: var(--ink);
  display: flex; flex-direction: column; padding: 18px 14px;
}
.side-logo { display: flex; align-items: center; padding: 4px 8px 20px; }
.side-logo:hover { text-decoration: none; }
.side-logo img { height: 34px; width: auto; display: block; }

.side-nav { display: flex; flex-direction: column; gap: 3px; }
.side-divider { height: 1px; background: var(--line); margin: 9px 12px; }
.side-nav-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 14px 12px 6px; }
.side-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: .95rem; font-weight: 500; }
.side-item i { width: 18px; text-align: center; font-size: .95rem; color: var(--muted); }
.side-item:hover { background: var(--bg); color: var(--navy-900); text-decoration: none; }
.side-item:hover i { color: var(--navy-800); }
.side-item.active { background: #e9f1fb; color: var(--accent-dark); }
.side-item.active i { color: var(--accent); }

.side-bottom { margin-top: auto; }
.side-user { position: relative; padding-top: 10px; border-top: 1px solid var(--line); }
.user-pill { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; border: none; background: transparent; color: var(--ink); cursor: pointer; text-align: left; font-family: inherit; }
.user-pill:hover, .user-pill.open { background: var(--bg); }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.user-pill-meta { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-width: 0; }
.user-pill-name { font-size: .85rem; font-weight: 600; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-pill-sub { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-pill > i { color: var(--muted); font-size: .72rem; }

.user-menu { position: absolute; z-index: 60; bottom: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 10px 34px rgba(11, 32, 54, .22); padding: 6px; }
.user-menu-head { padding: 9px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.user-menu-name { font-weight: 700; color: var(--navy-900); font-size: .9rem; }
.user-menu-mail { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.user-menu a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 7px; color: var(--ink); font-size: .9rem; }
.user-menu a:hover { background: var(--bg); text-decoration: none; }
.user-menu a i { width: 16px; text-align: center; color: var(--muted); }
.user-menu a.danger { color: var(--danger); }
.user-menu a.danger i { color: var(--danger); }

.app-main { margin-left: 248px; min-height: 100vh; }
body.app .container { max-width: none; width: 100%; margin: 0; padding: 30px 44px; }
body.app .page-head { margin-top: 4px; }
.user-avatar { overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-menu .menu-btn { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 7px; color: var(--ink); font-size: .9rem; width: 100%; border: none; background: none; cursor: pointer; text-align: left; font-family: inherit; }
.user-menu .menu-btn:hover { background: var(--bg); }
.user-menu .menu-btn i { width: 16px; text-align: center; color: var(--muted); }

/* --- settings modal (Stripe/Slack-style, section nav) --- */
.modal-overlay { position: fixed; inset: 0; background: rgba(11, 32, 54, .5); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.modal-card { background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(11, 32, 54, .35); position: relative; }
.modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: none; background: #eef1f6; border-radius: 50%; color: var(--muted); cursor: pointer; z-index: 2; }
.modal-close:hover { background: #e2e6ee; color: var(--navy-900); }
.settings-modal { display: grid; grid-template-columns: 196px 1fr; width: min(760px, 100%); max-height: 86vh; overflow: hidden; }
.settings-nav { background: var(--bg); border-right: 1px solid var(--line); padding: 18px 12px; }
.settings-nav-title { font-weight: 700; color: var(--navy-900); padding: 4px 10px 12px; font-size: 1.05rem; }
.set-tab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; background: none; border-radius: 8px; color: var(--ink); font-size: .92rem; cursor: pointer; text-align: left; font-family: inherit; }
.set-tab i { width: 16px; text-align: center; color: var(--muted); }
.set-tab:hover { background: #fff; }
.set-tab.active { background: #e9f1fb; color: var(--accent-dark); font-weight: 600; }
.set-tab.active i { color: var(--accent); }
.settings-panels { padding: 30px 28px 26px; overflow-y: auto; }
.set-panel h3 { color: var(--navy-900); margin-bottom: 16px; }
.photo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.photo-avatar { width: 68px; height: 68px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.3rem; overflow: hidden; flex-shrink: 0; }
.photo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.set-msg { margin-left: 12px; font-size: .85rem; }
.set-msg.ok { color: #0d7a56; }
.set-msg.err { color: var(--danger); }
@media (max-width: 620px) {
  .settings-modal { grid-template-columns: 1fr; }
  .settings-nav { border-right: none; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px; }
  .settings-nav-title { width: 100%; }
  .set-tab { width: auto; }
}

@media (max-width: 820px) {
  .app-sidebar { position: sticky; top: 0; width: auto; flex-direction: row; align-items: center; padding: 10px 14px; border-right: none; border-bottom: 1px solid var(--line); }
  .side-logo { padding: 0 8px 0 0; }
  .side-logo img { height: 26px; }
  .side-nav { flex-direction: row; gap: 2px; margin-left: 6px; }
  .side-nav-label { display: none; }
  .side-item span { display: none; }
  .side-user { margin-top: 0; margin-left: auto; padding-top: 0; border-top: none; }
  .user-pill-meta, .user-pill > i { display: none; }
  .user-pill { padding: 4px; background: transparent; }
  .user-menu { left: auto; right: 0; bottom: auto; top: calc(100% + 8px); width: 240px; }
  .app-main { margin-left: 0; }
  body.app .container { padding: 20px; }
}

/* --- top navigation --- */
.nav {
  background: var(--navy-900);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 62px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
}
.nav-logo:hover { text-decoration: none; }
.nav-logo img { height: 26px; width: auto; display: block; }
.nav-logo em { color: var(--accent-on-dark); font-style: normal; }
.nav-links { display: flex; gap: 18px; align-items: center; margin-left: auto; }
.nav-links a { color: #d6deea; font-size: .95rem; }
.nav-links a:hover { color: #fff; text-decoration: none; }
.nav-links a.active { color: #fff; font-weight: 600; }

/* --- buttons --- */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: none;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.btn:hover { text-decoration: none; filter: brightness(1.05); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-navy { background: var(--navy-800); color: #fff; }
.btn-outline { background: transparent; color: var(--navy-800); border: 1.5px solid var(--navy-800); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 6px 14px; font-size: .85rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* --- hero (marketing) --- */
.hero {
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 70%, var(--navy-700) 100%);
  color: #fff;
  padding: 84px 0 72px;
}
.hero h1 {
  font-size: 2.7rem;
  line-height: 1.15;
  letter-spacing: -.02em;
  max-width: 640px;
}
.hero h1 em { color: var(--accent-on-dark); font-style: normal; }
.hero p.lead {
  margin: 18px 0 30px;
  font-size: 1.15rem;
  color: #c8d3e2;
  max-width: 560px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.country-chips { margin-top: 34px; display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: .9rem;
  color: #e5ecf5;
}

/* --- sections --- */
.section { padding: 64px 0; }
.section.alt { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section h2 { font-size: 1.9rem; letter-spacing: -.02em; color: var(--navy-900); }
.section .sub { color: var(--muted); margin: 8px 0 34px; max-width: 620px; }

/* --- cards & grids --- */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.card h3 { font-size: 1.08rem; color: var(--navy-900); margin-bottom: 8px; }
.card p { font-size: .93rem; color: var(--muted); }
.card .meta { font-size: .8rem; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.badge {
  display: inline-block;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: .75rem;
  font-weight: 600;
}
.badge-live { background: #e6f0fa; color: var(--accent-dark); }
.badge-soon { background: var(--warn-bg); color: #96700e; }
.badge-draft { background: #eef1f6; color: var(--muted); }
.badge-generated { background: #e2f5ec; color: #0d7a56; }
.badge-ready { background: #e8f0fb; color: var(--navy-800); }

/* --- steps (how it works) --- */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 0; }
.step .num {
  display: inline-flex;
  width: 34px; height: 34px;
  align-items: center; justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  margin-bottom: 12px;
}

/* --- pricing --- */
.price-card { text-align: left; position: relative; }
.price-card.featured { border-color: var(--accent); border-width: 2px; }
.price-card .plan { font-weight: 700; color: var(--navy-900); }
.price-card .price { font-size: 2rem; font-weight: 700; margin: 10px 0; color: var(--navy-900); }
.price-card .price small { font-size: .9rem; color: var(--muted); font-weight: 400; }
.price-card ul { list-style: none; margin: 16px 0 22px; }
.price-card li { padding: 5px 0 5px 24px; position: relative; font-size: .92rem; color: var(--ink); }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* --- forms (inputs) --- */
.form-card { max-width: 460px; margin: 56px auto; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 5px; color: var(--navy-900); }
.field .help { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: .95rem;
  font-family: inherit;
  background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy-700);
}
.field.invalid input, .field.invalid select { border-color: var(--danger); }
.field .field-error { font-size: .8rem; color: var(--danger); margin-top: 3px; }
.field-check { display: flex; align-items: center; gap: 8px; }
.field-check input { width: auto; }

/* --- alerts --- */
.alert { border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: .92rem; }
.alert-error { background: #fdecea; color: var(--danger); border: 1px solid #f5c6c0; }
.alert-success { background: #e2f5ec; color: #0d7a56; border: 1px solid #bfe8d9; }
.alert-info { background: #e8f0fb; color: var(--navy-800); border: 1px solid #cdddf3; }

/* --- tables --- */
.table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.table th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fbfcfe; }
.table td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: .93rem; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: #fafbfd; }

/* --- app layout --- */
.page-head { display: flex; align-items: center; justify-content: space-between; margin: 40px 0 24px; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 1.6rem; color: var(--navy-900); letter-spacing: -.02em; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; }
.stat .n { font-size: 1.9rem; font-weight: 700; color: var(--navy-900); }
.stat .l { font-size: .85rem; color: var(--muted); }

/* --- filing editor --- */
.filing-head { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin: 32px 0 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.filing-head .title { font-size: 1.25rem; font-weight: 700; color: var(--navy-900); }
.filing-head .meta { font-size: .85rem; color: var(--muted); }
.filing-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.form-section { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; }
.form-section h3 { color: var(--navy-900); margin-bottom: 4px; }
.form-section .desc { font-size: .88rem; color: var(--muted); margin-bottom: 16px; }
.form-section .fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; margin-top: 14px; }
.form-section .fields .field { margin-bottom: 0; }
.form-section .fields .field.wide { grid-column: 1 / -1; }
#savebar { position: sticky; bottom: 0; background: var(--card); border-top: 1px solid var(--line); padding: 14px 0; margin-top: 10px; }
#savebar .container { display: flex; gap: 10px; align-items: center; }
#savestatus { font-size: .85rem; color: var(--muted); margin-left: auto; }

/* --- vault --- */
.muted { color: var(--muted); font-size: .88rem; }
.crumbs { font-size: .88rem; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crumbs strong { color: var(--navy-900); }
.folder-grid { margin-top: 6px; }
.folder-card { text-align: center; padding: 22px 14px; display: block; }
.folder-card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); transition: transform .12s, border-color .12s; }
.folder-card .folder-icon { font-size: 1.7rem; margin-bottom: 8px; color: var(--accent); }
.folder-tools { display: flex; gap: 12px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.folder-tools form { display: flex; gap: 8px; align-items: center; }
.folder-tools input { padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 8px; font-size: .88rem; font-family: inherit; }
.doc-ic { color: var(--muted); margin-right: 5px; }

/* --- modern uploader --- */
.uploader { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 26px; }
.uploader-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.uploader-title { font-weight: 700; color: var(--navy-900); font-size: 1rem; }
.uploader-title i { color: var(--accent); margin-right: 6px; }
.uploader-close { width: 30px; height: 30px; border: none; background: #eef1f6; border-radius: 50%; color: var(--muted); cursor: pointer; }
.uploader-close:hover { background: #e2e6ee; color: var(--navy-900); }
.dropzone { border: 2px dashed #cdd6e4; border-radius: var(--radius); background: #fafbfe; transition: background .15s, border-color .15s; }
.dropzone.drag { border-color: var(--accent); background: #eef5fc; }
.dz-empty { text-align: center; padding: 40px 20px; }
.dz-icon { width: 66px; height: 66px; margin: 0 auto 14px; border-radius: 50%; background: #e9f1fb; color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }
.dropzone.drag .dz-icon { background: var(--accent); color: #fff; }
.dz-title { font-size: 1.1rem; font-weight: 700; color: var(--navy-900); }
.dz-sub { color: var(--muted); font-size: .9rem; margin: 6px 0 18px; max-width: 460px; margin-left: auto; margin-right: auto; }
.dz-selected { padding: 16px; }
.dz-selected-head { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; color: var(--muted); margin-bottom: 12px; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pv-tile { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: #fff; transition: opacity .15s, border-color .15s; }
.pv-tile.uploading { opacity: .7; }
.pv-tile.done { border-color: #bfe8d9; background: #f4fcf8; }
.pv-tile.failed { border-color: #f5c6c0; background: #fdf4f3; }
.pv-thumb { height: 96px; border-radius: 7px; overflow: hidden; background: #f2f5fa; display: flex; align-items: center; justify-content: center; }
.pv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pv-thumb-ic { font-size: 2rem; color: var(--navy-700); }
.pv-name { font-size: .82rem; color: var(--navy-900); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-meta { font-size: .74rem; color: var(--muted); }
.pv-remove { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(11,32,54,.62); color: #fff; cursor: pointer; font-size: .72rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.pv-remove:hover { background: var(--danger); }
.pv-status { font-size: .76rem; margin-top: 6px; min-height: 1.1em; }
.pv-status a { color: #0d7a56; }
.pv-tile.failed .pv-status { color: var(--danger); }

.uploader-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 4px 4px 0; }
.dest { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dest-label { font-size: .85rem; color: var(--muted); font-weight: 600; }
.dest-select { padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 8px; font-size: .9rem; font-family: inherit; background: #fff; max-width: 240px; }
.dest-act { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1.5px solid var(--line); background: #fff; border-radius: 8px; color: var(--navy-800); cursor: pointer; font-size: .85rem; font-weight: 600; font-family: inherit; }
.dest-act:hover { border-color: var(--accent); color: var(--accent); }
.dest-act i { color: var(--accent); }
.inline-forms { margin-top: 10px; padding: 0 4px; }
.newfolder-inline { display: inline-flex; align-items: center; gap: 8px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.newfolder-inline > i { color: var(--accent); }
.newfolder-inline input { padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 8px; font-size: .9rem; font-family: inherit; min-width: 240px; }
.btn-upload { font-size: 1rem; padding: 12px 26px; }
.upload-done { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 12px 16px; background: #e2f5ec; border: 1px solid #bfe8d9; border-radius: 8px; color: #0d7a56; font-size: .95rem; }

/* --- vault: Dropbox-style two-pane (folder tree + contents) --- */
.vault-2col { display: grid; grid-template-columns: 244px 1fr; gap: 20px; align-items: start; margin-top: 6px; }
.folder-tree { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; position: sticky; top: 20px; }
.tree-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; color: var(--ink); font-size: .9rem; }
.tree-item:hover { background: var(--bg); text-decoration: none; }
.tree-item i { color: var(--muted); width: 16px; text-align: center; }
.tree-item.active { background: #e9f1fb; color: var(--accent-dark); font-weight: 600; }
.tree-item.active i { color: var(--accent); }
.tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-count { font-size: .72rem; color: var(--muted); background: var(--bg); border-radius: 10px; padding: 1px 7px; }
.folder-contents { min-width: 0; }
.vault-table { margin: 0; }
.vault-table td:first-child a { color: var(--navy-900); font-weight: 500; }
.vault-table tr.row-folder td:first-child a { font-weight: 600; }
.row-ic { width: 18px; text-align: center; margin-right: 7px; color: var(--muted); }
.row-ic-folder { color: var(--accent); }
.empty-contents { text-align: center; padding: 54px 20px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.empty-contents i,
.empty-contents svg { font-size: 3.25rem; color: #c3cfdf; display: block; margin: 0 auto 16px; }

@media (max-width: 760px) {
  .vault-2col { grid-template-columns: 1fr; }
  .folder-tree { position: static; }
}

/* --- expiry badges & radar --- */
.badge-expired { background: #fdecea; color: var(--danger); }
.badge-warning { background: var(--warn-bg); color: #96700e; }
.badge-ok { background: #e2f5ec; color: #0d7a56; }
.radar-h { font-size: 1.15rem; margin-bottom: 14px; color: var(--navy-900); }
.radar-h-danger { color: var(--danger); }
.radar-h-warn { color: #96700e; }
.stat-danger .n { color: var(--danger); }
.stat-warn .n { color: #96700e; }

/* --- document page --- */
.doc-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: start; }
.doc-preview { padding: 12px; grid-column: 1; }
/* Pin the right column (Details + Reminders) to the top, spanning the left
   column's preview + attachments rows, so Details isn't pushed down. */
.doc-meta { grid-column: 2; grid-row: 1 / span 2; }
/* Document-page action bar — small icon buttons (Preview / Download / … / Archive) */
.doc-actbar { display: flex; align-items: center; gap: 6px; }
.doc-actbar form { margin: 0; }
.act-btn { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer;
  text-decoration: none; font-size: 1rem; }
.act-btn:hover { background: #eef1f6; color: var(--navy-900); border-color: var(--accent); text-decoration: none; }
.act-btn.act-danger:hover { color: var(--danger); border-color: var(--danger); background: #fdecea; }
.doc-preview img { width: 100%; border-radius: 6px; display: block; }
.doc-preview iframe { width: 100%; height: 520px; border: none; border-radius: 6px; }
.doc-filemeta { font-size: .8rem; color: var(--muted); padding: 10px 4px 2px; }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.doc-attach .attach-list { list-style: none; margin: 0 0 14px; }
.doc-attach .attach-list li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.doc-attach .attach-list li:last-child { border-bottom: none; }
.attach-ic { color: var(--navy-700); font-size: 1rem; }
.attach-name { flex: 1; color: var(--navy-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-dl { color: var(--muted); }
.attach-dl:hover { color: var(--accent); }
.attach-del { border: none; background: none; color: var(--muted); cursor: pointer; padding: 2px 4px; }
.attach-del:hover { color: var(--danger); }
.attach-list li form { display: inline-flex; }
.attach-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reminder-list { list-style: none; }
.reminder-list li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.reminder-list li:last-child { border-bottom: none; }
.rem-status { display: inline-block; min-width: 84px; font-size: .75rem; font-weight: 600; border-radius: 6px; padding: 2px 8px; margin-right: 8px; text-align: center; }
.rem-0 { background: #e8f0fb; color: var(--navy-800); }
.rem-1 { background: #e2f5ec; color: #0d7a56; }
.rem-2 { background: #eef1f6; color: var(--muted); }
.rem-3 { background: #eef1f6; color: var(--muted); text-decoration: line-through; }
.linklike { background: none; border: none; color: var(--navy-800); cursor: pointer; font-size: .85rem; text-decoration: underline; padding: 0; font-family: inherit; }

/* --- members --- */
.member-card { margin-bottom: 12px; padding: 16px 20px; }
.member-card summary { cursor: pointer; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.member-card summary::-webkit-details-marker { display: none; }
.member-card .member-name { font-weight: 700; color: var(--navy-900); }
.member-edit { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }

/* --- footer --- */
.footer { background: var(--navy-900); color: #9fb0c6; margin-top: 72px; padding: 44px 0 30px; font-size: .9rem; }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 26px; }
.footer h4 { color: #fff; font-size: .95rem; margin-bottom: 10px; }
.footer-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.footer-brand img { height: 22px; width: auto; }
.footer-brand .wordmark { color: #fff; font-weight: 700; font-size: 1.05rem; }
.footer-brand .wordmark em { color: var(--accent-on-dark); font-style: normal; }
.footer a { color: #9fb0c6; display: block; padding: 2px 0; }
.footer a:hover { color: #fff; text-decoration: none; }
.footer .fine { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 18px; font-size: .8rem; }

/* --- responsive --- */
@media (max-width: 860px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 2.1rem; }
  .stats { grid-template-columns: 1fr; }
  .doc-layout { grid-template-columns: 1fr; }
  .doc-meta { grid-column: 1; grid-row: auto; }
  .fields-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .nav-links { gap: 12px; }
  .nav-links a.nav-secondary { display: none; }
}

/* ============================================================
   Roles: admin panel, pills, impersonation, team (ADR-0013)
   ============================================================ */

/* impersonation banner */
.imp-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #3a2a00; color: #ffe9b0; border: 1px solid #6b5100;
  padding: 10px 16px; border-radius: 10px; margin-bottom: 18px; font-size: .92rem;
}
.imp-banner a { color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.imp-banner a:hover { text-decoration: underline; }

/* admin panel */
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.admin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; flex-wrap: wrap; }
.atab {
  padding: 9px 16px; text-decoration: none; color: var(--muted); font-weight: 600;
  font-size: .92rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.atab:hover { color: var(--ink); }
.atab.on { color: var(--accent); border-bottom-color: var(--accent); }

/* admin left sub-nav */
.admin-layout { display: grid; grid-template-columns: 210px 1fr; gap: 26px; align-items: start; margin-top: 18px; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 84px; }
.anav {
  display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 9px;
  text-decoration: none; color: var(--muted); font-weight: 600; font-size: .92rem;
  border: 1px solid transparent; transition: background .12s, color .12s;
}
.anav i { width: 18px; text-align: center; color: var(--muted); font-size: 1rem; }
.anav:hover { background: var(--hover, #f1f4f9); color: var(--ink); }
.anav:hover i { color: var(--accent); }
.anav.on { background: var(--accent-soft, #e8f1fb); color: var(--accent); border-color: var(--accent-line, #cfe2f6); }
.anav.on i { color: var(--accent); }
.admin-content { min-width: 0; }
@media (max-width: 760px) {
  .admin-layout { grid-template-columns: 1fr; gap: 14px; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; position: static; }
  .anav span { display: none; }
  .anav { padding: 9px 12px; }
}

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; position: relative;
}
.kpi-ic { color: var(--accent); font-size: 1.1rem; margin-bottom: 6px; }
.kpi-val { font-size: 1.9rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.kpi-lbl { color: var(--muted); font-size: .82rem; margin-top: 4px; }
.kpi-warn .kpi-val { color: #b0620a; }
.kpi-warn .kpi-ic { color: #b0620a; }

.admin-table td, .admin-table th { vertical-align: middle; }
.admin-table .admin-actions { text-align: right; white-space: nowrap; }
/* Let row kebab menus escape the table box (the base .table clips with
   overflow:hidden for its rounded corners; re-round the corner cells here). */
.admin-table { overflow: visible; }
.admin-table tr:first-child th:first-child { border-top-left-radius: var(--radius); }
.admin-table tr:first-child th:last-child { border-top-right-radius: var(--radius); }
.admin-table tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
.admin-table tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }

/* status / role pills (data-driven, Fasana convention) */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
}
.pill.admin        { background: rgba(143,106,0,.14);  color: #8a6a00; }
.pill.subscriber   { background: rgba(12,100,174,.12); color: var(--accent); }
.pill.subuser      { background: #eef1f6;              color: var(--muted); }
.pill.active       { background: rgba(13,122,86,.14);  color: #0d7a56; }
.pill.pending      { background: rgba(176,98,10,.14);  color: #b0620a; }
.pill.disabled     { background: rgba(204,47,66,.12);  color: #c22f42; }
.pill.access-full  { background: rgba(13,122,86,.12);  color: #0d7a56; }
.pill.access-view  { background: #eef1f6;              color: var(--muted); }

/* kebab row menu (native <details>) */
.kebab { position: relative; display: inline-block; }
.kebab > summary {
  list-style: none; cursor: pointer; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
  font-size: 1.15rem; user-select: none;
}
.kebab > summary::-webkit-details-marker { display: none; }
.kebab > summary:hover { background: #eef1f6; color: var(--ink); }
.kebab-menu {
  position: absolute; right: 0; top: 34px; z-index: 40; min-width: 184px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(16,32,54,.16); padding: 6px; text-align: left;
}
.kebab-menu form { margin: 0; }
.kebab-menu button {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 8px 10px; border-radius: 7px; font-size: .88rem; color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
.kebab-menu button:hover { background: #f2f5fa; }
.kebab-menu button.danger { color: #c22f42; }
.kebab-menu button i { width: 15px; text-align: center; }

/* ---------- Storage quota: sidebar usage bar + buy panel (ADR-0015) ---------- */
.side-quota { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px;
  background: rgba(12,100,174,.07); border: 1px solid rgba(12,100,174,.14); cursor: pointer; margin-bottom: 10px; }
.side-quota:hover { background: rgba(12,100,174,.12); border-color: rgba(12,100,174,.28); }
.side-quota-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.side-quota-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.side-quota-label i { margin-right: 5px; }
.side-quota-pct { font-size: 11px; font-weight: 700; color: var(--accent); }
.side-quota-bar { height: 6px; background: rgba(12,100,174,.13); border-radius: 999px; overflow: hidden; }
.side-quota-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #5ea7e0); border-radius: 999px; min-width: 2px; transition: width .2s; }
.side-quota-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--muted); }
.side-quota.is-warn .side-quota-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.side-quota.is-warn .side-quota-pct { color: #d97706; }
.side-quota.is-danger .side-quota-fill { background: linear-gradient(90deg, #f87171, #fca5a5); }
.side-quota.is-danger .side-quota-pct { color: #ef4444; }

.store-usage { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.store-usage-head { display: flex; justify-content: space-between; font-size: .9rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.store-pct { color: var(--accent); }
.store-bar { height: 8px; background: rgba(12,100,174,.12); border-radius: 999px; overflow: hidden; }
.store-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #5ea7e0); border-radius: 999px; min-width: 3px; transition: width .25s; }
.store-usage.is-warn .store-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.store-usage.is-warn .store-pct { color: #d97706; }
.store-usage.is-danger .store-fill { background: linear-gradient(90deg, #f87171, #fca5a5); }
.store-usage.is-danger .store-pct { color: #ef4444; }
.store-pack { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.store-pack-title { font-weight: 700; color: var(--ink); }
.store-pack-buy { display: flex; align-items: center; gap: 12px; }
.store-price { font-weight: 700; font-size: 1.1rem; color: var(--navy-900); }
.store-history { margin-top: 18px; }
.store-history-h { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
.store-txn { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .86rem; color: var(--ink); }

/* ---------- Context menu (Wirasat-style: files + folders) ---------- */
.ctx { position: fixed; z-index: 300; min-width: 194px; background: #fff; border: 1px solid var(--line);
  border-radius: 11px; box-shadow: 0 4px 10px rgba(11,32,54,.14), 0 12px 34px rgba(11,32,54,.16); padding: 6px; }
.ctx[hidden] { display: none; }
.ctx-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: none;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); padding: 9px 11px; border-radius: 8px; cursor: pointer; }
.ctx-item i { width: 16px; text-align: center; color: var(--muted); }
.ctx-item:hover { background: #eaf2fb; }
.ctx-item:hover i { color: var(--accent); }
.ctx-item.danger { color: var(--danger); }
.ctx-item.danger i { color: var(--danger); }
.ctx-item.danger:hover { background: #fdecea; }
.ctx-sep { height: 1px; background: var(--line); margin: 5px 6px; }

/* drag & drop: move documents into folders */
tr.doc-row[draggable="true"] { cursor: grab; }
tr.dragging { opacity: .4; }
.drop-target { background: #eaf2fb !important; outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: 6px; }
.tree-item.drop-target { outline-offset: -2px; }

.row-end { width: 44px; text-align: right; }
.row-kebab { border: 1px solid transparent; background: none; width: 30px; height: 30px; border-radius: 8px;
  cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; display: inline-flex; align-items: center;
  justify-content: center; opacity: 0; transition: opacity .12s; }
.vault-table tr:hover .row-kebab { opacity: 1; }
.row-kebab:hover { background: #eef1f6; border-color: var(--line); color: var(--navy-900); }

.ctx-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 320;
  background: var(--navy-900); color: #fff; font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(11,32,54,.3); }
.ctx-toast[hidden] { display: none; }

/* ---------- Document preview modal (image / PDF / Word / Excel) ---------- */
.pv-overlay { z-index: 260; padding: 24px; }
.pv-card { background: #fff; border-radius: 14px; width: min(980px, 100%); height: min(88vh, 100%);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 70px rgba(11,32,54,.4); }
.pv-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.pv-title { flex: 1; font-family: inherit; font-weight: 600; color: var(--ink); font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-icon { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); background: #eef1f6; border: none; cursor: pointer; text-decoration: none; }
.pv-icon:hover { background: #e2e6ee; color: var(--navy-900); }
.pv-body { flex: 1; overflow: auto; background: #eef1f6; position: relative; }
.pv-img { display: block; max-width: 100%; margin: 0 auto; }
.pv-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.pv-doc { background: #fff; max-width: 820px; margin: 22px auto; padding: 44px 52px;
  box-shadow: 0 1px 6px rgba(11,32,54,.12); color: #222; line-height: 1.55; }
.pv-doc img { max-width: 100%; }
.pv-doc h1, .pv-doc h2, .pv-doc h3 { color: var(--navy-900); }
.pv-doc table { border-collapse: collapse; margin: 10px 0; }
.pv-doc td, .pv-doc th { border: 1px solid #ccc; padding: 5px 9px; }
.pv-sheets { padding: 16px; }
.pv-sheet-name { font-weight: 700; margin: 14px 0 6px; color: var(--navy-900); font-size: .9rem; }
.pv-sheets table { border-collapse: collapse; background: #fff; font-size: .84rem; margin-bottom: 8px; }
.pv-sheets td, .pv-sheets th { border: 1px solid var(--line); padding: 4px 9px; white-space: nowrap; }
.pv-loading, .pv-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 14px; color: var(--muted); padding: 40px; text-align: center; }
.pv-fallback i { font-size: 2.4rem; opacity: .5; }

/* ---------- People module (cards) ---------- */
/* Add/Edit person modal — a plain padded form card (settings modal gets its own
   spacing from the grid; this variant restores padding + width for the form). */
.modal-form { width: min(440px, 100%); max-height: 88vh; overflow-y: auto; padding: 26px 24px; }
.modal-form h3 { margin: 0 0 18px; padding-right: 28px; font-size: 1.2rem; color: var(--navy-900); }
.modal-form .btn-primary { margin-top: 4px; }

.people-tools { display: flex; align-items: center; gap: 12px; }
/* The bordered box is the container; the icon sits inside as a flex item and the
   input is borderless/transparent — so the search icon is always inside the box. */
.people-search { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line);
  border-radius: 9px; background: #fff; padding: 0 12px; }
.people-search:focus-within { border-color: var(--accent); }
.people-search i { color: var(--muted); font-size: .85rem; pointer-events: none; flex-shrink: 0; }
.people-search input {
  border: none; outline: none; background: transparent; padding: 10px 0; font-size: .9rem; min-width: 210px;
  -webkit-appearance: none; appearance: none;
}
.people-search input::-webkit-search-decoration,
.people-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.people-search input:focus { outline: none; border-color: var(--accent); }

.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.person-card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px 18px 18px; text-align: center;
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.person-card:hover { box-shadow: 0 10px 26px rgba(16,32,54,.10); border-color: #cdd6e4; transform: translateY(-2px); }
.person-hit { position: absolute; inset: 0; z-index: 2; border-radius: 14px; }
/* Clicking the avatar/name/type opens that person's/entity's vault folder. */
.person-open { display: block; text-decoration: none; color: inherit; }
.person-open:hover { text-decoration: none; }
.person-open:hover .person-name { color: var(--accent); }
.person-menu { position: absolute; top: 8px; right: 8px; z-index: 3; }

.person-avatar {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 12px;
  background: var(--accent); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 1.5rem; font-weight: 700; overflow: hidden;
}
.person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.entity-avatar { background: var(--navy-800); border-radius: 14px; }
.entity-avatar i { font-size: 1.5rem; }
.person-name { font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.person-rel { color: var(--accent); font-size: .82rem; font-weight: 600; margin-top: 2px; }
.person-stats { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.person-docs { color: var(--muted); font-size: .82rem; }

.people-empty {
  grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 48px 20px;
}
.people-empty i { font-size: 2rem; opacity: .5; display: block; margin-bottom: 10px; }

.person-menu > summary { background: rgba(255,255,255,.85); }
.kebab-menu a {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px;
  font-size: .88rem; color: var(--ink); text-decoration: none;
}
.kebab-menu a:hover { background: #f2f5fa; }
.kebab-menu a i, .kebab-menu button i { width: 15px; text-align: center; }
.kebab-menu button[disabled] { opacity: .45; cursor: not-allowed; }

@media (max-width: 560px) {
  .people-search input { min-width: 0; width: 100%; }
  .people-tools { flex-wrap: wrap; }
}

/* team management (settings modal) */
.team-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.team-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.team-who { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.team-name { font-weight: 600; color: var(--ink); }
.team-mail { font-size: .8rem; color: var(--muted); }
.team-acts { display: flex; gap: 12px; flex-shrink: 0; }
.team-acts .linklike { font-size: .82rem; }
.team-count { font-size: .82rem; margin-bottom: 14px; }
.team-add { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; }
.linklike.danger { color: #c22f42; }

/* ---------- Duotone icons in FileIt blue (fa-duotone fa-light) ---------- */
.fa-duotone {
  --fa-primary-color: var(--accent);
  --fa-secondary-color: var(--accent);
  --fa-secondary-opacity: 0.32;
}
/* Keep icons legible where they sit on a filled/colored surface, or must match
   the element's own colour (white on buttons, red on danger items). */
.btn-primary .fa-duotone, .btn-navy .fa-duotone, .btn-danger .fa-duotone,
.entity-avatar .fa-duotone, .fab .fa-duotone,
.danger .fa-duotone, .ctx-item.danger .fa-duotone, .kebab-menu .danger .fa-duotone,
.imp-banner .fa-duotone, .side-logo .fa-duotone {
  --fa-primary-color: currentColor;
  --fa-secondary-color: currentColor;
}

/* ============================================================
   Reminders module — recurring bills / transfers (ADR-0017)
   ============================================================ */
.rem-cols { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; align-items: start; margin-top: 6px; }
.rem-col-left { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
@media (max-width: 900px) { .rem-cols { grid-template-columns: 1fr; } }
.rem-card-topright { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* upcoming timeline */
.rem-upcoming { display: flex; flex-direction: column; gap: 8px; }
.rem-occ { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 14px; }
.rem-occ.overdue { border-color: #f3c0c6; background: #fdf3f4; }
.rem-occ.done { opacity: .58; }
.rem-occ.done .rem-occ-title { text-decoration: line-through; }
.rem-check { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 1.25rem; padding: 0; line-height: 1; flex-shrink: 0; }
.rem-check:hover { color: var(--accent); }
.rem-occ.done .rem-check { color: var(--ok); }
.rem-occ.overdue .rem-check { color: var(--danger); }
.rem-check[disabled] { opacity: .4; cursor: default; }
.rem-occ-date { text-align: center; width: 62px; flex-shrink: 0; background: #f1f7ff; border: 1px solid #d9e7f7; border-radius: 9px; padding: 7px 3px; }
.rem-occ-day { display: block; font-weight: 800; font-size: 1.5rem; color: var(--accent); line-height: 1; }
.rem-occ-mon { display: block; font-size: .7rem; font-weight: 700; color: var(--navy-900); line-height: 1.25; margin-top: 3px; }
.rem-occ-yr { display: block; font-size: .64rem; color: var(--muted); line-height: 1.15; }
.rem-occ.overdue .rem-occ-date { background: #fdeef0; border-color: #f3c9cf; }
.rem-occ.overdue .rem-occ-day { color: var(--danger); }
.rem-occ-main { flex: 1; min-width: 0; }
.rem-occ-title { font-weight: 600; color: var(--ink); font-size: .95rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rem-occ-sub { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.rem-overdue-lbl { color: var(--danger); font-weight: 700; }
.rem-occ-amt { font-weight: 700; color: var(--navy-900); font-size: .9rem; white-space: nowrap; }

/* rule cards */
.rem-list { display: flex; flex-direction: column; gap: 10px; }
.rem-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.rem-card.is-paused { opacity: .7; }
.rem-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rem-card-title { font-weight: 700; color: var(--navy-900); }
.rem-paused-lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: #eef1f6; padding: 2px 7px; border-radius: 999px; }
.rem-freq { font-size: .82rem; color: var(--muted); margin-top: 3px; }
.rem-card-mid { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: .86rem; }
.rem-amt { font-weight: 700; color: var(--navy-900); }
.rem-next { color: var(--accent); font-weight: 600; }
.rem-next i { margin-right: 4px; }
.rem-actions { display: flex; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.rem-actions .linklike { font-size: .82rem; }

/* category chips */
.rem-cat { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; background: #eef1f6; color: var(--muted); white-space: nowrap; }
.cat-bill { background: rgba(192,57,43,.12); color: #c0392b; }
.cat-transfer { background: rgba(12,100,174,.12); color: var(--accent); }
.cat-payment, .cat-salary { background: rgba(13,122,86,.12); color: #0d7a56; }
.cat-subscription { background: rgba(124,58,237,.12); color: #7c3aed; }
.cat-rent { background: rgba(176,98,10,.14); color: #b0620a; }
.cat-loan { background: rgba(20,120,120,.14); color: #147878; }

/* ---------- Dashboard charts (Home) ---------- */
.dash-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin: 22px 0; }
.chart-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.chart-title { font-weight: 700; color: var(--navy-900); font-size: .92rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.chart-title i { color: var(--accent); }
.chart-wrap { position: relative; height: 210px; }
.chart-foot { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 10px; }

/* ---- Home: 50/50 split (expiring soon + recent) left · month calendar right ---- */
.home-split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; margin-top: 6px; }
.home-split-left { min-width: 0; }
.home-split-right { min-width: 0; position: sticky; top: 18px; }
@media (max-width: 960px) { .home-split { grid-template-columns: 1fr; } .home-split-right { position: static; } }

.home-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
.home-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s, transform .06s; }
.home-item:hover { border-color: #cfe2f6; box-shadow: 0 4px 14px rgba(12,100,174,.08); }
.home-item:active { transform: translateY(1px); }
.home-item-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: #eaf3fd; color: var(--accent); font-size: .95rem; }
.home-item-icon-muted { background: #f0f2f6; color: var(--muted); }
.home-item-icon-danger { background: #fdeaea; color: #c0392b; }
.home-item-amt { font-size: .8rem; font-weight: 700; color: var(--navy-900); white-space: nowrap; }
.home-item-od { color: #c0392b; font-weight: 700; }
.home-item-main { flex: 1; min-width: 0; }
.home-item-title { font-weight: 700; color: var(--navy-900); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-item-sub { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.home-item-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.home-item-date { font-size: .72rem; color: var(--muted); white-space: nowrap; }

.home-cal .rem-cal-grid { margin-bottom: 14px; }
.home-cal-legend { display: flex; gap: 18px; padding: 12px 16px 0; }
.hcal-lg { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--muted); }
.hcal-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.hcal-dot.dot-rem { background: #e8f1fb; border-left: 3px solid var(--accent); }
.hcal-dot.dot-exp { background: #fff2e2; border-left: 3px solid #d98218; }

/* ============================================================
   MARKETING SITE v2 — hero video landing (NativeSync-style, FileIt blue)
   ============================================================ */
.home-hero-dark .nav { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; border-bottom: none; }
.home-hero-dark .nav .nav-logo span,
.home-hero-dark .nav .nav-links a { color: #fff; }
.home-hero-dark .nav .nav-links a.btn-primary { color: #fff; }
.home-hero-dark .nav .nav-links a:not(.btn):hover { color: #cfe1f4; }

.m-container { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

/* ---- hero ---- */
.hero-v2 { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  background: var(--navy-900); color: #fff; overflow: hidden; isolation: isolate; }
.hero-v2-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 120% at 80% 0%, #16324e 0%, #0b2036 55%); }
.hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-v2-scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(11,32,54,.86) 0%, rgba(11,32,54,.66) 42%, rgba(11,32,54,.30) 78%, rgba(11,32,54,.12) 100%),
  linear-gradient(180deg, rgba(11,32,54,.5) 0%, rgba(11,32,54,0) 26%, rgba(11,32,54,0) 68%, rgba(11,32,54,.45) 100%); }
.hero-v2-inner { position: relative; z-index: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 150px 32px 110px; }
/* No overlay filter over the video — keep text legible with a shadow on the text only. */
.hero-v2-copy { max-width: 660px; text-shadow: 0 2px 16px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45); }
.hero-v2-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 600;
  letter-spacing: .02em; color: #cfe1f4; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  padding: 7px 14px; border-radius: 999px; }
.hero-v2-pulse { width: 8px; height: 8px; border-radius: 50%; background: #5ea7e0; box-shadow: 0 0 0 0 rgba(94,167,224,.6); animation: heroPulse 2s infinite; }
@keyframes heroPulse { 0% { box-shadow: 0 0 0 0 rgba(94,167,224,.55); } 70% { box-shadow: 0 0 0 9px rgba(94,167,224,0); } 100% { box-shadow: 0 0 0 0 rgba(94,167,224,0); } }
.hero-v2-title { font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.08; font-weight: 800; margin: 20px 0 0; letter-spacing: -.02em; }
.hero-v2-title .grad { background: linear-gradient(90deg, #5ea7e0, #9ad0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-v2-lede { font-size: 1.12rem; line-height: 1.62; color: #d6e2ee; margin: 20px 0 0; max-width: 600px; }
.hero-v2-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-v2-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; margin: 26px 0 0; padding: 0; }
.hero-v2-proof li { font-size: .92rem; color: #cfe1f4; display: flex; align-items: center; gap: 8px; }
.hero-v2-proof i { color: #5ea7e0; }

/* ---- buttons ---- */
.btn-v2 { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 11px; font-weight: 600;
  font-size: .96rem; text-decoration: none; transition: transform .12s, box-shadow .12s, background .12s; border: 1px solid transparent; }
.btn-v2:hover { text-decoration: none; transform: translateY(-1px); }
.btn-v2-primary { background: #fff; color: var(--navy-900); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.btn-v2-primary:hover { background: #eaf2fb; color: var(--navy-900); }
.btn-v2-ghost { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.22); }
.btn-v2-ghost:hover { background: rgba(255,255,255,.18); color: #fff; }
.btn-v2-ghost-dark { background: transparent; color: var(--accent); border-color: var(--line); }
.btn-v2-ghost-dark:hover { background: var(--bg); color: var(--accent-dark); }

/* ---- section rhythm ---- */
.section-v2 { padding: 92px 0; }
.section-v2-alt { background: #fafbfd; }
.section-v2-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.eyebrow-v2 { display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--accent); margin-bottom: 12px; }
.eyebrow-v2.on-dark { color: #7fb6e6; }
.title-v2 { font-size: clamp(1.7rem, 3.3vw, 2.4rem); line-height: 1.16; font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; }
.title-v2.on-dark { color: #fff; }
.lede-v2 { font-size: 1.05rem; line-height: 1.6; color: var(--muted); margin-top: 14px; }
.lede-v2.on-dark { color: #cbd8e6; }

/* ---- trust strip ---- */
.strip-v2 { background: #f6f8fb; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.strip-v2 .m-container { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.strip-v2-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.strip-v2-langs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; }
.strip-v2-langs li { font-size: .92rem; font-weight: 600; color: var(--navy-800); display: flex; align-items: center; gap: 8px; }
.strip-v2-langs i { color: var(--accent); }

/* ---- how it works ---- */
.how-v2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.how-v2-step { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; transition: transform .15s, box-shadow .15s; }
.how-v2-step:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.how-v2-num { font-size: 1.6rem; font-weight: 800; color: var(--accent); opacity: .35; }
.how-v2-body h3 { color: var(--navy-900); font-size: 1.12rem; margin: 8px 0 8px; display: flex; align-items: center; gap: 9px; }
.how-v2-body h3 i { color: var(--accent); }
.how-v2-body p { color: var(--muted); font-size: .95rem; line-height: 1.55; }

/* ---- quote band ---- */
.quote-band { background: var(--navy-900); color: #fff; padding: 60px 0; }
.quote-big { text-align: center; font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -.01em; color: #eaf2fb; max-width: 900px; margin: 0 auto; }

/* ---- bento ---- */
.bento-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bento-v2-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; transition: transform .15s, box-shadow .15s; }
.bento-v2-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.bento-v2-card-lg { grid-column: span 2; background: linear-gradient(135deg, #0c64ae, #16324e); color: #fff; border-color: transparent; }
.bento-v2-icon { width: 46px; height: 46px; border-radius: 12px; background: #eaf2fb; color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 14px; }
.bento-v2-card-lg .bento-v2-icon { background: rgba(255,255,255,.16); color: #fff; }
.bento-v2-card h3 { color: var(--navy-900); font-size: 1.15rem; margin-bottom: 8px; }
.bento-v2-card-lg h3 { color: #fff; font-size: 1.4rem; }
.bento-v2-card p { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.bento-v2-card-lg p { color: #d6e2ee; }

/* ---- who ---- */
.who-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.who-card { text-align: center; padding: 28px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.who-card i { font-size: 1.9rem; color: var(--accent); }
.who-card h3 { color: var(--navy-900); font-size: 1.1rem; margin: 14px 0 8px; }
.who-card p { color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* ---- security band ---- */
.security-band { background: var(--navy-900); color: #fff; padding: 84px 0; }
.security-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
.security-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.security-list li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #eaf2fb; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 14px 16px; font-size: .92rem; }
.security-list i { color: #5ea7e0; font-size: 1.05rem; }

/* ---- stats ---- */
.stat-v2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat-v2-n { font-size: 1.9rem; font-weight: 800; color: var(--accent); letter-spacing: -.01em; }
.stat-v2-l { color: var(--muted); font-size: .9rem; margin-top: 6px; }

/* ---- FAQ ---- */
.faq-v2 { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px; }
.faq-item summary { cursor: pointer; font-weight: 600; color: var(--navy-900); padding: 14px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; font-weight: 400; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { color: var(--muted); font-size: .95rem; line-height: 1.6; padding: 0 0 16px; margin: 0; }

/* ---- CTA band ---- */
.cta-v2 { padding: 90px 0; text-align: center; background: radial-gradient(120% 120% at 50% 0%, #eaf2fb 0%, #fff 60%); }
.cta-v2-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; }
.cta-v2-lede { color: var(--muted); font-size: 1.08rem; margin: 14px auto 30px; max-width: 560px; }

@media (max-width: 900px) {
  .how-v2, .bento-v2, .who-grid, .stat-v2-grid { grid-template-columns: 1fr 1fr; }
  .bento-v2-card-lg { grid-column: span 2; }
  .security-inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .how-v2, .bento-v2, .who-grid, .stat-v2-grid { grid-template-columns: 1fr; }
  .bento-v2-card-lg { grid-column: span 1; }
  .security-list { grid-template-columns: 1fr; }
  .hero-v2-inner { padding: 120px 22px 80px; }
  .hero-v2-scrim { background: linear-gradient(180deg, rgba(11,32,54,.5) 0%, rgba(11,32,54,.75) 60%, rgba(11,32,54,.9) 100%); }
}

/* Match SweetAlert2 inputs/selects to the app's field styling (Create Folder dialog, etc.) */
.swal2-popup .swal2-input,
.swal2-popup .swal2-select {
  width: 100%; box-sizing: border-box; height: auto; margin: 6px 0 0;
  padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px;
  font-size: .95rem; font-family: inherit; color: var(--ink); background: #fff; box-shadow: none;
}
.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-select:focus { outline: none; border-color: var(--navy-700); box-shadow: none; }

/* ---------- Upload progress bar ---------- */
.upload-progress { padding: 20px 22px; }
.up-prog-head { font-weight: 600; color: var(--navy-900); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.up-prog-head i { color: var(--accent); }
.up-prog-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-prog-bar { height: 10px; background: #eaf0f7; border-radius: 999px; overflow: hidden; }
.up-prog-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #5ea7e0); transition: width .25s ease; }
.up-prog-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* folder star (Vault) */
.tree-star { color: #e8b93c; font-size: .72rem; margin-left: 4px; }
.row-star { color: #e8b93c; font-size: .8rem; margin-left: 6px; }
.btn-icon { padding-left: 12px; padding-right: 12px; }
.btn-icon i { margin: 0; }
#starFilterBtn.on { background: #fff7e0; border-color: #e8b93c; color: #96700e; }
#starFilterBtn.on i { color: #e8b93c; }

/* vault search box */
/* Border sits on the container so the icon is unambiguously INSIDE the box. */
.vault-search {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--card);
  transition: border-color .12s, box-shadow .12s;
}
.vault-search-results {
  position: absolute; top: calc(100% + 6px); right: 0; width: min(420px, 88vw);
  max-height: 60vh; overflow-y: auto; background: #fff; border: 1px solid var(--line);
  border-radius: 11px; box-shadow: 0 16px 40px rgba(16,32,54,.18); padding: 6px; z-index: 60; text-align: left;
}
.vsr-group { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 10px 4px; }
.vsr-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.vsr-item:hover { background: #f2f5fa; }
.vsr-item > i { width: 18px; text-align: center; color: var(--accent); font-size: .95rem; flex-shrink: 0; }
.vsr-doc { display: flex; flex-direction: column; min-width: 0; }
.vsr-name { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsr-meta { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsr-empty { padding: 14px 12px; color: var(--muted); font-size: .88rem; text-align: center; }
.vault-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, #e8f1fb); }
.vault-search i { color: var(--muted); font-size: .9rem; flex-shrink: 0; }
.vault-search input {
  border: 0; outline: none; background: transparent; height: 100%; padding: 0; margin: 0;
  color: var(--ink); font-size: .92rem; width: 210px;
}
@media (max-width: 720px) { .vault-search input { width: 130px; } }

/* sidebar global search */
.side-search {
  position: relative; display: flex; align-items: center; gap: 8px; margin: 0 4px 16px;
  padding: 0 12px; height: 38px; border: 1px solid var(--line); border-radius: 9px;
  background: #f7f9fc; transition: border-color .12s, box-shadow .12s;
}
.side-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, #e8f1fb); background: #fff; }
.side-search > i { color: var(--muted); font-size: .88rem; flex-shrink: 0; }
.side-search input { border: 0; outline: none; background: transparent; width: 100%; height: 100%; padding: 0; margin: 0; font-size: .9rem; color: var(--ink); }
.side-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; width: 320px; max-width: 82vw;
  max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--line);
  border-radius: 11px; box-shadow: 0 16px 44px rgba(16,32,54,.2); padding: 6px; z-index: 80; text-align: left;
}
.ssr-group { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 10px 4px; }
.ssr-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.ssr-item:hover { background: #f2f5fa; }
.ssr-item > i { width: 18px; text-align: center; color: var(--accent); font-size: .95rem; flex-shrink: 0; }
.ssr-text { display: flex; flex-direction: column; min-width: 0; }
.ssr-name { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssr-sub { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssr-empty { padding: 14px 12px; color: var(--muted); font-size: .86rem; text-align: center; }

/* format-aware date field (replaces native type=date) */
.df-wrap { position: relative; display: flex; align-items: stretch; }
.df-text { flex: 1; padding-right: 38px; }
.df-btn {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 36px; border: 0;
  background: transparent; color: var(--muted); cursor: pointer; border-radius: 0 8px 8px 0;
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.df-btn:hover { color: var(--accent); background: #f2f5fa; }
.df-cal {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 90;
  width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(16,32,54,.18); padding: 10px;
}
.df-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.df-cal-title { font-weight: 700; color: var(--navy-900); font-size: .9rem; }
.df-nav { border: 0; background: #f2f5fa; width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 1.05rem; color: var(--ink); line-height: 1; }
.df-nav:hover { background: var(--accent); color: #fff; }
.df-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.df-dowc { text-align: center; font-size: .68rem; color: var(--muted); text-transform: uppercase; padding: 2px 0; }
.df-day { border: 0; background: transparent; height: 30px; border-radius: 7px; cursor: pointer; font-size: .84rem; color: var(--ink); }
.df-day:hover { background: #eef1f6; }
.df-day.df-today { box-shadow: inset 0 0 0 1.5px var(--accent-line, #cfe2f6); }
.df-day.df-sel { background: var(--accent); color: #fff; font-weight: 700; }
.df-cal-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.df-link { border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: .82rem; font-weight: 600; }
.df-link:hover { text-decoration: underline; }

/* settings: reminder schedules */
.rem-policy { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.rem-policy-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rem-name { flex: 1; }
.rem-del { margin-left: auto; background: none; border: 0; cursor: pointer; color: #c22f42; }
.rem-del:hover { color: #a01f30; }
.rem-policy .rem-save { margin-top: 10px; }
.rem-policy .rem-msg { margin-left: 10px; }
.rem-new { border: 1px dashed var(--line); border-radius: 10px; padding: 14px; margin-top: 4px; }
.rem-new h4 { font-size: .95rem; color: var(--navy-900); }

/* ===== Reminders: compact stat strip (one row) ===== */
.rem-stat-strip { display: flex; gap: 10px; margin: 6px 0 20px; flex-wrap: wrap; }
.rem-stat { flex: 1; min-width: 120px; display: flex; align-items: baseline; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.rem-stat-n { font-size: 1.35rem; font-weight: 800; color: var(--navy-900); line-height: 1; }
.rem-stat-l { font-size: .8rem; color: var(--muted); }
.rem-stat.is-danger { border-color: #f0c4c4; background: #fdf3f3; }
.rem-stat.is-danger .rem-stat-n { color: #c0392b; }
.rem-stat.is-warn { border-color: #f0e0bd; background: #fdfaf1; }
.rem-stat.is-warn .rem-stat-n { color: #b0620a; }

/* ============================================================
   EXPIRATIONS — expiry command center
   ============================================================ */
.exp-strip .exp-seg { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .06s; user-select: none; }
.exp-strip .exp-seg:hover { border-color: #cfe2f6; }
.exp-strip .exp-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.exp-strip .exp-seg.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.exp-strip .exp-seg.is-active .rem-stat-l { color: var(--navy-900); font-weight: 600; }

.exp-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.exp-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 0 14px; }
.exp-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(12,100,174,.12); }
.exp-search i { color: var(--muted); font-size: .9rem; pointer-events: none; flex-shrink: 0; }
.exp-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  padding: 10px 0; font-size: .92rem; color: var(--ink); -webkit-appearance: none; appearance: none; }
.exp-select { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
  font-size: .9rem; cursor: pointer; max-width: 200px; }
.exp-select:focus { outline: none; border-color: var(--accent); }
.exp-count { font-size: .82rem; color: var(--muted); margin-bottom: 12px; }

.exp-list { display: flex; flex-direction: column; gap: 10px; }
.exp-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 16px 13px 20px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 13px; text-decoration: none; color: inherit;
  transition: border-color .12s, box-shadow .12s, transform .06s; }
.exp-card:hover { border-color: #cfe2f6; box-shadow: 0 6px 18px rgba(12,100,174,.09); }
.exp-card:active { transform: translateY(1px); }
.exp-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--muted); }
.exp-card.exp-red .exp-stripe { background: #c0392b; }
.exp-card.exp-orange .exp-stripe { background: #e08a1e; }
.exp-card.exp-green .exp-stripe { background: #0d7a56; }

.exp-av { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .82rem; color: #fff; letter-spacing: .02em; }
.exp-av.av-0 { background: #0c64ae; } .exp-av.av-1 { background: #0d7a56; } .exp-av.av-2 { background: #b0620a; }
.exp-av.av-3 { background: #7c3aed; } .exp-av.av-4 { background: #c0392b; } .exp-av.av-5 { background: #147878; }

.exp-main { flex: 1; min-width: 0; }
.exp-title { font-weight: 700; color: var(--navy-900); font-size: .96rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--muted); margin-top: 3px; }
.exp-sub span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.exp-sub i { opacity: .7; }
.exp-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.exp-date { font-size: .76rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

@media (max-width: 640px) {
  .exp-select { flex: 1; max-width: none; }
  .exp-card { flex-wrap: wrap; padding-left: 18px; }
  .exp-right { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; margin-left: 54px; margin-top: 2px; }
  .exp-sub { gap: 2px 10px; }
}

/* ===== Reminders: month calendar ===== */
.rem-cal-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 24px; overflow: hidden; box-shadow: 0 6px 22px rgba(12,100,174,.07); }
.rem-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; background: linear-gradient(135deg, #0c64ae 0%, #0a4f8c 100%); }
.rem-cal-nav { display: flex; align-items: center; gap: 12px; }
.rem-cal-title { font-size: 1.15rem; font-weight: 800; color: #fff; min-width: 160px; text-align: center; letter-spacing: -.01em; }
.rem-cal-arrow { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); cursor: pointer; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.rem-cal-arrow:hover { background: #fff; color: var(--accent); border-color: #fff; }
.rem-cal-head #calToday { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; }
.rem-cal-head #calToday:hover { background: #fff; color: var(--accent); border-color: #fff; }
.rem-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 14px 16px 6px; }
.rem-cal-dow span { text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rem-cal-dow span:first-child, .rem-cal-dow span:last-child { color: var(--accent); }
.rem-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0 16px 16px; }
.rem-cell { min-height: 92px; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: #fbfdff; display: flex; flex-direction: column; transition: background .12s, border-color .12s; }
.rem-cell:not(.rem-cell-empty):hover { background: #f2f8ff; border-color: #cfe2f6; }
.rem-cell-empty { background: transparent; border: none; }
.rem-cell-adjacent { background: #f6f8fb; }
.rem-cell-adjacent .rem-cell-day { color: #b3bcc9; }
.rem-cell.is-today { background: linear-gradient(180deg, #eaf3fd, #fbfdff 70%); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.rem-cell-day { font-size: .82rem; font-weight: 700; color: var(--navy-900); margin-bottom: 4px; }
.rem-cell.is-today .rem-cell-day { color: #fff; background: var(--accent); width: 21px; height: 21px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; }
.rem-cell-chips { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.rem-chip { display: flex; align-items: center; gap: 4px; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: #e8f1fb; color: #0c4c86; border-left: 3px solid var(--accent); border-radius: 5px; padding: 4px 6px; font-size: .74rem; line-height: 1.25; }
.rem-chip:hover { filter: brightness(.97); }
.rem-chip-t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rem-chip-amt { font-size: .68rem; opacity: .8; white-space: nowrap; }
.rem-chip.is-overdue { background: #fdeaea; color: #a3271b; border-left-color: #c0392b; }
.rem-chip.is-done { background: #eaf6f0; color: #0d7a56; border-left-color: #0d7a56; }
.rem-chip.is-done .rem-chip-t { text-decoration: line-through; opacity: .75; }
a.rem-chip { text-decoration: none; }
.rem-chip.is-expiry { background: #fff2e2; color: #9a5a08; border-left-color: #d98218; }
.rem-chip.is-expiry.is-expired { background: #fdeaea; color: #a3271b; border-left-color: #c0392b; }
@media (max-width: 720px) {
  .rem-cell { min-height: 72px; }
  .rem-chip-amt { display: none; }
  .rem-cal-title { font-size: 1rem; min-width: 120px; }
}