/* Unikorn master stylesheet: the colour scheme and fonts are changed here only.
   DaisyUI reads these variables; every page uses the theme through data-theme="unikorn". */

/* Block 1: colours (names are DaisyUI's; values match the landing page and mockups) */
[data-theme="unikorn"] {
  color-scheme: light;
  --color-base-100: #FFFFFF;          /* cards, inputs */
  --color-base-200: #F6F4FB;          /* page background */
  --color-base-300: #ECE8F4;          /* borders, lines */
  --color-base-content: #160B30;      /* main text */
  --color-neutral: #1E0F3F;           /* header bar */
  --color-neutral-content: #FFFFFF;   /* text on the header */
  --color-primary: #32D583;           /* main action: Save, New person */
  --color-primary-content: #160B30;   /* text on the main action */
  --color-secondary: #7F56D9;         /* second action: Edit */
  --color-secondary-content: #FFFFFF;
  --color-accent: #D6BBFB;            /* highlights */
  --color-accent-content: #160B30;
  --color-info: #2E90FA;              /* second end of the highlight gradient */
  --color-info-content: #FFFFFF;
  --color-success: #027A48;           /* approved */
  --color-success-content: #FFFFFF;
  --color-error: #B42318;             /* errors, rejected */
  --color-error-content: #FFFFFF;

  /* Block 2: rounded corners */
  --radius-box: 0.75rem;              /* cards */
  --radius-field: 0.5rem;             /* buttons, inputs */
  --radius-selector: 0.5rem;          /* tick boxes, badges */
}

/* Block 3: fonts – plain text in the system font, titles in Georgia */
body { font-family: system-ui, 'Segoe UI', -apple-system, Helvetica, sans-serif; }
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; }

/* Block 4: form fields drawn by Django (inputs, drop-downs, tick boxes).
   Applies inside any element with class "uv-form"; colours follow the theme. */
.uv-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.uv-form select {
  width: 100%; height: 2rem; padding: 0 0.6rem;
  background: var(--color-base-100); color: var(--color-base-content);
  border: 1px solid var(--color-base-300); border-radius: var(--radius-field);
}
.uv-form input:focus, .uv-form select:focus {
  outline: 2px solid var(--color-secondary); outline-offset: -1px;
}
.uv-form input[type=checkbox] { accent-color: var(--color-secondary); width: 1rem; height: 1rem; }

/* Block 5: row tables. Fields start narrow so a whole row fits;
   the field you are typing in widens, and narrows again when you leave it */
.uv-form td select { min-width: 8rem; }
.uv-form td select[name$="type_id"] { min-width: 6.5rem; }   /* address and contact type: shorter words */
.uv-form td input:not([type=checkbox]) { min-width: 4.5rem; transition: min-width 0.15s; }
.uv-form td input[type=date] { min-width: 8.5rem; }
.uv-form td input:not([type=checkbox]):not([type=date]):focus { min-width: 14rem; }

/* Block 6: text sizes. Change sizes here only; templates use the class names below. */
:root {
  --uv-size-text:   0.875rem;   /* ordinary text, tables included */
  --uv-size-small:  0.75rem;    /* small text: date under a name, footers, error lines */
  --uv-size-label:  0.75rem;    /* field labels */
  --uv-size-title:  1.5rem;     /* page title */
  --uv-size-panel:  1rem;       /* panel titles */
  --uv-size-menu:   0.875rem;   /* sidebar menu */
  --uv-size-button: 0.8125rem;  /* all buttons */
}
body, .table tr, .table th, .table td { font-size: var(--uv-size-text); }
.uv-small       { font-size: var(--uv-size-small); }
.uv-label       { font-size: var(--uv-size-label); opacity: 0.6; }   /* opacity: how pale */
.uv-title       { font-size: var(--uv-size-title); }
.uv-panel-title { font-size: var(--uv-size-panel); }
.menu, .menu :where(li) > :where(a, summary) { font-size: var(--uv-size-menu); }
.btn            { font-size: var(--uv-size-button); }