/* ==========================================================================
   Moduflex house UI style: brand tokens and components.

   A light, Windows 11 style layout in the Moduflex house style: white
   backgrounds, headings in brand blue, buttons and links in the deeper brand
   blue, secondary text in brand grey, and Bahnschrift throughout (Light for
   reading text), with Arial as the fallback where Bahnschrift is missing.

   Framework-agnostic: link this into any web project and use the classes.
   As the house style specifies, headings use the light brand blue (#6faac4)
   and secondary text the brand grey (#8d9097); body text, buttons and links
   use darker colours for legibility.
   ========================================================================== */

:root {
    /* Brand */
    --brand-blue: #6faac4;        /* core blue: headings, accents, borders */
    --brand-blue-deep: #2f7ba0;   /* buttons, links, focus, selection      */
    --brand-blue-dark: #276c8e;   /* hover                                 */
    --brand-blue-darker: #1f5a76; /* pressed                               */
    --brand-grey: #8d9097;        /* core grey: secondary text, labels     */

    /* Surfaces */
    --page: #ffffff;              /* white backgrounds throughout          */
    --card: #ffffff;
    --card-alt: #eef4f7;          /* table headings, quiet panels: light blue tint */
    --tint: #eef4f7;              /* light blue tint                       */
    --select: #e3eff5;            /* selected / highlighted rows           */

    /* Text */
    --ink: #33383c;               /* body text                             */
    --ink-2: #8d9097;             /* secondary text, labels: brand grey    */
    --ink-3: #8d9097;             /* hints, placeholders                   */

    /* Lines */
    --line: #e3e9ec;              /* card borders                          */
    --line-soft: #edf2f4;         /* rows inside cards                     */
    --line-control: #d5dfe4;      /* control borders                       */
    --line-strong: #8d9097;       /* control underline                     */

    /* Status */
    --ok: #237a4b;       --ok-text: #237a4b;   --ok-bg: #e9f4ee;   --ok-line: #c3e0cf;
    --warn: #9d5d00;     --warn-text: #5c3d00; --warn-bg: #fff4ce; --warn-line: #f1d98c;
    --err: #b23b2e;      --err-text: #b23b2e;  --err-bg: #fbe9e7;  --err-line: #f0c6c0;

    --radius: 4px;                /* controls                          */
    --radius-card: 8px;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-flyout: 0 8px 24px rgba(0, 0, 0, 0.14);
    --shadow-dialog: 0 24px 48px rgba(0, 0, 0, 0.22);

    /* Bahnschrift everywhere, reading text in its Light weight (300); Arial where Bahnschrift is missing. */
    --font-ui: "Bahnschrift", Arial, Helvetica, sans-serif;
    --font-text: "Bahnschrift", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: var(--font-text);
    font-weight: 300;             /* Bahnschrift Light */
    font-size: 15px;
    background: var(--page);
    color: var(--ink);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand-blue-deep); }
a:hover { color: var(--brand-blue-dark); }
h1, h2, h3 { font-family: var(--font-ui); font-weight: 600; color: var(--brand-blue); line-height: 1.2; }
strong, b { font-weight: 600; }
h1 { font-size: 28px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 0 0 8px; }
.muted { color: var(--ink-2); }
code { background: var(--tint); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
:focus-visible { outline: 2px solid var(--brand-blue-deep); outline-offset: 2px; }

/* Top bar */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px 16px; flex-wrap: wrap;
    min-height: 56px; padding: 8px 24px; background: var(--card); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo { height: 30px; width: auto; display: block; }
.brand-sub {
    padding-left: 14px; border-left: 1px solid var(--line);
    font-family: var(--font-ui); font-size: 15px; color: var(--ink-2);
}
.nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }

main { max-width: 860px; margin: 0 auto; padding: 28px 24px 40px; }

/* Cards */
.card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* Buttons: .btn is the standard button; add .btn-accent for the one main action. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 16px; border-radius: var(--radius);
    font-family: var(--font-ui); font-weight: 400; font-size: 15px; line-height: 1.2; white-space: nowrap;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--line-control); border-bottom-color: #c3ced4;
    cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--tint); color: var(--brand-blue-deep); border-color: var(--brand-blue); }
.btn:active { background: var(--select); color: var(--brand-blue-dark); }
.btn-accent {
    background: var(--brand-blue-deep); color: #fff;
    border-color: var(--brand-blue-deep); border-bottom-color: var(--brand-blue-darker);
}
.btn-accent:hover { background: var(--brand-blue-dark); color: #fff; border-color: var(--brand-blue-dark); }
.btn-accent:active { background: var(--brand-blue-darker); color: #e3f0f6; }
.btn-subtle { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-subtle:hover { background: var(--tint); color: var(--brand-blue-deep); border-color: transparent; }
.btn-subtle:active { background: var(--select); }
.btn-lg { min-height: 44px; padding: 0 24px; font-size: 16px; }
.btn:disabled, .btn[aria-disabled="true"] {
    background: #f3f6f8; color: var(--ink-3); border-color: var(--line); cursor: not-allowed;
}
.btn-accent:disabled { background: #9cc3d5; color: #fff; border-color: transparent; cursor: progress; }
.btn svg, .icon { width: 16px; height: 16px; flex: none; }
.btn-sm {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 32px; padding: 0 12px; font-family: var(--font-ui); font-weight: 400; font-size: 14px;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--line-control); border-radius: var(--radius); cursor: pointer;
}
.btn-sm:hover { background: var(--tint); color: var(--brand-blue-deep); border-color: var(--brand-blue); }

/* Form fields */
.field {
    width: 100%; height: 40px; padding: 0 12px;
    font-family: var(--font-text); font-size: 15px; color: var(--ink);
    background: var(--card); border: 1px solid var(--line-control); border-bottom-color: var(--line-strong);
    border-radius: var(--radius); outline: none;
}
.field:hover { background-color: #f9fbfc; }
.field:focus { background-color: var(--card); border-bottom-color: var(--brand-blue-deep); box-shadow: inset 0 -1px 0 var(--brand-blue-deep); }
.field:focus-visible { outline: none; }
.field::placeholder { color: var(--ink-3); opacity: 1; }
.field:disabled { background-color: #f3f6f8; border-color: var(--line); color: var(--ink-3); cursor: not-allowed; }
select.field {
    padding-right: 36px; appearance: none; -webkit-appearance: none;
    background: var(--card) url("icons/chevron.svg") no-repeat right 10px center / 16px 16px;
}

/* Card rows (folders, files, results, list items) */
.row {
    display: block; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-card); margin-bottom: 6px; text-decoration: none; color: var(--ink);
}
.row:hover { border-color: var(--brand-blue); }

/* Messages (Windows 11 InfoBar) */
.flash {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 16px 12px 46px; margin: 0 0 16px; border-radius: 6px; border: 1px solid;
    font-size: 15px; color: var(--ink);
    background-repeat: no-repeat; background-position: 16px 13px; background-size: 20px 20px;
}
.flash.ok {
    background-color: var(--ok-bg); border-color: var(--ok-line);
    background-image: url("icons/ok.svg");
}
.flash.error {
    background-color: var(--err-bg); border-color: var(--err-line);
    background-image: url("icons/error.svg");
}
.flash.info {
    background-color: var(--tint); border-color: #d5e6ee;
    background-image: url("icons/info.svg");
}
.flash.warning {
    background-color: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-text);
    background-image: url("icons/warning.svg");
}
.flash strong:first-child { font-family: var(--font-ui); font-weight: 600; }

/* Tables */
table { width: 100%; border-collapse: collapse; background: var(--card); }
th {
    background: var(--card-alt); text-align: left; padding: 10px 16px;
    font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: var(--ink-2);
    border-bottom: 1px solid var(--line-soft);
}
td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }

/* Keyboard keys */
kbd {
    display: inline-block; padding: 0 6px; min-width: 22px; text-align: center;
    font-family: var(--font-ui); font-size: 12px; line-height: 20px;
    background: var(--tint); border: 1px solid var(--line-control); border-bottom-width: 2px; border-radius: 4px;
}

@media (max-width: 760px) {
    .btn, .field { min-height: 44px; }
    .field { height: 44px; }
    main { padding: 20px 16px 32px; }
    .topbar { padding: 8px 16px; }
}