/* ManageIt ERP interface — version 45.
   One flat, compact, responsive visual system. See docs/frontend.md. */

/* Inter, served with the app (static/core/fonts, SIL Open Font License):
   one variable file covers every weight; text shows in the fallback font
   until it loads. */
@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.woff2") format("woff2");
}

:root {
    /* Text on these meets WCAG AA (4.5:1): white on nav 5.5, on primary 5.1. */
    --color-nav: #1d6f99;
    --color-nav-hover: #1a6890;
    --color-nav-active: #155b80;
    --color-primary: #126fc6;
    --color-primary-hover: #0e5ea8;
    --color-heading: #102044;
    --color-text: #222222;
    --color-text-secondary: #3f4a5a;
    --color-muted: #5f6878;
    --color-muted-light: #94a0af;
    --color-canvas: #f3f5fa;
    --color-section: #f2f2f2;
    --color-border: #d3d8df;
    --color-border-subtle: #e7ebef;
    --color-control-border: #bfc5cc;
    --color-success: #416d00;
    --color-success-surface: #edf7dc;
    --color-warning: #9a6410;
    --color-warning-surface: #fff3d6;
    --color-danger: #c83b3b;
    --color-danger-surface: #fff0f0;
    --color-purple: #6f42c1;
    --color-purple-surface: #f0e9fb;
    --color-section-accent: #a94319;
    --font-sans: Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --radius-control: 3px;
    --radius-panel: 8px;
    --shadow-overlay: 0 12px 28px rgb(16 32 68 / 0.18);
    --topbar-height: 56px;
    --subnav-height: 42px;
    --content-width: 1500px;
    /* Surfaces and ink. */
    --color-surface: #fff;
    --color-ink: #000;
    --color-ink-soft: #333;
    --color-menu-hover: #f2f7fa;
    --color-section-border: #e1e4e8;
    --color-help-surface: #e8ecef;
    --color-disabled-surface: #e9ecef;
    --color-invalid-surface: #fffafa;
    /* Navigation and controls. */
    --color-subnav-text: #176999;
    --color-subnav-hover-border: #b9ddec;
    --color-control-hover: #f7f9fa;
    --color-control-border-hover: #8e9aa5;
    --color-primary-surface: #edf7fc;
    --color-ghost-hover: #eaf4f9;
    --color-selected-surface: #e9f6fb;
    --color-selected-border: #add2e2;
    --color-chip-hover: #d4ecf6;
    --color-remove-hover-border: #f1c4c4;
    /* Tags, icons, and avatars. */
    --color-info-surface: #e6f3f9;
    --color-tag-text: #257499;
    --color-icon-text: #267ca5;
    --color-avatar-surface: #e3f3fb;
    --color-avatar-sm-surface: #dce6ed;
    --color-avatar-sm-text: #4f6170;
    --color-logo-surface: #e5f3fa;
    --color-code-surface: #f5f9fb;
    --color-code-border: #ccdce4;
    --color-code-text: #205e7e;
    /* Tables. */
    --color-table-head-text: #286f98;
    --color-table-row-border: #cbdce5;
    --color-table-row-hover: #f4f9fc;
    /* Status badges, roles, and live dots. */
    --color-active-border: #b9d98c;
    --color-active-text: #476f00;
    --color-inactive-surface: #f0f1f2;
    --color-inactive-text: #68717a;
    --color-purple-border: #d6c3ed;
    --color-purple-text: #62339a;
    --color-superuser-surface: #faeaea;
    --color-superuser-border: #e3b8b8;
    --color-superuser-text: #9d3030;
    --color-user-surface: #edf7fb;
    --color-user-border: #c5dce7;
    --color-user-text: #246b8a;
    --color-live-dot: #a8d646;
    --color-warning-dot: #ffd166;
    /* Alerts and notices. */
    --color-alert-border: #e5abab;
    --color-alert-text: #8d2828;
    --color-notice-border: #ead398;
    --color-notice-text: #654817;
    --color-notice-detail: #735b30;
}

/* Reset and accessibility */

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

[hidden] { display: none !important; }

html {
    min-width: 320px;
    min-height: 100%;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-sans);
    /* Desktop text and spacing (rem) scale from 15px; phones keep 16px. */
    font-size: 15px;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--topbar-height) + var(--subnav-height) + 5.5rem);
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea { font-family: var(--font-sans); }

button,
input,
select,
textarea { font-size: inherit; }

button,
summary,
select { cursor: pointer; }

img,
svg { display: block; }

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover { color: var(--color-primary-hover); }

h1,
h2,
h3,
p { margin-top: 0; }

/* A link inside running text is underlined: colour alone does not mark it. */
p a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: fixed;
    top: -5rem;
    left: 1rem;
    z-index: 200;
    padding: 0.55rem 0.85rem;
    border-radius: 0 0 var(--radius-control) var(--radius-control);
    background: var(--color-heading);
    color: var(--color-surface);
    font-weight: 700;
}

.skip-link:focus { top: 0; }

/* Application shell */

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 70;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: var(--topbar-height);
    padding: 0 1rem;
    background: var(--color-nav);
    color: var(--color-surface);
}

.topbar-brand-wrap,
.topbar-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.topbar-brand-wrap { gap: 0.5rem; }

.topbar-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 0.18);
    border-radius: var(--radius-control);
    background: rgb(255 255 255 / 0.08);
    color: var(--color-surface);
}

.topbar-menu-toggle:hover { background: rgb(255 255 255 / 0.16); }

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 126px;
    color: var(--color-surface);
}

.app-brand:hover { color: var(--color-surface); }

.app-brand-mark {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-control);
}

.app-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-brand-title {
    font-size: 1.03rem;
    font-weight: 700;
    line-height: 1.05;
}

.app-brand-tag {
    margin-top: 2px;
    color: rgb(255 255 255 / 0.9);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1;
    text-transform: uppercase;
}

.app-nav {
    display: flex;
    align-items: stretch;
    min-width: 0;
    height: 100%;
    margin-left: 0.75rem;
    margin-right: auto;
    overflow-x: auto;
    scrollbar-width: none;
}

.app-nav::-webkit-scrollbar { display: none; }

.nav-tab {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 66px;
    height: 100%;
    padding: 5px 8px 4px;
    border-radius: 0;
    color: rgb(255 255 255 / 0.92);
    text-align: center;
}

a.nav-tab:hover {
    background: var(--color-nav-hover);
    color: var(--color-surface);
}

.nav-tab.active {
    background: var(--color-nav-active);
    box-shadow: inset 0 -3px 0 var(--color-surface);
    color: var(--color-surface);
}

.nav-tab-icon {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
}

.nav-tab-label {
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

/* A module's group: on wide screens just its tab; the phone menu (860 px and
   narrower) shows its name and pages instead. */
.nav-group { display: contents; }
.nav-group-toggle,
.nav-group-pages { display: none; }

.topbar-actions { gap: 0.5rem; }

.topbar-fy-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 1px solid rgb(255 255 255 / 0.18);
    border-radius: var(--radius-control);
    background: rgb(255 255 255 / 0.08);
    color: var(--color-surface);
}

.topbar-fy-badge {
    gap: 0.4rem;
    padding: 0.32rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-live-dot);
}

.badge-pulse-dot.warning { background: var(--color-warning-dot); }

.user-dropdown {
    position: relative;
    height: 100%;
}

.user-dropdown > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    padding: 0 0.35rem;
    border-radius: var(--radius-control);
    list-style: none;
    color: var(--color-surface);
}

.user-dropdown > summary::-webkit-details-marker { display: none; }
.user-dropdown > summary:hover { background: rgb(255 255 255 / 0.09); }

.avatar {
    display: grid;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-avatar-surface);
    color: var(--color-nav-active);
    font-weight: 700;
    place-items: center;
    text-transform: uppercase;
}

.user-meta {
    display: flex;
    flex-direction: column;
    max-width: 130px;
}

.user-display-name,
.user-role-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-display-name { font-size: 0.78rem; font-weight: 600; }
.user-role-label { color: rgb(255 255 255 / 0.9); font-size: 0.7rem; }
.dropdown-chevron { color: rgb(255 255 255 / 0.9); font-size: 0.7rem; }

.dropdown-panel {
    position: absolute;
    top: calc(100% - 2px);
    right: 0;
    z-index: 90;
    width: 265px;
    padding: 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-surface);
    box-shadow: var(--shadow-overlay);
    color: var(--color-text);
}

.dropdown-panel a,
.dropdown-panel form button {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 36px;
    padding: 0.5rem 0.65rem;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--color-text-secondary);
    text-align: left;
}

.dropdown-panel a:hover,
.dropdown-panel form button:hover { background: var(--color-menu-hover); color: var(--color-primary-hover); }

.dropdown-user-header { display: flex; flex-direction: column; padding: 0.65rem; }
.dropdown-user-header small { color: var(--color-muted); overflow-wrap: anywhere; }
.user-role-badge { margin-top: 0.35rem; color: var(--color-primary-hover); font-size: 0.72rem; font-weight: 700; }
.dropdown-divider { height: 1px; margin: 0.35rem 0; background: var(--color-border-subtle); }

.app-subnav {
    position: sticky;
    top: var(--topbar-height);
    z-index: 60;
    height: var(--subnav-height);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-surface);
}

.subnav-container {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100%;
    padding: 0 1rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.subnav-container::-webkit-scrollbar { display: none; }

.subnav-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    margin-right: 1.8rem;
    border-bottom: 3px solid transparent;
    color: var(--color-subnav-text);
    font-size: 0.9rem;
    white-space: nowrap;
}

.subnav-tab:hover { border-bottom-color: var(--color-subnav-hover-border); color: var(--color-primary-hover); }
.subnav-tab.active { border-bottom-color: var(--color-primary); color: var(--color-heading); font-weight: 600; }

.app-main {
    min-height: calc(100vh - var(--topbar-height) - var(--subnav-height));
    padding: 1.4rem clamp(1.25rem, 2.5vw, 2.5rem) 4rem;
}

.app-container { width: 100%; max-width: var(--content-width); margin: 0 auto; }

/* Typography and common layout */

.page-shell-modern,
.dashboard-shell {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.page-heading-modern,
.dashboard-hero-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

.page-heading-modern > div:first-child { min-width: 0; }

.eyebrow {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--color-primary-hover);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.page-title-modern,
.dashboard-main-title,
.form-card-title {
    margin-bottom: 0.3rem;
    color: var(--color-heading);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.page-title-modern { font-size: clamp(1.55rem, 2.3vw, 2rem); }
.dashboard-main-title { font-size: clamp(2rem, 3.2vw, 2.6rem); }
.form-card-title { font-size: 1.75rem; }

.page-summary-modern,
.dashboard-subtitle,
.form-card-sub {
    margin-bottom: 0;
    color: var(--color-text-secondary);
}

.page-summary-modern { max-width: 900px; font-size: 0.9rem; }
.dashboard-subtitle { max-width: 760px; font-size: 1rem; }
.form-card-sub { font-size: 0.88rem; }

.page-actions-cluster,
.row-actions-cluster,
.form-actions-modern {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.page-actions-cluster { flex: 0 0 auto; }
.row-actions-cluster { justify-content: flex-end; }

.text-right { text-align: right; }
.text-muted { color: var(--color-muted); }
.text-dark { color: var(--color-text); }
.text-danger { color: var(--color-danger) !important; }
.text-success { color: var(--color-success) !important; }
.font-medium { font-weight: 600; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }

/* Buttons and action links */

.btn,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 34px;
    padding: 0.42rem 0.82rem;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover { text-decoration: none; }
.btn-primary { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-surface); }
/* A form being sent (app.js): its buttons wait for the server. */
.btn.is-submitting { cursor: progress; opacity: 0.7; }
.btn-primary:hover { border-color: var(--color-primary-hover); background: var(--color-primary-hover); color: var(--color-surface); }
.btn-secondary { border-color: var(--color-control-border); background: var(--color-surface); color: var(--color-text); }
.btn-secondary:hover { border-color: var(--color-control-border-hover); background: var(--color-control-hover); color: var(--color-text); }
.btn-outline { border-color: var(--color-primary); background: var(--color-surface); color: var(--color-primary-hover); }
.btn-outline:hover { background: var(--color-primary-surface); color: var(--color-primary-hover); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--color-primary-hover); }
.btn-ghost:hover { background: var(--color-ghost-hover); }
.btn-sm { min-height: 30px; padding: 0.33rem 0.65rem; font-size: 0.78rem; }
.btn-xs { min-height: 27px; padding: 0.25rem 0.55rem; font-size: 0.73rem; }
.btn-block { width: 100%; }
.btn.disabled,
.btn:disabled { opacity: 0.48; pointer-events: none; }

.action-link,
.action-link-btn {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary-hover);
    font-size: 0.82rem;
    font-weight: 600;
}

.action-link:hover,
.action-link-btn:hover { text-decoration: underline; }
.inline-form { display: inline; margin: 0; }

/* Company overview */

.dashboard-shell { gap: 2.7rem; }
.dashboard-meta-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.system-tag { padding: 0.28rem 0.55rem; background: var(--color-info-surface); color: var(--color-tag-text); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.system-date { color: var(--color-muted); font-size: 0.8rem; }

/* Shared card accents and code formatting */

.config-icon-circle { display: grid; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 4px; background: var(--color-info-surface); color: var(--color-icon-text); place-items: center; }
.config-icon-circle.icon-purple { background: var(--color-purple-surface); color: var(--color-purple); }
.preview-format-text,
.code-badge { font-family: var(--font-mono); }
.code-badge { display: inline-block; padding: 0.18rem 0.4rem; border: 1px solid var(--color-code-border); border-radius: 2px; background: var(--color-code-surface); color: var(--color-code-text); }

/* Status */

.badge-status,
.role-pill,
.module-chip,
.active-badge-pill,
.protected-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.18rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 0.69rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.badge-active,
.active-badge-pill { border-color: var(--color-active-border); background: var(--color-success-surface); color: var(--color-active-text); }
.badge-inactive { background: var(--color-inactive-surface); color: var(--color-inactive-text); }
.badge-purple,
.role-admin { border-color: var(--color-purple-border); background: var(--color-purple-surface); color: var(--color-purple-text); }
.role-superuser { border-color: var(--color-superuser-border); background: var(--color-superuser-surface); color: var(--color-superuser-text); }
.role-user { border-color: var(--color-user-border); background: var(--color-user-surface); color: var(--color-user-text); }
.module-chip { margin: 0.1rem 0.15rem 0.1rem 0; font-weight: 500; }
.module-chip.all-modules { border-color: var(--color-active-border); color: var(--color-active-text); }
.module-chips-wrap { display: flex; flex-wrap: wrap; }
.protected-label { border-color: transparent; color: var(--color-muted); }

/* Toolbars, registers, and tables */

.filter-toolbar-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-surface);
}

.filter-field-search { flex: 0 1 28rem; }
.filter-field-select { flex: 0 0 11rem; margin-left: auto; }
.filter-field-select + .filter-field-select { margin-left: 0; }
.filter-field-select.filter-field-wide { flex-basis: 17rem; }
.search-input-wrap { position: relative; }
.search-icon { position: absolute; top: 50%; left: 0.62rem; z-index: 1; transform: translateY(-50%); color: var(--color-muted-light); pointer-events: none; }
.search-input-wrap input,
.filter-field-select select,
.filter-field-select .search-picker input {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.83rem;
}
.search-input-wrap input { padding: 0.45rem 0.7rem 0.45rem 2rem; }
.filter-field-select select { padding: 0.45rem 2rem 0.45rem 0.7rem; }
.filter-field-select .search-picker input { padding: 0.45rem 0.7rem; }
.search-input-wrap input:focus,
.filter-field-select select:focus,
.filter-field-select .search-picker input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgb(28 130 191 / 0.14);
    outline: 0;
}
.filter-submit { min-height: 36px; }

.table-card-modern { width: 100%; overflow-x: auto; }
.table-modern { width: 100%; border-collapse: collapse; background: var(--color-surface); }
.table-modern th,
.table-modern td { padding: 0.68rem 0.78rem; text-align: left; vertical-align: middle; }
.table-modern th { border-bottom: 2px solid var(--color-primary); color: var(--color-table-head-text); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.table-modern td { border-bottom: 1px solid var(--color-table-row-border); color: var(--color-text); font-size: 0.88rem; }
.table-modern tbody tr:hover { background: var(--color-table-row-hover); }
.table-modern .text-right { text-align: right; }
.user-row-identity { display: flex; align-items: center; gap: 0.65rem; min-width: 11rem; }
.avatar-sm { display: grid; flex: 0 0 auto; width: 29px; height: 29px; border-radius: 50%; background: var(--color-avatar-sm-surface); color: var(--color-avatar-sm-text); font-size: 0.75rem; font-weight: 700; place-items: center; text-transform: uppercase; }
.user-row-name,
.user-row-email,
.row-subtext { display: block; }
.user-row-email,
.row-subtext { margin-top: 0.12rem; color: var(--color-muted); font-size: 0.78rem; }
.empty-table-cell { padding: 0 !important; }
/* A document's lines under its row, opened by its toggle (order_documents.html) */
.document-number { display: inline-flex; align-items: center; white-space: nowrap; }
.lines-toggle { width: 1.5rem; height: 1.5rem; margin-right: 0.25rem; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--color-primary-hover); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.lines-toggle:hover { background: var(--color-ghost-hover); }
.lines-toggle span { display: inline-block; transition: transform 0.15s; }
.lines-toggle[aria-expanded="true"] span { transform: rotate(90deg); }
.table-modern .document-line td { background: var(--color-table-row-hover); font-size: 0.84rem; }
.table-modern .document-line td:first-child { padding-left: 2.6rem; }

/* Indented tree rows inside a register table (e.g. item categories) */
.tree-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; min-width: 0; }
.tree-cell strong { overflow-wrap: normal; }
.tree-indent { flex: 0 0 1.35rem; align-self: stretch; border-left: 1px solid var(--color-border); }
.tree-indent:first-child { border-left-color: transparent; }
.tree-branch { flex: 0 0 0.8rem; height: 0.8rem; margin-top: -0.55rem; border-bottom: 1px solid var(--color-muted-light); border-left: 1px solid var(--color-muted-light); }
.tree-meta { color: var(--color-muted); font-size: 0.72rem; white-space: nowrap; }
.tree-context-row td { background: var(--color-canvas); }
.tree-context-row .text-dark { color: var(--color-muted); }
.empty-state-box { display: flex; min-height: 230px; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem; padding: 2rem; color: var(--color-muted); text-align: center; }
.empty-state-box p { margin: 0; }
.pagination-modern { display: flex; align-items: center; justify-content: flex-start; gap: 0.55rem; }
.page-indicator { color: var(--color-muted); font-size: 0.77rem; }

/* Forms and controls */

.form-shell-narrow { max-width: 1200px; margin: 0 auto; }
.form-card-modern { width: 100%; }
.form-card-header { margin-bottom: 0; padding: 0 0 1rem; border-bottom: 1px solid var(--color-border); }
.modern-form { display: flex; flex-direction: column; gap: 1.4rem; }
.form-actions-modern { flex-wrap: wrap; }
.form-actions-top { padding: 0 0 1rem; border-bottom: 1px solid var(--color-border-subtle); }

/* A page's toolbar: its title, status, and actions on one row, and who
   changed it last at the far end (inside a form, it holds the submit). */
.page-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.65rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border-subtle); }
.page-toolbar .page-title-modern { margin: 0 0.5rem 0 0; font-size: 1.6rem; }
.page-toolbar .page-actions-cluster { flex-wrap: wrap; }
.toolbar-meta { margin: 0 0 0 auto; color: var(--color-muted); font-size: 0.8rem; line-height: 1.35; text-align: right; }
.toolbar-meta strong { color: var(--color-text-secondary); font-weight: 600; }
.page-toolbar + .page-summary-modern { margin-top: -0.6rem; }
/* A record page's small way back, just above its toolbar. */
.back-link { display: inline-flex; align-self: flex-start; align-items: center; gap: 0.35rem; margin-bottom: -0.9rem; color: var(--color-primary-hover); font-size: 0.86rem; font-weight: 500; }
.back-link:hover { text-decoration: underline; }
/* On a form the toolbar stays under the tabs while the page scrolls, so
   Save is always in reach; fields scrolled to (keyboard, errors) stop below
   it (scroll-padding on html). */
.modern-form > .page-toolbar { position: sticky; top: calc(var(--topbar-height) + var(--subnav-height)); z-index: 55; margin-top: -0.9rem; padding-top: 0.9rem; background: var(--color-surface); }

/* Key facts of a record under its toolbar: label above value. */
.facts-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.9rem 2rem; margin: 0; }
.facts-strip div { min-width: 0; }
.facts-strip dt { color: var(--color-muted); font-size: 0.8rem; }
.facts-strip dd { margin: 0.1rem 0 0; color: var(--color-heading); font-weight: 600; overflow-wrap: anywhere; }

/* A document's header fields side by side, labels above. */
/* As many columns as fit, so a document's header fields share one row. */
.header-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 2rem; align-items: start; }
.header-grid .erp-field-row { display: block; margin-top: 0.85rem; }
.header-grid .erp-field-label { display: block; padding: 0 0 0.3rem; font-weight: 600; text-align: left; }
.header-grid span.erp-field-label:empty { display: none; }

/* Tabs (app.js, [data-tabs]): one panel shown at a time; without the script
   every panel shows, stacked. */
.tab-list { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 0.4rem; border-bottom: 2px solid var(--color-primary); }
.tab-list [role="tab"] { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 38px; padding: 0.45rem 1rem; border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; background: transparent; color: var(--color-subnav-text); font-size: 0.92rem; font-weight: 500; cursor: pointer; }
.tab-list [role="tab"]:hover { background: var(--color-ghost-hover); }
.tab-list [role="tab"][aria-selected="true"] { background: var(--color-primary); color: var(--color-surface); font-weight: 600; }
.tab-count { padding: 0 0.45rem; border-radius: 9px; background: var(--color-info-surface); color: var(--color-tag-text); font-size: 0.75rem; font-weight: 600; }
[aria-selected="true"] .tab-count { background: rgb(255 255 255 / 0.25); color: var(--color-surface); }
.tabs-ready [data-tab] > .erp-section-title:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tabs-ready [data-tab] { margin-top: 0.75rem; }

/* A register row opens its record (app.js); its first cell links there too. */
tr[data-href]:not([data-href=""]) { cursor: pointer; }
.row-link { color: inherit; font-weight: 600; }
.row-link:hover { color: var(--color-primary-hover); }

/* Active / inactive as a quiet dot. */
.status-dot { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-success); font-size: 0.85rem; white-space: nowrap; }
.status-dot::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.status-dot.is-inactive { color: var(--color-muted); }

.erp-form-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 3rem; align-items: start; }
/* Sections are flat: a heading and spacing, no box. */
.erp-form-section { min-width: 0; padding: 0; }
.erp-form-section-full { grid-column: 1 / -1; }
/* A form that names its columns stacks each one on its own, with no gaps. */
.erp-form-stack { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }
.erp-form-section-single { max-width: 780px; }
.erp-section-title { margin: 0; color: var(--color-section-accent); font-size: 1.04rem; font-weight: 600; }
.erp-section-description { margin: 0.2rem 0 0.6rem; color: var(--color-muted); font-size: 0.82rem; }
.erp-field-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.75rem; align-items: start; margin-top: 0.72rem; }
.erp-field-label { padding-top: 0.5rem; color: var(--color-text-secondary); font-size: 0.86rem; font-weight: 500; line-height: 1.25; text-align: right; }
.erp-field-control { min-width: 0; }

.field-group-modern { min-width: 0; }
.field-label-modern { display: block; margin-bottom: 0.35rem; color: var(--color-text-secondary); font-size: 0.8rem; font-weight: 600; }
.label-with-link { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.auth-forgot-link { font-size: 0.76rem; }
.req-star { color: var(--color-danger); }
.input-control-wrap { min-width: 0; }

/* :where() keeps the type filter from outweighing state rules such as the
   aria-invalid border below. */
.input-control-wrap input:where(:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])),
.input-control-wrap select,
.input-control-wrap textarea,
.modern-form input:where(:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"])),
.modern-form select,
.modern-form textarea {
    width: 100%;
    min-height: 35px;
    padding: 0.42rem 0.58rem;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.92rem;
    line-height: 1.35;
}

.input-control-wrap textarea,
.modern-form textarea { min-height: 78px; resize: vertical; }

.input-control-wrap input:focus,
.input-control-wrap select:focus,
.input-control-wrap textarea:focus,
.modern-form input:focus,
.modern-form select:focus,
.modern-form textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgb(18 111 198 / 0.15);
    outline: none;
}

.input-control-wrap input:disabled,
.input-control-wrap select:disabled,
.input-control-wrap textarea:disabled,
.lines-table input:disabled,
.lines-table select:disabled { background: var(--color-disabled-surface); color: var(--color-muted); cursor: not-allowed; }

.input-control-wrap input[aria-invalid="true"],
.input-control-wrap select[aria-invalid="true"],
.input-control-wrap textarea[aria-invalid="true"] { border-color: var(--color-danger); background: var(--color-invalid-surface); }

.input-with-icon { position: relative; }
.input-icon { position: absolute; top: 50%; left: 0.8rem; z-index: 1; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.modern-form .input-control-wrap.input-with-icon input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { padding-left: 2.55rem; }

.field-help-modern { margin-top: 0.3rem; color: var(--color-muted); font-size: 0.79rem; line-height: 1.4; }
.field-help-modern ul { margin: 0.35rem 0 0; padding: 0.55rem 0.65rem 0.55rem 1.45rem; background: var(--color-help-surface); }
.field-error-modern,
.errorlist { margin: 0.3rem 0 0; color: var(--color-danger); font-size: 0.75rem; }
.errorlist { padding-left: 1.15rem; }

.form-alert-error { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.75rem 0.85rem; border: 1px solid var(--color-alert-border); border-radius: var(--radius-control); background: var(--color-danger-surface); color: var(--color-alert-text); font-size: 0.82rem; }
.alert-icon { flex: 0 0 auto; font-weight: 700; }

.checkbox-card-modern { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); cursor: pointer; }
.checkbox-card-modern:has(input:checked) { border-color: var(--color-selected-border); background: var(--color-selected-surface); }
/* A setting that does not apply (app.js, data-off-when): greyed out. */
.checkbox-card-modern:has(input:disabled) { border-color: var(--color-border); background: var(--color-disabled-surface); cursor: not-allowed; }
.checkbox-card-modern:has(input:disabled) .check-title,
.checkbox-card-modern:has(input:disabled) .check-sub { color: var(--color-muted); }
.checkbox-card-modern input[type="checkbox"],
.modules-field-wrap input[type="checkbox"] { flex: 0 0 auto; width: 17px; height: 17px; margin: 0.1rem 0 0; accent-color: var(--color-primary); }
.check-title,
.check-sub { display: block; }
.check-title { color: var(--color-heading); font-size: 0.88rem; }
.check-sub { margin-top: 0.15rem; color: var(--color-muted); font-size: 0.79rem; font-weight: 400; line-height: 1.4; }
.permissions-grid-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.modules-field-wrap ul,
/* Line tables in forms (formsets). No scrolling wrapper, so a picker's list
   can drop below its row. */
.lines-section { margin-top: 0.25rem; }
.lines-section > .erp-section-description:empty { display: none; }
.remarks-section { max-width: 780px; }
.remarks-section .erp-field-row { display: block; }
.remarks-section .erp-field-label { display: block; padding: 0 0 0.3rem; font-weight: 600; text-align: left; }
.remarks-section textarea { min-height: 3.6rem; }
.lines-table { margin-bottom: 0.75rem; border: 1px solid var(--color-border-subtle); }
.lines-table td { vertical-align: top; }
.lines-table tbody tr:hover { background: transparent; }
.lines-col-quantity { width: 12rem; }
.lines-col-unit { width: 8rem; }
.lines-col-location { width: 12rem; }
.lines-col-brand { width: 10rem; }
.lines-col-remove { width: 3.5rem; }
.lines-remove { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 35px; color: var(--color-text-secondary); font-size: 0.8rem; cursor: pointer; }
.lines-remove-button { display: inline-grid; place-items: center; width: 35px; height: 35px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--color-muted); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.lines-remove-button:hover,
.lines-remove-button:focus-visible { border-color: var(--color-remove-hover-border); background: var(--color-danger-surface); color: var(--color-danger); }

/* Helpers above a document's lines (components/bill_fill.html, stock_fill.html). */
.line-helper { margin: 0.25rem 0 0.75rem; padding: 0.6rem 0.85rem; border: 1px dashed var(--color-border); border-radius: 4px; background: var(--color-surface); }
.line-helper .field-help-modern { margin-top: 0.35rem; }
.line-helper-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.line-helper-fields label { display: block; margin-bottom: 0.3rem; color: var(--color-text-secondary); font-size: 0.8rem; font-weight: 500; }
.line-helper-wide { flex: 1 1 22rem; min-width: 0; }
.line-helper-narrow { flex: 0 0 9rem; }
.line-helper-status:empty { display: none; }
.line-helper-status { margin: 0.5rem 0 0; color: var(--color-success); font-size: 0.8rem; font-weight: 500; }
.line-helper-status.line-helper-problem { color: var(--color-danger); }

/* Item import preview: a row's changed fields. */
.import-changes { margin: 0; padding: 0; list-style: none; }
.import-changes li + li { margin-top: 0.2rem; }
.import-change-label { color: var(--color-muted); }

/* Type-to-search picker: app.js enhances select[data-search-picker]. */
.search-picker { position: relative; }
.picker-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.35rem; padding: 0; list-style: none; }
.picker-chips:empty { display: none; }
.picker-chip { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.1rem 0.15rem 0.1rem 0.55rem; border: 1px solid var(--color-selected-border); border-radius: var(--radius-control); background: var(--color-selected-surface); color: var(--color-heading); font-size: 0.8rem; }
.picker-chip-remove { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-muted); font-size: 1rem; line-height: 1; cursor: pointer; }
.picker-chip-remove:hover,
.picker-chip-remove:focus-visible { background: var(--color-chip-hover); color: var(--color-heading); }
.picker-list { position: absolute; top: calc(100% + 2px); right: 0; left: 0; z-index: 40; max-height: 16rem; margin: 0; padding: 0.25rem 0; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); box-shadow: var(--shadow-overlay); list-style: none; }
.picker-list [role="option"] { padding: 0.45rem 0.7rem; color: var(--color-text); font-size: 0.85rem; cursor: pointer; }
.picker-list [role="option"].active { background: var(--color-selected-surface); color: var(--color-heading); }
.picker-list[aria-multiselectable="true"] [role="option"] { display: flex; align-items: center; gap: 0.55rem; }
.picker-list[aria-multiselectable="true"] [role="option"]::before { content: ""; display: grid; flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-surface); font-size: 0.7rem; font-weight: 700; line-height: 1; place-items: center; }
.picker-list[aria-multiselectable="true"] [role="option"][aria-selected="true"]::before { content: "✓"; border-color: var(--color-primary); background: var(--color-primary); }
.picker-note { padding: 0.45rem 0.7rem; color: var(--color-muted); font-size: 0.78rem; }
.modules-field-wrap #id_modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.modules-field-wrap li label,
.modules-field-wrap #id_modules label { display: flex; align-items: flex-start; gap: 0.55rem; min-height: 40px; padding: 0.65rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text-secondary); font-size: 0.78rem; cursor: pointer; }
.modules-field-wrap li label:has(input:checked),
.modules-field-wrap #id_modules label:has(input:checked) { border-color: var(--color-selected-border); background: var(--color-selected-surface); color: var(--color-heading); }
.form-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.form-fields-grid.single-col { grid-template-columns: 1fr; }
.profile-cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 3rem; }
.profile-cards-grid .modern-form { gap: 1rem; }

/* Confirmation notices */

.switch-impact-notice { padding: 1.25rem 0; }
.notice-callout { display: flex; align-items: flex-start; gap: 0.8rem; padding: 1rem; border: 1px solid var(--color-notice-border); border-radius: 4px; background: var(--color-warning-surface); color: var(--color-notice-text); }
.notice-icon { flex: 0 0 auto; margin-top: 0.05rem; }
.notice-text { margin-bottom: 0.35rem; }
.notice-detail { display: block; color: var(--color-notice-detail); line-height: 1.5; }

/* Authentication */

.app-auth-shell { display: grid; min-height: 100vh; padding: 2rem 1rem; background: var(--color-canvas); place-items: center; }
.auth-card-wrapper { width: 100%; max-width: 420px; }
.error-page { margin: 3rem auto; text-align: center; }
.auth-card-modern { padding: 2rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); }
.auth-header-modern { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.5rem; text-align: center; }
.auth-logo-badge { display: grid; width: 52px; height: 52px; margin-bottom: 0.75rem; border-radius: 5px; background: var(--color-logo-surface); color: var(--color-primary-hover); place-items: center; }
.auth-logo-img { width: 36px; height: 36px; }
.auth-badge-success { background: var(--color-success-surface); color: var(--color-success); }
.auth-brand-name { margin-bottom: 0.2rem; color: var(--color-heading); font-size: 1.7rem; line-height: 1.2; }
.auth-brand-sub { max-width: 330px; margin: 0; color: var(--color-muted); font-size: 0.88rem; line-height: 1.5; }
.auth-form-stack { gap: 1rem; }
.auth-form-stack .input-control-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-height: 44px; font-size: 0.92rem; }
.auth-submit-wrap { margin-top: 0.2rem; }
.auth-footer-text { margin-top: 1.35rem; padding-top: 1rem; border-top: 1px solid var(--color-border-subtle); color: var(--color-muted); text-align: center; }

/* Notifications */

.toast-container { position: fixed; top: calc(var(--topbar-height) + var(--subnav-height) + 1rem); right: 1rem; z-index: 120; display: grid; width: min(380px, calc(100vw - 2rem)); gap: 0.55rem; }
.toast { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.8rem; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface); box-shadow: var(--shadow-overlay); transition: opacity 0.2s ease, transform 0.2s ease; }
.toast-success .toast-icon { color: var(--color-success); }
.toast-error .toast-icon,
.toast-danger .toast-icon { color: var(--color-danger); }
.toast-warning .toast-icon { color: var(--color-warning); }
.toast-info .toast-icon { color: var(--color-primary); }
.toast-body { flex: 1 1 auto; }
.toast-close { flex: 0 0 auto; padding: 0 0.2rem; border: 0; background: transparent; color: var(--color-muted); font-size: 1.15rem; line-height: 1; }
.toast.toast-hiding { opacity: 0; transform: translateY(-0.5rem); }

/* Responsive behavior */

@media (max-width: 1180px) {
    .header-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-brand-text,
    .user-meta { display: none; }
    .app-brand { min-width: auto; }
}

@media (max-width: 860px) {
    /* The sub-tab strip is hidden: the menu lists each module's pages. */
    :root { --topbar-height: 60px; --subnav-height: 0px; }
    .app-subnav { display: none; }
    /* 16px: iPhone Safari zooms into a form field set smaller when tapped. */
    html { font-size: 16px; }
    .topbar-menu-toggle { display: inline-flex; }
    .app-brand-text { display: flex; }
    .topbar-fy-badge span:last-child { display: none; }
    .topbar-fy-badge { width: 34px; padding: 0; }
    .app-nav {
        position: fixed;
        top: var(--topbar-height);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 65;
        display: grid;
        align-content: start;
        grid-template-columns: 1fr;
        height: auto;
        margin: 0;
        padding: 1rem;
        overflow-y: auto;
        background: var(--color-nav);
        transform: translateX(-105%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.22s ease, visibility 0s linear 0.22s;
    }
    body.mobile-nav-open { overflow: hidden; }
    body.mobile-nav-open .app-nav {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }
    .nav-group { display: block; }
    .nav-group + .nav-group { border-top: 1px solid rgb(255 255 255 / 0.14); }
    .nav-group > .nav-tab { display: none; }
    .nav-group-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 48px;
        padding: 0.7rem;
        border: 0;
        background: none;
        color: var(--color-surface);
        font: inherit;
        font-size: 0.95rem;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }
    .nav-group-toggle:hover { background: var(--color-nav-hover); }
    .nav-group-toggle::after {
        content: "";
        width: 0.45rem;
        height: 0.45rem;
        margin-right: 0.3rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg);
        transition: transform 0.15s ease;
    }
    .nav-group-toggle[aria-expanded="true"]::after { transform: rotate(45deg); }
    .nav-group-toggle[aria-expanded="true"] + .nav-group-pages { display: block; padding-bottom: 0.4rem; }
    .nav-group-page {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0.55rem 0.7rem 0.55rem 1.6rem;
        color: rgb(255 255 255 / 0.9);
        font-size: 0.9rem;
    }
    .nav-group-page:hover { background: var(--color-nav-hover); color: var(--color-surface); }
    .nav-group-page.active { background: var(--color-nav-active); box-shadow: inset 3px 0 0 var(--color-surface); color: var(--color-surface); font-weight: 600; }
    /* The blue focus ring would vanish on the menu's blue. */
    .nav-group-toggle:focus-visible,
    .nav-group-page:focus-visible { outline-color: var(--color-surface); outline-offset: -2px; }
    .erp-form-columns,
    .profile-cards-grid { grid-template-columns: 1fr; }
    .erp-form-section-full { grid-column: auto; }
    .modules-field-wrap ul,
    .modules-field-wrap #id_modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Reports (templates/reports/): labelled
   filters in a grid above the results table. */
.report-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.report-card { padding: 1rem 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
.report-card p { margin: 0.35rem 0 0; color: var(--color-text-secondary); font-size: 0.85rem; }
.report-card-title { margin: 0; font-size: 1rem; }
.report-filters { margin-bottom: 1rem; padding: 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
.report-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.65rem 0.75rem; }
.report-filter { min-width: 0; }
.report-filter label { display: block; margin-bottom: 0.25rem; color: var(--color-text-secondary); font-size: 0.75rem; font-weight: 600; }
.report-filter input,
.report-filter select,
.report-filter .search-picker input { width: 100%; min-height: 36px; padding: 0.45rem 0.7rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); font-size: 0.83rem; }
.report-filter input:focus,
.report-filter select:focus,
.report-filter .search-picker input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgb(28 130 191 / 0.14); outline: 0; }
.report-filter-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.55rem 0.75rem; margin-top: 0.75rem; }
.report-table td { vertical-align: top; }
.report-in { color: var(--color-success); }
.report-prompt { min-height: 160px; border: 1px dashed var(--color-border); border-radius: var(--radius-panel); }
.report-opening-row td { background: var(--color-canvas); color: var(--color-text-secondary); }

/* Phones (up to 640 px): stacked layout, 44 px touch targets, and 16 px
   text in every field, below which phones zoom in on the field being typed
   in. Kept after every style it overrides (list toolbars, report filters). */
@media (max-width: 640px) {
    .line-helper-narrow { flex: 1 1 100%; }
    .line-helper-fields .btn { width: 100%; }
    .app-topbar { padding: 0 0.65rem; }
    .app-brand-tag { display: none; }
    .app-brand-title { font-size: 0.95rem; }
    .topbar-actions { margin-left: auto; }
    .app-main { padding: 1.25rem 0.85rem 3rem; }
    .page-heading-modern,
    .dashboard-hero-header { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
    .dashboard-meta-wrap { align-items: flex-start; }
    .dashboard-shell { gap: 2rem; }
    .dashboard-main-title { font-size: 2rem; }
    .page-actions-cluster { width: 100%; flex-wrap: wrap; }
    .page-actions-cluster .btn { flex: 1 1 auto; }
    .filter-toolbar-card { align-items: stretch; flex-direction: column; }
    .filter-field-search,
    .filter-field-select { width: 100%; }
    .filter-field-search { flex: 0 0 auto; }
    .filter-field-select,
    .filter-field-select.filter-field-wide { flex: 0 0 auto; margin-left: 0; }
    .filter-field-select select { width: 100%; }
    .header-grid { grid-template-columns: 1fr; }
    .facts-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.25rem; }
    .toolbar-meta { flex-basis: 100%; margin-left: 0; text-align: left; }
    /* A form's fixed toolbar stays short on phones: smaller title, no "last changed". */
    .modern-form > .page-toolbar { gap: 0.5rem; padding-bottom: 0.75rem; }
    .modern-form > .page-toolbar .page-title-modern { flex-basis: 100%; font-size: 1.25rem; }
    .modern-form > .page-toolbar .toolbar-meta { display: none; }
    .erp-field-row { grid-template-columns: 1fr; gap: 0.3rem; }
    .erp-field-label { padding-top: 0; text-align: left; }
    .permissions-grid-inner,
    .modules-field-wrap ul,
    .modules-field-wrap #id_modules { grid-template-columns: 1fr; }
    .picker-list [role="option"] { display: flex; align-items: center; min-height: 44px; }
    .picker-chip-remove { width: 44px; height: 44px; }
    .lines-remove-button { width: 44px; height: 44px; }
    .input-control-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .input-control-wrap select,
    .modern-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
    .modern-form select { min-height: 44px; font-size: 1rem; }
    .input-control-wrap textarea,
    .modern-form textarea { font-size: 1rem; }
    .form-actions-modern { align-items: stretch; flex-direction: column; }
    .form-actions-modern .btn { width: 100%; }
    .form-actions-top { align-items: center; flex-direction: row; }
    .form-actions-top .btn { width: auto; }
    .auth-card-modern { padding: 1.5rem 1.15rem; }
    .app-auth-shell { padding: 1rem; }
    .pagination-modern { justify-content: space-between; }
    .page-indicator { text-align: center; }

    .table-card-modern { overflow: visible; }
    .table-modern,
    .table-modern tbody { display: block; }
    .table-modern thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .table-modern tr { display: block; margin-bottom: 0.75rem; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface); overflow: hidden; }
    .table-modern td { display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr); gap: 0.5rem; padding: 0.72rem 0.85rem; border-bottom: 1px solid var(--color-border-subtle); text-align: left !important; overflow-wrap: anywhere; }
    .table-modern td::before { content: attr(data-label); color: var(--color-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
    .table-modern td:last-child { border-bottom: 0; }
    .table-modern td.empty-table-cell { display: block; padding: 0 !important; }
    .table-modern td.empty-table-cell::before { display: none; }
    /* A document and its lines (order_documents.html) make one card. */
    .table-modern tbody.document-group { margin-bottom: 0.75rem; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface); overflow: hidden; }
    .table-modern .document-group tr { margin: 0; border: 0; border-radius: 0; }
    .table-modern .document-group tr + tr { border-top: 1px solid var(--color-border); }
    .table-modern .document-line { display: flex; justify-content: space-between; gap: 1rem; background: var(--color-table-row-hover); }
    .table-modern .document-line td,
    .table-modern .document-line td:first-child { display: block; padding-left: 0.85rem; border: 0; }
    .table-modern .document-line td::before,
    .table-modern .document-line .line-spacer { display: none; }
    .tree-indent { flex-basis: 0.85rem; }
    .row-actions-cluster { justify-content: flex-start; flex-wrap: wrap; }

    .btn { min-height: 44px; }
    .search-input-wrap input,
    .filter-field-select select,
    .filter-field-select .search-picker input,
    .report-filter input,
    .report-filter select,
    .report-filter .search-picker input { min-height: 44px; font-size: 1rem; }
    .report-filter-actions .btn { flex: 1 1 auto; }
}

/* Printed documents (templates/print/document.html): an A4 sheet, or its
   top half with a cut line, drawn in black ink. On screen the sheet sits
   under a toolbar that never prints. */
@page { size: A4; margin: 10mm; }
/* Printed documents keep their 16px scale: the A4 layout is sized to it. */
.print-root { font-size: 16px; }
.print-page { background: var(--color-canvas); color: var(--color-ink); }
.print-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; max-width: 210mm; margin: 0 auto; padding: 1rem 16px; }
.print-paper { display: flex; gap: 0.35rem; }
.print-paper .is-current { border-color: var(--color-primary); background: var(--color-primary-surface); color: var(--color-primary-hover); }
.print-hint { flex-basis: 100%; margin: 0; color: var(--color-text-secondary); font-size: 0.82rem; }
.print-page main { width: 210mm; max-width: 100%; margin: 0 auto 2rem; padding: 10mm; overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border); }
.print-sheet { position: relative; display: flex; flex-direction: column; min-width: 180mm; min-height: 277mm; border: 1px solid var(--color-ink); font-size: 9.5pt; line-height: 1.3; }
.print-paper-half .print-sheet { min-height: 130mm; }
/* The cut line: 148.5 mm from the paper's top edge, below a 10 mm margin. */
.print-paper-half::after { content: ""; display: block; height: calc(138.5mm - 130mm); border-bottom: 1px dashed var(--color-ink); }
.print-sheet p { margin: 0; }
.print-band { padding: 1.5mm 2.5mm; border-bottom: 1px solid var(--color-ink); }
.print-company { position: relative; text-align: center; }
.print-corner { position: absolute; top: 1.5mm; left: 2.5mm; }
.print-corner-end { right: 2.5mm; left: auto; font-weight: 700; text-transform: uppercase; }
.print-title { margin: 0; font-size: 10pt; font-weight: 400; text-decoration: underline; color: var(--color-ink); }
.print-company-name { font-size: 15pt; font-weight: 700; line-height: 1.2; }
.print-boxes { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.print-party { padding: 1.5mm 2.5mm; border-right: 1px solid var(--color-ink); }
.print-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.3mm 2mm; margin: 0; padding: 1.5mm 2.5mm; }
.print-facts dt::after { content: " :"; }
.print-facts dd { margin: 0; }
.print-label { color: var(--color-ink-soft); }
.print-strong { font-weight: 700; }
.print-lines { flex: 1; width: 100%; border-collapse: collapse; }
.print-lines th { padding: 1.2mm 2mm; border-bottom: 1px solid var(--color-ink); font-weight: 700; text-align: left; vertical-align: bottom; }
.print-lines td { height: 1px; padding: 0.35mm 2mm; vertical-align: top; }
.print-lines th + th,
.print-lines td + td { border-left: 1px solid var(--color-ink); }
.print-lines tbody tr:first-child td { padding-top: 1mm; }
.print-lines .print-filler td { height: auto; }
.print-number { text-align: right !important; white-space: nowrap; }
.print-lines th { width: 1%; }
.print-lines th, .print-lines td { white-space: nowrap; }
.print-lines th.print-wide { width: auto; }
.print-lines .print-wide { white-space: normal; }
.print-totals { display: flex; justify-content: space-between; gap: 4mm; border-top: 1px solid var(--color-ink); }
.print-signatures { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6mm; padding: 9mm 2.5mm 1.5mm; text-align: center; break-inside: avoid; }
.print-signer { min-height: 1.35em; }
.print-caption { border-top: 1px solid var(--color-ink); padding-top: 0.8mm; }
.print-stamp { position: absolute; top: 45%; left: 50%; padding: 2mm 6mm; border: 3px solid var(--color-ink); font-size: 28pt; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.35; transform: translate(-50%, -50%) rotate(-18deg); pointer-events: none; }

@media print {
    .app-topbar,
    .app-subnav,
    .filter-toolbar-card,
    .pagination-modern,
    .page-actions-cluster,
    .skip-link,
    .toast-container { display: none !important; }
    html { background: var(--color-surface) !important; }
    body { background: var(--color-surface) !important; color: var(--color-ink) !important; font-size: 12pt !important; }
    .app-main { padding: 0 !important; }
    .app-container { max-width: none !important; }
    .table-card-modern,
    .form-card-modern { break-inside: avoid; }
    .print-toolbar { display: none !important; }
    .print-page main { width: auto; margin: 0; padding: 0; overflow: visible; border: 0; }
    .print-sheet { font-size: 9.5pt !important; }
    .print-lines thead { display: table-header-group; }
    .print-lines tr { break-inside: avoid; }
}