:root {
  color: #1c2b39;
  background: #f5f7f8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body { margin: 0; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.site-header { background: #12324a; color: white; }

.header-content { min-height: 64px; display: flex; align-items: center; justify-content: space-between; }

.brand { color: white; font-size: 1.2rem; font-weight: 750; text-decoration: none; }

.header-actions { align-items: center; display: flex; gap: 10px; }
.header-actions form { margin: 0; }
.header-logout { background: transparent; border: 1px solid #6c8da2; border-radius: 999px; color: #fff; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; padding: 5px 9px; }
.header-logout:hover { background: #28516d; }

.environment-label, .demo-label, .status { border-radius: 999px; font-size: .78rem; font-weight: 700; padding: 5px 9px; }

.environment-label { background: #28516d; }

.intro { padding: 56px 0 28px; }

.eyebrow { color: #42677e; font-size: .8rem; font-weight: 750; letter-spacing: .08em; margin: 0 0 8px; text-transform: uppercase; }

h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.03em; margin: 0 0 12px; }

.intro > p:last-child { color: #586a76; margin: 0; }
.dashboard-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.supplier-shortcut { align-items: end; background: #eaf2f5; border: 1px solid #d5e2e8; border-radius: 12px; display: flex; gap: 24px; justify-content: space-between; margin: 0 0 24px; padding: 20px; }
.supplier-shortcut h2 { margin: 6px 0 8px; }
.supplier-shortcut p:last-child { color: #526b79; margin: 0; max-width: 520px; }
.supplier-shortcut__form { align-items: end; display: grid; gap: 7px 10px; grid-template-columns: minmax(190px, 270px) auto; }
.supplier-shortcut__form label { color: #526b79; font-size: .8rem; font-weight: 750; grid-column: 1; }
.supplier-shortcut__form select { background: #fff; border: 1px solid #b9cbd5; border-radius: 7px; color: #213d4e; font: inherit; grid-column: 1; min-height: 42px; padding: 8px 10px; }
.supplier-shortcut__form button { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }

.recent-upload-panel, .pending-network-panel, .network-panel { background: #fff; border: 1px solid #dce3e7; border-radius: 12px; box-shadow: 0 2px 4px rgb(23 44 60 / 5%); margin: 0 0 24px; padding: 22px; }
.recent-upload-panel h2, .pending-network-panel h2 { margin: 7px 0 14px; }
.recent-upload-panel > div, .pending-network-panel > div { display: grid; gap: 10px; }
.uploaded-invoice, .pending-network-item { align-items: start; background: #f4f8fa; border: 1px solid #dce5e9; border-radius: 9px; display: flex; gap: 16px; justify-content: space-between; padding: 14px; }
.uploaded-invoice p, .pending-network-item p { color: #526b79; font-size: .88rem; margin: 4px 0 0; }
.uploaded-invoice strong, .pending-network-item strong { color: #213d4e; }
.pending-network-item { border-left: 4px solid #d79622; }
.pending-network-item--approved { border-left-color: #398353; }

.invoice-list { display: grid; gap: 16px; padding-bottom: 48px; }

.login-layout { display: grid; min-height: calc(100vh - 64px); place-items: center; padding: 44px 0; }
.login-card { background: #fff; border: 1px solid #dce3e7; border-radius: 14px; box-shadow: 0 12px 32px rgb(23 44 60 / 10%); max-width: 460px; padding: 30px; width: 100%; }
.login-card h1 { font-size: 1.8rem; margin: 0 0 12px; }
.login-card > p { color: #526b79; line-height: 1.5; }
.login-card form { display: grid; gap: 8px; margin-top: 24px; }
.login-card label { color: #405e6f; font-size: .88rem; font-weight: 750; margin-top: 8px; }
.login-card input { border: 1px solid #aabac4; border-radius: 7px; font: inherit; padding: 10px; }
.login-card input:focus { border-color: #356b88; outline: 3px solid rgb(94 151 181 / 22%); }
.login-card button { border: 0; cursor: pointer; justify-self: start; margin-top: 14px; }
.login-error { background: #fcefed; border-left: 4px solid #bd3829; border-radius: 5px; color: #7d2d25 !important; margin: 20px 0 0; padding: 11px 13px; }
.login-config-note { background: #fff2d6; border-left: 4px solid #bb8420; border-radius: 5px; color: #6d5017 !important; margin: 20px 0 0; padding: 11px 13px; }

.invoice-card { background: #fff; border: 1px solid #dce3e7; border-radius: 12px; box-shadow: 0 2px 4px rgb(23 44 60 / 5%); padding: 20px; }

.invoice-card__topline { align-items: center; display: flex; justify-content: space-between; gap: 12px; }

.demo-label { background: #e8f0f4; color: #34576d; }

h2 { font-size: 1.15rem; margin: 17px 0; }

.invoice-details { display: flex; flex-wrap: wrap; gap: 20px 44px; margin: 0; }

.invoice-details div { min-width: 126px; }

dt { color: #647681; font-size: .8rem; }

dd { font-weight: 650; margin: 3px 0 0; }

.reason { border-top: 1px solid #e6ebee; color: #425763; margin: 20px 0 0; padding-top: 15px; }

.card-link, .pdf-preview__header a { color: #1d587a; font-weight: 700; text-decoration: none; }

.card-link { display: inline-block; margin-top: 18px; }

.card-link--button { background: none; border: 0; cursor: pointer; font: inherit; padding: 0; }

.card-link:hover, .pdf-preview__header a:hover, .back-link:hover { text-decoration: underline; }

.supplier-link { color: #42677e; display: block; font-size: .9rem; font-weight: 700; margin-top: 17px; text-decoration: none; }
.supplier-link:hover { text-decoration: underline; }

.document-note { color: #6b7a84; font-size: .9rem; margin: 18px 0 0; }

.detail-intro { padding: 36px 0 20px; }
.detail-intro__heading { align-items: start; display: flex; gap: 18px; justify-content: space-between; }
.detail-intro__heading h1 { margin-bottom: 12px; }
.statistics-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 9px; justify-content: flex-end; margin-top: 2px; }
.statistics-agreement-trigger { flex: 0 0 auto; }
.history-year-selector { align-items: center; display: flex; gap: 6px; }
.history-year-selector label { color: #526b79; font-size: .8rem; font-weight: 750; }
.history-year-selector select { background: #fff; border: 1px solid #b9cbd5; border-radius: 7px; color: #213d4e; font: inherit; min-height: 39px; padding: 6px 8px; }
.history-year-selector .button { padding: 9px 11px; }
.agreement-period-note { background: #eff5f7; border-left: 3px solid #7da7bb; color: #375467; font-size: .88rem; margin: 14px 0 0; padding: 9px 12px; }

.back-link { color: #355d76; display: inline-block; font-weight: 700; margin-bottom: 25px; text-decoration: none; }

.detail-heading { align-items: flex-start; display: flex; gap: 24px; justify-content: space-between; }

.detail-heading h1 { margin-bottom: 8px; }

.detail-heading p:last-child { color: #586a76; margin: 0; }

.control-summary { background: #fcefed; border-left: 4px solid #bd3829; border-radius: 6px; color: #5d332f; margin: 4px 0 24px; padding: 14px 17px; }

.control-summary p { margin: 0; }

.document-grid { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.5fr); padding-bottom: 48px; }

.agreement-card, .pdf-preview { background: #fff; border: 1px solid #dce3e7; border-radius: 12px; box-shadow: 0 2px 4px rgb(23 44 60 / 5%); }

.agreement-card { padding: 22px; }

.agreement-card h2, .pdf-preview h2 { font-size: 1.1rem; margin: 7px 0 20px; }

.agreement-details { display: grid; gap: 17px; margin: 0 0 24px; }

.agreement-details dd { color: #304654; font-weight: 600; }

.button { border-radius: 7px; display: inline-block; font-weight: 750; padding: 10px 13px; text-decoration: none; }

.button--secondary { background: #e5eff4; color: #164864; }

.button--secondary:hover { background: #d6e6ed; }

.button--primary { background: #164f34; color: #fff; }
.button--primary:hover { background: #0e3d28; }

.button--danger { background: #9d281d; color: #fff; }
.button--danger:hover { background: #7d1d14; }

.destructive-link { background: none; border: 0; color: #9d281d; cursor: pointer; display: block; font: inherit; font-size: .85rem; font-weight: 700; margin: 15px 0 0; padding: 0; }
.destructive-link:hover { text-decoration: underline; }

.document-hint { color: #647681; font-size: .85rem; line-height: 1.45; margin: 16px 0 0; }

.pdf-preview { overflow: hidden; }

.pdf-preview__header { align-items: center; display: flex; gap: 18px; justify-content: space-between; padding: 18px 20px; }

.pdf-preview__header h2 { margin: 4px 0 0; }

.pdf-preview__header .eyebrow { margin: 0; }

.pdf-preview img { background: #eff2f3; display: block; height: auto; width: 100%; }

.preview-note { color: #647681; font-size: .85rem; margin: 0; padding: 13px 20px 16px; }

.status--danger { background: #fde9e7; color: #9d281d; }
.status--warning { background: #fff2d6; color: #815700; }
.status--neutral { background: #e9eff2; color: #3c5666; }
.status--success { background: #e5f4e9; color: #246b3a; }

.status-button { border: 0; cursor: pointer; font-family: inherit; }
.status-button:hover { filter: brightness(.96); }
.status-button:focus-visible, .approval-trigger:focus-visible, .button:focus-visible, .card-link--button:focus-visible { outline: 3px solid #78a9c2; outline-offset: 2px; }

.approval-trigger { background: none; border: 0; color: #1d587a; cursor: pointer; display: block; font: inherit; font-size: .9rem; font-weight: 750; margin: 18px 0 0; padding: 0; }
.approval-trigger:hover { text-decoration: underline; }
.control-summary .approval-trigger { color: #8f2b20; }

.modal { align-items: center; display: grid; inset: 0; justify-items: center; padding: 20px; position: fixed; z-index: 10; }
.modal[hidden] { display: none; }
.modal__scrim { background: rgb(16 39 56 / 58%); inset: 0; position: absolute; }
.modal__panel { background: #fff; border-radius: 12px; box-shadow: 0 18px 56px rgb(9 25 38 / 28%); max-width: 540px; padding: 28px; position: relative; width: 100%; }
.modal__panel h2 { font-size: 1.4rem; margin: 7px 32px 13px 0; }
.modal__panel > p { color: #435763; line-height: 1.5; }
.modal__close { background: #edf2f5; border: 0; border-radius: 50%; color: #385160; cursor: pointer; font-size: 1.4rem; height: 32px; line-height: 1; position: absolute; right: 17px; top: 17px; width: 32px; }
.modal__fact { background: #edf4f7; border-radius: 8px; display: grid; gap: 5px; margin: 21px 0; padding: 14px; }
.modal__fact span { color: #58707f; font-size: .8rem; }
.modal__fact strong { color: #213d4e; }
.modal label { display: block; font-size: .9rem; font-weight: 750; margin: 20px 0 7px; }
.modal textarea, .modal input[type="file"], .modal select { border: 1px solid #aabac4; border-radius: 7px; font: inherit; line-height: 1.4; padding: 10px; width: 100%; }
.modal input[type="text"] { border: 1px solid #aabac4; border-radius: 7px; font: inherit; line-height: 1.4; padding: 10px; width: 100%; }
.modal textarea { resize: vertical; }
.modal textarea:focus, .modal input[type="file"]:focus, .modal input[type="text"]:focus, .modal select:focus { border-color: #356b88; outline: 3px solid rgb(94 151 181 / 22%); }
.file-label { margin-top: 20px !important; }
.form-error { color: #a22c20; font-size: .9rem; min-height: 1.3em; }
.form-success { color: #287043; font-size: .88rem; font-weight: 650; min-height: 1.3em; }
.modal__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.eyebrow--success { color: #267143; }
.approved-time { color: #627681; font-size: .9rem; }
.agreement-catalog { background: #f5f8fa; border: 1px solid #dce5e9; border-radius: 9px; display: grid; gap: 14px; margin-top: 19px; padding: 15px; }
.agreement-catalog section { display: grid; gap: 7px; }
.agreement-catalog__label { color: #526d7d; font-size: .78rem; font-weight: 750; letter-spacing: .04em; margin: 0; text-transform: uppercase; }
.agreement-catalog__current, .agreement-catalog__previous { margin: 0; }
.agreement-catalog__current strong, .agreement-catalog__previous strong { color: #213d4e; display: block; font-size: .93rem; }
.agreement-catalog__current span, .agreement-catalog__previous span { color: #607480; display: block; font-size: .82rem; line-height: 1.4; margin-top: 2px; }
.agreement-catalog__previous { display: grid; gap: 8px; list-style: none; padding: 0; }
.agreement-catalog__previous li { border-left: 3px solid #aac4d2; padding: 4px 0 4px 10px; }
.agreement-catalog__empty { color: #657b88; font-size: .87rem; margin: 0; }
.form-hint { color: #617783; font-size: .83rem; margin: 7px 0 0; }
.category-choice { border: 1px solid #d4e0e5; border-radius: 8px; margin: 20px 0 0; padding: 14px; }
.category-choice legend { color: #314f61; font-size: .9rem; font-weight: 750; padding: 0 5px; }
.category-choice > p { color: #607581; font-size: .86rem; margin: 0 0 10px; }
.category-choice__options { display: flex; flex-wrap: wrap; gap: 8px; }
.category-choice__options label { background: #f1f6f8; border: 1px solid #d8e4e8; border-radius: 999px; cursor: pointer; font-size: .85rem; font-weight: 600; margin: 0; padding: 7px 10px; }
.category-choice__options input { accent-color: #245f7c; margin: 0 4px 0 0; }
.supplier-match, .agreement-suggestions, .network-link-choice { background: #f4f8fa; border: 1px solid #d8e4e8; border-radius: 9px; margin-top: 18px; padding: 14px; }
.supplier-match { border-left: 4px solid #6d99af; }
.supplier-match--exact { border-left-color: #398353; }
.supplier-match--possible { border-left-color: #d79622; }
.supplier-match strong, .agreement-suggestions strong, .network-link-choice h3 { color: #213d4e; display: block; font-size: .96rem; margin: 0 0 5px; }
.supplier-match p, .agreement-suggestions p, .network-link-choice > p { color: #526b79; font-size: .88rem; line-height: 1.45; margin: 0; }
.agreement-suggestions ul { display: grid; gap: 7px; list-style: none; margin: 11px 0 0; padding: 0; }
.agreement-suggestions li { border-left: 3px solid #8fb2c2; color: #405966; font-size: .86rem; padding-left: 9px; }
.network-link-choice h3 { margin-bottom: 8px; }

.statistics-period { color: #586a76; margin: 0; }

.metric-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 24px; }
.metric-card, .history-panel { background: #fff; border: 1px solid #dce3e7; border-radius: 12px; box-shadow: 0 2px 4px rgb(23 44 60 / 5%); }
.metric-card { padding: 20px; }
.metric-card p { color: #627681; font-size: .85rem; margin: 0 0 8px; }
.metric-card strong { font-size: 1.5rem; letter-spacing: -.03em; }
.history-panel { margin-bottom: 48px; padding: 22px; }
.history-panel__heading { align-items: start; display: flex; gap: 16px; justify-content: space-between; }
.history-panel h2 { margin: 7px 0 20px; }
.deviation-history-trigger { flex: 0 0 auto; margin-top: 3px; }
.history-table-wrapper { overflow-x: auto; }
.history-panel table { border-collapse: collapse; min-width: 910px; width: 100%; }
.history-panel th { color: #647681; font-size: .8rem; font-weight: 700; text-align: left; }
.history-panel th, .history-panel td { border-bottom: 1px solid #e4eaed; padding: 13px 10px; }
.history-panel th:first-child, .history-panel td:first-child { padding-left: 0; }
.history-panel th:last-child, .history-panel td:last-child { padding-right: 0; }
.history-panel tbody tr:last-child td { border-bottom: 0; }

.select-column { text-align: center !important; white-space: nowrap; width: 90px; }
.select-column input { accent-color: #245f7c; height: 16px; margin: 0 6px 0 0; vertical-align: middle; width: 16px; }
.select-column label { color: #526c7b; cursor: pointer; font-size: .8rem; font-weight: 700; vertical-align: middle; }
.source-column { text-align: center !important; width: 58px; }
.source-indicator { background: #e8f0f4; border-radius: 999px; color: #34576d; display: inline-grid; font-size: .75rem; font-weight: 800; height: 24px; place-items: center; width: 24px; }
.source-indicator--manual { background: #f8ebd0; color: #795400; }
.remark-input { border: 1px solid #c9d4da; border-radius: 6px; font: inherit; min-width: 205px; padding: 7px 8px; resize: vertical; width: 100%; }
.remark-input:focus { border-color: #356b88; outline: 3px solid rgb(94 151 181 / 22%); }
.batch-remarks { align-items: end; background: #edf4f7; border-radius: 9px; display: grid; gap: 10px 15px; grid-template-columns: minmax(150px, .55fr) minmax(220px, 1.45fr) auto; margin: 0 0 20px; padding: 15px; }
.batch-remarks__selection { color: #34576d; font-size: .88rem; font-weight: 750; grid-column: 1; margin: 0; }
.batch-remarks label { color: #526c7b; font-size: .8rem; font-weight: 700; grid-column: 2; }
.batch-remarks textarea { border: 1px solid #b6c7d1; border-radius: 6px; font: inherit; grid-column: 2; min-height: 43px; padding: 8px; resize: vertical; width: 100%; }
.batch-remarks button { grid-column: 3; grid-row: 1 / span 2; white-space: nowrap; }
.modal__panel--wide { max-width: 680px; }
.deviation-history-list { display: grid; gap: 10px; margin-top: 20px; max-height: min(55vh, 560px); overflow-y: auto; padding-right: 4px; }
.deviation-history-item { border: 1px solid #dce5e9; border-left: 4px solid #b94a3d; border-radius: 8px; padding: 14px; }
.deviation-history-item__header { align-items: start; display: flex; gap: 14px; justify-content: space-between; }
.deviation-history-item h3 { font-size: 1rem; margin: 0 0 4px; }
.deviation-history-item p { color: #435763; line-height: 1.45; margin: 10px 0 0; }
.deviation-history-item__header p { color: #657883; font-size: .86rem; margin: 0; }
.empty-history { color: #566c78; margin: 16px 0 0; }

.network-principles { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 24px; }
.network-principles article { background: #eaf2f5; border: 1px solid #d5e2e8; border-radius: 10px; display: grid; gap: 6px; padding: 15px; }
.network-principles strong { color: #21465c; font-size: .9rem; }
.network-principles span { color: #5a717e; font-size: .85rem; line-height: 1.4; }
.network-panel__intro { color: #566f7c; margin: 0 0 18px; }
.network-visual-list { display: grid; gap: 14px; }
.network-visual-card { border: 1px solid #dce5e9; border-radius: 10px; overflow: hidden; }
.network-visual-card > header { background: #f2f7f9; padding: 14px 16px; }
.network-visual-card > header .eyebrow { margin-bottom: 5px; }
.network-visual-card h3 { color: #26465a; font-size: 1rem; margin: 0; }
.network-visual-card__flow { align-items: stretch; display: grid; gap: 14px; grid-template-columns: minmax(210px, 1fr) 32px minmax(250px, 1.15fr); padding: 16px; }
.network-nodes, .network-agreements { display: grid; gap: 9px; }
.network-node, .network-agreement { background: #fff; border: 1px solid #d9e3e7; border-radius: 8px; display: grid; gap: 4px; padding: 12px; }
.network-node--holder { border-left: 4px solid #287043; }
.network-node strong, .network-agreement strong { color: #254354; font-size: .9rem; }
.network-node span, .network-agreement span, .network-node small, .network-agreement small { color: #627784; font-size: .8rem; line-height: 1.35; }
.network-node small { color: #345c71; font-weight: 700; }
.network-arrow { align-self: center; color: #638c9e; font-size: 1.65rem; font-weight: 700; text-align: center; }
.category-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.category-tag { background: #e5f0f4; border-radius: 999px; color: #345b6f; display: inline-block; font-size: .74rem; font-weight: 750; padding: 4px 8px; }
.category-tag--large { font-size: .82rem; }
.category-overview__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.category-overview__grid article { background: #f4f8fa; border: 1px solid #dbe5e9; border-radius: 8px; padding: 14px; }
.category-overview__grid p { color: #5d737f; font-size: .84rem; line-height: 1.45; margin: 10px 0 0; }
.category-editor-list { display: grid; gap: 10px; margin-top: 18px; }
.category-editor-row { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; }
.category-editor-row span { color: #69808b; font-size: .79rem; font-weight: 700; }

@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .header-content { min-height: 58px; }
  .environment-label { font-size: .7rem; }
  .detail-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .detail-intro__heading { align-items: start; flex-direction: column; gap: 0; }
  .statistics-actions { justify-content: flex-start; margin: 0 0 12px; }
  .supplier-shortcut { align-items: start; flex-direction: column; gap: 18px; }
  .supplier-shortcut__form { grid-template-columns: 1fr; width: 100%; }
  .supplier-shortcut__form label, .supplier-shortcut__form select, .supplier-shortcut__form button { grid-column: 1; grid-row: auto; }
  .supplier-shortcut__form button { justify-self: start; }
  .document-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .history-panel__heading { align-items: start; flex-direction: column; gap: 0; }
  .network-principles { grid-template-columns: 1fr; }
  .network-visual-card__flow { grid-template-columns: 1fr; }
  .network-arrow { display: none; }
  .uploaded-invoice, .pending-network-item { flex-direction: column; gap: 10px; }
  .deviation-history-trigger { margin: 0 0 18px; }
  .batch-remarks { grid-template-columns: 1fr; }
  .batch-remarks__selection, .batch-remarks label, .batch-remarks textarea, .batch-remarks button { grid-column: 1; grid-row: auto; }
  .batch-remarks button { justify-self: start; }
}

@media (max-width: 820px) and (min-width: 561px) {
  .document-grid { grid-template-columns: 1fr; }
}