/*
 * Artha Auto-Plan — Master Theme
 * ─────────────────────────────────────────────────────────────────────────────
 * To change the look of the entire platform, edit ONLY this file.
 *
 * Sections:
 *   1. Fonts
 *   2. CSS Custom Properties (design tokens)
 *   3. Reset & base
 *   4. Shared layout primitives  (topbar, card, btn, form fields, table)
 *   5. Shared utility classes
 *   6. Shared component: topbar
 *   7. Shared component: buttons
 *   8. Shared component: form fields (.f, .f-hint, .err)
 *   9. Shared component: tables (.tbl-wrap, th, td)
 *  10. Shared component: badges & chips
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── 1. FONTS ────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

/* ── 2. DESIGN TOKENS ────────────────────────────────────────────────────── */
:root {
  /* Brand colours */
  --navy:        #0f1f3d;
  --navy2:       #162c52;
  --page-bg:     #080f1e;
  --gold:        #c9a84c;
  --gold2:       #e0b85a;
  --gold3:       #f5d98a;
  --cream:       #f7f3ec;

  /* Neutrals */
  --slate:       #4a5568;
  --muted:       #718096;
  --muted2:      #8898aa;

  /* Semantic colours */
  --green:       #27ae60;
  --green-light: #68d391;
  --amber:       #e67e22;
  --amber-light: #f6ad55;
  --red:         #e74c3c;
  --red-light:   #fc8181;

  /* Surfaces */
  --card-bg:     rgba(255,255,255,.04);
  --card-border: rgba(255,255,255,.08);
  --border:      rgba(201,168,76,.22);

  /* Typography */
  --font-body:   'Inter', sans-serif;
  --font-serif:  'Playfair Display', serif;

  /* Radii */
  --radius-sm:   2px;
  --radius:      4px;
  --radius-md:   6px;

  /* Transitions */
  --transition:  .15s ease;
}

/* ── 3. RESET & BASE ─────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  background:  var(--page-bg);
  color:       var(--cream);
  min-height:  100vh;
  font-size:   .875rem;
}

a { color: inherit; }

/* ── 4. TOPBAR ───────────────────────────────────────────────────────────── */
.topbar {
  background:    var(--navy);
  border-bottom: 1px solid var(--border);
  padding:       12px 24px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
}
.topbar h1 {
  font-size:   1rem;
  font-weight: 600;
  color:       var(--gold);
}
.topbar-right {
  display:     flex;
  align-items: center;
  gap:         16px;
  font-size:   .78rem;
  color:       var(--muted);
}

/* ── 5. CARDS ────────────────────────────────────────────────────────────── */
.card {
  background:    var(--card-bg);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       22px;
  margin-bottom: 18px;
}
.card-hdr {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  margin-bottom:  14px;
}
.card-title {
  font-size:   .78rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color:       var(--muted);
}

/* ── 6. BUTTONS ──────────────────────────────────────────────────────────── */
.btn {
  display:       inline-block;
  padding:       12px 24px;
  background:    var(--gold);
  color:         var(--navy);
  font-family:   var(--font-body);
  font-weight:   600;
  font-size:     .875rem;
  border:        none;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  text-decoration: none;
  transition:    background var(--transition);
  white-space:   nowrap;
}
.btn:hover { background: var(--gold2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--gold);
  color:      var(--navy);
}
.btn-primary:hover { background: var(--gold2); }

.btn-secondary {
  background:  rgba(255,255,255,.06);
  color:       var(--cream);
  border:      1px solid rgba(255,255,255,.12);
}
.btn-secondary:hover { background: rgba(255,255,255,.1); }

.btn-sm {
  padding:    7px 14px;
  background: rgba(201,168,76,.12);
  color:      var(--gold);
  border:     1px solid rgba(201,168,76,.3);
  border-radius: var(--radius-sm);
  font-size:  .78rem;
  cursor:     pointer;
  font-family: var(--font-body);
  white-space: nowrap;
}
.btn-sm:hover    { background: rgba(201,168,76,.22); }
.btn-add         { /* same as btn-sm */ }

.btn-danger {
  background:   rgba(192,57,43,.12) !important;
  color:        var(--red-light)    !important;
  border-color: rgba(192,57,43,.3)  !important;
}
.btn-danger:hover { background: rgba(192,57,43,.22) !important; }

/* ── 7. FORM FIELDS ──────────────────────────────────────────────────────── */
.f {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin-bottom:  16px;
}
.f label {
  font-size:      .68rem;
  font-weight:    600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color:          var(--muted);
}
.f input,
.f select,
.f textarea {
  background:  rgba(255,255,255,.05);
  border:      1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  padding:     11px 14px;
  color:       var(--cream);
  font-family: var(--font-body);
  font-size:   .9rem;
  transition:  border var(--transition);
  width:       100%;
}
.f input:focus,
.f select:focus,
.f textarea:focus {
  outline:    none;
  border-color: var(--gold);
  background:  rgba(201,168,76,.04);
}
.f-hint {
  font-size: .67rem;
  color:     var(--muted);
  margin-top: 3px;
}

/* ── 8. ERROR BLOCK ──────────────────────────────────────────────────────── */
.err {
  background:    rgba(192,57,43,.1);
  border:        1px solid rgba(192,57,43,.3);
  border-radius: var(--radius-sm);
  padding:       12px 16px;
  color:         var(--red-light);
  font-size:     .85rem;
  margin-bottom: 18px;
  display:       flex;
  gap:           8px;
  align-items:   flex-start;
}

/* ── 9. TABLES ───────────────────────────────────────────────────────────── */
.tbl-wrap {
  overflow-x:    auto;
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
}
table {
  width:           100%;
  border-collapse: collapse;
  font-size:       .78rem;
}
th {
  background:     var(--navy);
  padding:        9px 14px;
  text-align:     left;
  font-size:      .65rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  color:          var(--muted);
  border-bottom:  1px solid var(--border);
  white-space:    nowrap;
}
td {
  padding:       9px 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color:         #c0cce0;
  vertical-align: middle;
}
tr:last-child td  { border-bottom: none; }
tr:hover td       { background: rgba(255,255,255,.02); }

/* ── 10. BADGES & CHIPS ──────────────────────────────────────────────────── */
.badge {
  display:        inline-block;
  background:     rgba(201,168,76,.15);
  color:          var(--gold);
  padding:        2px 8px;
  border-radius:  var(--radius-sm);
  font-size:      .7rem;
  font-weight:    600;
  letter-spacing: .5px;
}

.ref-code {
  font-family:    monospace;
  color:          var(--gold);
  font-size:      .8rem;
  letter-spacing: 1px;
}

/* Semantic colour utilities */
.text-gold   { color: var(--gold); }
.text-muted  { color: var(--muted); }
.text-green  { color: var(--green-light); }
.text-amber  { color: var(--amber-light); }
.text-red    { color: var(--red-light); }

/* ── 11. CONTAINER ───────────────────────────────────────────────────────── */
.container {
  padding:   20px 24px;
  max-width: 1600px;
  margin:    0 auto;
}

/* ── 12. TOOLBAR ─────────────────────────────────────────────────────────── */
.toolbar {
  display:     flex;
  gap:         10px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap:   wrap;
}
.toolbar input[type=text] {
  background:  rgba(255,255,255,.05);
  border:      1px solid var(--border);
  color:       var(--cream);
  padding:     7px 12px;
  border-radius: var(--radius-sm);
  font-size:   .82rem;
  font-family: var(--font-body);
  width:       260px;
}
.toolbar input[type=text]::placeholder { color: var(--muted); }
.toolbar input[type=text]:focus {
  outline:     none;
  border-color: var(--gold);
}

/* ── 13. PAGER ───────────────────────────────────────────────────────────── */
.pager {
  display:     flex;
  gap:         6px;
  align-items: center;
  margin-top:  14px;
  font-size:   .78rem;
  color:       var(--muted);
}
.pager button {
  background:    rgba(255,255,255,.05);
  border:        1px solid var(--border);
  color:         var(--cream);
  padding:       4px 10px;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  font-size:     .75rem;
}
.pager button:hover  { background: rgba(255,255,255,.1); }
.pager button.current { background: rgba(201,168,76,.15); color: var(--gold); }

/* ── 14. BRAND ───────────────────────────────────────────────────────────── */
.brand {
  font-family: var(--font-serif);
  color:       var(--gold);
  text-decoration: none;
}

/* ── 15. LOGOUT LINK ─────────────────────────────────────────────────────── */
.logout {
  color:         var(--muted);
  text-decoration: none;
  padding:       4px 10px;
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
}
.logout:hover { color: var(--cream); }