:root {
    --navy-950: #0b1220;
    --navy-900: #111a2e;
    --navy-800: #1a2742;
    --ink: #162033;
    --muted: #6c7689;
    --line: #e5e9f0;
    --surface: #ffffff;
    --canvas: #f4f6f9;
    --red: #e23946;
    --red-dark: #be2432;
    --red-soft: #fff0f1;
    --green: #159a73;
    --green-soft: #e9f8f3;
    --amber: #d88a12;
    --amber-soft: #fff6e5;
    --blue: #3974d9;
    --blue-soft: #edf4ff;
    --purple: #7959d1;
    --shadow: 0 12px 32px rgba(18, 30, 53, .07);
    --radius: 16px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--canvas); font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
input, select, textarea { width: 100%; border: 1px solid #dce1e9; border-radius: 10px; color: var(--ink); background: #fff; outline: none; transition: border-color .2s, box-shadow .2s; }
input, select { height: 44px; padding: 0 13px; }
textarea { padding: 12px 13px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #9ba9bc; box-shadow: 0 0 0 3px rgba(57, 116, 217, .11); }
input[readonly] { background: #f3f5f8; color: var(--muted); }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(57, 116, 217, .3); outline-offset: 2px; }
.muted { color: var(--muted); }
.eyebrow { margin: 0; color: #8993a5; font-size: 10px; font-weight: 700; letter-spacing: .16em; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 248px; display: flex; flex-direction: column; padding: 24px 16px 18px; color: #e5eaf2; background: linear-gradient(180deg, var(--navy-950), #101a2e 68%, #152239); }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 24px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand > span:last-child { display: flex; flex-direction: column; }
.sidebar-brand strong { font-size: 19px; letter-spacing: -.03em; }
.sidebar-brand small { color: #8f9aaf; font-size: 11px; margin-top: 2px; }
.sidebar-brand-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 13px; background: #fff; box-shadow: 0 8px 20px rgba(226,57,70,.22); }
.sidebar-brand-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand-mark { width: 38px; height: 38px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: white; background: linear-gradient(145deg, #f24c59, var(--red-dark)); box-shadow: 0 8px 20px rgba(226,57,70,.25); font-size: 13px; font-weight: 800; letter-spacing: -.03em; }
.brand-mark-large { width: 52px; height: 52px; border-radius: 15px; font-size: 17px; }
.sidebar-context { margin: 18px 8px 10px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.035); display: flex; justify-content: space-between; align-items: center; }
.sidebar-context span { color: #77839a; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.sidebar-context strong { font-size: 11px; font-weight: 600; }
.sidebar-nav { flex: 1; margin-top: 8px; }
.nav-section { margin: 16px 12px 8px; color: #637088; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.nav-link { position: relative; display: flex; align-items: center; gap: 12px; min-height: 45px; margin: 4px 0; padding: 0 12px; border-radius: 10px; color: #aeb8ca; font-size: 13px; font-weight: 500; transition: .18s ease; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.055); }
.nav-link.active { color: #fff; background: rgba(226,57,70,.14); }
.nav-link.active::before { content: ''; position: absolute; left: -16px; width: 3px; height: 25px; border-radius: 0 3px 3px 0; background: var(--red); }
.nav-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: #8c98ad; background: rgba(255,255,255,.06); font-size: 9px; font-weight: 800; letter-spacing: -.03em; }
.nav-link.active .nav-icon { color: #ffb7bd; background: rgba(226,57,70,.18); }
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 4px 0; border-top: 1px solid rgba(255,255,255,.08); }
.user-mini { display: flex; min-width: 0; align-items: center; gap: 9px; }
.user-mini > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.user-mini strong { max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.user-mini small { margin-top: 2px; color: #7e8aa0; font-size: 9px; }
.avatar { width: 33px; height: 33px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #fff; background: #34425c; font-size: 12px; font-weight: 700; }
.logout-button { border: 0; padding: 7px; color: #8793a8; background: transparent; font-size: 11px; }
.logout-button:hover { color: #fff; }
.main-area { width: calc(100% - 248px); min-height: 100vh; margin-left: 248px; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 78px; display: flex; align-items: center; justify-content: flex-start; gap: 20px; padding: 13px 30px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.topbar h1 { margin: 3px 0 0; font-size: 21px; letter-spacing: -.03em; }
.topbar-title { flex: 0 0 auto; }
.topbar-company-logo { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: flex-start; margin-left: clamp(10px, 3vw, 50px); }
.topbar-company-logo img { width: clamp(230px, 27vw, 360px); height: 52px; display: block; object-fit: contain; object-position: left center; }
.topbar-meta { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.store-pill { min-height: 34px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); background: #fafbfc; font-size: 11px; font-weight: 600; }
.menu-toggle { display: none; border: 0; color: var(--ink); background: transparent; font-size: 21px; }
.content-area { width: 100%; max-width: 1580px; flex: 1; margin: 0 auto; padding: 26px 30px 34px; }
.app-footer { display: flex; justify-content: space-between; padding: 15px 30px; border-top: 1px solid var(--line); color: #000000; font-size: 10px; font-weight: bold; }
.sidebar-backdrop { display: none; }

.btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; border: 1px solid transparent; border-radius: 9px; font-size: 12px; font-weight: 700; transition: .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: white; border-color: var(--red); background: var(--red); box-shadow: 0 7px 15px rgba(226,57,70,.16); }
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn-secondary { color: #354258; border-color: #d9dee7; background: #fff; }
.btn-secondary:hover { border-color: #bdc5d2; }
.btn-ghost { color: var(--muted); border-color: transparent; background: transparent; }
.btn-success { color: #fff; border-color: #16835f; background: #16835f; box-shadow: 0 7px 15px rgba(22,131,95,.17); }
.btn-success:hover { border-color: #116b4e; background: #116b4e; }
.btn-danger { color: #fff; border-color: #bd2937; background: #bd2937; box-shadow: 0 7px 15px rgba(189,41,55,.17); }
.btn-danger:hover { border-color: #9e202c; background: #9e202c; }
.btn-block { width: 100%; }
.btn-large { min-height: 46px; padding-inline: 20px; }
.text-link { color: var(--red); font-size: 12px; font-weight: 700; }
.text-link:hover { color: var(--red-dark); }
.icon-button { min-width: 31px; min-height: 31px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; color: #506079; background: #fff; font-size: 11px; font-weight: 700; }
.record-link { color: #244e97; font-size: 12px; font-weight: 700; }

.welcome-row, .page-actions-row, .detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 20px; }
.welcome-row h2, .page-actions-row h2, .detail-header h2 { margin: 0; font-size: 19px; letter-spacing: -.025em; }
.welcome-row p, .page-actions-row p, .detail-header p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.date-chip { padding: 8px 11px; border-radius: 8px; color: var(--muted); background: #e9edf3; font-size: 11px; font-weight: 600; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.metric-grid-expanded { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
.metric-card { min-height: 126px; display: flex; align-items: center; gap: 15px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.metric-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; font-size: 15px; font-weight: 800; }
.metric-card p { margin: 0 0 4px; color: #8a93a3; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.metric-card strong { display: block; font-size: 27px; line-height: 1.05; letter-spacing: -.04em; }
.metric-card small { display: block; margin-top: 7px; color: #8a93a3; font-size: 10px; line-height: 1.3; }
.metric-open .metric-icon { color: var(--blue); background: var(--blue-soft); }
.metric-quoted .metric-icon { color: var(--amber); background: var(--amber-soft); }
.metric-done .metric-icon { color: var(--green); background: var(--green-soft); }
.metric-effective .metric-icon { color: var(--purple); background: #f1edff; }
.metric-rejected .metric-icon { color: var(--red); background: var(--red-soft); }
.metric-value .metric-icon { color: var(--purple); background: #f1edff; font-size: 11px; }
.metric-card .metric-money { font-size: 21px; }
.dashboard-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 16px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.panel-heading { min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 20px; border-bottom: 1px solid #edf0f4; }
.panel-heading > div { min-width: 0; }
.panel-heading h3 { margin: 0; font-size: 14px; letter-spacing: -.015em; }
.panel-heading p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.panel-chart, .panel-actions { min-height: 265px; }
.donut-wrap { display: flex; align-items: center; justify-content: center; gap: 55px; min-height: 190px; padding: 18px; }
.donut { position: relative; width: 135px; height: 135px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--blue) 0 var(--open), var(--amber) var(--open) var(--quoted), var(--green) var(--quoted) var(--approved), var(--red) var(--approved) 100%); }
.donut::after { content: ''; position: absolute; inset: 17px; border-radius: 50%; background: #fff; }
.donut > span { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.donut strong { font-size: 25px; letter-spacing: -.04em; }
.donut small { color: var(--muted); font-size: 9px; }
.chart-legend { min-width: 165px; display: grid; gap: 13px; }
.chart-legend span { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.chart-legend strong { color: var(--ink); }
.dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.dot-open { background: var(--blue); }.dot-quoted { background: var(--amber); }.dot-effective { background: var(--green); }.dot-done { background: var(--green); }.dot-rejected { background: var(--red); }
.quick-actions { display: grid; padding: 9px 20px 18px; }
.quick-actions a { display: flex; align-items: center; gap: 13px; padding: 11px 6px; border-bottom: 1px solid #edf0f4; }
.quick-actions a:last-child { border-bottom: 0; }
.quick-actions a > span { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 9px; color: #415675; background: #f0f3f7; font-weight: 700; }
.quick-actions a div { display: flex; flex-direction: column; }
.quick-actions strong { font-size: 11px; }
.quick-actions small { margin-top: 3px; color: var(--muted); font-size: 9px; }

.table-panel { overflow: hidden; }
.table-scroll { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.data-table th { padding: 11px 17px; color: #8b94a5; background: #fafbfc; border-bottom: 1px solid var(--line); text-align: left; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.data-table td { padding: 13px 17px; border-bottom: 1px solid #edf0f4; color: #435067; font-size: 11px; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fbfcfd; }
.data-table td > strong, .data-table td > a + small, .data-table td > strong + small { display: block; }
.data-table td small { margin-top: 3px; color: #929aaa; font-size: 9px; }
.status-badge, .priority, .profile-chip, .status-dot { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 20px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.status-badge::before, .status-dot::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-open { color: #2e68c7; background: var(--blue-soft); }
.status-analysis { color: #ae6b00; background: var(--amber-soft); }
.status-quoted { color: #6d4fc0; background: #f1edff; }
.status-approved { color: #7050c4; background: #f1edff; }
.status-done { color: #127b5d; background: var(--green-soft); }
.status-rejected { color: #c92b39; background: var(--red-soft); }
.status-neutral { color: #657185; background: #edf0f4; }
.priority { border-radius: 6px; padding: 4px 7px; text-transform: capitalize; }
.priority-baixa { color: #637187; background: #eef1f5; }.priority-normal { color: #2f68c7; background: var(--blue-soft); }.priority-alta { color: #ae6b00; background: var(--amber-soft); }.priority-urgente { color: #c52a38; background: var(--red-soft); }
.profile-chip { color: #51617a; background: #edf0f4; }
.status-dot.online { color: #138061; background: var(--green-soft); }.status-dot.offline { color: #7c8798; background: #eff1f4; }
.store-code { width: 23px; height: 23px; display: inline-grid; place-items: center; margin-right: 5px; border-radius: 6px; color: #fff; background: #34445f; font-size: 9px; font-weight: 800; }
.empty-state { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.empty-state > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #8691a3; background: #eff2f6; font-weight: 800; }
.empty-state h4 { margin: 14px 0 5px; }.empty-state p { max-width: 370px; margin: 0; color: var(--muted); font-size: 11px; }

.filter-bar { display: grid; grid-template-columns: minmax(250px, 1fr) 175px 210px auto auto; gap: 9px; margin-bottom: 15px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow); }
.search-field { position: relative; }.search-field span { position: absolute; left: 13px; top: 12px; color: #8b95a6; }.search-field input { padding-left: 35px; }
.filter-bar .btn { min-height: 44px; }
.report-filter-bar { grid-template-columns: 170px 170px minmax(220px, 1fr) auto auto; align-items: end; }
.report-filter-bar .field-label { gap: 5px; }
.report-company-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.report-company-header img { width: min(320px, 42vw); height: 58px; object-fit: contain; object-position: left center; }
.report-company-header > div { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.report-company-header strong { color: #28364c; font-size: 13px; }
.report-company-header span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.report-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; overflow: hidden; }
.report-meta div { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-right: 1px solid var(--line); }
.report-meta div:last-child { border-right: 0; }
.report-meta span { color: #8b94a5; font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.report-meta strong { color: #2e3b51; font-size: 17px; }
.report-section { margin-bottom: 16px; }
.report-detail-table { min-width: 760px; }
.form-layout { display: grid; gap: 16px; }
.form-panel { overflow: hidden; }
.form-panel > .form-grid, .narrow-form > .form-grid { padding: 21px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.uppercase-input { text-transform: uppercase; }
.purchase-form-grid { padding: 21px; }
.purchase-items-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 21px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f8fafc; }
.purchase-items-heading h4 { margin: 0; color: #2c3950; font-size: 12px; }
.purchase-items-heading p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.purchase-editor-scroll { padding-bottom: 2px; }
.purchase-editor-table { min-width: 1260px; }
.purchase-editor-table th { padding-inline: 10px; }
.purchase-editor-table td { padding: 10px; }
.purchase-editor-table td:first-child { min-width: 185px; white-space: normal; }
.purchase-editor-table td:first-child small { display: block; margin-top: 4px; }
.purchase-editor-table tfoot td { color: #34435b; background: #f0f3f7; font-weight: 800; text-align: right; }
.purchase-editor-table tfoot td:last-child { color: var(--red); text-align: left; }
.table-input { min-width: 88px; height: 36px; padding: 7px 9px; border-radius: 8px; font-size: 10px; }
.availability-input { min-width: 135px; }
.deadline-input { min-width: 82px; }
.quoted-total { color: #127b5d; }
.status-rule-banner { margin-top: 0; }
.field-label { display: flex; flex-direction: column; gap: 7px; color: #455268; font-size: 10px; font-weight: 700; }
.field-label[hidden] { display: none; }
.field-label small { color: #8d96a5; font-size: 9px; font-weight: 400; }
.span-2 { grid-column: span 2; }
.step-number { width: 25px; height: 25px; display: inline-grid; place-items: center; float: left; margin-right: 9px; border-radius: 8px; color: var(--red); background: var(--red-soft); font-size: 10px; font-weight: 800; }
.items-list { display: grid; gap: 10px; padding: 18px; background: #fafbfc; }
.quote-item { position: relative; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.quote-item-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 11px; border-bottom: 1px solid #edf0f4; }
.quote-item-toolbar > div { display: flex; align-items: center; gap: 9px; color: #445169; font-size: 10px; }
.item-index { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: #637188; background: #eff2f6; font-size: 10px; font-weight: 800; }
.quote-item-grid { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); align-items: end; gap: 12px; }
.quote-item-grid .item-observation { grid-column: span 3; }
.remove-item { width: 30px; height: 30px; border: 0; border-radius: 8px; color: #b62a37; background: var(--red-soft); font-size: 17px; }
.remove-item:disabled { color: #bac0c9; background: #f1f2f4; cursor: not-allowed; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 16px 20px; border-top: 1px solid var(--line); background: #fafbfc; }
.form-layout > .form-actions { border: 0; padding: 4px 0 0; background: transparent; }
.narrow-form { max-width: 830px; margin: 0 auto; overflow: hidden; }
.stack-form { display: grid; gap: 15px; }
.decision-actions { display: grid; gap: 14px; padding: 18px; }
.decision-actions form { padding: 0; }
.decision-actions .rejection-action { padding-top: 14px; border-top: 1px solid var(--line); }
.switch-row { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.switch-row input { display: none; }.switch-row > span { width: 38px; height: 21px; flex: 0 0 auto; padding: 3px; border-radius: 20px; background: #c8ced7; transition: .2s; }.switch-row > span::after { content: ''; width: 15px; height: 15px; display: block; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: .2s; }.switch-row input:checked + span { background: var(--green); }.switch-row input:checked + span::after { transform: translateX(17px); }.switch-row div { display: flex; flex-direction: column; }.switch-row strong { font-size: 11px; }.switch-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }

.detail-header { align-items: flex-end; padding: 18px 21px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(120deg, #fff, #fbfcfe); box-shadow: var(--shadow); }
.detail-header-side { display: grid; justify-items: end; gap: 13px; }
.pdf-actions { display: flex; gap: 8px; }
.back-link { display: inline-block; margin-bottom: 12px; color: var(--muted); font-size: 10px; font-weight: 600; }.detail-title-row { display: flex; align-items: center; gap: 10px; }.detail-title-row h2 { font-size: 22px; }.detail-meta { display: flex; gap: 24px; }.detail-meta span { display: flex; flex-direction: column; color: #8a94a3; font-size: 8px; font-weight: 800; letter-spacing: .09em; }.detail-meta strong { margin-top: 4px; color: #354158; font-size: 10px; letter-spacing: 0; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, .65fr); gap: 16px; }.detail-main, .detail-sidebar { display: grid; align-content: start; gap: 16px; }.detail-card { overflow: hidden; }.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px; margin: 0; padding: 21px; }.info-grid div { min-width: 0; }.info-grid dt { margin-bottom: 6px; color: #8b94a4; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.info-grid dd { margin: 0; color: #39465b; font-size: 11px; line-height: 1.55; }.rejection-box { padding: 12px; border-radius: 10px; background: var(--red-soft); }.action-card, .timeline-card { overflow: hidden; }.action-card form { padding: 18px; }.purchase-decision-card .decision-actions form { padding: 0; }.timeline { display: grid; gap: 0; padding: 18px; }.timeline-item { position: relative; display: grid; grid-template-columns: 17px 1fr; gap: 9px; padding-bottom: 19px; }.timeline-item:last-child { padding-bottom: 0; }.timeline-item::before { content: ''; position: absolute; left: 4px; top: 9px; bottom: -2px; width: 1px; background: #dfe4eb; }.timeline-item:last-child::before { display: none; }.timeline-item i { position: relative; z-index: 1; width: 9px; height: 9px; margin-top: 3px; border: 2px solid #fff; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #f5c8cc; }.timeline-item strong { font-size: 10px; }.timeline-item p { margin: 4px 0; color: #5e6b7e; font-size: 9px; line-height: 1.45; }.timeline-item small { color: #929aa8; font-size: 8px; }
.pdf-ready-card { display: grid; gap: 13px; padding: 18px; }
.pdf-ready-card > div:not(.pdf-ready-icon) { min-width: 0; }
.pdf-ready-card strong { font-size: 11px; }
.pdf-ready-card p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.pdf-ready-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--red); font-size: 10px; font-weight: 900; }

.store-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.store-card { padding: 19px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }.store-card.inactive { opacity: .64; }.store-card-top { display: flex; justify-content: space-between; align-items: flex-start; }.store-number { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: #253651; font-size: 13px; font-weight: 800; }.store-card h3 { margin: 15px 0 4px; font-size: 14px; }.store-card > p { margin: 0; color: var(--muted); font-size: 10px; }.store-stats { display: flex; gap: 22px; margin: 18px 0; padding: 13px 0; border-block: 1px solid #edf0f4; color: var(--muted); font-size: 9px; }.store-stats strong { color: var(--ink); font-size: 12px; }
.person-cell { display: flex; align-items: center; gap: 9px; }.person-cell > span:last-child { display: flex; flex-direction: column; }.avatar-light { color: #475975; background: #edf1f6; }
.profile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }.profile-card { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }.profile-icon { width: 43px; height: 43px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 12px; color: var(--red); background: var(--red-soft); font-size: 12px; font-weight: 800; }.profile-card h3 { margin: 0; font-size: 14px; }.profile-card p { min-height: 46px; margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }.profile-counts { display: flex; gap: 15px; margin: 17px 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }.profile-counts strong { color: var(--ink); font-size: 12px; }.info-banner { margin-top: 16px; padding: 16px 18px; border: 1px solid #cfe0f7; border-radius: 12px; color: #35557d; background: #f1f6fd; }.info-banner strong { font-size: 11px; }.info-banner p { margin: 4px 0 0; font-size: 10px; line-height: 1.5; }
.permissions-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-bottom: 70px; }.permission-group { overflow: hidden; }.permission-list { display: grid; }.permission-row { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 13px 17px; border-bottom: 1px solid #edf0f4; cursor: pointer; }.permission-row:last-child { border-bottom: 0; }.permission-row input { display: none; }.permission-check { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid #cbd2dd; border-radius: 5px; color: transparent; background: #fff; font-size: 11px; }.permission-row input:checked + .permission-check { color: #fff; border-color: var(--red); background: var(--red); }.permission-row > span:last-child { display: flex; flex-direction: column; }.permission-row strong { font-size: 10px; }.permission-row small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }.permission-row code { width: fit-content; margin-top: 5px; padding: 2px 5px; border-radius: 4px; color: #6b7585; background: #f0f2f5; font-size: 8px; }.sticky-actions { position: fixed; z-index: 10; right: 30px; bottom: 20px; display: flex; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 12px 35px rgba(20,31,51,.16); }
.alert { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; padding: 11px 13px; border: 1px solid; border-radius: 10px; font-size: 10px; line-height: 1.4; }.alert button { border: 0; color: inherit; background: transparent; font-size: 17px; }.alert-success { color: #116d54; border-color: #bee9dc; background: #ecf9f5; }.alert-error { color: #a52430; border-color: #f0c4c8; background: #fff0f1; }.alert-info { color: #315b96; border-color: #c8dcf8; background: #eff6ff; }
.error-state { min-height: 55vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.error-state > span { color: #d9dde4; font-size: 75px; font-weight: 800; letter-spacing: -.07em; }.error-state h2 { margin: 0; }.error-state p { margin: 8px 0 18px; color: var(--muted); }

.login-page, .install-page { background: #fff; }.login-layout { min-height: 100vh; display: grid; grid-template-columns: 1.08fr .92fr; }.login-hero { position: relative; overflow: hidden; display: flex; align-items: center; padding: 9vw; color: #fff; background: radial-gradient(circle at 20% 15%, #273a5d, transparent 35%), linear-gradient(145deg, #0b1220, #15243f); }.login-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to right, #000, transparent); }.login-hero-content { position: relative; z-index: 2; max-width: 590px; }.login-company-logo-shell { width: fit-content; max-width: 360px; padding: 16px 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 15px; background: rgba(255,255,255,.96); box-shadow: 0 18px 40px rgba(0,0,0,.18); }.login-company-logo { display: block; width: min(300px, 42vw); height: auto; }.login-hero .eyebrow { margin-top: 35px; color: #f0a4aa; }.login-hero h1 { margin: 14px 0 19px; font-size: clamp(35px, 4.2vw, 62px); line-height: 1.02; letter-spacing: -.055em; }.login-hero p:not(.eyebrow) { max-width: 540px; margin: 0; color: #aeb8c9; font-size: 15px; line-height: 1.7; }.login-features { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 37px; color: #d9dfea; font-size: 11px; font-weight: 600; }.login-features span::first-letter { color: #f66a75; }.hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .65; }.orb-one { right: -90px; bottom: -120px; width: 350px; height: 350px; background: radial-gradient(circle, rgba(226,57,70,.28), transparent 68%); }.orb-two { right: 10%; top: 5%; width: 160px; height: 160px; border: 1px solid rgba(255,255,255,.07); }.login-panel { display: grid; place-items: center; padding: 50px; background: #fff; }.login-card { width: min(100%, 390px); }.login-form-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 27px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }.login-form-brand img { width: min(100%, 275px); height: auto; }.login-form-brand span { color: #7b8697; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.login-card h2 { margin: 9px 0 5px; font-size: 28px; letter-spacing: -.04em; }.login-card > .muted { margin: 0 0 28px; font-size: 12px; }.login-card .field-label { margin-bottom: 15px; }.password-field { position: relative; display: block; }.password-field input { padding-right: 67px; }.password-field button { position: absolute; right: 10px; top: 10px; border: 0; color: #687589; background: transparent; font-size: 9px; font-weight: 700; }.login-help { margin: 17px 0 0; color: #095ceb; text-align: center; font-size: 10px; font-weight: bold; }.login-help2 { margin: 17px 0 0; color: #095ceb; text-align: center; font-size: 12px; font-weight: bold; }
.install-page { min-height: 100vh; display: grid; place-items: center; padding: 30px; background: radial-gradient(circle at top, #263753, #0b1220 65%); }.install-card { width: min(100%, 500px); padding: 35px; border-radius: 20px; background: #fff; box-shadow: 0 25px 70px rgba(0,0,0,.25); }.install-card h1 { margin: 8px 0; }.install-card > .muted { margin: 0 0 22px; font-size: 11px; }.install-card .brand-mark { margin-bottom: 22px; }.install-card .stack-form { margin-top: 22px; }

@media (max-width: 1180px) {
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .filter-bar { grid-template-columns: 1fr 160px 190px auto; }.filter-bar .btn-ghost { display: none; }
    .quote-item-grid { grid-template-columns: repeat(3, minmax(135px, 1fr)); }.quote-item-grid .item-observation { grid-column: span 2; }
    .store-grid { grid-template-columns: repeat(2, 1fr); }.profile-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); transition: transform .24s ease; }.menu-open .sidebar { transform: translateX(0); }.sidebar-backdrop { position: fixed; inset: 0; z-index: 25; background: rgba(3,8,17,.45); }.menu-open .sidebar-backdrop { display: block; }.main-area { width: 100%; margin-left: 0; }.menu-toggle { display: inline-flex; }.topbar { padding: 12px 18px; }.topbar-company-logo { margin-left: 8px; }.topbar-company-logo img { width: clamp(180px, 30vw, 280px); }.content-area { padding: 22px 18px 30px; }.dashboard-grid, .detail-grid { grid-template-columns: 1fr; }.detail-sidebar { grid-template-columns: repeat(2, 1fr); }.login-layout { grid-template-columns: 1fr; }.login-hero { display: none; }.login-panel { min-height: 100vh; }.filter-bar { grid-template-columns: 1fr 1fr; }.filter-bar .search-field { grid-column: span 2; }.permissions-form { grid-template-columns: 1fr; }.report-meta { grid-template-columns: repeat(2, 1fr); }.report-meta div:nth-child(2) { border-right: 0; }.report-meta div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media print {
    @page { size: A4 landscape; margin: 12mm; }
    body { background: #fff; }
    .sidebar, .topbar, .app-footer, .sidebar-backdrop, .no-print, .alert { display: none !important; }
    .main-area { width: 100%; margin: 0; }
    .content-area { padding: 0; }
    .report-company-header { margin-bottom: 10px; padding: 0 0 9px; border: 0; border-bottom: 2px solid #d7dce4; border-radius: 0; box-shadow: none; }
    .report-company-header img { width: 265px; height: 49px; }
    .report-company-header strong { font-size: 12px; }
    .report-company-header span { font-size: 9px; }
    .report-heading { margin-bottom: 12px; }
    .panel { box-shadow: none; break-inside: avoid; }
    .data-table th, .data-table td { padding: 8px 10px; }
    .record-link { color: inherit; }
}

@media (max-width: 620px) {
    .topbar { min-height: 68px; gap: 8px; padding: 8px 13px; }.topbar-title { display: none; }.topbar-company-logo { margin: 0; }.topbar-company-logo img { width: min(43vw, 175px); height: 44px; }.topbar .eyebrow, .store-pill { display: none; }.topbar h1 { font-size: 16px; }.topbar-meta { gap: 7px; }.topbar-meta .btn { width: 38px; overflow: hidden; padding: 0; font-size: 0; }.topbar-meta .btn::before { content: '+'; font-size: 18px; }.content-area { padding-inline: 13px; }.welcome-row, .page-actions-row, .detail-header { flex-direction: column; }.metric-grid, .store-grid, .profile-grid { grid-template-columns: 1fr; }.metric-card { min-height: 104px; }.donut-wrap { gap: 24px; }.filter-bar { grid-template-columns: 1fr; }.filter-bar .search-field { grid-column: auto; }.filter-bar select, .filter-bar .btn { width: 100%; }.form-grid, .info-grid, .quote-item-grid { grid-template-columns: 1fr; }.span-2, .quote-item-grid .item-observation { grid-column: auto; }.detail-header-side { width: 100%; justify-items: stretch; }.detail-meta { width: 100%; justify-content: space-between; }.pdf-actions { width: 100%; }.pdf-actions .btn { flex: 1; }.detail-sidebar { grid-template-columns: 1fr; }.app-footer { flex-direction: column; gap: 4px; padding-inline: 16px; }.panel-heading { padding-inline: 15px; }.panel-heading .btn { padding-inline: 9px; font-size: 10px; }.report-company-header { align-items: flex-start; flex-direction: column; gap: 10px; }.report-company-header img { width: min(100%, 280px); }.report-company-header > div { align-items: flex-start; text-align: left; }.login-panel { padding: 28px; }.login-form-brand img { width: min(100%, 260px); }.login-card h2 { font-size: 25px; }.permissions-form { padding-bottom: 80px; }.sticky-actions { right: 12px; bottom: 12px; left: 12px; justify-content: flex-end; }.donut { width: 115px; height: 115px; }.chart-legend { min-width: 145px; }
}