/* ============================================================
   JTTBH – base.css
   Mobile-first, semantic, no framework.
   ============================================================ */

/* Typefaces */
@font-face { font-family: 'Futura Condensed PT Medium'; font-style: normal; font-weight: normal; src: local('Futura Condensed PT Medium'), url('futura-condensed-pt-medium-589e44ed1e3a5.woff') format('woff'); }
@font-face { font-family: 'Futura Condensed PT Medium Oblique'; font-style: normal; font-weight: normal; src: local('Futura Condensed PT Medium Oblique'), url('futura-condensed-pt-medium-oblique-589e4507d391c.woff') format('woff'); }
@font-face { font-family: 'Futura PT Book'; font-style: normal; font-weight: normal; src: local('Futura PT Book'), url('futura-pt-book-589a6dec272c3.woff') format('woff'); }
@font-face { font-family: 'Futura PT Book Oblique'; font-style: normal; font-weight: normal; src: local('Futura PT Book Oblique'), url('futura-pt-book-oblique-589e44623c7b4.woff') format('woff'); }
@font-face { font-family: 'Futura PT Light'; font-style: normal; font-weight: normal; src: local('Futura PT Light'), url('futura-pt-light-589a6e187563a.woff') format('woff'); }
@font-face { font-family: 'Futura PT Light Oblique'; font-style: normal; font-weight: normal; src: local('Futura PT Light Oblique'), url('futura-pt-light-oblique-589e448ae90e2.woff') format('woff'); }
@font-face { font-family: 'Futura PT Medium'; font-style: normal; font-weight: normal; src: local('Futura PT Medium'), url('futura-pt-medium-589e45b956de4.woff') format('woff'); }
@font-face { font-family: 'Futura PT Medium Oblique'; font-style: normal; font-weight: normal; src: local('Futura PT Medium Oblique'), url('futura-pt-medium-oblique-589e460871ec2.woff') format('woff'); }
@font-face { font-family: 'Futura PT DemiBold'; font-style: normal; font-weight: normal; src: local('Futura PT DemiBold'), url('futura-pt-demibold-589e43b852117.woff') format('woff'); }
@font-face { font-family: 'Futura PT DemiBold Oblique'; font-style: normal; font-weight: normal; src: local('Futura PT DemiBold Oblique'), url('futura-pt-demibold-oblique-589e43ec3ea82.woff') format('woff'); }
@font-face { font-family: 'Futura PT Bold'; font-style: normal; font-weight: normal; src: local('Futura PT Bold'), url('futura-pt-bold-589e44b6aacd3.woff') format('woff'); }
@font-face { font-family: 'Futura PT Bold Oblique'; font-style: normal; font-weight: normal; src: local('Futura PT Bold Oblique'), url('futura-pt-bold-oblique-589e453384a18.woff') format('woff'); }
@font-face { font-family: 'Futura PT Heavy'; font-style: normal; font-weight: normal; src: local('Futura PT Heavy'), url('futura-pt-heavy-589a6dd12187e.woff') format('woff'); }
@font-face { font-family: 'Futura PT Heavy Oblique'; font-style: normal; font-weight: normal; src: local('Futura PT Heavy Oblique'), url('futura-pt-heavy-oblique-589a6e480ab16.woff') format('woff'); }


/* ------------------------------------------------------------
   Custom properties
   ------------------------------------------------------------ */
:root {
  /* Colours */
  --color-primary:     #2563eb;
  --color-primary-dk:  #1d4ed8;
  --color-text:        #212529;
  --color-text-muted:  #868e96;
  --color-bg:          #ffffff;
  --color-surface:     #f8fafc;
  --color-border:      #e2e8f0;
  --color-success:     #16a34a;
  --color-warning:     #d97706;
  --color-error:       #dc2626;
  --color-muted:       #64748b;

  /* Semantic message colours */
  --color-msg-error:    #fef2f2;
  --color-msg-error-bd: #fca5a5;
  --color-msg-warning:  #fffbeb;
  --color-msg-warning-bd: #fcd34d;
  --color-msg-message:  #eff6ff;
  --color-msg-message-bd: #93c5fd;
  --color-msg-success:  #f0fdf4;
  --color-msg-success-bd: #86efac;

  /* Typography */
  --font-family: 'Futura PT Medium', Helvetica, Arial, sans-serif;
  --font-mono:   ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --font-size-base: 1rem;
  --line-height:    1.6;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Layout */
  --content-max: 1100px;
  --header-h:    4.5rem;
  --radius:      0.375rem;
  --radius-lg:   0.5rem;

  /* Transitions */
  --transition: 150ms ease;

  /* Open Color palette — https://yeun.github.io/open-color/ */
  --oc-gray-0: #f8f9fa; --oc-gray-1: #f1f3f5; --oc-gray-2: #e9ecef; --oc-gray-3: #dee2e6;
  --oc-gray-4: #ced4da; --oc-gray-5: #adb5bd; --oc-gray-6: #868e96; --oc-gray-7: #495057;
  --oc-gray-8: #343a40; --oc-gray-9: #212529;

  --oc-red-0: #fff5f5; --oc-red-1: #ffe3e3; --oc-red-2: #ffc9c9; --oc-red-3: #ffa8a8;
  --oc-red-4: #ff8787; --oc-red-5: #ff6b6b; --oc-red-6: #fa5252; --oc-red-7: #f03e3e;
  --oc-red-8: #e03131; --oc-red-9: #c92a2a;

  --oc-pink-0: #fff0f6; --oc-pink-1: #ffdeeb; --oc-pink-2: #fcc2d7; --oc-pink-3: #faa2c1;
  --oc-pink-4: #f783ac; --oc-pink-5: #f06595; --oc-pink-6: #e64980; --oc-pink-7: #d6336c;
  --oc-pink-8: #c2255c; --oc-pink-9: #a61e4d;

  --oc-grape-0: #f8f0fc; --oc-grape-1: #f3d9fa; --oc-grape-2: #eebefa; --oc-grape-3: #e599f7;
  --oc-grape-4: #da77f2; --oc-grape-5: #cc5de8; --oc-grape-6: #be4bdb; --oc-grape-7: #ae3ec9;
  --oc-grape-8: #9c36b5; --oc-grape-9: #862e9c;

  --oc-violet-0: #f3f0ff; --oc-violet-1: #e5dbff; --oc-violet-2: #d0bfff; --oc-violet-3: #b197fc;
  --oc-violet-4: #9775fa; --oc-violet-5: #845ef7; --oc-violet-6: #7950f2; --oc-violet-7: #7048e8;
  --oc-violet-8: #6741d9; --oc-violet-9: #5f3dc4;

  --oc-indigo-0: #edf2ff; --oc-indigo-1: #dbe4ff; --oc-indigo-2: #bac8ff; --oc-indigo-3: #91a7ff;
  --oc-indigo-4: #748ffc; --oc-indigo-5: #5c7cfa; --oc-indigo-6: #4c6ef5; --oc-indigo-7: #4263eb;
  --oc-indigo-8: #3b5bdb; --oc-indigo-9: #364fc7;

  --oc-blue-0: #e7f5ff; --oc-blue-1: #d0ebff; --oc-blue-2: #a5d8ff; --oc-blue-3: #74c0fc;
  --oc-blue-4: #4dabf7; --oc-blue-5: #339af0; --oc-blue-6: #228be6; --oc-blue-7: #1c7ed6;
  --oc-blue-8: #1971c2; --oc-blue-9: #1864ab;

  --oc-cyan-0: #e3fafc; --oc-cyan-1: #c5f6fa; --oc-cyan-2: #99e9f2; --oc-cyan-3: #66d9e8;
  --oc-cyan-4: #3bc9db; --oc-cyan-5: #22b8cf; --oc-cyan-6: #15aabf; --oc-cyan-7: #1098ad;
  --oc-cyan-8: #0c8599; --oc-cyan-9: #0b7285;

  --oc-teal-0: #e6fcf5; --oc-teal-1: #c3fae8; --oc-teal-2: #96f2d7; --oc-teal-3: #63e6be;
  --oc-teal-4: #38d9a9; --oc-teal-5: #20c997; --oc-teal-6: #12b886; --oc-teal-7: #0ca678;
  --oc-teal-8: #099268; --oc-teal-9: #087f5b;

  --oc-green-0: #ebfbee; --oc-green-1: #d3f9d8; --oc-green-2: #b2f2bb; --oc-green-3: #8ce99a;
  --oc-green-4: #69db7c; --oc-green-5: #51cf66; --oc-green-6: #40c057; --oc-green-7: #37b24d;
  --oc-green-8: #2f9e44; --oc-green-9: #2b8a3e;

  --oc-lime-0: #f4fce3; --oc-lime-1: #e9fac8; --oc-lime-2: #d8f5a2; --oc-lime-3: #c0eb75;
  --oc-lime-4: #a9e34b; --oc-lime-5: #94d82d; --oc-lime-6: #82c91e; --oc-lime-7: #74b816;
  --oc-lime-8: #66a80f; --oc-lime-9: #5c940d;

  --oc-yellow-0: #fff9db; --oc-yellow-1: #fff3bf; --oc-yellow-2: #ffec99; --oc-yellow-3: #ffe066;
  --oc-yellow-4: #ffd43b; --oc-yellow-5: #fcc419; --oc-yellow-6: #fab005; --oc-yellow-7: #f59f00;
  --oc-yellow-8: #f08c00; --oc-yellow-9: #e67700;

  --oc-orange-0: #fff4e6; --oc-orange-1: #ffe8cc; --oc-orange-2: #ffd8a8; --oc-orange-3: #ffc078;
  --oc-orange-4: #ffa94d; --oc-orange-5: #ff922b; --oc-orange-6: #fd7e14; --oc-orange-7: #f76707;
  --oc-orange-8: #e8590c; --oc-orange-9: #d9480f;

  /* Per-section accent colors */
  --accent-dashboard:   var(--oc-gray-7);
  --accent-todo:        var(--oc-indigo-6);
  --accent-habit:       var(--oc-teal-6);
  --accent-project:     var(--oc-violet-6);
  --accent-book:        var(--oc-orange-6);
  --accent-journal:     var(--oc-pink-6);
  --accent-bookmark:    var(--oc-cyan-6);
  --accent-fitness:     var(--oc-red-5);
  --accent-podcast:     var(--oc-grape-6);
  --accent-chore:       var(--oc-lime-7);
  --accent-vacation:    var(--oc-yellow-7);
  --accent-appointment: var(--oc-blue-6);
  --accent-admin:       var(--oc-gray-8);
}



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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "header"
    "messages"
    "main"
    "footer";
}

/* ------------------------------------------------------------
   Typography
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

p { margin-bottom: var(--space-4); }

p:last-child { margin-bottom: 0; }

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--transition);
}

a:hover { color: var(--color-primary-dk); }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-surface);
  padding: 0.1em 0.3em;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

ul, ol {
  padding-left: var(--space-6);
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* ------------------------------------------------------------
   Focus styles – accessible, visible
   ------------------------------------------------------------ */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */
header {
  grid-area: header;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
}

.site-name {
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.05em;
}

.site-name:hover {
  color: #e2e8f0;
}

/* <login> custom element */
login {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 0.875rem;
}

login .login-username {
  color: #94a3b8;
  font-weight: 600;
}

login a {
  color: #cbd5e1;
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
}

login a:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* ------------------------------------------------------------
   Flash messages
   ------------------------------------------------------------ */
.messages {
  grid-area: messages;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6) 0;
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}

.message {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border-left: 4px solid transparent;
  font-size: 0.9375rem;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.message--error {
  background: var(--color-msg-error);
  border-color: var(--color-error);
  color: #7f1d1d;
}

.message--warning {
  background: var(--color-msg-warning);
  border-color: var(--color-warning);
  color: #78350f;
}

.message--message,
.message--info {
  background: var(--color-msg-message);
  border-color: var(--color-primary);
  color: #1e3a8a;
}

.message--success {
  background: var(--color-msg-success);
  border-color: var(--color-success);
  color: #14532d;
}

/* ------------------------------------------------------------
   Main content area
   ------------------------------------------------------------ */
main {
  grid-area: main;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-12);
}

/* Page header inside main */
.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.page-header h1 {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   Footer / navigation
   ------------------------------------------------------------ */
footer {
  grid-area: footer;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-6);
}

footer nav {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
}

footer nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

footer nav a:hover {
  background: var(--color-border);
  color: var(--color-text);
}

footer nav a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 600;
  background: none;
}

/* Separator between nav links */
footer nav a + a::before {
  content: '·';
  display: inline-block;
  margin-right: var(--space-3);
  color: var(--color-border);
  pointer-events: none;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--font-size-base);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition);
  line-height: 1.5;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background: var(--color-primary-dk);
  border-color: var(--color-primary-dk);
  color: #fff;
}

.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn--secondary:hover {
  background: var(--color-surface);
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

.btn--success {
  background: var(--color-success);
  color: #fff;
  border-color: var(--color-success);
}

.btn--success:hover {
  background: #15803d;
  color: #fff;
}

.btn--danger {
  background: var(--color-error);
  color: #fff;
  border-color: var(--color-error);
}

.btn--danger:hover {
  background: #b91c1c;
  color: #fff;
}

.btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: 0.875rem;
}

/* Google sign-in button */
.btn--google {
  background: #fff;
  color: #3c4043;
  border-color: #dadce0;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.btn--google:hover {
  background: #f8faff;
  border-color: #4285f4;
  color: #3c4043;
  box-shadow: 0 2px 6px rgba(66,133,244,0.2);
}

/* ------------------------------------------------------------
   Forms
   ------------------------------------------------------------ */
.form-field {
  margin-bottom: var(--space-5);
}

.form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="date"],
.form-field input[type="number"],
.form-field input[type="password"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--font-size-base);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
  line-height: 1.5;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.form-field textarea {
  resize: vertical;
  min-height: 6rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-divider {
  margin: var(--space-4) 0;
}

.form-note {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

.inline-form {
  display: inline;
}

/* Checkboxes */
.perm-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: var(--space-4);
  margin-bottom: var(--space-2);
  font-size: 0.9375rem;
  cursor: pointer;
}

.perm-check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--color-primary);
}

/* ------------------------------------------------------------
   Tables
   ------------------------------------------------------------ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin-top: var(--space-4);
}

.data-table caption {
  caption-side: top;
}

.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.data-table th {
  font-weight: 700;
  background: var(--color-surface);
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.data-table tbody tr:hover {
  background: var(--color-surface);
}

.data-table .actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.data-table--log .log-path code {
  font-size: 0.8125rem;
  word-break: break-all;
}

/* Status badges in log table */
.status-badge {
  display: inline-block;
  padding: 0.1em 0.4em;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

.status-badge--2xx { background: #dcfce7; color: #166534; }
.status-badge--3xx { background: #eff6ff; color: #1e40af; }
.status-badge--4xx { background: #fef9c3; color: #854d0e; }
.status-badge--5xx { background: #fee2e2; color: #991b1b; }

/* Log row accent */
.log-row--4xx { background: #fffbeb; }
.log-row--5xx { background: #fef2f2; }

/* ------------------------------------------------------------
   Permission badges
   ------------------------------------------------------------ */
.perm-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.perm-badge {
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.perm-badge--on {
  background: #dbeafe;
  color: #1e40af;
}

/* Permission edit form row */
.perm-form-row td {
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
}

.perm-form fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.perm-form legend {
  font-weight: 700;
  padding: 0 var(--space-2);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------
   Auth card (login / pending)
   ------------------------------------------------------------ */
.auth-card {
  max-width: 28rem;
  margin: var(--space-12) auto 0;
  padding: var(--space-8);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  text-align: center;
}

.auth-card > header {
  /* override sticky header styles when used inside article */
  position: static;
  background: none;
  color: inherit;
  height: auto;
  padding: 0;
  margin-bottom: var(--space-6);
  display: block;
}

.auth-card > header h1 {
  font-size: 2rem;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.auth-card > header p {
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.auth-card > section h2 {
  font-size: 1.125rem;
  margin-bottom: var(--space-2);
}

.auth-card > section p {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  margin-bottom: var(--space-6);
}

.auth-card > footer {
  /* override grid footer */
  background: none;
  border: none;
  padding: 0;
  margin-top: var(--space-6);
}

/* ------------------------------------------------------------
   Dashboard widgets
   ------------------------------------------------------------ */
.widget {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}

.widget-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.widget-header h2 {
  font-size: 1.125rem;
  margin-bottom: 0;
}

.widget-header h2 a {
  color: var(--color-text);
  text-decoration: none;
}

.widget-header h2 a:hover {
  color: var(--color-primary);
}

.widget-meta {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.widget-empty {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.9375rem;
}

/* Today date display */
.today-date {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Habit grid */
.habit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

.habit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.habit-toggle {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: border-color var(--transition), background var(--transition),
              transform var(--transition);
}

.habit-toggle:hover {
  border-color: var(--color-primary);
  background: #eff6ff;
  transform: scale(1.05);
}

.habit-item--done .habit-toggle {
  border-color: var(--color-success);
  background: #f0fdf4;
}

.habit-toggle:active {
  transform: scale(0.95);
}

.habit-name {
  font-size: 0.75rem;
  text-align: center;
  color: var(--color-text-muted);
  line-height: 1.2;
  max-width: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Todo list */
.todo-list {
  list-style: none;
  padding: 0;
}

.todo-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.todo-checkbox {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  accent-color: var(--color-success);
  cursor: pointer;
}

.todo-title {
  font-size: 0.9375rem;
  transition: color var(--transition);
}

.todo-item--done .todo-title {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.todo-content {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  padding-left: calc(1.125rem + var(--space-3));
  margin: 0;
}

/* ------------------------------------------------------------
   Admin section layout
   ------------------------------------------------------------ */
.admin-section {
  margin-bottom: var(--space-10);
}

.admin-section h2 {
  margin-bottom: var(--space-4);
}

.admin-nav {
  display: flex;
  gap: var(--space-2);
}

.admin-nav a {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition);
}

.admin-nav a:hover {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

.admin-nav a[aria-current="page"] {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ------------------------------------------------------------
   Settings sections
   ------------------------------------------------------------ */
.settings-section {
  margin-bottom: var(--space-10);
}

.settings-section > h2 {
  margin-bottom: var(--space-2);
}

.settings-section > p {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  margin-bottom: var(--space-5);
}

.settings-form {
  max-width: 32rem;
}

.settings-form h3 {
  margin-bottom: var(--space-4);
}

.settings-form--vacation {
  max-width: 40rem;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.empty-state {
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: var(--space-6);
}

/* ------------------------------------------------------------
   Error pages
   ------------------------------------------------------------ */
.error-page {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

.error-page > header {
  /* override sticky header */
  position: static;
  background: none;
  color: inherit;
  height: auto;
  padding: 0;
  display: block;
  margin-bottom: var(--space-6);
}

.error-page h1 {
  font-size: 5rem;
  color: var(--color-border);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.error-subtitle {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0;
}

.error-page > section p {
  color: var(--color-text-muted);
  max-width: 36rem;
  margin: var(--space-3) auto;
}

/* ------------------------------------------------------------
   Screen-reader-only utility
   ------------------------------------------------------------ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   Responsive – 768px breakpoint
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }

  .habit-grid {
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  }

  .data-table--log .log-path {
    max-width: 24rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .messages {
    padding-top: var(--space-5);
  }
}

/* ------------------------------------------------------------
   Print styles
   ------------------------------------------------------------ */
@media print {
  header,
  footer,
  .messages,
  .btn,
  nav {
    display: none !important;
  }

  body {
    display: block;
    color: #000;
    background: #fff;
  }

  main {
    padding: 0;
    max-width: none;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  .data-table th,
  .data-table td {
    border-bottom: 1px solid #ccc;
  }
}