/* Admin dashboard styles — extends the public site's design tokens
   (loaded first via /assets/style.css) with dashboard-specific layout.
   Palette stays on-brand (navy / sage / gold) so the admin feels like part
   of the same foundation, not a bolted-on third-party tool. */

:root{
  --admin-bg: #f4f6f5;
  --admin-panel: #ffffff;
  --admin-line: #e7ebe6;
  --admin-shadow: 0 10px 30px -18px rgba(11,31,51,.18);
  --admin-shadow-lg: 0 24px 60px -24px rgba(11,31,51,.28);
  --admin-danger: #a63d2d;
  --admin-danger-bg: #fbeceb;
  --admin-success: #255525;
  --admin-success-bg: #eaf5e9;
  --admin-warn: #7d5511;
  --admin-warn-bg: #fbf1de;
  --admin-radius: 16px;
}

*{ box-sizing:border-box; }
body{ background: var(--admin-bg); }

.admin-shell{ display:flex; min-height:100vh; }

/* ---------- sidebar ---------- */
.admin-sidebar{
  width: 252px; flex-shrink:0;
  background: linear-gradient(190deg, var(--navy-deep) 0%, #1c170e 62%, #241d11 130%);
  color: rgba(255,255,255,.85);
  display:flex; flex-direction:column;
  position: sticky; top:0; height:100vh;
  z-index: 20;
}
.admin-brand{ display:flex; align-items:center; gap:10px; padding: 22px 20px; border-bottom:1px solid rgba(255,255,255,.1); }
.admin-brand img{ height:34px; border-radius:8px; background:#fff; padding:3px; }
.admin-brand span{ font-family: var(--font-display); font-size:1.02rem; color:#fff; line-height:1.2; }
.admin-brand .brand-tag{ display:block; font-family:var(--font-body); font-size:.66rem; text-transform:uppercase; letter-spacing:.09em; color: var(--gold); font-weight:700; margin-top:2px; }

.admin-nav{ flex:1; padding: 16px 12px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.admin-nav-group-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; color: rgba(255,255,255,.38); font-weight:700; padding: 14px 14px 6px; }
.admin-nav-group-label:first-child{ padding-top:4px; }
.admin-nav a{
  display:flex; align-items:center; gap:12px;
  padding: 10px 14px; border-radius:10px;
  font-size:.9rem; font-weight:600; color: rgba(255,255,255,.72);
  position:relative;
}
.admin-nav a svg{ width:18px; height:18px; flex-shrink:0; }
.admin-nav a:hover{ background: rgba(255,255,255,.08); color:#fff; }
.admin-nav a.active{ background: var(--sage-deep); color:#fff; box-shadow: 0 6px 16px -6px rgba(124,154,74,.7); }
.admin-nav a .nav-dot{
  margin-left:auto; min-width:18px; height:18px; border-radius:999px; background: var(--gold);
  color: var(--navy-deep); font-size:.66rem; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 5px;
}
.admin-nav a .nav-dot.danger{ background: #e0685a; color:#fff; }

.admin-sidebar-footer{ padding: 14px 16px 20px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; gap:8px; }
.admin-sidebar-user{ display:flex; align-items:center; gap:10px; padding: 8px 6px; }
.admin-sidebar-user .avatar{ width:34px; height:34px; border-radius:999px; background: var(--gold); color: var(--navy-deep); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; }
.admin-sidebar-user .who{ min-width:0; }
.admin-sidebar-user .who strong{ display:block; color:#fff; font-size:.84rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-sidebar-user .who span{ display:block; color: rgba(255,255,255,.5); font-size:.72rem; }
.admin-sidebar-footer button{
  width:100%; background: none; border: 1.5px solid rgba(255,255,255,.25); color:#fff;
  padding: 10px 14px; border-radius: 10px; font-weight:700; cursor:pointer; font-size:.86rem;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.admin-sidebar-footer button:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }

/* ---------- main area ---------- */
.admin-main{ flex:1; min-width:0; }
.admin-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 18px 30px; background: var(--admin-panel); border-bottom:1px solid var(--admin-line);
  position: sticky; top:0; z-index:10;
}
.admin-topbar h1{ font-size:1.35rem; margin:0; }
.admin-topbar .admin-topbar-sub{ font-size:.82rem; color: var(--ink-soft); margin-top:2px; font-weight:600; }
.admin-user-chip{ font-size:.85rem; color: var(--ink-soft); font-weight:600; display:flex; align-items:center; gap:8px; }
.admin-user-chip .dot{ width:8px; height:8px; border-radius:999px; background: var(--sage); box-shadow:0 0 0 3px var(--sage-pale); }
.admin-content{ padding: 28px 30px 60px; max-width: 1240px; }

/* ---------- stat cards ---------- */
.stat-cards{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-bottom: 26px; }
@media (max-width: 1080px){ .stat-cards{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .stat-cards{ grid-template-columns: 1fr; } }
.stat-card{
  background: var(--admin-panel); border:1px solid var(--admin-line); border-radius: var(--admin-radius);
  padding: 18px 20px; box-shadow: var(--admin-shadow);
  display:flex; align-items:flex-start; gap:14px; transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover{ transform: translateY(-2px); box-shadow: var(--admin-shadow-lg); }
.stat-card .icon{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background: var(--sage-pale); color: var(--sage-deep); }
.stat-card .icon svg{ width:20px; height:20px; }
.stat-card .icon.navy{ background: rgba(22,51,80,.08); color: var(--navy); }
.stat-card .icon.gold{ background: rgba(215,161,59,.16); color: var(--gold-deep); }
.stat-card .icon.danger{ background: var(--admin-danger-bg); color: var(--admin-danger); }
.stat-card .n{ font-family: var(--font-display); font-size:1.7rem; color: var(--navy); display:block; line-height:1.1; }
.stat-card .l{ font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-soft); font-weight:700; }

/* ---------- cards / panels ---------- */
.admin-card{ background: var(--admin-panel); border:1px solid var(--admin-line); border-radius: var(--admin-radius); padding: 24px; margin-bottom:22px; box-shadow: var(--admin-shadow); }
.admin-card h2{ font-size:1.14rem; margin-bottom: 4px; }
.admin-card .card-sub{ color: var(--ink-soft); font-size:.85rem; margin: 0 0 16px; }
.admin-grid-2{ display:grid; grid-template-columns: 1.4fr 1fr; gap:22px; align-items:start; }
@media (max-width: 980px){ .admin-grid-2{ grid-template-columns:1fr; } }

/* ---------- tables ---------- */
.admin-table{ width:100%; border-collapse: collapse; font-size:.9rem; }
.admin-table th{ text-align:left; padding: 10px 12px; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); border-bottom: 2px solid var(--admin-line); }
.admin-table td{ padding: 12px; border-bottom: 1px solid var(--admin-line); vertical-align:top; }
.admin-table tr:last-child td{ border-bottom:none; }
.admin-table tr:hover td{ background: var(--sage-pale); }
.badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.badge-new{ background: var(--gold); color: var(--navy-deep); }
.badge-read{ background: var(--sage-pale); color: var(--sage-deep); }
.badge-danger{ background: var(--admin-danger-bg); color: var(--admin-danger); }
.badge-warn{ background: var(--admin-warn-bg); color: var(--admin-warn); }
.badge-success{ background: var(--admin-success-bg); color: var(--admin-success); }
.badge-muted{ background:#eef0ef; color: var(--ink-soft); }
.row-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.icon-btn{
  background: none; border: 1.5px solid var(--admin-line); border-radius:8px; padding: 6px 10px;
  cursor:pointer; font-size:.78rem; font-weight:700; color: var(--ink-soft);
}
.icon-btn:hover{ border-color: var(--sage); color: var(--sage-deep); }
.icon-btn.danger:hover{ border-color:#c0503f; color:#c0503f; }

/* ---------- tabs (content / media manager) ---------- */
.admin-tab-row{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.admin-tab-btn{
  padding:8px 18px; border-radius:999px; border:1.5px solid var(--admin-line);
  background: var(--admin-panel); font-weight:700; font-size:.84rem; cursor:pointer; color: var(--ink-soft);
}
.admin-tab-btn.active{ background: var(--navy); border-color: var(--navy); color:#fff; }
.admin-tab-panel{ display:none; }
.admin-tab-panel.active{ display:block; }

/* ---------- forms ---------- */
.admin-form{ display:grid; gap:14px; }
.admin-form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px){ .admin-form .row2{ grid-template-columns:1fr; } }
.admin-form label{ font-size:.82rem; font-weight:700; color: var(--navy); display:block; margin-bottom:5px; }
.admin-form input, .admin-form select, .admin-form textarea{
  width:100%; padding: 10px 12px; border-radius:8px; border:1.5px solid var(--admin-line);
  font-family: var(--font-body); font-size:.92rem; background: var(--admin-bg);
}
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus{
  outline:none; border-color: var(--sage); background:#fff; box-shadow:0 0 0 3px var(--sage-pale);
}
.admin-form textarea{ min-height:90px; resize:vertical; }
.field-hint{ font-size:.76rem; color: var(--ink-soft); margin-top:4px; }

/* password strength meter */
.pw-meter{ height:6px; border-radius:999px; background: var(--admin-line); overflow:hidden; margin-top:8px; }
.pw-meter i{ display:block; height:100%; width:0%; background: var(--admin-danger); transition: width .2s ease, background .2s ease; }
.pw-meter-label{ font-size:.74rem; color: var(--ink-soft); margin-top:4px; display:block; }

/* ---------- media manager ---------- */
.media-dropzone{
  border: 2px dashed var(--admin-line); border-radius: var(--admin-radius); padding: 30px 20px;
  text-align:center; color: var(--ink-soft); cursor:pointer; background: var(--admin-bg);
  transition: border-color .15s ease, background .15s ease;
}
.media-dropzone.dragover{ border-color: var(--sage); background: var(--sage-pale); color: var(--sage-deep); }
.media-dropzone svg{ width:30px; height:30px; margin-bottom:8px; }
.media-dropzone strong{ color: var(--navy); }
.media-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:16px; margin-top:20px; }
.media-tile{ border:1px solid var(--admin-line); border-radius:12px; overflow:hidden; background:#fff; box-shadow: var(--admin-shadow); }
.media-tile .thumb{ aspect-ratio:4/3; background: var(--sage-pale); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.media-tile .thumb img, .media-tile .thumb video{ width:100%; height:100%; object-fit:cover; }
.media-tile .thumb .placeholder{ color: var(--sage-deep); }
.media-tile .thumb .badge{ position:absolute; top:8px; left:8px; }
.media-tile .body{ padding: 10px 12px 12px; }
.media-tile .body h4{ font-size:.86rem; margin:0 0 2px; line-height:1.3; }
.media-tile .body p{ font-size:.76rem; color: var(--ink-soft); margin:0 0 8px; line-height:1.35; max-height:2.7em; overflow:hidden; }

/* ---------- activity feed ---------- */
.activity-feed{ display:flex; flex-direction:column; gap:0; }
.activity-item{ display:flex; gap:12px; padding: 12px 0; border-bottom:1px solid var(--admin-line); }
.activity-item:last-child{ border-bottom:none; padding-bottom:0; }
.activity-item .dot{ width:9px; height:9px; border-radius:999px; background: var(--sage); margin-top:6px; flex-shrink:0; }
.activity-item .dot.danger{ background: var(--admin-danger); }
.activity-item .dot.warn{ background: var(--gold-deep); }
.activity-item .meta{ min-width:0; }
.activity-item .meta .line1{ font-size:.86rem; color: var(--ink); font-weight:600; }
.activity-item .meta .line1 b{ color: var(--navy); }
.activity-item .meta .line2{ font-size:.76rem; color: var(--ink-soft); }

/* ---------- charts (dependency-free inline SVG) ---------- */
.chart-wrap{ width:100%; overflow-x:auto; }
.chart-wrap svg{ display:block; width:100%; height:auto; }
.chart-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font-size:.78rem; color: var(--ink-soft); }
.chart-legend span{ display:inline-flex; align-items:center; gap:6px; }
.chart-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.bar-list{ display:flex; flex-direction:column; gap:10px; }
.bar-list .bar-row{ display:grid; grid-template-columns: 1fr auto; gap:4px 10px; align-items:center; font-size:.84rem; }
.bar-list .bar-row .label{ color: var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-list .bar-row .count{ color: var(--ink-soft); font-weight:700; font-size:.78rem; }
.bar-list .bar-track{ grid-column: 1 / -1; height:7px; border-radius:999px; background: var(--admin-line); overflow:hidden; }
.bar-list .bar-track i{ display:block; height:100%; background: linear-gradient(90deg, var(--sage), var(--sage-deep)); }

/* ---------- security page ---------- */
.security-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-size:.76rem; font-weight:700; }
.security-pill.ok{ background: var(--admin-success-bg); color: var(--admin-success); }
.security-pill.locked{ background: var(--admin-danger-bg); color: var(--admin-danger); }

/* ---------- login ---------- */
.login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 20% 20%, rgba(253,175,23,.18), transparent 45%), linear-gradient(160deg, var(--navy-deep), #14120f 55%, var(--sage-deep)); padding:24px; }
.login-card{ background: var(--admin-panel); border-radius: 20px; padding: 42px 38px; width:100%; max-width:400px; box-shadow: var(--admin-shadow-lg); text-align:center; }
.login-card img{ height:52px; margin: 0 auto 16px; }
.login-card h1{ font-size:1.32rem; margin-bottom:4px; }
.login-card p.sub{ color: var(--ink-soft); font-size:.88rem; margin-bottom:22px; }
.login-card .admin-form{ text-align:left; }
.login-error{ background: var(--admin-danger-bg); color: var(--admin-danger); border-radius:8px; padding:10px 14px; font-size:.85rem; margin-bottom:14px; display:none; text-align:left; }
.login-error.show{ display:block; }
.login-security-note{ display:flex; align-items:flex-start; gap:8px; text-align:left; background: var(--admin-bg); border-radius:10px; padding:10px 12px; font-size:.76rem; color: var(--ink-soft); margin-top:18px; }
.login-security-note svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; color: var(--sage-deep); }
.pw-toggle{ display:flex; gap:8px; }
.pw-toggle input{ flex:1; }
.pw-toggle button{ border:1.5px solid var(--admin-line); background: var(--admin-bg); border-radius:8px; padding:0 12px; font-size:.78rem; font-weight:700; color: var(--ink-soft); cursor:pointer; }

/* ---------- misc ---------- */
.empty-state{ text-align:center; padding: 40px 20px; color: var(--ink-soft); }
.toast{
  position: fixed; bottom: 24px; right: 24px; z-index: 400;
  background: var(--navy-deep); color:#fff; padding: 12px 20px; border-radius: 10px;
  font-size:.88rem; font-weight:600; box-shadow: var(--admin-shadow-lg);
  opacity:0; transform: translateY(10px); transition: all .25s ease; pointer-events:none;
}
.toast.show{ opacity:1; transform:none; }
.toast.error{ background: var(--admin-danger); }
.toast.success{ background: var(--admin-success); }

.btn-block{ width:100%; justify-content:center; }

/* .btn-primary / .btn-ghost were already referenced in Content Manager
   markup without a definition — filled in here so both pages get a real
   solid/outline pair instead of falling back to an unstyled <button>. */
.btn-primary{ background: var(--navy); color:#fff; border-color: var(--navy); }
.btn-primary:hover{ background: var(--navy-deep); transform: translateY(-1px); }
.btn-ghost{ background: transparent; border-color: var(--admin-line); color: var(--ink-soft); }
.btn-ghost:hover{ border-color: var(--sage-deep); color: var(--sage-deep); background: var(--sage-pale); }
.btn-ai{ background:#5b3ea6; color:#fff; border-color:#5b3ea6; }
.btn-ai:hover{ background:#4a3189; transform: translateY(-1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* ---------------- Invoices page ---------------- */
.invoice-layout{ display:grid; grid-template-columns: minmax(0,1fr) 340px; gap:22px; align-items:start; }
@media (max-width: 1080px){ .invoice-layout{ grid-template-columns: 1fr; } }

.invoice-step{
  display:flex; align-items:center; gap:10px; margin: 22px 0 12px;
  font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color: var(--navy);
}
.invoice-step:first-child{ margin-top:4px; }
.invoice-step .step-n{
  width:22px; height:22px; border-radius:999px; background: var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.72rem; flex-shrink:0;
}

.currency-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.currency-tab{
  text-align:left; padding:14px 16px; border-radius:12px; border:1.5px solid var(--admin-line);
  background:#fff; cursor:pointer; transition: all .15s ease;
}
.currency-tab:hover{ border-color: var(--gold); }
.currency-tab.active{ border-color: var(--gold); background: rgba(217,164,65,.08); }
.currency-tab .cur-name{ font-weight:800; color: var(--navy); font-size:.95rem; }
.currency-tab .cur-sub{ font-size:.76rem; color: var(--ink-soft); margin-top:2px; }

.bank-account-box{
  margin-top:14px; padding:16px 18px; border-radius:12px; border:1.5px solid var(--gold);
  background: rgba(217,164,65,.06); position:relative;
}
.bank-account-box .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; }
.bank-account-box .k{ font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-soft); font-weight:700; display:block; }
.bank-account-box .v{ font-size:.95rem; font-weight:800; color: var(--navy); margin-top:3px; }
.bank-account-box .hint{ font-size:.78rem; color: var(--ink-soft); margin-top:12px; }
.bank-account-empty{
  margin-top:14px; padding:16px 18px; border-radius:12px; border:1.5px dashed var(--admin-line);
  background:#fbfaf6; font-size:.85rem; color: var(--ink-soft);
}
.bank-account-edit-toggle{ margin-top:10px; }

.ai-polish-box{
  margin-top:16px; padding:18px; border-radius:12px; border:1.5px dashed var(--gold-deep);
  background: rgba(217,164,65,.06);
}
.ai-polish-box .ai-label{
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color: var(--gold-deep);
  margin-bottom:12px; display:flex; align-items:center; gap:6px;
}

.invoice-preview-frame{
  width:100%; height:560px; border:1px solid var(--admin-line); border-radius:12px; margin-top:14px; background:#f4f4f2;
}

.send-option{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border:1.5px solid var(--admin-line);
  border-radius:12px; margin-bottom:12px;
}
.send-option input[type="checkbox"]{ width:18px; height:18px; accent-color: var(--navy); flex-shrink:0; }
.send-option .send-icon{
  width:34px; height:34px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  color:#fff; flex-shrink:0;
}
.send-option .send-icon.email{ background: var(--navy); }
.send-option .send-icon.whatsapp{ background:#25d366; }
.send-option .send-body{ flex:1; min-width:0; }
.send-option label.send-label{ font-size:.85rem; font-weight:700; color: var(--navy); margin-bottom:6px; }
.send-option input[type="text"], .send-option input[type="email"]{
  width:100%; padding:9px 12px; border:1px solid var(--admin-line); border-radius:8px; font-size:.88rem;
}

.invoice-history-item{
  padding:14px 0; border-bottom:1px solid var(--admin-line);
}
.invoice-history-item:last-child{ border-bottom:none; }
.invoice-history-item .row-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.invoice-history-item .inv-no{ font-weight:800; color: var(--navy); font-size:.88rem; }
.invoice-history-item .inv-amount{ font-weight:800; color: var(--navy); font-size:.9rem; white-space:nowrap; }
.invoice-history-item .row-bottom{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:5px; }
.invoice-history-item .inv-recipient{ font-size:.8rem; color: var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.invoice-history-item .inv-meta{ font-size:.72rem; color: var(--ink-soft); display:flex; align-items:center; gap:8px; flex-shrink:0; }
.invoice-history-item .inv-actions{ display:flex; gap:8px; margin-top:8px; }
.invoice-history-item .inv-actions a, .invoice-history-item .inv-actions button{
  font-size:.72rem; font-weight:700; color: var(--sage-deep); background:none; border:none; cursor:pointer; padding:0;
  text-decoration:underline; text-underline-offset:2px;
}

.info-banner{
  display:flex; gap:10px; padding:14px 16px; border-radius:12px; background: rgba(22,51,80,.06);
  border:1px solid rgba(22,51,80,.15); font-size:.83rem; color: var(--navy); margin-bottom:22px; line-height:1.55;
}
.info-banner code{ background:#fff; padding:1px 6px; border-radius:5px; font-size:.78rem; border:1px solid var(--admin-line); }

@media (max-width: 820px){
  .currency-tabs{ grid-template-columns:1fr; }
  .bank-account-box .grid2{ grid-template-columns:1fr; }
}

@media (max-width: 820px){
  .admin-shell{ flex-direction:column; }
  .admin-sidebar{ width:100%; height:auto; position:relative; flex-direction:row; overflow-x:auto; }
  .admin-nav{ flex-direction:row; padding:10px; }
  .admin-nav-group-label{ display:none; }
  .admin-sidebar-footer{ display:none; }
  .admin-content{ padding: 20px; }
  .admin-topbar{ padding:16px 20px; }
}
