/* ==========================================================================
   Flower CRM — design system (stage 2). Mustfilm visual language.

   One plain CSS file. No build step, no external libraries, no web fonts:
   on a bad mobile connection the page must arrive whole and not jump.

   Rule of this file: EVERY colour, size, spacing, radius and shadow is a
   variable declared in the :root block below. Nothing below that block may
   contain a raw value. Change one variable here — it changes everywhere.
   The only bare numbers allowed further down are structural (0, 1, 100%,
   50%), because they carry no design decision.
   ========================================================================== */

:root {
    /* No dark theme at all — declared so a phone cannot repaint the page
       by itself and turn the light-green accent into mud. */
    color-scheme: light;

    /* --- Colour: brand ---------------------------------------------------
       Picked with an eyedropper from the Mustfilm Editor screenshots. */
    --color-accent: #BEE04D;          /* main action button                  */
    --color-accent-strong: #B4D842;   /* the same button, hovered or pressed */
    --color-accent-text: #22300A;     /* text ON the accent — always DARK.
                                         White on light green is physically
                                         unreadable in sunlight.             */
    --color-olive: #476400;           /* dark olive secondary action         */
    --color-olive-text: #FFFFFF;      /* text on olive — always white        */

    /* --- Colour: surfaces ------------------------------------------------ */
    --color-page: #F0F1F3;            /* page background, light grey         */
    --color-card: #FFFFFF;            /* card and input background           */
    --color-border: #E7E9EC;          /* card border, also disabled surfaces */

    /* --- Colour: text ---------------------------------------------------- */
    --color-text: #14161A;
    /* The brief sets a limit here, not a fixed code: «secondary text never
       lighter than #6B7280». #6B7280 is exactly on the edge — on the grey page
       background it reads at 4.28 against the 4.5 norm, and inside a grey pill
       at 3.97. One step darker clears both (4.94 and 4.59) and still looks
       secondary next to #14161A. */
    --color-text-muted: #5C636F;      /* never lighter than #6B7280          */

    /* --- Colour: hint panel ---------------------------------------------- */
    --color-hint-bg: #F3FFDE;
    --color-hint-border: #E4F2C4;
    --color-hint-text: #2E3D12;

    /* --- Colour: dark pill / toast --------------------------------------- */
    --color-dark: #17181B;
    --color-dark-text: #FFFFFF;

    /* --- Colour: status --------------------------------------------------- */
    --color-error: #C0341D;           /* error text and error border         */
    --color-error-bg: #FDECE8;
    --color-success: #3D5600;         /* palette of the project; the «done»
                                         banner itself is built on stage 4   */
    --color-success-bg: #F3FFDE;

    /* --- Colour: keyboard focus ------------------------------------------ */
    --color-focus: #476400;
    --focus-width: 3px;
    --focus-offset: 2px;

    /* --- Type -------------------------------------------------------------
       Only fonts already present on the phone. */
    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-title: 24px;               /* screen title                        */
    --font-subtitle: 20px;            /* block title                         */
    --font-body: 17px;                /* normal text                         */
    --font-small: 15px;               /* smallest text for reading           */
    --font-button: 17px;
    --font-input: 17px;               /* never below 16px, otherwise iPhone
                                         zooms the page while typing         */
    --font-nav-label: 11px;           /* the ONE exception to «not smaller
                                         than 15»: the bottom menu caption
                                         under a 24px icon. It is a label of
                                         an icon, not text to read.          */
    --weight-normal: 400;
    --weight-medium: 600;             /* button text, labels                 */
    --weight-bold: 700;               /* headings                            */
    --line-body: 1.5;
    --line-tight: 1.25;

    /* --- Spacing: always a multiple of 4 --------------------------------- */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;

    /* --- Radius ----------------------------------------------------------- */
    --radius-card: 18px;              /* card and hint panel                 */
    --radius-control: 12px;           /* button and input                    */
    --radius-pill: 999px;             /* pills are fully round               */

    /* --- Shadow: exactly two in the whole project ------------------------ */
    --shadow-card: 0 2px 12px rgba(20, 22, 26, 0.06);
    --shadow-nav: 0 -2px 12px rgba(20, 22, 26, 0.08);

    /* --- Sizes ------------------------------------------------------------ */
    --size-tap: 44px;                 /* minimum tap target                  */
    --size-control: 52px;             /* main button and input height        */
    --size-nav: 56px;                 /* bottom menu height, plus safe area  */
    --size-icon: 24px;
    --border-width: 1px;
    --press-shift: 1px;               /* how far a pressed button sinks      */

    /* --- Layout ----------------------------------------------------------- */
    --layout-max: 1100px;             /* content width on a computer         */
    --layout-text-max: 720px;         /* a column of text                    */
    --layout-swatch: 140px;           /* colour square on the /ui showcase   */
    --page-pad: var(--space-16);      /* screen margins on a phone;
                                         widened to 24 in the media query    */
    --nav-safe: env(safe-area-inset-bottom, 0px);  /* iPhone home bar        */

    /* --- Motion and layers ------------------------------------------------ */
    --transition: 0.12s ease;
    --toast-visible-shift: 0;
    --toast-hidden-shift: var(--space-8);
    --z-nav: 10;
    --z-toast: 20;
}

/* Respect a user who asked the phone to stop animating. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition: 0s;
    }
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Keeps the page readable when the phone owner enlarged the system font. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-body);
    line-height: var(--line-body);
    color: var(--color-text);
    background: var(--color-page);
    /* Nothing may stick out sideways on a 360px screen. */
    overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, figure {
    margin: 0;
}

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

img, svg {
    max-width: 100%;
}

a {
    color: var(--color-olive);
}

/* One focus ring for the whole project: thick, dark olive, only for people
   moving by keyboard — a mouse click must not draw it. */
:focus-visible {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
}

/* Twin of the rule above, for the /ui showcase only: it has to display a
   state the reader is not currently in. Same declarations, no new values. */
.is-focus {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
}

/* ==========================================================================
   Page skeleton
   ========================================================================== */

.page {
    padding: var(--space-24) var(--page-pad) var(--space-48);
}

/* Room for the bottom menu so the last button is never hidden by it.
   Only pages that actually have the menu reserve it. */
.page--with-nav {
    padding-bottom: calc(var(--size-nav) + var(--nav-safe) + var(--space-32));
}

.page__inner {
    max-width: var(--layout-max);
    margin: 0 auto;
}

/* A column of running text: long lines are hard to read. */
.prose {
    max-width: var(--layout-text-max);
}

.screen-title {
    font-size: var(--font-title);
    line-height: var(--line-tight);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-8);
}

.section-title {
    font-size: var(--font-subtitle);
    line-height: var(--line-tight);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-12);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-small {
    font-size: var(--font-small);
}

/* Vertical rhythm helper — used instead of margins scattered over components. */
.stack > * + * {
    margin-top: var(--space-16);
}

.stack-lg > * + * {
    margin-top: var(--space-32);
}

/* ==========================================================================
   Buttons
   The label is always a verb. One light-green button per screen.
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    min-height: var(--size-tap);
    padding: 0 var(--space-24);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-control);
    font-family: inherit;
    font-size: var(--font-button);
    font-weight: var(--weight-medium);
    line-height: var(--line-tight);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

/* Full width — the normal shape on a phone. */
.btn--block {
    display: flex;
    width: 100%;
}

/* --- Primary: light green, dark text --------------------------------- */
.btn--primary {
    min-height: var(--size-control);
    background: var(--color-accent);
    color: var(--color-accent-text);
}

/* `.is-*` twins exist so the /ui showcase can display a state that cannot
   be photographed — they carry exactly the same declarations. */
.btn--primary:hover,
.btn--primary.is-hover {
    background: var(--color-accent-strong);
}

.btn--primary:active,
.btn--primary.is-pressed {
    background: var(--color-accent-strong);
    transform: translateY(var(--press-shift));
}

/* --- Secondary: white with a border («На главную») ------------------- */
.btn--secondary {
    min-height: var(--size-control);
    background: var(--color-card);
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn--secondary:hover,
.btn--secondary.is-hover {
    background: var(--color-page);
}

.btn--secondary:active,
.btn--secondary.is-pressed {
    background: var(--color-page);
    transform: translateY(var(--press-shift));
}

/* --- Olive: the second action next to a light-green one -------------- */
.btn--olive {
    min-height: var(--size-control);
    background: var(--color-olive);
    color: var(--color-olive-text);
}

.btn--olive:hover,
.btn--olive.is-hover,
.btn--olive:active,
.btn--olive.is-pressed {
    /* Olive has no second brand tone, so the pressed state is shown by the
       shift alone; darkening it further would invent a colour. */
    transform: translateY(var(--press-shift));
}

/* --- Link-button: a line of text that acts («Забыли пароль?») -------- */
.btn--link {
    padding: 0 var(--space-8);
    background: none;
    color: var(--color-olive);
    font-size: var(--font-body);
    font-weight: var(--weight-normal);
    text-decoration: underline;
}

.btn--link:hover,
.btn--link.is-hover {
    color: var(--color-accent-text);
}

/* --- Disabled and «saving» ------------------------------------------- */
/* aria-busy is what the browser and a screen reader read; the class is only
   for the showcase. Both look identical on purpose: while the form is being
   sent the button must not look pressable. */
.btn:disabled,
.btn.is-disabled,
.btn[aria-busy="true"] {
    background: var(--color-border);
    color: var(--color-text-muted);
    border-color: transparent;
    cursor: not-allowed;
    transform: none;
}

/* ==========================================================================
   Input fields
   Label on top, hint underneath, error state.
   ========================================================================== */

.field {
    display: block;
}

.field__label {
    display: block;
    margin-bottom: var(--space-8);
    font-size: var(--font-small);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.field__control {
    display: block;
    width: 100%;
    min-height: var(--size-control);
    padding: 0 var(--space-16);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-card);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--font-input);
    line-height: var(--line-tight);
    transition: border-color var(--transition);
}

textarea.field__control {
    /* A textarea has no single line to centre, so it needs real padding. */
    padding: var(--space-12) var(--space-16);
    min-height: calc(var(--size-control) * 2);
    line-height: var(--line-body);
    resize: vertical;
}

.field__control::placeholder {
    color: var(--color-text-muted);
}

.field__control:hover,
.field__control.is-hover {
    border-color: var(--color-text-muted);
}

.field__control:disabled,
.field__control.is-disabled {
    background: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* Small explaining line under the field. */
.field__hint {
    margin-top: var(--space-8);
    font-size: var(--font-small);
    color: var(--color-text-muted);
}

/* Error line. Colour alone is not enough — the words say what to do. */
.field__error {
    margin-top: var(--space-8);
    font-size: var(--font-small);
    color: var(--color-error);
}

.field--error .field__control {
    border-color: var(--color-error);
    background: var(--color-error-bg);
}

/* --- Password with the eye button ------------------------------------ */
.field__password {
    position: relative;
}

.field__password .field__control {
    /* Room for the eye so typed characters never run under it. */
    padding-right: var(--size-control);
}

.field__eye {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-control);
    height: var(--size-control);
    padding: 0;
    border: 0;
    border-radius: var(--radius-control);
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
}

.field__eye:hover,
.field__eye.is-hover {
    color: var(--color-text);
}

/* ==========================================================================
   Card, hint panel, error banner
   ========================================================================== */

.card {
    padding: var(--space-16);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card);
    box-shadow: var(--shadow-card);
}

/* Light-green explaining panel. One per screen, four lines at most. */
.hint {
    padding: var(--space-16);
    border: var(--border-width) solid var(--color-hint-border);
    border-radius: var(--radius-card);
    background: var(--color-hint-bg);
    color: var(--color-hint-text);
}

.hint__title {
    font-size: var(--font-subtitle);
    line-height: var(--line-tight);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-8);
}

/* The global «h1,h2,h3,p { margin: 0 }» reset above would otherwise glue two
   paragraphs of a panel into one wall of text. Two thoughts, two blocks. */
.hint p + p,
.alert p + p {
    margin-top: var(--space-8);
}

.alert {
    padding: var(--space-16);
    border: var(--border-width) solid var(--color-error);
    border-radius: var(--radius-card);
    background: var(--color-error-bg);
    color: var(--color-error);
}

.alert__title {
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-8);
}

/* ==========================================================================
   Pills
   ========================================================================== */

.pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-4) var(--space-12);
    border-radius: var(--radius-pill);
    font-size: var(--font-small);
    font-weight: var(--weight-medium);
    line-height: var(--line-body);
    white-space: nowrap;
}

.pill--owner {
    background: var(--color-olive);
    color: var(--color-olive-text);
}

.pill--florist {
    background: var(--color-border);
    color: var(--color-text);
}

/* Dark active pill, as on the Mustfilm reference. */
.pill--active {
    background: var(--color-dark);
    color: var(--color-dark-text);
}

/* Grey «скоро» mark next to a menu item on a computer. It is the only place
   where a person is told in words that a section is not built yet, so it is
   set in the normal small size — there is room in the menu row for it. */
.pill--soon {
    padding: 0 var(--space-8);
    background: var(--color-border);
    color: var(--color-text-muted);
    font-weight: var(--weight-normal);
}

/* ==========================================================================
   Top bar
   ========================================================================== */

/* The outer element only carries the background and the screen margins; the
   inner one is the row. Two nested flex containers here would fight over who
   distributes the free space. */
.topbar {
    padding: var(--space-12) var(--page-pad);
    border-bottom: var(--border-width) solid var(--color-border);
    background: var(--color-card);
}

.topbar__inner {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    max-width: var(--layout-max);
    margin: 0 auto;
}

.topbar__left {
    /* min-width:0 lets a long shop name shrink instead of pushing the
       «Выйти» button off a 360px screen. */
    flex: 1;
    min-width: 0;
}

.topbar__shop {
    font-size: var(--font-body);
    font-weight: var(--weight-bold);
    line-height: var(--line-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__user {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-4);
    font-size: var(--font-small);
    color: var(--color-text-muted);
    min-width: 0;
}

.topbar__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* «Выйти»: a white bordered button, kept compact so it never wraps. */
.topbar__exit {
    flex: none;
    min-height: var(--size-tap);
    padding: 0 var(--space-16);
    font-size: var(--font-small);
}

/* ==========================================================================
   Menu
   Bottom bar on a phone, a row under the header on a computer.
   ========================================================================== */

.nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-nav);
    /* The extra space below is the iPhone home bar: without it the captions
       sit under the system stripe. */
    padding-bottom: var(--nav-safe);
    border-top: var(--border-width) solid var(--color-border);
    background: var(--color-card);
    box-shadow: var(--shadow-nav);
}

.nav__inner {
    display: flex;
}

.nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    min-height: var(--size-nav);
    padding: var(--space-4);
    border: 0;
    background: none;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--font-nav-label);
    line-height: var(--line-tight);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.nav__icon {
    width: var(--size-icon);
    height: var(--size-icon);
    flex: none;
}

.nav__item.is-active {
    color: var(--color-olive);
    font-weight: var(--weight-medium);
}

/* A section that is not open yet gets no extra mark on a phone. A dot on an
   icon means «something new for you» on every phone in the world — the exact
   opposite of «later», and a faded icon reads as «broken». The two signals
   already there are enough: the current item is olive and semi-bold among four
   grey ones, and a tap answers with the hint at the bottom.

   The full «скоро» pill only fits where there is room — see the media query. */
.nav__soon {
    display: none;
}

/* ==========================================================================
   Toast — a hint at the bottom for two seconds
   ========================================================================== */

.toast {
    position: fixed;
    left: var(--page-pad);
    right: var(--page-pad);
    bottom: calc(var(--size-nav) + var(--nav-safe) + var(--space-16));
    z-index: var(--z-toast);
    max-width: var(--layout-text-max);
    margin: 0 auto;
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-control);
    background: var(--color-dark);
    color: var(--color-dark-text);
    font-size: var(--font-small);
    text-align: center;
    box-shadow: var(--shadow-nav);
    /* Hidden but present, so a screen reader can announce the text. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--toast-hidden-shift));
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(var(--toast-visible-shift));
}

/* ==========================================================================
   Showcase page /ui — a working tool, not a screen to show a customer
   ========================================================================== */

.demo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-12);
}

.demo-label {
    max-width: var(--layout-text-max);
    margin-bottom: var(--space-8);
    font-size: var(--font-small);
    color: var(--color-text-muted);
}

.swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--layout-swatch), 1fr));
    gap: var(--space-12);
}

.swatch__box {
    height: var(--size-control);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-control);
}

.swatch__name {
    margin-top: var(--space-4);
    font-size: var(--font-small);
}

.swatch__code {
    font-size: var(--font-small);
    color: var(--color-text-muted);
}

/* ==========================================================================
   Computer: wider margins, the menu becomes a row under the header
   ========================================================================== */

/* 768px is the ONLY raw size left in this file, and it cannot be a variable:
   the CSS standard does not let a media query read var(). One breakpoint,
   written once. */
@media (min-width: 768px) {
    :root {
        --page-pad: var(--space-24);
    }

    .page--with-nav {
        /* The menu is a row under the header now — nothing to reserve. */
        padding-bottom: var(--space-48);
    }

    .card,
    .hint {
        padding: var(--space-24);
    }

    .nav {
        position: static;
        padding: var(--space-8) var(--page-pad);
        border-top: 0;
        border-bottom: var(--border-width) solid var(--color-border);
        box-shadow: none;
    }

    .nav__inner {
        justify-content: flex-start;
        /* Wrapping, not scrolling: on a narrow laptop the row of five items
           does not fit, and a menu that runs off the right edge is a menu
           whose last item nobody finds. It moves to the next line instead. */
        flex-wrap: wrap;
        gap: var(--space-8);
        max-width: var(--layout-max);
        margin: 0 auto;
    }

    .nav__item {
        flex: none;
        flex-direction: row;
        gap: var(--space-8);
        min-height: var(--size-tap);
        padding: 0 var(--space-16);
        border-radius: var(--radius-pill);
        font-size: var(--font-small);
    }

    /* The dark filled pill of the Mustfilm reference: on a computer the menu
       is a row of pills, and «where am I» has to be visible across the room. */
    .nav__item.is-active {
        background: var(--color-dark);
        color: var(--color-dark-text);
    }

    /* On a computer the word fits, so the grey «скоро» pill is shown. */
    .nav__soon {
        display: inline-flex;
    }

    .toast {
        bottom: var(--space-24);
    }
}