/* ===================================================================
   OTOSMS — panel stylesheet
   A dark rail on the left, a light working surface on the right.
   =================================================================== */

:root {
    /* Yellow, black and white only. Every grey below is black at a lower
       weight, so the palette never leaves those three. */
    --yellow:        #ffc800;
    --yellow-deep:   #d9a800;
    --yellow-soft:   #fff7dc;
    --yellow-line:   #ffe58f;

    --bg:            #f2f2f2;
    --surface:       #ffffff;
    --surface-2:     #f7f7f7;
    --border:        #e5e5e5;
    --border-strong: #c7c7c7;

    --text:          #111111;
    --text-soft:     #4a4a4a;   /* 9.0:1 on white */
    --text-mute:     #6e6e6e;   /* 5.2:1 on white */

    --rail:          #0e0e0e;
    --rail-2:        #1f1f1f;
    --rail-text:     #a6a6a6;   /* 6.6:1 on the rail */

    --radius:        12px;
    --radius-sm:     8px;
    --shadow:        0 1px 2px rgba(0, 0, 0, .05), 0 4px 16px rgba(0, 0, 0, .05);
    --shadow-lg:     0 10px 36px rgba(0, 0, 0, .22);

    --rail-w:        250px;
    --font:          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono:          ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* Links stay black — yellow text on white would be unreadable — and are
   marked by a yellow underline instead. */
a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--yellow-deep);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color .12s, text-decoration-thickness .12s;
}

/* A table column of links should not read as a column of highlighter marks,
   so the underline stays hairline until the pointer is on it. */
a:hover {
    text-decoration-color: var(--text);
    text-decoration-thickness: 2px;
}

/* Keyboard focus had nowhere to show itself: inputs replaced the outline with
   a ring, and everything else dropped it. :focus-visible keeps the ring off a
   mouse click and on for the Tab key, which is who needs it. */
:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
    border-radius: 4px;
}

.rail :focus-visible,
.auth-side :focus-visible,
.notice.danger :focus-visible,
.tile.accent :focus-visible { outline-color: var(--yellow); }

/* Read by a screen reader, never drawn. */
.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;
}

/* Jumping past the navigation, for anyone arriving by keyboard. Off-screen
   until it takes focus. */
.skip-link {
    position: fixed;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
    z-index: 100;
    background: var(--text);
    color: #ffffff;
    padding: .6rem 1.1rem;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-weight: 650;
    font-size: .88rem;
    text-decoration: none;
    transition: top .15s ease;
}

.skip-link:focus { top: 0; text-decoration: none; }

/* The content pane takes focus from the skip link; it should not draw a ring. */
.content:focus { outline: none; }

::selection { background: var(--yellow); color: #111111; }

/* Every icon() call carries `ic`; it scales with the text it sits in.
   The context rules further down are more specific and still win. */
.ic {
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 auto;
    vertical-align: -.16em;
    stroke-width: 1.8;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.45rem; }
h2 .ic, h3 .ic { color: var(--yellow-deep); opacity: 1; margin-right: .15rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .98rem; }

p { margin: 0 0 .8rem; }
p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------
   Shell
   ------------------------------------------------------------------- */

.shell { display: flex; min-height: 100vh; }

.rail {
    width: var(--rail-w);
    flex: 0 0 var(--rail-w);
    /* The same recipe as the login panel: one warm glow at the top and a
       faint grid, so the rail reads as a surface rather than a flat fill. */
    background-color: var(--rail);
    background-image:
        radial-gradient(520px 320px at 18% -4%, rgba(255, 200, 0, .15), transparent 62%),
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 100% 100%, 44px 44px, 44px 44px;
    background-repeat: no-repeat, repeat, repeat;
    color: var(--rail-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.rail-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.mark { width: 36px; height: 36px; flex: 0 0 36px; display: block; }

.rail-name { color: #fff; font-weight: 680; font-size: .98rem; line-height: 1.2; }
.rail-sub  { font-size: .72rem; color: var(--rail-text); }

.rail-nav { padding: .8rem .7rem; flex: 1; }

.rail-group {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #8a8a8a;
    padding: 1rem .6rem .4rem;
    font-weight: 650;
    display: flex;
    align-items: center;
    gap: .45rem;
}

.rail-group::before {
    content: "";
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background: var(--yellow);
    flex: 0 0 10px;
}

.rail-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .58rem .65rem;
    border-radius: var(--radius-sm);
    color: var(--rail-text);
    font-weight: 520;
    font-size: .9rem;
    transition: background .12s, color .12s;
}

.rail-link:hover { background: var(--rail-2); color: #ffffff; text-decoration: none; }
.rail-link.is-active {
    background: var(--yellow);
    color: #111111;
    font-weight: 660;
    box-shadow: 0 2px 12px rgba(255, 200, 0, .22);
}
.rail-link svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .85; }
.rail-link.is-active svg { opacity: 1; }

.rail-foot {
    padding: .9rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: .78rem;
}

.rail-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .5rem;
    padding: .35rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background .12s;
}

.rail-user:hover { background: var(--rail-2); text-decoration: none; }

.avatar {
    width: 32px; height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: var(--yellow);
    color: #111111;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .8rem;
}

.rail-user > span:last-child { min-width: 0; }
.rail-user-name { display: block; color: #fff; font-weight: 600; line-height: 1.2; }
.rail-user-role { display: block; font-size: .72rem; color: var(--rail-text); }

/* -------------------------------------------------------------------
   Main column
   ------------------------------------------------------------------- */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: .95rem 1.6rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar h1 { flex: 1; min-width: 0; }
.topbar-meta { display: flex; align-items: center; gap: .75rem; font-size: .82rem; color: var(--text-soft); }

.content { padding: 1.5rem 1.6rem 3rem; flex: 1; }
.content > * + * { margin-top: 1.15rem; }

.rail-toggle {
    display: none;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .35rem .5rem;
    cursor: pointer;
}

/* -------------------------------------------------------------------
   Cards and layout helpers
   ------------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card-head {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
}

.card-head h2 { flex: 1; min-width: 0; }

/* A title that already carries an icon does not need a second marker,
   so the bar is only drawn where there is none. */
.card-head h2:not(:has(.ic)) {
    position: relative;
    padding-left: .85rem;
}

.card-head h2:not(:has(.ic))::before {
    content: "";
    position: absolute;
    left: 0;
    top: .22em;
    width: 4px;
    height: 1.05em;
    border-radius: 2px;
    background: var(--yellow);
}
.card-body { padding: 1.2rem; }
.card-body.tight { padding: .8rem 1.15rem; }
.card-foot {
    padding: .75rem 1.15rem;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 0 0 var(--radius) var(--radius);
}

.grid { display: grid; gap: 1.15rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-side { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.grid-side-lg { grid-template-columns: minmax(0, 1fr) 420px; align-items: start; }

.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row > input, .row > select { min-width: 0; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.spacer { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 1.15rem; }
.stack.sm { gap: .6rem; }

/* -------------------------------------------------------------------
   Stat tiles
   ------------------------------------------------------------------- */

.tiles { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}

.tile:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0, 0, 0, .08); }

.tile-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-mute);
    font-weight: 650;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.tile-label .ic { opacity: .7; }
.tile-value { font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; margin-top: .2rem; }
.tile-note { font-size: .78rem; color: var(--text-soft); margin-top: .1rem; }

.tile.accent {
    background-color: var(--text);
    background-image:
        radial-gradient(420px 240px at 88% -25%, rgba(255, 200, 0, .30), transparent 62%),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 100% 100%, 34px 34px, 34px 34px;
    background-repeat: no-repeat, repeat, repeat;
    border-color: var(--text);
    color: #ffffff;
}
.tile.accent .tile-value { color: var(--yellow); }
.tile.accent .tile-label, .tile.accent .tile-note { color: #bdbdbd; }

/* -------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------- */

.field { margin-bottom: .9rem; }
.field:last-child { margin-bottom: 0; }

label, .label {
    display: block;
    font-size: .82rem;
    font-weight: 620;
    margin-bottom: .3rem;
    color: var(--text);
}

.hint { font-size: .78rem; color: var(--text-soft); margin-top: .28rem; }

input[type=text], input[type=password], input[type=number], input[type=email],
input[type=date], input[type=search], input[type=tel], select, textarea {
    width: 100%;
    padding: .52rem .7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: .9rem;
    color: var(--text);
    background: var(--surface);
    transition: border-color .12s, box-shadow .12s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--text);
    box-shadow: 0 0 0 3px var(--yellow-line);
}

input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--text-mute); }

textarea { resize: vertical; min-height: 100px; line-height: 1.55; }

select[multiple] {
    appearance: auto;
    background-image: none;
    padding: .35rem;
    min-height: 150px;
}

select[multiple] option { padding: .22rem .4rem; border-radius: 4px; }

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23111111' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    padding-right: 1.9rem;
}

.field-row { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-row-3 { display: grid; gap: .7rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.check { display: flex; align-items: flex-start; gap: .55rem; font-weight: 500; font-size: .88rem; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: .2rem 0 0; flex: 0 0 16px; accent-color: var(--text); cursor: pointer; }
.check span { display: block; }
.check small { display: block; color: var(--text-soft); font-size: .78rem; }

fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .9rem 1rem; margin: 0 0 1rem; }
legend { font-size: .8rem; font-weight: 650; padding: 0 .4rem; color: var(--text-soft); }

/* -------------------------------------------------------------------
   Multi select
   ------------------------------------------------------------------- */

.picker { position: relative; }

/* The real select stays in the page — it carries the value and it is what
   submits — but the panel is what people actually use. */
.picker select[multiple] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    min-height: 0;
}

.picker-toggle {
    width: 100%;
    text-align: left;
    padding: .52rem 2rem .52rem .7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font: inherit;
    font-size: .9rem;
    color: var(--text);
    cursor: pointer;
    position: relative;
}

.picker-toggle::after {
    content: "";
    position: absolute;
    right: .7rem;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -2px;
    border: 5px solid transparent;
    border-top-color: var(--text-mute);
}

.picker-toggle:hover:not(:disabled) { border-color: var(--text-mute); }

.picker-toggle:disabled {
    background: var(--surface-2);
    color: var(--text-mute);
    cursor: not-allowed;
}

.picker-toggle:disabled::after { opacity: .4; }
.picker-toggle.has-value { font-weight: 620; }
.picker-placeholder { color: var(--text-mute); font-weight: 400; }

.picker-toggle[aria-expanded="true"] {
    border-color: var(--text);
    box-shadow: 0 0 0 3px var(--yellow-line);
}

.picker-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: min(240px, 86vw);
    max-width: 92vw;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.picker-search { padding: .5rem; border-bottom: 1px solid var(--border); }
.picker-search input { padding: .4rem .55rem; font-size: .86rem; }

.picker-list {
    max-height: min(260px, 46vh);
    overflow-y: auto;
    padding: .25rem;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.picker-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .34rem .45rem;
    border-radius: 6px;
    font-size: .87rem;
    font-weight: 500;
    margin: 0;
    cursor: pointer;
}

.picker-row:hover { background: var(--yellow-soft); }
.picker-row input { width: 15px; height: 15px; flex: 0 0 15px; margin: 0; accent-color: var(--text); cursor: pointer; }
.picker-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-num { font-size: .74rem; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.picker-empty { padding: 1.1rem .6rem; text-align: center; color: var(--text-mute); font-size: .84rem; }

.picker-foot {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .55rem;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    font-size: .78rem;
}

.picker-foot button {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    border-radius: 6px;
    padding: .2rem .5rem;
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text);
}

.picker-foot button:hover { background: var(--yellow-soft); border-color: var(--yellow-deep); }
.picker-shown { margin-left: auto; color: var(--text-mute); }

.picker-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }

.picker-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid var(--yellow-deep);
    background: var(--yellow-soft);
    color: var(--text);
    border-radius: 20px;
    padding: .14rem .3rem .14rem .55rem;
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    max-width: 100%;
}

.picker-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-chip i { font-style: normal; font-size: .95rem; line-height: 1; opacity: .6; padding: 0 .2rem; }
.picker-chip:hover { background: var(--yellow); }
.picker-chip:hover i { opacity: 1; }

/* -------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .87rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s, opacity .12s;
    white-space: nowrap;
}

.btn, .btn:hover, .badge, .rail-link, .rail-link:hover, .rail-user,
.pager a, .pager a:hover, .chip { text-decoration: none; }

.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* A disabled button says "you cannot", not "I am working on it". */
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.is-loading > * { visibility: hidden; }

.btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--text);
    animation: spin .7s linear infinite;
}

.btn-primary.is-loading::after { color: #111111; }
.btn-danger.is-loading::after  { color: #ffffff; }

@keyframes spin { to { transform: rotate(360deg); } }
.btn svg { width: 15px; height: 15px; }

.btn-primary {
    background: var(--yellow);
    border-color: var(--yellow);
    color: #111111;
    font-weight: 680;
}

.btn-primary:hover { background: var(--yellow-deep); border-color: var(--yellow-deep); }

/* Destructive actions go solid black: the heaviest thing the palette has. */
.btn-danger { background: var(--text); border-color: var(--text); color: #ffffff; }
.btn-danger:hover { background: #000000; border-color: #000000; }

.btn-ghost { border-color: transparent; background: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-ghost.text-danger:hover { background: var(--text); color: #ffffff; }

.btn-sm { padding: .3rem .6rem; font-size: .8rem; }
.btn-lg { padding: .68rem 1.3rem; font-size: .95rem; }
.btn-block { width: 100%; }

.btn-group { display: inline-flex; gap: .35rem; }

/* -------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

table.data th {
    text-align: left;
    font-weight: 650;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-mute);
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--border-strong);
    background: var(--surface-2);
    white-space: nowrap;
}

table.data td {
    padding: .68rem .85rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

table.data tbody tr:last-child td { border-bottom: none; }

/* The hovered row gets a yellow edge rather than only a grey wash — the
   same accent the rail and the section titles use. */
table.data tbody tr {
    box-shadow: inset 3px 0 0 transparent;
    transition: background .12s ease, box-shadow .12s ease;
}

table.data tbody tr:hover { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--yellow); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.nowrap { white-space: nowrap; }

.empty {
    padding: 2.4rem 1rem;
    text-align: center;
    color: var(--text-mute);
}

.empty > svg {
    width: 26px;
    height: 26px;
    padding: 13px;
    box-sizing: content-box;
    background: var(--yellow-soft);
    border: 1px solid var(--yellow-line);
    border-radius: 50%;
    color: var(--text);
    display: block;
    margin: 0 auto .8rem;
}
.empty h3 { margin-bottom: .3rem; color: var(--text); }
.empty p { color: var(--text-soft); }

/* -------------------------------------------------------------------
   Badges, pills and notices
   ------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .14rem .5rem;
    border-radius: 20px;
    font-size: .74rem;
    font-weight: 650;
    background: var(--surface-2);
    color: var(--text-soft);
    border: 1px solid var(--border);
    white-space: nowrap;
}

/* With one hue to work with, the states separate by weight instead:
   solid black for done, black-on-yellow for a stop, yellow wash for a
   caution, plain grey for neutral. Every badge also carries its own word,
   so colour is never the only thing saying which is which. */
/* The everyday state stays quiet — a page of twenty-five delivered rows
   should not be twenty-five black blocks — and is marked by a filled dot.
   The failure inverts, because that is the row worth looking at. */
.badge.ok { background: var(--surface); color: var(--text); border-color: var(--text); }

.badge.ok::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text);
    flex: 0 0 6px;
}

.badge.danger { background: var(--text); color: var(--yellow); border-color: var(--text); }
.badge.warn   { background: var(--yellow);      color: #111111;         border-color: var(--yellow-deep); }
.badge.brand  { background: var(--yellow-soft); color: var(--text);     border-color: var(--yellow-line); }
.badge.info   { background: var(--surface-2);   color: var(--text-soft); border-color: var(--border-strong); }

.badge .ic { width: .95em; height: .95em; opacity: .8; }

.notice {
    padding: .8rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    border-left-width: 3px;
    background: var(--surface-2);
    font-size: .875rem;
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}

.notice > svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: .12rem; }
.notice.success { background: var(--surface-2);   border-color: var(--border); border-left-color: var(--text); color: var(--text); }
.notice.warn    { background: var(--yellow-soft); border-color: var(--yellow-line); border-left-color: var(--yellow); color: var(--text); }
.notice.info    { background: var(--surface-2);   border-color: var(--border); border-left-color: var(--border-strong); color: var(--text-soft); }

/* The one that has to stop somebody mid-task inverts entirely. */
.notice.danger {
    background: var(--text);
    border-color: var(--text);
    border-left-color: var(--yellow);
    color: #ffffff;
}

.notice.danger b { color: var(--yellow); }
.notice.danger .text-mute, .notice.danger .text-xs { color: #b8b8b8; }
.notice b { font-weight: 680; }

/* -------------------------------------------------------------------
   Progress
   ------------------------------------------------------------------- */

.bar {
    height: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
}

.bar > i {
    display: block;
    height: 100%;
    background: var(--text);
    border-radius: 20px;
    transition: width .35s ease;
}

.bar.ok > i     { background: var(--text); }
.bar.warn > i   { background: var(--yellow); }
.bar.sm { height: 7px; }

/* -------------------------------------------------------------------
   Chart (pure CSS columns)
   ------------------------------------------------------------------- */

.chart { display: flex; align-items: stretch; gap: 5px; height: 158px; padding-top: .5rem; }

.chart-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* The track is what the bar's percentage resolves against. */
.chart-track { flex: 1; display: flex; align-items: flex-end; min-height: 0; }

.chart-bar {
    width: 100%;
    /* Solid black reads at every bar height; yellow on white would not. */
    background: var(--text);
    border-radius: 3px 3px 0 0;
    min-height: 3px;
    transition: opacity .12s;
}

.chart-col:hover .chart-bar { background: var(--yellow-deep); }

.chart-day {
    font-size: .66rem;
    color: var(--text-mute);
    white-space: nowrap;
    text-align: center;
    margin-top: .4rem;
}

/* -------------------------------------------------------------------
   Filter bar
   ------------------------------------------------------------------- */

.filters {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: end;
}

.filters .field { margin: 0; }

/* -------------------------------------------------------------------
   Pager
   ------------------------------------------------------------------- */

.pager { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .84rem; color: var(--text-soft); }
.pager .spacer { flex: 1; }

.pager a, .pager span.page {
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 .5rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--text);
    background: var(--surface);
}

.pager a:hover { background: var(--surface-2); text-decoration: none; }
.pager span.page.is-active { background: var(--text); border-color: var(--text); color: #ffffff; }
.pager span.page.is-off { opacity: .45; }

/* -------------------------------------------------------------------
   Message composer
   ------------------------------------------------------------------- */

.composer textarea { min-height: 130px; font-size: .92rem; }

.composer-meta {
    display: flex;
    gap: .8rem;
    align-items: center;
    flex-wrap: wrap;
    font-size: .8rem;
    color: var(--text-soft);
    margin-top: .45rem;
}

.var-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }

.chip {
    border: 1px dashed var(--border-strong);
    background: var(--surface-2);
    border-radius: 20px;
    padding: .17rem .55rem;
    font-size: .76rem;
    font-family: var(--mono);
    color: var(--text-soft);
    cursor: pointer;
    transition: all .12s;
}

.chip:hover { border-color: var(--yellow-deep); color: var(--text); background: var(--yellow-soft); border-style: solid; }

.preview {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem .9rem;
    font-size: .87rem;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 60px;
    color: var(--text-soft);
}

/* -------------------------------------------------------------------
   Audience summary
   ------------------------------------------------------------------- */

.audience { display: grid; gap: .55rem; }

.audience-line {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .45rem .1rem;
    border-bottom: 1px dashed var(--border);
    font-size: .87rem;
}

.audience-line:last-child { border-bottom: none; }
.audience-line b { margin-inline-start: auto; font-variant-numeric: tabular-nums; font-size: 1rem; }
.audience-line.total b { font-size: 1.35rem; color: var(--text); }
.audience-line small { color: var(--text-mute); font-size: .76rem; display: block; }

/* -------------------------------------------------------------------
   Login — a split screen: the pitch on the left, the form on the right
   ------------------------------------------------------------------- */

.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
}

/* ---- Left: brand panel ---- */

.auth-side {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 3rem;
    background:
        radial-gradient(720px 440px at 14% -6%, rgba(255, 200, 0, .20), transparent 62%),
        radial-gradient(560px 380px at 104% 106%, rgba(255, 200, 0, .10), transparent 58%),
        var(--rail);
    color: #bdbdbd;
}

/* A faint grid, so the panel is not a flat wash of colour. */
.auth-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(70% 60% at 40% 35%, #000 40%, transparent 100%);
    pointer-events: none;
}

.auth-side > * { position: relative; }

.auth-brand { display: flex; align-items: center; gap: .8rem; }
.auth-brand .mark { width: 40px; height: 40px; flex: 0 0 40px; }
.auth-brand-name { color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.auth-brand-sub  { font-size: .78rem; color: #8f8f8f; }

.auth-pitch { max-width: 30rem; }

/* The side panel is decoration, so its headline is not the page heading —
   that is "Panele giriş" on the form, which survives the mobile breakpoint. */
.auth-headline {
    display: block;
    margin: 0 0 .7rem;
    color: #fff;
    font-size: clamp(1.6rem, 2.5vw, 2.15rem);
    line-height: 1.22;
    letter-spacing: -.02em;
    margin-bottom: .7rem;
}

.auth-pitch p { color: #b5b5b5; font-size: .95rem; line-height: 1.6; }

.auth-points { display: grid; gap: .95rem; margin-top: 1.9rem; }

.auth-point { display: flex; gap: .8rem; align-items: flex-start; }

.auth-point .ic {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: .18rem;
    color: var(--yellow);
}

.auth-point b { display: block; color: #fff; font-weight: 600; font-size: .9rem; }
.auth-point span { font-size: .84rem; color: #9c9c9c; line-height: 1.5; }

.auth-side-foot { font-size: .78rem; color: #7d7d7d; }

/* ---- Right: the form ---- */

.auth-main {
    display: grid;
    place-items: center;
    padding: 2.5rem 1.5rem;
    background: var(--surface);
}

.auth-form { width: 100%; max-width: 340px; }

.auth-form h1 { font-size: 1.4rem; letter-spacing: -.02em; }
.auth-form .lead { color: var(--text-soft); font-size: .88rem; margin: .3rem 0 1.7rem; }

/* The mark repeats here only when the side panel is out of view. */
.auth-form .mark { display: none; width: 46px; height: 46px; margin-bottom: 1.1rem; }

.auth-field { margin-bottom: 1rem; }

.auth-field input {
    padding: .68rem .8rem;
    font-size: .95rem;
}

/* Password box with the reveal button tucked inside it. */
.auth-secret { position: relative; }
.auth-secret input { padding-right: 2.8rem; }

.auth-reveal {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: .4rem;
    border-radius: var(--radius-sm);
    color: var(--text-mute);
    cursor: pointer;
    line-height: 0;
}

.auth-reveal:hover { color: var(--text); background: var(--surface-2); }
.auth-reveal .ic { width: 17px; height: 17px; }

.auth-submit { margin-top: 1.3rem; }

.auth-foot {
    margin-top: 1.6rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
    font-size: .8rem;
    color: var(--text-mute);
    line-height: 1.55;
}

@media (max-width: 900px) {
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth-side { display: none; }
    .auth-main { align-content: center; }
    .auth-form .mark { display: block; }
}

/* -------------------------------------------------------------------
   Error page
   ------------------------------------------------------------------- */

.error-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.error-card { text-align: center; max-width: 440px; }
.error-code { font-size: 3.6rem; font-weight: 800; color: var(--border-strong); line-height: 1; }

/* -------------------------------------------------------------------
   Utilities
   ------------------------------------------------------------------- */

.text-sm    { font-size: .82rem; }
.text-xs    { font-size: .75rem; }
.text-soft  { color: var(--text-soft); }
.text-mute  { color: var(--text-mute); }
/* No green or red left to lean on, so these lean on weight. The words
   beside them ("Gönderildi", "Başarısız") carry the meaning. */
.text-ok    { color: var(--text); font-weight: 640; }
.text-warn  { color: var(--text); font-weight: 640; }
.text-danger{ color: var(--text); font-weight: 700; }
.mono       { font-family: var(--mono); font-size: .85em; }
.nums       { font-variant-numeric: tabular-nums; }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .6rem; }
.mt-2 { margin-top: 1.15rem; }
.mb-1 { margin-bottom: .6rem; }
.hidden { display: none !important; }

.inline-form { display: inline; }

/* -------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------- */

/* Paired min/max inputs need room long before the layout stacks. */
@media (max-width: 1500px) {
    .grid-side-lg { grid-template-columns: minmax(0, 1fr) 370px; }
    .field-row-3  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .grid-side, .grid-side-lg { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
    .rail {
        position: fixed;
        inset-inline-start: 0;
        top: 0;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--shadow-lg);
    }

    .rail.is-open { transform: none; }
    .rail-toggle { display: inline-flex; }
    .grid-2 { grid-template-columns: minmax(0, 1fr); }
    .field-row, .field-row-3 { grid-template-columns: minmax(0, 1fr); }
    .content { padding: 1.1rem .9rem 2.5rem; }
    .topbar { padding: .75rem .9rem; gap: .6rem; }
    .topbar h1 { font-size: 1.1rem; }

    /* The credit figure is the one thing an operator checks constantly, so it
       stays on small screens; the secondary limits are what drop. */
    .topbar-meta .badge:not(:first-child) { display: none; }

    .rail-scrim {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .55);
        z-index: 55;
    }
}

/* Anyone who has asked their system to calm animations down gets a panel
   that does not slide, lift or spin. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .tile:hover { transform: none; }
    .btn:active { transform: none; }
}

@media print {
    .rail, .topbar, .btn, .pager, .filters, .picker-panel, .skip-link { display: none !important; }
    .content { padding: 0; }
    .shell { display: block; }

    .card, .tile {
        box-shadow: none;
        border-color: #c7c7c7;
        break-inside: avoid;
    }

    .tile.accent { background: #ffffff !important; color: #111111 !important; }
    .tile.accent .tile-value { color: #111111; }
    a { text-decoration: none; }
    table.data { font-size: .78rem; }
}