/* ── Font ───────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=Manrope:wght@400..800&display=swap');

/*
 * smyga brand theme – daisyUI overrides
 * ─────────────────────────────────────────────────────────────────────────────
 * This is the single file to edit when the palette or typography changes.
 *
 * FONTS
 * Body font:    DM Sans  (Google Fonts, variable axes opsz + wght)
 * Heading font: Manrope  (Google Fonts, variable wght 400–800)
 *   Scale: 1.2× from 14px → h6 14 · h5 16 · h4 19 · h3 23 · h2 28 · h1 36px
 *
 * PALETTE (hex → oklch using https://oklch.com)
 *   #437356  Forest green  → oklch(46% 0.11 148)   PRIMARY  — nav, main CTAs
 *   #1E4147  Dark teal     → oklch(27% 0.05 213)   SECONDARY — text, footer, dark accents
 *   #AAC789  Sage green    → oklch(77% 0.08 139)   ACCENT/soft — secondary badges
 *   #FAE3B4  Warm peach    → oklch(91% 0.07 75)    HIGHLIGHT — soft backgrounds
 *   #F34A53  Coral red     → oklch(58% 0.22 22)    DANGER — errors, destructive actions
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Typography ────────────────────────────────────────────────────────────── */
:root {
  --font-sans:    'DM Sans',  ui-sans-serif, system-ui, sans-serif;
  --font-heading: 'Manrope',  ui-sans-serif, system-ui, sans-serif;

  /* Modular type scale — 1.2× from 14px body-s */
  --text-h1: 36px;
  --text-h2: 28px;
  --text-h3: 23px;
  --text-h4: 19px;
  --text-h5: 16px;
  --text-h6: 14px;

  /* Palette tokens – reference these in custom CSS when possible */
  --color-brand-primary:   #437356;
  --color-brand-dark:      #1E4147;
  --color-brand-sage:      #AAC789;
  --color-brand-peach:     #FAE3B4;
  --color-brand-red:       #F34A53;
}

/* Body & form controls: DM Sans */
body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
  font-size: 16px;
}

@media (max-width: 768px) {
  body, button, input, select, textarea {
    font-size: 20px;
  }
}

/* Headings: Manrope with modular scale */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  font-weight: 700;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); font-weight: 600; }
h4 { font-size: var(--text-h4); font-weight: 600; }
h5 { font-size: var(--text-h5); font-weight: 600; }
h6 { font-size: var(--text-h6); font-weight: 600; }

/* ── Light theme overrides ─────────────────────────────────────────────────── */
[data-theme="light"] {
  /* Primary – forest green */
  --color-primary:         oklch(46% 0.11 148);   /* #437356 */
  --color-primary-content: oklch(100% 0 0);

  /* Secondary – dark teal */
  --color-secondary:         oklch(27% 0.05 213); /* #1E4147 */
  --color-secondary-content: oklch(100% 0 0);

  /* Accent – sage green */
  --color-accent:         oklch(77% 0.08 139);    /* #AAC789 */
  --color-accent-content: oklch(27% 0.05 213);    /* dark text on sage */

  /* Error / danger – coral red */
  --color-error:         oklch(58% 0.22 22);      /* #F34A53 */
  --color-error-content: oklch(100% 0 0);
}

/* ── Dark theme overrides ──────────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-primary:         oklch(54% 0.11 148);
  --color-primary-content: oklch(100% 0 0);

  --color-secondary:         oklch(35% 0.05 213);
  --color-secondary-content: oklch(100% 0 0);

  --color-accent:         oklch(70% 0.08 139);
  --color-accent-content: oklch(27% 0.05 213);

  --color-error:         oklch(62% 0.22 22);
  --color-error-content: oklch(100% 0 0);
}

/* ── Button class compatibility ────────────────────────────────────────────── */
/*
 * Old templates used bare .btn-primary / .btn-secondary without the .btn base.
 * During migration all instances are updated to `btn btn-primary` / `btn btn-ghost`.
 * These rules keep any missed occurrences looking reasonable in the meantime.
 */
button.btn-primary:not(.btn),
a.btn-primary:not(.btn) {
  /* Let daisyUI's .btn + .btn-primary take over on migrated elements;
     un-migrated elements still get basic primary colours from styles.css */
}
/* ── Admin sidebar drawer ─────────────────────────────────────────────────── */

/* Hidden checkbox drives open/close state */
.admin-sidebar-checkbox { display: none; }

/* Trigger strip: fixed right below header */
.admin-sidebar-strip {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  height: 22px;
  background: #163136;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 3px 0 3px 14px;
  cursor: pointer;
  z-index: 999;
  user-select: none;
  transition: background .15s;
}
.admin-sidebar-strip:hover { background: #1a3a3f; }

/* Bouncing arrow animation (idle state) */
.admin-sidebar-arrow {
  color: rgba(255,255,255,0.7);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  animation: sidebar-arrow-bounce 1.8s ease-in-out infinite;
}
.admin-sidebar-strip:hover .admin-sidebar-arrow { color: #fff; }
body:has(#admin-sidebar-toggle:checked) .admin-sidebar-arrow {
  animation: none;
  transform: rotate(180deg);
}
@keyframes sidebar-arrow-bounce {
  0%, 100% { transform: translateX(0); }
  45%       { transform: translateX(3px); }
  65%       { transform: translateX(1px); }
}

/* Dim overlay */
.admin-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  top: 86px;
  background: rgba(0,0,0,0.35);
  z-index: 998;
}
.admin-sidebar-checkbox:checked ~ .admin-sidebar-overlay { display: block; }

/* Sidebar panel */
.admin-sidebar {
  position: fixed;
  top: 86px;
  left: 0;
  bottom: 0;
  width: 260px;
  background: #1a3a3f;
  z-index: 999;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow: 4px 0 24px rgba(0,0,0,0.25);
}
.admin-sidebar-checkbox:checked ~ .admin-sidebar-overlay ~ .admin-sidebar,
.admin-sidebar-checkbox:checked ~ .admin-sidebar {
  transform: translateX(0);
}

.admin-sidebar-inner { padding: 12px 8px 24px; }

/* ── Sidebar pin button ─────────────────────────────────── */
.admin-sidebar-pin-bar {
  display: flex;
  justify-content: flex-end;
  padding: 2px 4px 6px;
}
.admin-sidebar-pin-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.3);
  padding: 5px 6px;
  border-radius: 5px;
  line-height: 1;
  transition: color .15s, background .15s;
}
.admin-sidebar-pin-btn:hover {
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.08);
}
.admin-sidebar-pin-btn.pinned { color: #00D9A3; }

/* ── Pinned sidebar state ───────────────────────────────── */
body.sidebar-pinned .admin-sidebar          { transform: translateX(0) !important; }
body.sidebar-pinned .admin-sidebar-overlay  { display: none !important; }
body.sidebar-pinned .admin-sidebar-strip    { display: none; }
body.sidebar-pinned .page-content           { margin-left: 260px; transition: margin-left .28s; }

/* Section label */
.admin-sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  padding: 10px 12px 4px;
  margin: 0;
}

.admin-sidebar-divider {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 12px 8px;
}

/* Override DaisyUI menu colours inside sidebar */
.admin-sidebar .menu a,
.admin-sidebar .menu summary {
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  border-radius: 6px;
  padding: 6px 12px;
}
.admin-sidebar .menu a:hover,
.admin-sidebar .menu a:focus,
.admin-sidebar .menu summary:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.admin-sidebar .menu ul {
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,0.12);
  margin-left: 12px;
}
.admin-sidebar .menu ul a { font-size: 12px; color: rgba(255,255,255,0.6); }
.admin-sidebar .menu ul a:hover { color: #fff; }
/* ── Notification badge (shared, base.html) ────────────────────────────────── */
.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #dc2626;
  color: white;
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  pointer-events: none;
}