@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Lato:wght@300;400;700&display=swap');

/* ---- Light theme (default) ---- */
:root {
  --bg:        #f7f6f2;
  --surface:   #ffffff;
  --surface2:  #f0ede6;
  --border:    #e2ddd5;
  --border2:   #cec8be;
  --navy:      #1a2c4e;
  --navy2:     #243656;
  --accent:    #2563a8;
  --accent-h:  #1a4f8f;
  --gold:      #b8860b;
  --text:      #1e1e1e;
  --text2:     #4a4a4a;
  --muted:     #8a8070;
  --danger:    #c0392b;
  --success:   #1e7e4e;
  --warn:      #b8860b;
  --shadow:    0 2px 12px rgba(26,44,78,0.08);
  --shadow-lg: 0 8px 32px rgba(26,44,78,0.12);
  --radius:    10px;
}

/* ---- Dark theme ---- */
[data-theme="dark"] {
  --bg:        #0f1117;
  --surface:   #1a1d27;
  --surface2:  #22263a;
  --border:    #2e3347;
  --border2:   #3a4060;
  --navy:      #2a3f6f;
  --navy2:     #344e85;
  --accent:    #4a8fd4;
  --accent-h:  #5a9fe4;
  --gold:      #d4a520;
  --text:      #e8eaf0;
  --text2:     #b0b8cc;
  --muted:     #6a7494;
  --danger:    #e05050;
  --success:   #3da870;
  --warn:      #d4a520;
  --shadow:    0 2px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  transition: background 0.2s, color 0.2s;
}

h1,h2,h3 { font-family:'Playfair Display',serif; font-weight:400; color:var(--navy); line-height:1.25; }
h1{font-size:2rem;margin-bottom:0.3rem}
h2{font-size:1.4rem;margin-bottom:0.75rem}
h3{font-size:1.1rem;margin-bottom:0.5rem}

/* ---- Toast notifications ---- */
#toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  z-index: 9999; display: flex; flex-direction: column; gap: 0.6rem;
  pointer-events: none;
}
.toast {
  padding: 0.85rem 1.25rem; border-radius: 8px;
  font-size: 0.9rem; font-family: 'Lato', sans-serif;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  pointer-events: all; max-width: 340px;
  animation: toastIn 0.3s ease;
  display: flex; align-items: center; gap: 0.75rem;
}
.toast-success { background:#1e7e4e; color:#fff; }
.toast-error   { background:#c0392b; color:#fff; }
.toast-info    { background:#1a2c4e; color:#fff; }
.toast-warn    { background:#b8860b; color:#fff; }
@keyframes toastIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes toastOut { to{opacity:0;transform:translateY(12px)} }

/* ---- Top warning bar ---- */
.topbar-warn {
  background:#fff8e6; border-bottom:1px solid #f0d080;
  padding:0.55rem 2rem; display:flex; align-items:center;
  justify-content:space-between; font-size:0.85rem; color:var(--warn); gap:1rem; flex-wrap:wrap;
}
.topbar-warn a { background:var(--warn);color:#fff;padding:0.3rem 0.85rem;border-radius:5px;text-decoration:none;font-weight:700;font-size:0.82rem; }

/* ---- Navigation ---- */
nav {
  background: var(--navy);
  padding: 0 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; position: sticky; top: 0; z-index: 200;
  box-shadow: 0 2px 16px rgba(26,44,78,0.18);
}
.nav-logo { font-family:'Playfair Display',serif; font-size:1.35rem; color:#fff; text-decoration:none; }
.nav-logo span { color:#a8c8f0; }
.nav-links { display:flex; gap:0.15rem; align-items:center; }
.nav-link { padding:0.45rem 1rem; border-radius:6px; text-decoration:none; color:rgba(255,255,255,0.7); font-size:0.88rem; transition:all 0.18s; }
.nav-link:hover { color:#fff; background:rgba(255,255,255,0.1); }
.nav-link.active { color:#fff; background:rgba(255,255,255,0.15); font-weight:700; }
.nav-link.admin-link { color:#a8d8a8; }
.nav-link.admin-link:hover { background:rgba(168,216,168,0.15); }
.nav-right { display:flex; align-items:center; gap:1rem; }
.nav-user { font-size:0.82rem; color:rgba(255,255,255,0.6); }
.nav-user strong { color:rgba(255,255,255,0.9); display:block; font-weight:700; }
.btn-logout { padding:0.4rem 0.9rem; border-radius:6px; background:transparent; border:1px solid rgba(255,255,255,0.25); color:rgba(255,255,255,0.7); font-size:0.82rem; cursor:pointer; font-family:'Lato',sans-serif; text-decoration:none; transition:all 0.18s; }
.btn-logout:hover { border-color:rgba(255,255,255,0.6); color:#fff; }

/* Dark mode toggle */
.dark-toggle { cursor:pointer; background:rgba(255,255,255,0.1); border:none; color:#fff; border-radius:6px; padding:0.4rem 0.6rem; font-size:1rem; transition:background 0.18s; }
.dark-toggle:hover { background:rgba(255,255,255,0.2); }

/* Mobile hamburger */
.nav-hamburger { display:none; flex-direction:column; gap:4px; cursor:pointer; padding:0.5rem; background:none; border:none; }
.nav-hamburger span { width:22px; height:2px; background:#fff; border-radius:2px; display:block; transition:all 0.2s; }
.mobile-menu { display:none; position:fixed; top:64px; left:0; right:0; background:var(--navy); z-index:199; padding:1rem; flex-direction:column; gap:0.25rem; box-shadow:0 8px 20px rgba(0,0,0,0.3); }
.mobile-menu.open { display:flex; }
.mobile-menu .nav-link { color:rgba(255,255,255,0.8); padding:0.75rem 1rem; border-radius:8px; }

@media(max-width:900px) {
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  nav { padding:0 1.5rem; }
}

/* ---- Layout ---- */
.main { max-width:1060px; margin:0 auto; padding:2.5rem 2rem; }
.page-header { margin-bottom:2rem; }
.page-subtitle { color:var(--muted); font-size:0.92rem; margin-top:0.3rem; }

/* ---- Cards ---- */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.75rem; margin-bottom:1.5rem; box-shadow:var(--shadow); }
.card-title { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:1.2rem; font-weight:700; }
.card-accent { border-left:4px solid var(--accent); }

/* ---- Forms ---- */
label { display:block; font-size:0.78rem; color:var(--text2); margin-bottom:0.4rem; letter-spacing:0.04em; text-transform:uppercase; font-weight:700; }
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=date],textarea,select {
  width:100%; padding:0.72rem 0.95rem; background:var(--bg); border:1.5px solid var(--border);
  border-radius:7px; color:var(--text); font-size:0.95rem; font-family:'Lato',sans-serif;
  margin-bottom:1.15rem; transition:border-color 0.18s,box-shadow 0.18s;
}
input:focus,textarea:focus,select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,168,0.1); background:var(--surface); }
textarea { resize:vertical; min-height:200px; line-height:1.65; }

/* Password strength */
.pw-strength { height:4px; border-radius:2px; background:var(--border); margin-top:-0.8rem; margin-bottom:1rem; overflow:hidden; }
.pw-strength-bar { height:100%; border-radius:2px; transition:width 0.3s,background 0.3s; width:0%; }
.pw-strength-label { font-size:0.75rem; color:var(--muted); margin-bottom:1rem; margin-top:-0.8rem; }

/* ---- Buttons ---- */
.btn { display:inline-block; padding:0.72rem 1.6rem; background:var(--navy); color:#fff; border:none; border-radius:7px; font-size:0.92rem; font-weight:700; font-family:'Lato',sans-serif; cursor:pointer; transition:background 0.18s,transform 0.12s,box-shadow 0.18s; text-decoration:none; letter-spacing:0.02em; box-shadow:0 2px 6px rgba(26,44,78,0.15); }
.btn:hover { background:var(--navy2); transform:translateY(-1px); box-shadow:0 4px 12px rgba(26,44,78,0.2); }
.btn:active { transform:translateY(0); }
.btn-accent { background:var(--accent); }
.btn-accent:hover { background:var(--accent-h); }
.btn-outline { background:transparent; border:1.5px solid var(--border2); color:var(--text2); box-shadow:none; }
.btn-outline:hover { border-color:var(--navy); color:var(--navy); background:transparent; transform:none; }
.btn-sm { padding:0.45rem 0.9rem; font-size:0.82rem; }
.btn-danger { background:var(--danger); }
.btn-danger:hover { background:#a93226; }
.btn-success { background:var(--success); }

/* ---- Alerts ---- */
.alert { padding:0.9rem 1.1rem; border-radius:7px; margin-bottom:1.3rem; font-size:0.9rem; line-height:1.5; border-left:4px solid; }
.alert-error   { background:#fdf2f1; color:var(--danger); border-color:var(--danger); }
.alert-success { background:#f0faf4; color:var(--success); border-color:var(--success); }
.alert-info    { background:#f0f5fc; color:var(--accent);  border-color:var(--accent); }
.alert-warn    { background:#fff8e6; color:var(--warn);    border-color:var(--warn); }

[data-theme="dark"] .alert-error   { background:rgba(192,57,43,0.15); }
[data-theme="dark"] .alert-success { background:rgba(30,126,78,0.15); }
[data-theme="dark"] .alert-info    { background:rgba(74,143,212,0.15); }
[data-theme="dark"] .alert-warn    { background:rgba(212,165,32,0.15); }

/* ---- Tables ---- */
table { width:100%; border-collapse:collapse; font-size:0.88rem; }
thead tr { border-bottom:2px solid var(--border); }
th { text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); padding:0.55rem 0.85rem; font-weight:700; }
td { padding:0.8rem 0.85rem; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tbody tr:hover { background:var(--surface2); }

/* ---- Badges ---- */
.badge { display:inline-block; padding:0.2rem 0.65rem; border-radius:20px; font-size:0.72rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; }
.badge-green { background:#e8f7ef; color:var(--success); }
.badge-warn  { background:#fff4d6; color:var(--warn); }
.badge-red   { background:#fdecea; color:var(--danger); }
.badge-blue  { background:#e8f0fc; color:var(--accent); }
.badge-navy  { background:#e8ecf4; color:var(--navy); }
[data-theme="dark"] .badge-green { background:rgba(61,168,112,0.2); }
[data-theme="dark"] .badge-warn  { background:rgba(212,165,32,0.2); }
[data-theme="dark"] .badge-red   { background:rgba(224,80,80,0.2); }
[data-theme="dark"] .badge-blue  { background:rgba(74,143,212,0.2); }
[data-theme="dark"] .badge-navy  { background:rgba(42,63,111,0.4); }

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

/* ---- Stat cards ---- */
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); }
.stat-number { font-family:'Playfair Display',serif; font-size:2.8rem; line-height:1; margin-bottom:0.3rem; color:var(--navy); }
.stat-label { font-size:0.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.07em; font-weight:700; }

/* ---- Version tag ---- */
.version-tag { display:inline-flex; align-items:center; gap:0.3rem; background:var(--surface2); border:1px solid var(--border); border-radius:5px; padding:0.15rem 0.55rem; font-size:0.75rem; color:var(--muted); font-weight:700; }

/* ---- Activity feed ---- */
.activity-item { display:flex; gap:0.85rem; padding:0.65rem 0; border-bottom:1px solid var(--border); }
.activity-item:last-child { border-bottom:none; }
.activity-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:0.45rem; }
.activity-dot.success { background:var(--success); }
.activity-dot.error   { background:var(--danger); }
.activity-dot.warn    { background:var(--warn); }
.activity-text { font-size:0.87rem; color:var(--text2); flex:1; }
.activity-time { font-size:0.78rem; color:var(--muted); white-space:nowrap; }

/* ---- Onboarding steps ---- */
.onboarding-step { display:flex; gap:1rem; padding:1rem; border-radius:8px; background:var(--surface2); margin-bottom:0.75rem; align-items:flex-start; }
.onboarding-step.done { opacity:0.5; }
.onboarding-num { width:32px; height:32px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.88rem; flex-shrink:0; }
.onboarding-step.done .onboarding-num { background:var(--success); }

/* ---- Misc ---- */
.divider { border:none; border-top:1px solid var(--border); margin:1.5rem 0; }
@media(max-width:640px) { .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} .main{padding:1.5rem 1rem} }