/*
 * AiduWay brand base — the ONE stylesheet both frontends load:
 *   - the Filament panel (injected via the HEAD_END render hook, CrmPanelProvider)
 *   - the self-contained mobile frontend (<link> in layouts/mobile.blade.php)
 * Deliberately plain CSS in public/: the mobile frontend must render without a
 * built Vite bundle. Later steps (panel-wide typography, mails, PDF) dock onto
 * the same tokens instead of redefining them.
 *
 * Fonts: Manrope (brand/titles), Inter (text) — both OFL, see fonts/aiduway/.
 */

@font-face {
    font-family: 'Manrope';
    src: url('/fonts/aiduway/Manrope-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('/fonts/aiduway/Manrope-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/aiduway/Inter-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/aiduway/Inter-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/aiduway/Inter-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/*
 * Palette (style guide) — the raw brand colours, mode-independent.
 */
:root {
    --aw-green: #2ca97a;
    --aw-gold: #e9b932;
    --aw-deep-green: #0d5c45;
    --aw-deep-green-dark: #0a4736; /* hover/pressed on light */
    --aw-charcoal: #15221d;
    --aw-slate: #5b6670;
    --aw-mist: #f3f8f6;
    --aw-white: #ffffff;
    --aw-radius: 12px;

    --aw-font-brand: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --aw-font-text: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/*
 * SEMANTIC tokens — everything visual reads these, never the raw palette, so
 * light and dark are defined in exactly one place (mails/panel inherit later).
 *
 * LIGHT (canvas Mist, card white), measured contrast:
 *   wordmark  #0D5C45 on Mist   7.4:1
 *   tagline   #5B6670 on Mist   5.5:1
 *   text      #15221D on Mist  15.3:1 (16.4:1 on white)
 *   white on the #0D5C45 button 8.0:1
 */
:root {
    --aw-canvas: var(--aw-mist);
    --aw-surface: var(--aw-white);
    --aw-surface-border: #e3ebe7;
    --aw-text: var(--aw-charcoal);
    --aw-text-muted: var(--aw-slate);
    --aw-wordmark: var(--aw-deep-green);
    --aw-action: var(--aw-deep-green);
    --aw-action-hover: var(--aw-deep-green-dark);
    --aw-focus: var(--aw-green);
    /* Destructive/error. A deep, muted red — it has to sit next to the deep green
       without shouting; a signal red would fight the brand. */
    --aw-danger: #b3261e;
    --aw-danger-wash: rgb(179 38 30 / 8%);
}

/*
 * DARK — Filament toggles the `dark` class on <html> (panel toggle, not the OS
 * setting), so that is the switch used here; `prefers-color-scheme` is
 * deliberately NOT used, because the self-contained mobile frontend has no dark
 * theme and would otherwise get dark tokens on its light shell.
 *
 * The style guide defines light only; the dark values are derived so that the
 * login surface matches Filament's own dark surfaces (canvas = gray-950, card =
 * gray-900 — inside the panel these are re-bound to Filament's live palette in
 * the theme, so they cannot drift apart). Measured contrast on the dark canvas
 * (#030712) / card (#101828):
 *   wordmark  #2CA97A          6.8:1 / 6.0:1   (Tiefgrün would be unreadable)
 *   tagline   #99A1AF          7.7:1 / 6.8:1
 *   text      #F3F8F6         18.8:1 / 16.5:1
 *   white on the #12775A button 5.5:1 (button vs canvas 3.7:1 — visible per
 *   the 3:1 rule for non-text UI); hover LIGHTENS to #16855F (4.6:1).
 */
.dark {
    --aw-canvas: #030712;
    --aw-surface: #101828;
    --aw-surface-border: #1f2937;
    --aw-text: #f3f8f6;
    --aw-text-muted: #99a1af;
    --aw-wordmark: var(--aw-green);
    --aw-action: #12775a;
    --aw-action-hover: #16855f;
    --aw-focus: var(--aw-green);
    /* Deep red is unreadable on a dark surface — lift it, keep the hue. */
    --aw-danger: #f2b8b5;
    --aw-danger-wash: rgb(242 184 181 / 12%);
}

/*
 * Brand lockup: mark left, wordmark (Manrope) above the tagline (Inter).
 * Everything scales off --aw-mark: the mark only ever gets a HEIGHT, so its
 * aspect ratio is never squeezed (style guide, p. 6). The padding is the clear
 * space — the mark's head circle is ~18 % of its height, so 0.25 × height is
 * comfortably above the required 1 × head diameter.
 *
 * Colours come from the semantic tokens, so the lockup follows the mode: on
 * light the wordmark is Tiefgrün (7.4:1 on Mist) — AiduWay-Grün would only
 * reach 2.8:1 there — and on dark it flips to AiduWay-Grün (6.8:1), because
 * Tiefgrün on a dark canvas is unreadable. The mark (PNG) carries its own
 * colours and works on both.
 */
.aw-lockup {
    --aw-mark: 3.25rem;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--aw-mark) * 0.28);
    padding: calc(var(--aw-mark) * 0.25);
    max-width: 100%;
    text-decoration: none;
}

.aw-lockup-sm {
    --aw-mark: 2.5rem;
}

.aw-lockup-md {
    --aw-mark: 3.25rem;
}

/*
 * The login size — the SAME on the CRM panel and the mobile app. Fluid instead
 * of a media query: 4rem from tablet width upwards (the desktop look), scaling
 * down to 3rem on a narrow phone (~360 px), where the full-size lockup would
 * otherwise crowd the login card. Everything else (wordmark, tagline, gap,
 * clear space) is derived from --aw-mark and scales with it.
 */
.aw-lockup-lg {
    --aw-mark: clamp(3rem, 1.5rem + 6vw, 4rem);
}

.aw-lockup-center {
    justify-content: center;
}

.aw-lockup-mark {
    display: block;
    height: var(--aw-mark);
    width: auto; /* keeps the aspect ratio — never squeeze the mark */
    flex: none;
}

.aw-lockup-words {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    text-align: left;
}

.aw-lockup-name {
    font-family: var(--aw-font-brand);
    font-weight: 700;
    font-size: calc(var(--aw-mark) * 0.42);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--aw-wordmark);
}

.aw-lockup-tagline {
    font-family: var(--aw-font-text);
    font-weight: 400;
    font-size: calc(var(--aw-mark) * 0.19);
    line-height: 1.3;
    color: var(--aw-text-muted);
}

/* ---------------------------------------------------------------------------
 * Mobile login (self-contained frontend). Scoped to .aw-login so the other
 * /app pages keep their current look until the mobile styling step.
 *
 * The mobile shell has NO dark mode (no `dark` class, no toggle) — it stays
 * light in both OS settings, which is fine for a phone app used in schools.
 * It still reads the same semantic tokens, so it would follow automatically
 * once a dark shell is introduced.
 * ------------------------------------------------------------------------ */
.aw-brand-bg {
    background: var(--aw-canvas);
    font-family: var(--aw-font-text);
    color: var(--aw-text);
}

.aw-login .card {
    background: var(--aw-surface);
    border-radius: var(--aw-radius);
    border-color: var(--aw-surface-border);
    box-shadow: 0 1px 2px rgb(21 34 29 / 4%);
}

.aw-login h2 {
    font-family: var(--aw-font-brand);
    font-weight: 600;
    color: var(--aw-text);
}

.aw-login label {
    font-family: var(--aw-font-text);
    color: var(--aw-text);
}

.aw-login input {
    border-radius: 10px;
    font-family: var(--aw-font-text);
}

.aw-login input:focus {
    outline: 2px solid var(--aw-focus);
    outline-offset: 1px;
    border-color: var(--aw-focus);
}

.aw-login .btn {
    background: var(--aw-action);
    border-color: var(--aw-action);
    border-radius: 10px;
    font-family: var(--aw-font-text);
    font-weight: 600;
    color: var(--aw-white);
}

.aw-login .btn:hover {
    background: var(--aw-action-hover);
    border-color: var(--aw-action-hover);
}

.aw-login .btn-link {
    color: var(--aw-action);
    font-family: var(--aw-font-text);
}

/* --------------------------------------------------------------------------
 * Signature pad (partials/signature-pad-core) — the ONE control shared by the
 * Filament field, the mobile timesheet and the public signing page. Its colours
 * used to be pinned inline so they would survive every surrounding theme; they
 * live here now, because all three surfaces load THIS file (the panel via the
 * HEAD_END hook, mobile + signing via <x-brand.styles>). Loaded last, so these
 * rules also win over the panel's own button reset.
 *
 * "Übernehmen" is the primary action (deep green, like every other primary
 * button); "Löschen" is destructive — red outline and red label, but NO red fill:
 * a solid red block next to the green one would read as the louder of the two.
 * ------------------------------------------------------------------------ */
.aw-sigpad-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.aw-sigpad-btn {
    /* min-height, not just padding: this is a touch target on a phone. */
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: var(--aw-font-text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.aw-sigpad-btn-primary {
    background: var(--aw-action);
    border-color: var(--aw-action);
    color: var(--aw-white);
}

.aw-sigpad-btn-primary:hover {
    background: var(--aw-action-hover);
    border-color: var(--aw-action-hover);
}

.aw-sigpad-btn-danger {
    background: var(--aw-surface);
    border-color: var(--aw-danger);
    color: var(--aw-danger);
}

.aw-sigpad-btn-danger:hover {
    background: var(--aw-danger-wash);
}

.aw-sigpad-note {
    font-family: var(--aw-font-text);
    font-size: 0.8rem;
    color: var(--aw-text-muted);
}

/* --aw-wordmark, not --aw-deep-green: it flips to the lighter green in the dark
   panel, where deep green on a dark surface would be unreadable. */
.aw-sigpad-note-done {
    color: var(--aw-wordmark);
    font-weight: 600;
}

.aw-sigpad-canvas {
    width: 100%;
    height: 180px;
    border: 1px solid var(--aw-surface-border);
    border-radius: var(--aw-radius);
    background: var(--aw-white);
    touch-action: none;
    cursor: crosshair;
}