:root {
  --olive: #737a32;
  --olive-dark: #4f5724;
  --olive-soft: #eef0df;
  --clay: #a96842;
  --clay-soft: #f3e8df;
  --ink: #292b2c;
  --muted: #74766f;
  --line: #e7e4da;
  --paper: #ffffff;
  --canvas: #f6f5f0;
  --cream: #fbf8f1;
  --danger: #c84c45;
  --danger-soft: #fbebea;
  --warning: #b17a19;
  --warning-soft: #fff4d9;
  --success: #39765c;
  --success-soft: #e5f3ec;
  --shadow: 0 14px 38px rgba(53, 48, 35, .08);
}

/* Serviços separados por peça no atendimento e nos documentos. */
#quotePieces { display: grid; gap: 22px; }
.quote-piece { border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--paper); }
.piece-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.piece-number { color: var(--olive-dark); font-size: 16px; }
.remove-piece { border: 0; background: transparent; color: var(--danger); cursor: pointer; font: inherit; font-size: 12px; }
.remove-piece:disabled { visibility: hidden; }
.piece-subtotal, .saved-piece-subtotal { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; margin: 18px 0 0; font-size: 13px; }
#addPiece { margin-top: 22px; }
.summary-piece { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.summary-piece > strong { display: block; font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.summary-lines .summary-piece > span { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 11px; }
.summary-piece b { white-space: nowrap; }
.summary-piece-total { padding-top: 8px; font-weight: 700; }
.saved-piece-group { margin: 20px 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; }
.saved-piece-group h3 { margin: 0 0 10px; font-size: 15px; color: var(--olive-dark); }
.saved-piece-group .service-detail small { display: block; }
@media (max-width: 700px) { .quote-piece, .saved-piece-group { padding: 14px; } .piece-heading { align-items: flex-start; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--canvas); color: var(--ink); font-size: 14px; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, select { cursor: pointer; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { display: none; }
.app-shell { min-height: 100vh; }
.app-shell.auth-locked { display: none; }

.login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(430px, 1.05fr) minmax(420px, .95fr); background: white; }
.login-screen.hidden { display: none !important; }
.login-visual { position: relative; overflow: hidden; min-height: 100vh; padding: 42px 52px; background: #30322d; color: white; display: flex; flex-direction: column; isolation: isolate; }
.login-visual:before { content: ""; position: absolute; inset: 0; z-index: -3; background: radial-gradient(circle at 76% 20%, rgba(153,160,79,.38), transparent 27%), radial-gradient(circle at 15% 76%, rgba(169,104,66,.26), transparent 31%), linear-gradient(145deg, #292b28, #3a3d32 60%, #292b28); }
.login-visual:after { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .1; background-image: linear-gradient(45deg, transparent 49%, #fff 50%, transparent 51%), linear-gradient(-45deg, transparent 49%, #fff 50%, transparent 51%); background-size: 34px 34px; }
.login-brand-crop { width: 255px; height: 116px; position: relative; }
.login-brand-crop img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 13px 16px rgba(0,0,0,.3)); }
.login-copy { margin-top: auto; max-width: 620px; padding-bottom: 78px; position: relative; z-index: 3; }
.login-kicker { display: block; color: #d3d7a2; font-size: 10px; letter-spacing: .15em; font-weight: 800; margin-bottom: 13px; }
.login-copy h1 { color: #fff; font-size: clamp(38px, 4.5vw, 66px); line-height: 1.02; letter-spacing: -.035em; text-shadow: 0 5px 22px rgba(0,0,0,.16); }
.login-copy p { color: #c6c8c0; max-width: 510px; font-size: 14px; line-height: 1.65; margin-top: 19px; }
.login-visual-footer { position: absolute; bottom: 29px; left: 52px; right: 52px; display: flex; justify-content: space-between; align-items: center; color: #aeb0aa; font-size: 10px; z-index: 4; }
.login-visual-footer span { display: flex; align-items: center; gap: 7px; }.login-visual-footer i { width: 7px; height: 7px; border-radius: 50%; background: #acb45d; box-shadow: 0 0 0 4px rgba(172,180,93,.13); }
.sewing-scene { position: absolute; inset: 80px 0 0; z-index: 0; opacity: .95; pointer-events: none; }
.fabric { position: absolute; border-radius: 28px; transform: rotate(-9deg); box-shadow: 0 28px 55px rgba(0,0,0,.23); }
.fabric-one { width: 310px; height: 240px; right: -48px; top: 95px; background: linear-gradient(135deg, #838a3f, #5f672d); border: 1px solid rgba(255,255,255,.13); }
.fabric-one:before { content: ""; position: absolute; inset: 24px; border: 2px dashed rgba(245,236,204,.45); border-radius: 20px; }
.fabric-one i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.18); }.fabric-one i:nth-child(1){left:55px;top:70px}.fabric-one i:nth-child(2){left:155px;top:110px}.fabric-one i:nth-child(3){right:55px;bottom:55px}
.fabric-two { width: 225px; height: 175px; right: 190px; top: 230px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 6px), linear-gradient(135deg, #a96842, #7d462c); transform: rotate(13deg); }
.fabric-three { width: 170px; height: 150px; right: 22px; top: 340px; background: linear-gradient(135deg, #42443f, #222421); transform: rotate(18deg); }
.needle { position: absolute; width: 3px; height: 175px; right: 325px; top: 74px; border-radius: 3px; background: linear-gradient(#f7f3dd, #878981); transform: rotate(39deg); box-shadow: 0 0 8px rgba(255,255,255,.2); }
.needle:before { content: ""; position: absolute; top: 7px; left: -2px; width: 5px; height: 15px; border: 1px solid #d6d2be; border-radius: 50%; }
.spool { position: absolute; width: 88px; height: 88px; border-radius: 50%; right: 350px; top: 245px; border: 20px solid #c18a5d; background: #30322d; box-shadow: 0 13px 30px rgba(0,0,0,.25); transform: rotate(-8deg); }
.spool:before, .spool:after { content: ""; position: absolute; width: 106px; height: 8px; background: #ddd1b5; border-radius: 5px; left: -29px; }.spool:before { top: -21px; }.spool:after { bottom: -21px; }
.button-art { position: absolute; right: 78px; top: 226px; width: 83px; height: 83px; border-radius: 50%; background: #d8cfb5; border: 10px solid #b5aa8a; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 16px; box-shadow: 0 16px 31px rgba(0,0,0,.23); }.button-art i { border-radius: 50%; background: #747b32; box-shadow: inset 0 2px 3px rgba(0,0,0,.25); }
.thread-line { position: absolute; height: 140px; border: 3px solid transparent; border-top-color: rgba(207,165,126,.8); border-radius: 50%; }.line-one { width: 440px; right: 34px; top: 38px; transform: rotate(8deg); }.line-two { width: 310px; right: 145px; top: 334px; transform: rotate(180deg); border-top-color: rgba(212,215,161,.5); }
.stitch { position: absolute; width: 70px; height: 0; border-top: 2px dashed rgba(255,255,255,.42); }.stitch-a { right: 420px; top: 180px; transform: rotate(33deg); }.stitch-b { right: 450px; top: 205px; transform: rotate(33deg); }.stitch-c { right: 480px; top: 230px; transform: rotate(33deg); }
.login-form-side { min-height: 100vh; padding: 38px clamp(35px, 6vw, 100px) 24px; display: flex; flex-direction: column; background: #fff; }
.login-form-wrap { width: min(430px, 100%); margin: auto; }
.login-form-wrap > h2 { font-family: Georgia, "Times New Roman", serif; font-size: 39px; font-weight: 500; letter-spacing: -.025em; }
.login-intro { color: var(--muted); margin: 10px 0 31px; line-height: 1.55; }
.login-field { display: grid; gap: 8px; margin-bottom: 16px; }
.login-field > span { color: #484a46; font-size: 10px; font-weight: 750; }
.login-field > div { position: relative; height: 49px; border: 1px solid #dad9d2; border-radius: 10px; display: flex; align-items: center; transition: .2s ease; }
.login-field > div:focus-within { border-color: var(--olive); box-shadow: 0 0 0 4px rgba(115,122,50,.09); }
.login-field svg { position: absolute; left: 14px; width: 17px; color: #909189; }
.login-field input { width: 100%; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 70px 0 43px; font-size: 11px; }
.login-field > div > button { position: absolute; right: 12px; border: 0; background: transparent; color: var(--olive-dark); font-size: 9px; font-weight: 750; padding: 5px; }
.field-error { display: none; color: var(--danger); font-size: 9px; }.login-field.invalid > div { border-color: var(--danger); }.login-field.invalid .field-error { display: block; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 5px 0 24px; }
.login-options label { display: flex; align-items: center; gap: 8px; color: #5f615c; font-size: 10px; }.login-options input { accent-color: var(--olive); }.login-options button, .login-help button, .login-footer button { border: 0; background: transparent; color: var(--olive-dark); font-size: 10px; font-weight: 750; padding: 0; }
.login-submit { width: 100%; height: 49px; justify-content: space-between; padding: 0 18px 0 21px; }
.login-help { border-top: 1px solid var(--line); margin-top: 29px; padding-top: 19px; display: flex; justify-content: center; gap: 5px; color: var(--muted); font-size: 10px; }
.login-footer { display: flex; justify-content: space-between; color: #a1a29c; font-size: 9px; padding-top: 25px; }.login-footer button { color: #7b7d75; font-weight: 600; font-size: 9px; }
.login-mobile-logo { display: none; }

.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 268px; padding: 24px 18px 18px; background: #303130; color: #f4f1e7; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.07); }
.brand { position: relative; height: 92px; margin: 0 4px 24px; display: flex; align-items: center; }
.brand-crop { width: 196px; height: 88px; overflow: hidden; position: relative; }
.brand-crop img { width: 100%; height: 100%; object-fit: contain; opacity: 1; filter: drop-shadow(0 8px 12px rgba(0,0,0,.22)); }
.main-nav { display: flex; flex-direction: column; gap: 7px; }
.nav-item { width: 100%; border: 0; background: transparent; color: #bfbfb7; border-radius: 10px; min-height: 46px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 12px; padding: 0 13px; text-align: left; transition: .2s ease; }
.nav-item:hover { color: white; background: rgba(255,255,255,.05); }
.nav-item.active { color: white; background: var(--olive); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.nav-item svg { width: 19px; }
.nav-item span { font-weight: 650; }
.nav-item em { font-style: normal; min-width: 23px; height: 23px; padding: 0 7px; border-radius: 12px; background: rgba(255,255,255,.12); font-size: 11px; display: grid; place-items: center; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 13px; }
.support-card { background: #3a3b39; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; padding: 16px; display: grid; gap: 5px; }
.support-card span { color: #9c9d96; font-size: 12px; }
.support-card strong { font-size: 14px; }
.support-card button { margin-top: 7px; border: 0; padding: 0; background: transparent; color: #d8d9bb; text-align: left; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; }
.support-card button svg { width: 15px; }
.user-card { border: 0; border-top: 1px solid rgba(255,255,255,.08); padding: 15px 4px 0; background: transparent; color: white; display: grid; grid-template-columns: 38px 1fr 18px; gap: 10px; align-items: center; text-align: left; }
.avatar { width: 39px; height: 39px; border-radius: 50%; background: var(--olive); color: white; display: grid; place-items: center; font-size: 12px; font-weight: 750; flex: 0 0 auto; }
.avatar.light { background: var(--olive-soft); color: var(--olive-dark); }
.avatar.clay-avatar { background: var(--clay); }
.avatar.sand-avatar { background: #ba8e3f; }
.avatar.large { width: 50px; height: 50px; font-size: 14px; }
.user-card span:nth-child(2) { display: grid; gap: 2px; }
.user-card strong { font-size: 12px; }
.user-card small { color: #999a94; font-size: 11px; }
.user-card svg { width: 14px; color: #aaa; }
.close-sidebar { display: none; }

.main-content { margin-left: 268px; min-height: 100vh; }
.topbar { height: 76px; padding: 0 34px; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px); }
.store-switcher { display: flex; align-items: center; gap: 10px; min-width: 290px; }
.store-switcher .store-dot { width: 32px; height: 32px; border-radius: 10px; background: var(--olive-soft); position: relative; }
.store-switcher .store-dot:before { content: ""; position: absolute; width: 11px; height: 11px; border: 3px solid var(--olive); border-radius: 50%; inset: 8px; }
.store-switcher > span:nth-child(2) { display: grid; gap: 2px; }
.store-switcher small, .today small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.store-switcher select { appearance: none; border: 0; padding: 0 22px 0 0; background: transparent; color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; outline: 0; cursor: pointer; }
.store-switcher > svg { width: 14px; margin-left: 5px; color: var(--muted); }
.top-actions { display: flex; align-items: center; gap: 14px; }
.top-search { height: 40px; width: 245px; background: var(--canvas); border: 1px solid transparent; border-radius: 9px; padding: 0 12px; display: flex; align-items: center; gap: 8px; }
.top-search:focus-within { border-color: var(--olive); background: white; }
.top-search svg { width: 17px; color: #8a8b84; }
.top-search input { border: 0; outline: none; background: transparent; width: 100%; font-size: 12px; }
.icon-button { width: 39px; height: 39px; display: grid; place-items: center; padding: 0; border-radius: 9px; border: 1px solid var(--line); background: white; }
.icon-button:hover { background: var(--canvas); }
.notification { position: relative; }
.notification svg { width: 18px; }
.notification i { position: absolute; width: 7px; height: 7px; background: var(--clay); border-radius: 50%; right: 8px; top: 8px; border: 2px solid white; }
.today { display: grid; gap: 2px; border-left: 1px solid var(--line); padding-left: 16px; }
.today strong { font-size: 12px; }
.menu-button { display: none; }

.view { display: none; padding: 34px clamp(24px, 3.2vw, 52px) 64px; animation: fade .25s ease; max-width: 1540px; margin: 0 auto; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 27px; }
.page-heading.compact { align-items: center; }
.eyebrow { display: block; color: var(--olive); font-size: 10px; letter-spacing: .12em; font-weight: 800; margin-bottom: 7px; }
h1, h2, h3, p { margin: 0; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 3vw, 43px); line-height: 1.05; font-weight: 500; letter-spacing: -.025em; }
.page-heading p, .form-top p, .detail-top p { color: var(--muted); margin-top: 8px; }
h2 { font-size: 16px; line-height: 1.3; }
.button { min-height: 42px; border-radius: 9px; border: 1px solid transparent; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 720; font-size: 12px; white-space: nowrap; transition: .2s ease; }
.button svg { width: 17px; }
.button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.button.primary { background: var(--olive); color: white; }
.button.primary:hover { background: var(--olive-dark); }
.button.secondary { background: var(--ink); color: white; }
.button.ghost { color: var(--olive-dark); border-color: #d5d9b9; background: var(--olive-soft); }
.button.subtle { background: white; border-color: var(--line); }
.button.whatsapp { background: #e7f5ec; color: #267548; border-color: #cce7d6; }
.button.wide { width: 100%; }

.attention-strip { min-height: 67px; background: var(--danger-soft); border: 1px solid #f3d0ce; border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.attention-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--danger); color: white; display: grid; place-items: center; font-family: Georgia, serif; font-weight: 800; }
.attention-strip div { flex: 1; }
.attention-strip strong { color: #75322f; font-size: 12px; }
.attention-strip p { color: #99615e; font-size: 11px; margin-top: 3px; }
.text-button { border: 0; background: transparent; color: var(--olive-dark); font-size: 12px; font-weight: 750; display: flex; align-items: center; gap: 6px; padding: 4px; }
.text-button svg { width: 15px; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { min-height: 125px; background: white; border: 1px solid var(--line); border-radius: 13px; padding: 18px; display: grid; grid-template-columns: 43px 1fr 18px; gap: 12px; align-items: center; text-align: left; box-shadow: 0 3px 12px rgba(55,48,30,.025); }
.metric-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); transition: .2s; }
.metric-icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; }
.metric-card.danger .metric-icon { background: var(--danger-soft); color: var(--danger); }
.metric-card.warning .metric-icon { background: var(--warning-soft); color: var(--warning); }
.metric-card.olive .metric-icon { background: var(--olive-soft); color: var(--olive); }
.metric-card.clay .metric-icon { background: var(--clay-soft); color: var(--clay); }
.metric-card > span:nth-child(2) { display: grid; }
.metric-card small { color: var(--muted); font-size: 10px; font-weight: 700; }
.metric-card strong { font-family: Georgia, serif; font-size: 30px; line-height: 1.15; font-weight: 500; margin-top: 3px; }
.metric-card strong.money { font-size: 24px; }
.metric-card em { font-style: normal; color: var(--muted); font-size: 10px; margin-top: 5px; }
.metric-card .go { width: 15px; color: #aaa; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(310px, .75fr); gap: 18px; }
.panel { background: white; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.panel-header { min-height: 72px; padding: 17px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.panel-header p { color: var(--muted); font-size: 11px; margin-top: 4px; }
.schedule-list { display: flex; flex-direction: column; }
.schedule-row { border: 0; border-bottom: 1px solid var(--line); background: white; min-height: 73px; padding: 9px 15px; display: grid; grid-template-columns: 48px 3px minmax(180px,1fr) 98px 104px 14px; gap: 12px; align-items: center; text-align: left; }
.schedule-row:last-child { border-bottom: 0; }
.schedule-row:hover { background: #fbfaf6; }
.schedule-row time { font-weight: 750; font-size: 12px; }
.schedule-line { height: 38px; width: 3px; border-radius: 2px; }
.schedule-line.red { background: var(--danger); }
.schedule-line.green { background: var(--success); }
.schedule-line.sand { background: var(--warning); }
.payment-note.payment-breakdown { display: grid; gap: 3px; min-width: 150px; }.payment-breakdown strong { color: var(--ink); }.payment-breakdown small { color: var(--muted); font-size: 8px; white-space: nowrap; }.payment-breakdown b { color: var(--clay); }
.order-main { display: grid; gap: 4px; }
.order-main strong { font-size: 12px; }
.order-main small { color: var(--muted); font-size: 10px; }
.status-chip { border-radius: 14px; padding: 6px 9px; display: inline-flex; align-items: center; justify-content: center; width: fit-content; font-size: 9px; font-style: normal; font-weight: 780; white-space: nowrap; }
.status-chip.doing { background: #eaf0fb; color: #3e6397; }
.status-chip.ready, .status-chip.approved { background: var(--success-soft); color: var(--success); }
.status-chip.waiting { background: var(--warning-soft); color: #8c661d; }
.status-chip.draft { background: #efefed; color: #666; }
.status-chip.sent { background: #e9eef8; color: #44658f; }
.status-chip.rejected { background: var(--danger-soft); color: #9f4944; }
.status-chip.expired { background: var(--danger-soft); color: #9f4944; }
.status-chip.partial { background: var(--warning-soft); color: var(--warning); }
.payment-note { color: var(--muted); font-size: 9px; display: grid; gap: 2px; }
.payment-note strong { font-size: 11px; color: var(--ink); }
.payment-note.paid { color: var(--success); font-weight: 750; display: block; }
.schedule-row > svg { width: 14px; color: #aaa; }
.progress-panel { padding-bottom: 20px; }
.progress-ring-wrap { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 31px 20px 24px; }
.progress-ring { width: 116px; height: 116px; border-radius: 50%; background: conic-gradient(var(--olive) 0 37.5%, #d2a14d 37.5% 66.5%, var(--success) 66.5% 100%); position: relative; display: grid; place-items: center; }
.progress-ring:after { content: ""; position: absolute; width: 79px; height: 79px; background: white; border-radius: 50%; }
.progress-ring span { z-index: 1; display: grid; text-align: center; }
.progress-ring strong { font-family: Georgia, serif; font-size: 24px; font-weight: 500; }
.progress-ring.cash-ring strong { font-size: 18px; }
.progress-ring small { color: var(--muted); font-size: 9px; line-height: 1.2; }
.legend { display: grid; gap: 12px; color: var(--muted); font-size: 10px; }
.legend span { display: grid; grid-template-columns: 8px 17px 1fr; gap: 6px; align-items: center; }
.legend i { width: 7px; height: 7px; border-radius: 50%; }
.olive-bg { background: var(--olive); }.sand-bg { background: #d2a14d; }.green-bg { background: var(--success); }
.legend b { color: var(--ink); }
.capacity { margin: 0 20px; padding: 17px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
.capacity span { display: grid; gap: 4px; }
.capacity strong { font-size: 11px; }
.capacity small { color: var(--muted); font-size: 9px; }
.capacity b { color: var(--olive); }
.capacity > div { grid-column: 1 / -1; height: 6px; border-radius: 4px; background: #ecebe6; margin-top: 7px; overflow: hidden; }
.capacity > div i { display: block; height: 100%; width: 80%; background: var(--olive); border-radius: inherit; }
.quick-section { margin-top: 29px; }
.section-title p { margin-top: 4px; color: var(--muted); font-size: 11px; }
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 13px; }
.quick-grid > button { min-height: 78px; background: white; border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; display: grid; grid-template-columns: 38px 1fr 16px; align-items: center; gap: 11px; text-align: left; }
.quick-grid > button:hover { border-color: #ccd0a7; box-shadow: var(--shadow); }
.quick-grid > button > span { width: 38px; height: 38px; display: grid; place-items: center; color: var(--olive); background: var(--olive-soft); border-radius: 9px; }
.quick-grid > button > div { display: grid; gap: 4px; }
.quick-grid strong { font-size: 11px; }.quick-grid small { color: var(--muted); font-size: 9px; }.quick-grid > button > svg { width: 14px; color: #aaa; }

.list-toolbar { background: white; border: 1px solid var(--line); border-radius: 12px 12px 0 0; min-height: 70px; padding: 13px 17px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.search-box { height: 41px; min-width: 315px; max-width: 430px; flex: 1; background: var(--canvas); border-radius: 9px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid transparent; }
.search-box:focus-within { background: white; border-color: var(--olive); }
.search-box svg { color: #888; width: 17px; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 11px; }
.filter-pills, .category-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-pills button, .category-tabs button { min-height: 34px; padding: 0 11px; background: transparent; border: 1px solid transparent; border-radius: 18px; font-size: 10px; color: var(--muted); }
.filter-pills button.active, .filter-pills button:hover, .category-tabs button.active, .category-tabs button:hover { background: var(--olive-soft); color: var(--olive-dark); }
.filter-pills b, .category-tabs b { font-size: 9px; margin-left: 3px; }
.table-card { background: white; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; overflow-x: auto; }
.table-card .panel-header { min-width: 760px; }
table { width: 100%; border-collapse: collapse; min-width: 880px; }
th { height: 43px; background: #faf9f5; color: #86877f; font-size: 9px; letter-spacing: .05em; text-align: left; padding: 0 17px; text-transform: uppercase; }
td { padding: 15px 17px; border-top: 1px solid var(--line); font-size: 11px; vertical-align: middle; }
td strong, td small { display: block; }
td small { color: var(--muted); margin-top: 4px; font-size: 9px; }
.row-action { width: 30px; height: 30px; border-radius: 8px; background: transparent; border: 0; display: grid; place-items: center; }
.row-action:hover { background: var(--canvas); }
.row-action svg { width: 14px; color: #999; }
.toolbar-selects { display: flex; gap: 9px; }
.toolbar-selects select, .field select, .field input, .field textarea { outline: none; }
.toolbar-selects select { height: 39px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--muted); font-size: 10px; padding: 0 30px 0 10px; }

.form-top, .detail-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 25px; }
.back-button { width: 38px; height: 38px; border: 1px solid var(--line); background: white; border-radius: 9px; font-size: 20px; display: grid; place-items: center; }
.form-top > div, .detail-top > div { flex: 1; }
.draft-state { color: var(--success); background: var(--success-soft); border-radius: 15px; padding: 7px 11px; font-size: 9px; font-weight: 700; }
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.form-main { display: grid; gap: 15px; }
.form-card, .detail-card { background: white; border: 1px solid var(--line); border-radius: 13px; padding: 22px; }
.quote-store-bar { display: grid; grid-template-columns: 34px minmax(240px, 350px) 1fr; align-items: center; gap: 12px; padding: 13px 16px; margin: -8px 0 15px; background: #f0f1df; border: 1px solid #daddb7; border-radius: 11px; }.quote-store-bar .store-dot { width: 32px; height: 32px; border-radius: 9px; background: #dde2b9; position: relative; }.quote-store-bar .store-dot::before { content: ''; position: absolute; width: 10px; height: 10px; border: 3px solid var(--olive); border-radius: 50%; inset: 8px; }.quote-store-bar label { display: grid; gap: 3px; }.quote-store-bar small { color: var(--olive-dark); font-size: 8px; font-weight: 800; letter-spacing: .08em; }.quote-store-bar select { border: 0; padding: 0; background: transparent; color: var(--text); font-size: 12px; font-weight: 750; outline: 0; }.quote-store-bar p { color: #676956; font-size: 9px; line-height: 1.5; }
.summary-store { background: var(--olive-soft); border-radius: 9px; padding: 11px; margin: 13px 0; }.summary-store small, .summary-store strong { display: block; }.summary-store small { font-size: 8px; color: var(--olive-dark); letter-spacing: .08em; font-weight: 800; }.summary-store strong { margin-top: 4px; font-size: 10px; }
.step-title { display: flex; gap: 13px; align-items: flex-start; padding-bottom: 18px; margin-bottom: 19px; border-bottom: 1px solid var(--line); }
.step-title > span { width: 25px; height: 25px; border-radius: 50%; background: var(--olive); color: white; display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.step-title p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.field-grid { display: grid; gap: 14px; }.field-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.field { display: grid; gap: 7px; }
.field > span, .service-item label > span { color: #5c5e58; font-size: 9px; font-weight: 750; letter-spacing: .025em; }
.field input, .field select, .field textarea, .service-item input, .service-item select { width: 100%; border: 1px solid #dddcd4; border-radius: 8px; background: white; min-height: 42px; padding: 0 12px; font-size: 11px; color: var(--ink); }
.field textarea { min-height: 85px; padding-top: 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .service-item input:focus, .service-item select:focus { border-color: var(--olive); box-shadow: 0 0 0 3px rgba(115,122,50,.09); }
.input-icon { position: relative; }
.input-icon svg { position: absolute; width: 16px; left: 12px; top: 13px; color: #888; }
.input-icon input { padding-left: 38px; }
.selected-client { margin-top: 13px; padding: 11px; background: var(--cream); border-radius: 9px; display: flex; align-items: center; gap: 10px; }
.selected-client > span:nth-child(2) { display: grid; gap: 3px; flex: 1; }
.selected-client strong { font-size: 11px; }.selected-client small { color: var(--muted); font-size: 9px; }
.selected-client button { border: 0; background: transparent; color: var(--olive-dark); font-size: 10px; font-weight: 750; }
.service-items { display: grid; gap: 10px; margin-top: 17px; }
.service-item { display: grid; grid-template-columns: 20px 1.1fr 1.25fr 65px 90px 31px; gap: 9px; align-items: end; border: 1px solid var(--line); background: #fbfaf7; border-radius: 10px; padding: 11px; }
.service-item label { display: grid; gap: 6px; }
.service-item .drag { color: #aaa; align-self: center; font-size: 14px; }
.service-item input, .service-item select { min-height: 38px; padding: 0 9px; background: white; }
.remove-item { width: 31px; height: 38px; border: 0; background: transparent; color: #a2645f; border-radius: 7px; display: grid; place-items: center; }
.remove-item:hover { background: var(--danger-soft); }
.remove-item svg { width: 16px; }
.add-service { margin-top: 12px; }
.field.full { margin-top: 15px; }
.quote-summary { position: relative; }
.summary-sticky { position: sticky; top: 96px; background: #333532; color: white; border-radius: 13px; padding: 23px; box-shadow: var(--shadow); }
.summary-sticky h2 { padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.summary-client { display: grid; gap: 5px; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.summary-client small, .delivery-summary small { color: #aeb0a8; font-size: 8px; letter-spacing: .07em; }
.summary-client strong { font-size: 12px; }.summary-client span { font-size: 10px; color: #c5c6bf; }
.summary-lines { display: grid; gap: 11px; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.summary-lines > span { display: flex; justify-content: space-between; gap: 12px; color: #c5c6bf; font-size: 10px; }
.summary-lines strong { color: white; }
.quote-subtotal, .discount-result { display: flex; justify-content: space-between; align-items: center; color: #c5c6bf; font-size: 9px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.1); }
.quote-subtotal strong { color: white; }.discount-result { border-top: 0; padding-top: 0; }.discount-result strong { color: #e3bb9e; }
.discount-control { display: grid; grid-template-columns: 1fr 125px; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 9px; font-weight: 750; }
.discount-control select { width: 100%; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: #434640; padding: 8px 9px; color: white; font-weight: 750; }
.custom-discount { display: grid; grid-template-columns: 1fr 125px; align-items: center; gap: 10px; padding-bottom: 10px; color: #c5c6bf; font-size: 8px; }
.custom-discount > div { display: flex; align-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; overflow: hidden; background: #434640; }.custom-discount input { width: 100%; min-width: 0; border: 0; padding: 8px 9px; outline: 0; background: transparent; color: white; }.custom-discount b { padding-right: 9px; color: #d7daa9; }
.summary-total { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; }
.summary-total span { font-size: 11px; }.summary-total strong { font-family: Georgia, serif; font-size: 23px; font-weight: 500; }
.delivery-summary { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.06); border-radius: 9px; padding: 11px; margin-bottom: 15px; }
.delivery-summary svg { color: #d7daa9; width: 18px; }.delivery-summary span { display: grid; gap: 4px; }.delivery-summary strong { font-size: 10px; }
.summary-sticky .button { margin-top: 8px; }.summary-sticky .button.subtle { background: transparent; border-color: rgba(255,255,255,.18); color: white; }
.summary-hint { font-size: 9px; color: #aeb0a8; line-height: 1.45; text-align: center; margin: 13px 8px 0; }

.orders-summary { display: grid; grid-template-columns: repeat(5, 1fr); background: white; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.orders-summary button { min-height: 70px; border: 0; border-right: 1px solid var(--line); background: white; display: flex; align-items: center; justify-content: center; gap: 9px; }
.orders-summary button:last-child { border-right: 0; }
.orders-summary button.active, .orders-summary button:hover { background: var(--olive-soft); color: var(--olive-dark); }
.orders-summary strong { font-family: Georgia, serif; font-size: 24px; font-weight: 500; }.orders-summary span { font-size: 10px; font-weight: 650; }
.order-cards { display: grid; gap: 9px; margin-top: 12px; }
.order-card { width: 100%; min-height: 100px; background: white; border: 1px solid var(--line); border-radius: 11px; padding: 11px 16px; display: grid; grid-template-columns: 83px minmax(220px,1.4fr) minmax(130px,.65fr) minmax(110px,.5fr) 100px 16px; align-items: center; gap: 14px; text-align: left; }
.order-card:hover { box-shadow: var(--shadow); border-color: #d9dabf; }
.order-card.late-card { border-left: 4px solid var(--danger); }
.date-block { border-right: 1px solid var(--line); display: grid; gap: 2px; align-content: center; min-height: 66px; }
.date-block small { color: var(--danger); font-size: 8px; font-weight: 800; }.date-block strong { font-size: 18px; }.date-block em { color: var(--danger); font-size: 8px; font-style: normal; }
.date-block.tomorrow small { color: var(--warning); }
.order-info { display: grid; gap: 4px; }.order-info .order-id { color: var(--olive); font-size: 9px; font-weight: 800; }.order-info > strong { font-size: 12px; }.order-info > small { color: var(--muted); font-size: 9px; }
.mini-tags { display: flex; gap: 9px; margin-top: 3px; }.mini-tags i { font-style: normal; font-size: 8px; color: #8c8d85; }
.order-assignee, .order-finance { display: grid; gap: 5px; }.order-assignee small, .order-finance small { color: #96978f; font-size: 8px; font-weight: 750; }.order-assignee strong { font-size: 9px; display: flex; align-items: center; gap: 5px; }.order-assignee i { width: 23px; height: 23px; border-radius: 50%; background: var(--olive-soft); color: var(--olive-dark); display: grid; place-items: center; font-size: 7px; font-style: normal; }.order-finance strong { font-size: 11px; }.order-finance em { color: var(--clay); font-size: 8px; font-style: normal; }.order-finance.paid strong { color: var(--success); }.order-finance.paid em { color: var(--muted); }.order-card > svg { width: 14px; color: #aaa; }

.detail-top { align-items: center; }
.title-row { display: flex; align-items: center; gap: 10px; }.title-row h1 { font-size: 34px; }
.detail-actions { display: flex; gap: 8px; }
.deadline-banner { background: var(--danger-soft); border: 1px solid #f0cbc8; border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.deadline-banner > span { width: 35px; height: 35px; border-radius: 9px; background: white; color: var(--danger); display: grid; place-items: center; }.deadline-banner div { display: grid; gap: 3px; }.deadline-banner strong { color: #7a3834; font-size: 11px; }.deadline-banner p { color: #9a6561; font-size: 9px; }
.deadline-banner.on-time { background: var(--success-soft); border-color: #cce6da; }.deadline-banner.on-time > span { color: var(--success); }.deadline-banner.on-time strong { color: #286b55; }.deadline-banner.on-time p { color: #54776c; }
.detail-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.65fr); gap: 15px; align-items: start; }
.detail-main, .detail-side { display: grid; gap: 15px; }
.card-title { display: flex; align-items: center; justify-content: space-between; padding-bottom: 15px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.card-title button { color: var(--olive-dark); background: transparent; border: 0; font-size: 9px; font-weight: 750; }.card-title > span { color: var(--muted); font-size: 9px; }
.client-profile { display: flex; align-items: center; gap: 11px; }.client-profile > span:nth-child(2) { display: grid; gap: 5px; flex: 1; }.client-profile strong { font-size: 13px; }.client-profile small { color: var(--muted); font-size: 10px; display: flex; align-items: center; gap: 5px; }.client-profile small svg { width: 13px; }
.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 19px; padding-top: 17px; border-top: 1px solid var(--line); }.info-grid span { display: grid; gap: 5px; }.info-grid small { color: var(--muted); font-size: 8px; font-weight: 750; }.info-grid strong { font-size: 9px; }
.piece-title { display: flex; align-items: center; gap: 10px; background: var(--cream); border-radius: 10px; padding: 12px; margin-bottom: 10px; }.piece-title > span { width: 34px; height: 34px; border-radius: 9px; background: var(--olive-soft); color: var(--olive); display: grid; place-items: center; }.piece-title > span svg { width: 17px; }.piece-title div { display: grid; gap: 4px; }.piece-title strong { font-size: 11px; }.piece-title small { color: var(--muted); font-size: 9px; }
.service-detail { min-height: 63px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 9px 3px; }.service-detail div { display: grid; gap: 4px; }.service-detail div strong { font-size: 10px; }.service-detail div small { color: var(--muted); font-size: 9px; }.service-detail > strong { font-size: 11px; }
.order-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 23px; padding: 14px 3px; }.order-total span { font-size: 10px; }.order-total strong { font-size: 16px; }
.dynamic-order-discount { display: flex; justify-content: flex-end; align-items: center; gap: 23px; padding: 12px 3px 0; color: var(--success); font-size: 10px; }.dynamic-order-discount strong { font-size: 11px; }
.note-box { background: #f7f4ed; border-left: 3px solid var(--clay); padding: 11px 13px; border-radius: 0 8px 8px 0; }.note-box small { color: var(--clay); font-size: 8px; font-weight: 800; }.note-box p { margin-top: 5px; color: #676860; font-size: 9px; }
.timeline { display: grid; }.timeline > div { display: grid; grid-template-columns: 26px 1fr; gap: 11px; min-height: 55px; position: relative; }.timeline > div:not(:last-child):after { content: ""; position: absolute; left: 12px; top: 24px; bottom: -2px; width: 1px; background: #dddcd4; }.timeline i { width: 25px; height: 25px; border-radius: 50%; border: 2px solid #deddd6; background: white; z-index: 1; display: grid; place-items: center; }.timeline .done i { background: var(--olive); border-color: var(--olive); color: white; }.timeline .done i svg { width: 13px; }.timeline .current i { border-color: var(--olive); box-shadow: 0 0 0 4px var(--olive-soft); }.timeline .current i:after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--olive); }.timeline span { display: grid; gap: 4px; align-content: start; padding-top: 2px; }.timeline strong { font-size: 10px; }.timeline small { color: var(--muted); font-size: 8px; }
.payment-card .card-title { margin-bottom: 13px; }.payment-balance { display: grid; gap: 4px; text-align: center; padding: 12px 0; }.payment-balance small { color: var(--muted); font-size: 8px; font-weight: 750; }.payment-balance strong { font-family: Georgia, serif; font-size: 31px; font-weight: 500; }.payment-balance span { color: var(--muted); font-size: 9px; }
.payment-progress { height: 7px; background: #ebeae4; border-radius: 5px; overflow: hidden; margin: 8px 0 16px; }.payment-progress i { display: block; width: 32%; height: 100%; background: var(--warning); }
.payment-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }.payment-stats span { background: var(--canvas); border-radius: 8px; padding: 10px; display: grid; gap: 4px; }.payment-stats small { color: var(--muted); font-size: 8px; }.payment-stats strong { font-size: 10px; }.payment-card .button { margin-top: 8px; }
.documents-card h2 { margin-bottom: 11px; }.documents-card > button { width: 100%; min-height: 52px; border: 0; border-top: 1px solid var(--line); background: transparent; display: flex; align-items: center; justify-content: space-between; padding: 7px 0; }.documents-card > button > span { display: flex; align-items: center; gap: 9px; }.documents-card > button svg { width: 16px; color: var(--olive); }.documents-card > button strong { font-size: 9px; }.documents-card > button em { color: var(--olive-dark); font-size: 8px; font-style: normal; font-weight: 700; }
.history-card p { display: flex; gap: 10px; margin-bottom: 13px; }.history-card p > span:first-child { width: 31px; height: 31px; border-radius: 8px; background: var(--success-soft); color: var(--success); display: grid; place-items: center; }.history-card p svg { width: 15px; }.history-card p > span:last-child { display: grid; gap: 4px; }.history-card p strong { font-size: 9px; }.history-card p small { color: var(--muted); font-size: 8px; }
.quote-progress { display: grid; grid-template-columns: repeat(4,1fr); background: white; border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; margin-bottom: 15px; }
.quote-progress > div { display: flex; align-items: center; gap: 10px; position: relative; }.quote-progress > div:not(:last-child):after { content: ""; position: absolute; height: 2px; background: #dfded7; left: 35px; right: 8px; top: 14px; }.quote-progress i { width: 29px; height: 29px; border-radius: 50%; border: 2px solid #d9d8d0; background: white; display: grid; place-items: center; z-index: 1; flex: 0 0 auto; }.quote-progress .complete i { color: white; background: var(--olive); border-color: var(--olive); }.quote-progress .complete i svg { width: 14px; }.quote-progress .current i { border-color: var(--olive); box-shadow: 0 0 0 4px var(--olive-soft); }.quote-progress .current i:after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--olive); }.quote-progress span { display: grid; gap: 3px; z-index: 2; background: white; padding-right: 9px; }.quote-progress strong { font-size: 9px; }.quote-progress small { color: var(--muted); font-size: 8px; }
.quote-total-card { text-align: center; }.quote-total-card > small { color: var(--muted); font-size: 8px; font-weight: 750; }.quote-total-card > strong { display: block; font-family: Georgia,serif; font-size: 32px; font-weight: 500; margin: 7px 0 3px; }.quote-total-card > span { color: var(--muted); font-size: 9px; }.quote-total-card > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--line); margin-top: 17px; padding-top: 15px; text-align: left; }.quote-total-card p { display: grid; gap: 5px; background: var(--canvas); border-radius: 8px; padding: 10px; }.quote-total-card p small { color: var(--muted); font-size: 7px; }.quote-total-card p strong { font-size: 9px; }
.approval-card { text-align: center; }.approval-icon { width: 43px; height: 43px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--olive-soft); color: var(--olive); }.approval-card p { color: var(--muted); font-size: 9px; line-height: 1.5; margin: 7px 9px 14px; }.approval-card .button { margin-top: 8px; }.quote-history { display: grid; gap: 13px; }.quote-history p { display: flex; align-items: center; gap: 10px; }.quote-history i { width: 31px; height: 31px; border-radius: 8px; background: var(--olive-soft); color: var(--olive); display: grid; place-items: center; }.quote-history i svg { width: 15px; }.quote-history span { display: grid; gap: 4px; }.quote-history strong { font-size: 9px; }.quote-history small { color: var(--muted); font-size: 8px; }
.approval-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 13px 0 7px; }.approval-summary span { display: grid; gap: 4px; background: var(--cream); border-radius: 9px; padding: 11px; }.approval-summary small { color: var(--muted); font-size: 7px; }.approval-summary strong { font-size: 11px; }.approval-note { background: var(--olive-soft); color: var(--olive-dark) !important; border-radius: 8px; padding: 10px; line-height: 1.45; margin-top: 14px !important; }

.category-tabs { background: white; border: 1px solid var(--line); border-radius: 11px; padding: 10px; margin-bottom: 12px; }
.service-catalog { display: grid; gap: 9px; }
.service-catalog article { background: white; border: 1px solid var(--line); border-radius: 11px; min-height: 93px; padding: 14px 17px; display: grid; grid-template-columns: 42px minmax(230px,1fr) 130px 110px 60px 30px; gap: 14px; align-items: center; }
.service-symbol { width: 39px; height: 39px; border-radius: 10px; display: grid; place-items: center; background: var(--olive-soft); color: var(--olive-dark); font-size: 18px; }.service-catalog article > div { display: grid; gap: 4px; }.service-catalog article > div small { color: var(--olive); font-size: 7px; font-weight: 800; letter-spacing: .07em; }.service-catalog h3 { font-size: 11px; }.service-catalog p { color: var(--muted); font-size: 9px; }.service-meta { display: grid; gap: 5px; }.service-meta small { color: var(--muted); font-size: 7px; }.service-meta strong { font-size: 10px; }.active-badge { color: var(--success); background: var(--success-soft); border-radius: 12px; padding: 5px 8px; font-size: 8px; text-align: center; }.service-catalog article > button { border: 0; background: transparent; color: #888; }
.list-count { color: var(--muted); font-size: 10px; }
.client-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; margin-top: 12px; }.client-grid article { background: white; border: 1px solid var(--line); border-radius: 11px; padding: 16px; display: flex; align-items: center; gap: 12px; }.client-grid article > div { flex: 1; display: grid; gap: 4px; }.client-grid h3 { font-size: 11px; }.client-grid p { color: var(--muted); font-size: 9px; }.client-grid article > div span { color: #90918a; font-size: 8px; }.client-grid article > strong { font-size: 11px; color: var(--clay); display: grid; text-align: right; gap: 3px; }.client-grid article > strong small { color: var(--muted); font-size: 7px; font-weight: 500; }.client-grid article > strong.settled { color: var(--success); }
.finance-hero { display: grid; grid-template-columns: repeat(4, 1fr); background: #343633; color: white; border-radius: 13px; margin-bottom: 14px; overflow: hidden; }.finance-hero > div { min-height: 120px; padding: 21px; border-right: 1px solid rgba(255,255,255,.09); display: grid; align-content: center; gap: 6px; }.finance-hero > div:last-child { border: 0; }.finance-hero small { color: #aeb0aa; font-size: 8px; font-weight: 750; }.finance-hero strong { font-family: Georgia, serif; font-size: 25px; font-weight: 500; }.finance-hero span { color: #bdc0b8; font-size: 9px; }.payment-method { background: var(--olive-soft); color: var(--olive-dark); padding: 5px 8px; border-radius: 12px; font-size: 8px; }
.finance-scope { display: flex; align-items: center; gap: 8px; margin: -12px 0 14px; color: var(--muted); font-size: 9px; }.finance-scope svg { width: 15px; color: var(--olive); }.finance-scope strong { color: var(--olive-dark); }.finance-scope span::after { content: '·'; margin-left: 8px; }

/* MEI commissions */
.period-selector { display: grid; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 800; }.period-selector select { min-width: 190px; border: 1px solid var(--line); background: white; border-radius: 9px; padding: 10px 12px; color: var(--ink); }
.commission-rule { display: flex; align-items: center; gap: 14px; background: var(--olive-soft); border: 1px solid #dfe3c6; border-radius: 12px; padding: 15px 18px; margin-bottom: 14px; }.commission-rule strong { display: block; color: var(--olive-dark); font-size: 11px; }.commission-rule p { color: #676b48; font-size: 9px; line-height: 1.55; margin-top: 4px; }
.commission-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }.commission-summary-grid article { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }.commission-summary-grid article.highlight { background: #343633; color: white; border-color: #343633; }.commission-summary-grid small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .06em; }.commission-summary-grid .highlight small, .commission-summary-grid .highlight p { color: #bec1b6; }.commission-summary-grid strong { display: block; font-family: Georgia, serif; font-size: 24px; font-weight: 500; margin: 6px 0; }.commission-summary-grid p { color: var(--muted); font-size: 9px; }
.commission-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .75fr); gap: 14px; align-items: start; }.commission-panel, .pending-commission { overflow: hidden; }.commission-table-head, .commission-person { display: grid; grid-template-columns: minmax(190px, 1.5fr) 60px 110px 80px 105px; gap: 10px; align-items: center; padding: 12px 18px; }.commission-table-head { background: var(--cream); color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .04em; }.commission-person { border-top: 1px solid var(--line); min-height: 74px; font-size: 10px; }.commission-person > span { display: flex; align-items: center; gap: 10px; }.commission-person .avatar { display: grid; place-items: center; font-style: normal; }.commission-person b, .commission-person small { display: block; }.commission-person small { color: var(--muted); font-size: 8px; font-weight: 500; margin-top: 3px; }.commission-person em { justify-self: start; background: var(--olive-soft); color: var(--olive-dark); border-radius: 15px; padding: 5px 9px; font-style: normal; font-size: 9px; font-weight: 800; }
.pending-commission { padding-bottom: 15px; }.pending-commission-list { padding: 0 16px 14px; }.pending-commission-list article { padding: 13px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }.pending-commission-list span, .pending-commission-list strong, .pending-commission-list small { display: block; }.pending-commission-list strong { font-size: 10px; }.pending-commission-list small { color: var(--muted); font-size: 8px; margin-top: 3px; }.pending-commission-list b, .pending-commission-list em { font-size: 8px; font-style: normal; color: var(--clay); }.pending-commission-list em { color: var(--muted); }.pending-commission-list article.settled { margin: 8px -8px 0; padding: 12px 8px; border-radius: 8px; background: var(--success-soft); }.pending-commission-list article.settled b, .pending-commission-list article.settled em { color: var(--success); }.pending-commission > .button { width: calc(100% - 32px); margin: 0 16px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(25,27,25,.6); display: none; place-items: center; padding: 20px; backdrop-filter: blur(3px); }.modal-backdrop.open { display: grid; }.modal { width: min(440px, 100%); background: white; border-radius: 16px; padding: 28px; box-shadow: 0 28px 70px rgba(0,0,0,.23); position: relative; animation: modalIn .22s ease; }.modal > p { color: var(--muted); font-size: 10px; margin: 5px 0 18px; }.modal h2 { font-size: 20px; }.modal-icon { width: 43px; height: 43px; border-radius: 11px; background: var(--olive-soft); color: var(--olive); display: grid; place-items: center; margin-bottom: 15px; }.modal-close { position: absolute; top: 15px; right: 15px; border: 0; background: transparent; color: #888; }.modal-close svg { width: 18px; }.modal .field { margin-top: 13px; }.balance-callout { background: var(--cream); border-radius: 10px; padding: 13px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }.balance-callout span { font-size: 10px; }.balance-callout strong { font-size: 17px; }.currency-input { display: flex; align-items: center; border: 1px solid #dddcd4; border-radius: 8px; overflow: hidden; }.currency-input span { padding: 0 10px; color: var(--muted); font-size: 10px; }.currency-input input { border: 0; border-left: 1px solid #eee; border-radius: 0; }.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* Users and access */
.user-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-bottom: 16px; }
.user-summary-grid article { background: #fff; border: 1px solid var(--line); border-radius: 12px; min-height: 100px; padding: 20px; display: flex; align-items: center; gap: 15px; }
.summary-icon { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; display: grid; place-items: center; }
.summary-icon svg { width: 21px; height: 21px; }
.summary-icon.olive { color: var(--olive); background: var(--olive-soft); }.summary-icon.clay { color: var(--clay); background: #f7e9df; }.summary-icon.sand { color: #8a6927; background: #f8f0d7; }
.user-summary-grid small, .role-cell small { display: block; font-size: 9px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.user-summary-grid strong { display: block; font-family: Georgia, serif; font-size: 22px; margin: 3px 0; }.user-summary-grid p { color: var(--muted); font-size: 10px; }
.access-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.users-panel, .permission-panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.users-toolbar { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px; margin: 0; }
.users-toolbar .search-box { max-width: 330px; }.users-toolbar .filter-pills { margin-left: auto; }
.user-list { padding: 0 16px; }.team-user { display: grid; grid-template-columns: auto minmax(170px, 1fr) 130px auto 30px; gap: 13px; align-items: center; min-height: 84px; border-bottom: 1px solid #efeee8; }
.team-user:last-child { border: 0; }.team-user-info h3 { font-size: 12px; }.team-user-info p { font-size: 10px; color: #555; margin-top: 3px; }.team-user-info span { display: block; font-size: 9px; color: var(--muted); margin-top: 4px; }
.role-cell strong { font-size: 10px; display: block; margin-top: 5px; }.inactive-badge { color: #777; background: #efefeb; border-radius: 20px; padding: 5px 9px; font-size: 9px; font-weight: 800; }.muted-user { opacity: .67; }
.icon-more { border: 0; background: transparent; color: var(--muted); font-size: 15px; padding: 6px; }.admin-avatar { background: #e7ead4; color: var(--olive); }.finance-avatar { background: #e3edf0; color: #46666c; }
.permission-panel { padding: 22px; }.permission-icon { width: 42px; height: 42px; border-radius: 11px; background: var(--olive-soft); color: var(--olive); display: grid; place-items: center; }.permission-icon svg { width: 21px; }.permission-panel h2 { font-size: 17px; margin: 14px 0 5px; }.permission-panel > p { color: var(--muted); font-size: 10px; line-height: 1.6; margin-bottom: 15px; }
.role-list { display: grid; gap: 7px; margin-bottom: 17px; }.role-list button { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 11px; display: flex; align-items: center; justify-content: space-between; text-align: left; }.role-list button.active { border-color: var(--olive); background: var(--olive-soft); }.role-list strong, .role-list small { display: block; }.role-list strong { font-size: 10px; }.role-list small { font-size: 8px; color: var(--muted); margin-top: 3px; }.role-list b { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #f0efe9; font-size: 9px; }.role-list button.active b { background: var(--olive); color: #fff; }
.user-modal { width: min(570px, 100%); }.switch-row { margin-top: 15px; border: 1px solid var(--line); border-radius: 9px; padding: 12px; display: flex; align-items: center; justify-content: space-between; position: relative; }.switch-row strong, .switch-row small { display: block; }.switch-row strong { font-size: 10px; }.switch-row small { color: var(--muted); font-size: 8px; margin-top: 3px; }.switch-row input { opacity: 0; position: absolute; }.switch-row i { width: 38px; height: 21px; border-radius: 20px; background: #ccc; position: relative; }.switch-row i::after { content: ''; position: absolute; width: 15px; height: 15px; background: white; border-radius: 50%; top: 3px; left: 3px; transition: .2s; }.switch-row input:checked + i { background: var(--olive); }.switch-row input:checked + i::after { left: 20px; }
.permissions-modal { width: min(520px, 100%); }.permission-checks { display: grid; gap: 8px; }.permission-checks label { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 9px; padding: 12px; }.permission-checks strong, .permission-checks small { display: block; }.permission-checks strong { font-size: 10px; }.permission-checks small { font-size: 8px; color: var(--muted); margin-top: 3px; }.permission-checks input { accent-color: var(--olive); width: 16px; height: 16px; }
.toast { position: fixed; z-index: 100; bottom: 24px; left: 50%; transform: translate(-50%, 30px); background: #292b29; color: white; min-height: 47px; max-width: min(430px, calc(100vw - 30px)); padding: 10px 16px; border-radius: 10px; box-shadow: 0 14px 35px rgba(0,0,0,.22); display: flex; align-items: center; gap: 9px; opacity: 0; pointer-events: none; transition: .25s ease; font-size: 10px; }.toast.show { opacity: 1; transform: translate(-50%,0); }.toast svg { width: 17px; color: #cbd99c; }
.mobile-overlay { display: none; }
.hidden { display: none !important; }

@media (max-width: 1180px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .progress-panel { display: grid; grid-template-columns: 1fr 1fr; }.progress-panel .panel-header { grid-column: 1 / -1; }.capacity { align-self: center; }
  .top-search { width: 190px; }
  .service-item { grid-template-columns: 18px 1fr 1fr 58px 80px 30px; }
  .order-card { grid-template-columns: 72px minmax(190px,1fr) 110px 100px 90px 14px; gap: 9px; }
}
@media (max-width: 970px) {
  .commission-layout { grid-template-columns: 1fr; }.commission-summary-grid { grid-template-columns: 1fr 1fr; }
  .access-layout { grid-template-columns: 1fr; }.permission-panel { order: -1; }.user-summary-grid { grid-template-columns: 1fr 1fr; }
  .login-screen { grid-template-columns: minmax(340px,.85fr) minmax(390px,1fr); }.login-visual { padding: 34px; }.login-copy h1 { font-size: 44px; }.login-visual-footer { left: 34px; right: 34px; }.sewing-scene { opacity: .65; transform: translateX(110px); }
  .sidebar { transform: translateX(-105%); transition: .25s ease; box-shadow: 20px 0 50px rgba(0,0,0,.2); }.sidebar.open { transform: none; }.main-content { margin-left: 0; }.menu-button, .close-sidebar { display: grid; }.sidebar .close-sidebar { position: absolute; right: 6px; top: 25px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #e8e6dc; box-shadow: none; }.sidebar .close-sidebar:hover { background: rgba(255,255,255,.14); }.sidebar .close-sidebar svg { width: 16px; height: 16px; }.mobile-overlay { position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.35); }.mobile-overlay.open { display: block; }
  .topbar { padding: 0 20px; justify-content: flex-start; gap: 13px; }.store-switcher { min-width: 0; flex: 1; }.top-search { display: none; }.today { display: none; }
  .form-layout, .detail-grid { grid-template-columns: 1fr; }.quote-summary { order: -1; }.summary-sticky { position: static; }.summary-lines { grid-template-columns: repeat(2,1fr); }.summary-total { justify-content: flex-start; gap: 20px; }.summary-sticky .button { width: auto; }.summary-hint { text-align: left; }
  .order-card { grid-template-columns: 70px 1fr 100px 16px; }.order-assignee { display: none; }.order-finance { display: none; }
  .service-catalog article { grid-template-columns: 42px 1fr 120px 60px 25px; }.service-catalog .service-meta:nth-of-type(2) { display: none; }
}
@media (max-width: 720px) {
  .commission-summary-grid { grid-template-columns: 1fr; }.commission-table { overflow-x: auto; }.commission-table-head, .commission-person { min-width: 650px; }.period-selector { width: 100%; }.period-selector select { width: 100%; }
  .quote-store-bar { grid-template-columns: 32px 1fr; }.quote-store-bar p { grid-column: 1 / -1; }
  .user-summary-grid { grid-template-columns: 1fr; }.team-user { grid-template-columns: auto 1fr auto; padding: 13px 0; }.team-user .role-cell { grid-column: 2; }.team-user > .active-badge, .team-user > .inactive-badge { grid-column: 3; grid-row: 1; }.team-user .icon-more { grid-column: 3; grid-row: 2; }.users-toolbar { align-items: stretch; }.users-toolbar .filter-pills { margin-left: 0; overflow-x: auto; }
  .login-screen { display: block; min-height: 100vh; }.login-visual { display: none; }.login-form-side { min-height: 100vh; padding: 35px 24px 22px; }.login-form-wrap { margin: auto; }.login-mobile-logo { display: block; width: 210px; height: 105px; border-radius: 12px; position: relative; margin: 0 auto 42px; padding: 8px; background: #30322d; }.login-mobile-logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 7px 9px rgba(0,0,0,.24)); }.login-footer { margin-top: auto; }
  .view { padding: 24px 15px 50px; }.topbar { height: 65px; }.store-switcher select { max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-heading, .page-heading.compact { align-items: flex-start; flex-direction: column; }.page-heading .button { width: 100%; }.attention-strip .text-button { display: none; }
  .metrics-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.metric-card { min-height: 113px; grid-template-columns: 36px 1fr; padding: 13px; }.metric-icon { width: 36px; height: 36px; }.metric-card .go { display: none; }.metric-card strong { font-size: 25px; }.metric-card strong.money { font-size: 18px; }
  .schedule-row { grid-template-columns: 43px 3px 1fr 14px; gap: 8px; padding: 10px; }.schedule-row .status-chip, .schedule-row .payment-note { display: none; }
  .progress-panel { display: block; }.capacity { margin-top: 6px; }.quick-grid { grid-template-columns: 1fr; }
  .list-toolbar { flex-direction: column; align-items: stretch; }.search-box { min-width: 0; max-width: none; }.filter-pills { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }.filter-pills button { white-space: nowrap; }.toolbar-selects { display: none; }
  .field-grid.two { grid-template-columns: 1fr; }.service-item { grid-template-columns: 18px 1fr 31px; }.service-item label:nth-of-type(2) { grid-column: 2 / 3; }.service-item label.short, .service-item label.price { grid-column: 2 / 3; }.service-item .remove-item { grid-column: 3; grid-row: 1; }.service-item .drag { grid-row: 1 / 5; }.summary-lines { grid-template-columns: 1fr; }
  .orders-summary { grid-template-columns: repeat(5, 110px); overflow-x: auto; }.order-card { grid-template-columns: 65px 1fr 14px; }.order-card > .status-chip { display: none; }
  .detail-top { flex-wrap: wrap; }.detail-actions { width: 100%; flex-wrap: wrap; }.detail-actions .button { flex: 1; }.info-grid { grid-template-columns: 1fr 1fr; }
  .quote-progress { grid-template-columns: 1fr; gap: 12px; }.quote-progress > div:not(:last-child):after { width: 2px; height: 22px; left: 13px; right: auto; top: 24px; }.quote-progress span { padding-right: 0; }
  .service-catalog article { grid-template-columns: 38px 1fr 24px; }.service-catalog .service-meta, .active-badge { display: none; }
  .client-grid, .finance-hero { grid-template-columns: 1fr; }.finance-hero > div { min-height: 92px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09); }.client-grid article > strong { display: none; }
}
@media (max-width: 450px) {
  .metrics-grid { grid-template-columns: 1fr; }.metric-card { min-height: 94px; }.store-switcher small { display: none; }.store-switcher select { max-width: 150px; }.notification { display: none; }.progress-ring-wrap { gap: 17px; }.form-card, .detail-card { padding: 17px; }.modal { padding: 23px 18px; }.modal-actions .button { flex: 1; }
}

#userModal:target, #permissionsModal:target { display: grid; }
.button:is(a) { text-decoration: none; }


/* Manager dashboard */
.manager-heading { margin-bottom: 16px; }.heading-actions { display: flex; gap: 9px; }
.manager-filter { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 12px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.period-tabs { display: flex; gap: 4px; background: #f2f1eb; border-radius: 9px; padding: 4px; }.period-tabs button { border: 0; background: transparent; color: var(--muted); min-height: 31px; padding: 0 13px; border-radius: 7px; font-size: 9px; font-weight: 800; }.period-tabs button.active { background: #fff; color: var(--olive-dark); box-shadow: 0 2px 8px rgba(36,39,34,.08); }
.custom-period { display: flex; gap: 8px; align-items: end; }.custom-period label { display: grid; gap: 3px; color: var(--muted); font-size: 8px; font-weight: 800; }.custom-period input { border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; font: inherit; color: var(--ink); }.custom-period .button { min-height: 32px; }
.report-context { margin-left: auto; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 7px; }.report-context .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); grid-row: 1 / 3; }.report-context strong { font-size: 9px; }.report-context small { color: var(--muted); font-size: 8px; }
.manager-kpis { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }.manager-kpi { min-height: 130px; background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 18px; position: relative; display: flex; flex-direction: column; justify-content: center; }.manager-kpi.featured { background: #343633; border-color: #343633; color: #fff; }.manager-kpi small { color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .07em; }.manager-kpi.featured small, .manager-kpi.featured p { color: #bec1b8; }.manager-kpi > strong, .manager-kpi.featured > div > strong { display: block; font: 500 27px Georgia,serif; margin: 7px 0 5px; }.manager-kpi p { color: var(--muted); font-size: 9px; }.kpi-icon { position: absolute; right: 17px; top: 17px; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.1); display: grid; place-items: center; }.kpi-icon svg { width: 18px; }.kpi-trend { align-self: flex-start; margin-top: 10px; border-radius: 12px; padding: 4px 8px; font-size: 8px; font-style: normal; font-weight: 750; }.kpi-trend.warning { background: #fbf0d7; color: #8d6212; }.kpi-trend.positive { background: var(--success-soft); color: var(--success); }.kpi-trend.neutral { background: #efefec; color: #6d6e68; }
.cash-breakdown { margin-bottom: 14px; overflow: hidden; }.cash-global { color: var(--muted); font-size: 9px; }.cash-global b { color: var(--ink); font: 500 20px Georgia,serif; margin-left: 6px; }.payment-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }.payment-grid article { padding: 16px 18px; display: flex; align-items: center; gap: 12px; border-right: 1px solid var(--line); }.payment-grid article:last-child { border: 0; }.payment-symbol { width: 39px; height: 39px; flex: 0 0 39px; border-radius: 10px; display: grid; place-items: center; font-size: 9px; font-weight: 900; }.payment-symbol.pix { background: #dcf1eb; color: #28755e; }.payment-symbol.money { background: #e8edd4; color: var(--olive-dark); }.payment-symbol.debit { background: #e1ecf2; color: #39657a; }.payment-symbol.credit { background: #f6e5dc; color: #9b5736; }.payment-grid small, .payment-grid strong, .payment-grid p { display: block; }.payment-grid small { color: var(--muted); font-size: 7px; font-weight: 850; }.payment-grid strong { font-size: 15px; margin: 3px 0; }.payment-grid p { color: var(--muted); font-size: 8px; }
.manager-main-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(285px,.75fr); gap: 14px; margin-bottom: 14px; }.revenue-panel, .production-panel { overflow: hidden; }.report-badge { background: var(--olive-soft); color: var(--olive-dark); padding: 6px 9px; border-radius: 15px; font-size: 8px; font-weight: 800; }
.unit-comparison { padding: 0 18px; }.unit-comparison article { min-height: 53px; display: grid; grid-template-columns: minmax(180px,1.3fr) minmax(130px,1fr) 90px 35px; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }.unit-comparison article > div:first-child { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; }.unit-comparison strong { font-size: 9px; }.unit-comparison small { grid-column: 2; color: var(--muted); font-size: 8px; margin-top: 2px; }.unit-marker { width: 7px; height: 26px; border-radius: 5px; grid-row: 1/3; }.unit-marker.alpha { background: var(--olive); }.unit-marker.amazonas { background: var(--clay); }.unit-bar { height: 7px; border-radius: 8px; background: #efeee8; overflow: hidden; }.unit-bar i { height: 100%; display: block; background: var(--olive); border-radius: inherit; }.unit-comparison article:nth-child(2) .unit-bar i { background: var(--clay); }.unit-comparison b { font-size: 11px; text-align: right; }.unit-comparison em { color: var(--muted); font-size: 8px; font-style: normal; text-align: right; }
.revenue-chart { min-height: 185px; padding: 22px 18px 16px; display: flex; align-items: end; gap: 8px; }.chart-column { height: 150px; flex: 1; min-width: 28px; display: grid; grid-template-rows: 1fr auto auto; gap: 4px; text-align: center; }.chart-column > span { display: flex; align-items: end; height: 100%; background: linear-gradient(to top,#f6f5ef 1px,transparent 1px); background-size: 100% 25%; border-bottom: 1px solid #e6e4da; }.chart-column i { width: min(28px,72%); margin: 0 auto; background: linear-gradient(180deg,#91994a,#727a31); border-radius: 5px 5px 1px 1px; min-height: 0; }.chart-column strong { font-size: 8px; }.chart-column small { color: var(--muted); font-size: 7px; white-space: nowrap; }
.production-summary { padding: 0 16px; }.production-summary button { width: 100%; min-height: 60px; border: 0; border-bottom: 1px solid var(--line); background: transparent; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; text-align: left; }.prod-dot { width: 9px; height: 34px; border-radius: 5px; }.prod-dot.late { background: #c7544d; }.prod-dot.doing { background: #c39135; }.prod-dot.ready { background: var(--olive); }.prod-dot.delivered { background: var(--success); }.production-summary strong, .production-summary small { display: block; }.production-summary strong { font: 500 18px Georgia,serif; }.production-summary small { color: var(--muted); font-size: 8px; }.production-summary em { color: var(--muted); font-size: 8px; font-style: normal; }.production-summary button:first-child em { color: #a33d38; font-weight: 800; }.production-alert { margin: 14px; padding: 12px; border-radius: 9px; background: #fbf0df; display: flex; gap: 10px; color: #865d20; }.production-alert svg { width: 17px; }.production-alert strong, .production-alert small { display: block; }.production-alert strong { font-size: 9px; }.production-alert small { font-size: 8px; margin-top: 3px; }
.activity-panel { overflow: hidden; margin-bottom: 12px; }.activity-table-wrap { overflow-x: auto; }.manager-table { min-width: 980px; }.activity-status { border-radius: 13px; padding: 5px 8px; background: #f0f1e9; color: var(--olive-dark); font-size: 8px; font-weight: 800; }.empty-state { text-align: center; color: var(--muted); padding: 35px; }.manager-footnote { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 8px; padding: 4px 2px; }.manager-footnote svg { width: 16px; color: var(--olive); }
@media (max-width: 1180px) { .manager-kpis { grid-template-columns: repeat(2,1fr); }.payment-grid { grid-template-columns: repeat(2,1fr); }.payment-grid article:nth-child(2) { border-right: 0; }.payment-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.manager-main-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .heading-actions { width: 100%; }.heading-actions .button { flex: 1; }.manager-filter { align-items: stretch; }.period-tabs { width: 100%; overflow-x: auto; }.period-tabs button { flex: 0 0 auto; }.report-context { margin-left: 0; }.custom-period { width: 100%; flex-wrap: wrap; }.manager-kpis { grid-template-columns: 1fr 1fr; }.manager-kpi { min-height: 120px; padding: 14px; }.manager-kpi > strong, .manager-kpi.featured > div > strong { font-size: 21px; }.payment-grid { grid-template-columns: 1fr; }.payment-grid article { border-right: 0; border-bottom: 1px solid var(--line); }.unit-comparison article { grid-template-columns: 1fr 80px; }.unit-comparison .unit-bar, .unit-comparison em { display: none; }.revenue-chart { overflow-x: auto; }.chart-column { flex: 0 0 48px; }.manager-footnote { align-items: flex-start; } }
@media (max-width: 450px) { .manager-kpis { grid-template-columns: 1fr; }.heading-actions { flex-direction: column; }.cash-global { display: none; } }


/* Detailed MEI statement */
.mei-heading .heading-actions { align-items: end; }.mei-profile { padding: 16px 18px; margin-bottom: 14px; display: grid; grid-template-columns: minmax(240px,1fr) minmax(300px,1.2fr) auto; align-items: center; gap: 18px; }.mei-identity { display: flex; align-items: center; gap: 12px; }.mei-identity .avatar { width: 48px; height: 48px; font-size: 12px; }.mei-identity small { color: var(--muted); font-size: 7px; font-weight: 850; letter-spacing: .08em; }.mei-identity h2 { font-size: 15px; margin: 3px 0; }.mei-identity p { color: var(--muted); font-size: 8px; }.mei-rule { display: flex; align-items: center; gap: 10px; border-left: 1px solid var(--line); padding-left: 18px; }.mei-rule svg { width: 22px; color: var(--olive); }.mei-rule strong,.mei-rule small { display: block; }.mei-rule strong { font-size: 9px; }.mei-rule small { color: var(--muted); font-size: 8px; margin-top: 3px; line-height: 1.45; }
.mei-summary-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 11px; margin-bottom: 14px; }.mei-summary-grid article { min-height: 112px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; justify-content: center; }.mei-summary-grid small { color: var(--muted); font-size: 7px; font-weight: 850; letter-spacing: .06em; }.mei-summary-grid strong { font: 500 21px Georgia,serif; margin: 6px 0; }.mei-summary-grid p { color: var(--muted); font-size: 8px; }.mei-summary-grid .advance-card strong { color: var(--clay); }.mei-summary-grid .highlight { background: #343633; border-color: #343633; color: #fff; }.mei-summary-grid .highlight small,.mei-summary-grid .highlight p { color: #bfc2ba; }.mei-summary-grid .negative-balance { background: #70443a; border-color: #70443a; }
.mei-layout { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(280px,.65fr); gap: 14px; align-items: start; }.mei-detail-panel { overflow: hidden; }.mei-section-title { display: flex; align-items: center; gap: 10px; padding: 14px 18px 10px; }.mei-section-title.pending,.mei-section-title.advances { border-top: 1px solid var(--line); margin-top: 6px; }.mei-section-title strong,.mei-section-title small { display: block; }.mei-section-title strong { font-size: 10px; }.mei-section-title small { color: var(--muted); font-size: 8px; margin-top: 3px; }.calc-number { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 900; }.calc-number.positive { background: var(--success-soft); color: var(--success); }.calc-number.pending { background: #fbf0d7; color: #9a6d18; }.calc-number.negative { background: #f7e7df; color: var(--clay); }.mei-detail-table { min-width: 790px; }.mei-detail-table th { height: 35px; }.mei-detail-table td { padding: 12px 14px; font-size: 9px; }.mei-detail-table td small { display: block; color: var(--muted); font-size: 7px; margin-top: 3px; }
.mei-side { display: grid; gap: 12px; }.settlement-card,.mei-status-card { overflow: hidden; }.settlement-equation { padding: 16px; display: grid; gap: 9px; }.settlement-equation > span { display: flex; justify-content: space-between; align-items: center; }.settlement-equation small { color: var(--muted); font-size: 8px; }.settlement-equation strong { font-size: 12px; }.settlement-equation > b { color: #aaa; font-size: 12px; padding-left: 4px; }.settlement-result { background: #343633; color: #fff; border-radius: 9px; padding: 13px; }.settlement-result small { color: #bfc2ba; }.settlement-result strong { font: 500 20px Georgia,serif; }.settlement-note { display: flex; gap: 7px; color: var(--muted); font-size: 8px; line-height: 1.4; padding: 0 16px 14px; }.settlement-note svg { width: 14px; flex: 0 0 14px; }.settlement-card > .button { width: calc(100% - 32px); margin: 0 16px 16px; }.mei-status-card ol { list-style: none; padding: 0 16px 16px; }.mei-status-card li { display: flex; gap: 10px; min-height: 47px; position: relative; }.mei-status-card li:not(:last-child)::after { content:''; position:absolute; left:11px; top:25px; width:1px; height:22px; background:var(--line); }.mei-status-card li i { width:23px; height:23px; border-radius:50%; background:#efefeb; display:grid; place-items:center; font-size:8px; font-style:normal; font-weight:800; z-index:1; }.mei-status-card li.active i { background:var(--olive); color:#fff; }.mei-status-card strong,.mei-status-card small { display:block; }.mei-status-card strong { font-size:9px; }.mei-status-card small { color:var(--muted); font-size:7px; margin-top:3px; }.mei-transparency { display:flex; gap:10px; padding:14px; border-radius:11px; background:var(--olive-soft); color:var(--olive-dark); }.mei-transparency svg { width:18px; flex:0 0 18px; }.mei-transparency strong,.mei-transparency small { display:block; }.mei-transparency strong { font-size:9px; }.mei-transparency small { font-size:8px; line-height:1.45; margin-top:3px; }
.advance-modal { width:min(610px,100%); }.advance-context { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:9px; overflow:hidden; margin-bottom:12px; }.advance-context span { background:var(--cream); padding:11px 13px; }.advance-context small,.advance-context strong { display:block; }.advance-context small { color:var(--muted); font-size:7px; font-weight:850; }.advance-context strong { font-size:10px; margin-top:4px; }
@media (max-width:1180px){.mei-summary-grid{grid-template-columns:repeat(3,1fr)}.mei-profile{grid-template-columns:1fr 1fr}.mei-profile>.button{grid-column:1/-1;justify-self:start}.mei-layout{grid-template-columns:1fr}.mei-side{grid-template-columns:1fr 1fr}.mei-transparency{grid-column:1/-1}}
@media (max-width:720px){.mei-heading .heading-actions{flex-direction:column;align-items:stretch}.mei-profile{grid-template-columns:1fr}.mei-rule{border-left:0;border-top:1px solid var(--line);padding:13px 0 0}.mei-profile>.button{width:100%}.mei-summary-grid{grid-template-columns:1fr 1fr}.mei-side{grid-template-columns:1fr}.mei-transparency{grid-column:auto}.advance-context,.advance-modal .field-grid.two{grid-template-columns:1fr}}
@media (max-width:450px){.mei-summary-grid{grid-template-columns:1fr}}

.unit-data-note { display:flex; align-items:center; gap:10px; margin:-10px 0 10px; color:var(--muted); }.unit-data-note .store-dot { position:static; flex:0 0 auto; }.unit-data-note strong,.unit-data-note small { display:block; }.unit-data-note strong { color:var(--ink); font-size:10px; }.unit-data-note small { font-size:8px; margin-top:2px; }.unit-hidden,.search-hidden,.status-hidden { display:none !important; }

/* Commission exceptions and temporary daily workers */
.no-commission-badge { color:#8a5a22; background:#fbf0d7; border-radius:12px; padding:5px 7px; font-size:7px; font-weight:800; text-align:center; white-space:nowrap; }
.mei-summary-grid { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); }
.mei-summary-grid .excluded-card strong { color:#8a5a22; }
.mei-summary-grid .temporary-card strong { color:#51677a; }
.mei-section-title.excluded,.mei-section-title.temporary { border-top:1px solid var(--line); margin-top:6px; }
.calc-number.excluded { background:#fbf0d7; color:#8a5a22; }
.calc-number.temporary { background:#e6eef3; color:#51677a; font-size:8px; }
.payment-grid { grid-template-columns:repeat(5,1fr); }
.payment-symbol.pending { background:#efefeb; color:#6c6e68; }
@media (max-width:1180px){.payment-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.payment-grid{grid-template-columns:1fr}}

/* Guided presentation flow */
.nav-group-label { color:#85877f; font-size:7px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; padding:8px 13px 0; }
.main-nav { gap:3px; }
.nav-item { min-height:42px; }
.workflow-shortcuts { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin:0 0 14px; }
.workflow-shortcuts button { border:1px solid var(--line); background:#fff; border-radius:12px; padding:14px 16px; display:grid; grid-template-columns:32px 1fr 18px; align-items:center; gap:11px; text-align:left; color:var(--ink); transition:.2s ease; }
.workflow-shortcuts button:hover { border-color:#c8cc9d; transform:translateY(-1px); box-shadow:0 8px 22px rgba(40,42,37,.06); }
.workflow-shortcuts svg { width:16px; color:var(--olive); }
.workflow-step { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--olive-soft); color:var(--olive-dark); font-weight:850; }
.workflow-shortcuts small,.workflow-shortcuts strong,.workflow-shortcuts em { display:block; }
.workflow-shortcuts small { color:var(--olive); font-size:7px; font-weight:850; letter-spacing:.08em; }
.workflow-shortcuts strong { font-size:11px; margin:3px 0; }
.workflow-shortcuts em { color:var(--muted); font-size:8px; font-style:normal; line-height:1.35; }
@media (max-width:900px){.workflow-shortcuts{grid-template-columns:1fr}.nav-group-label{padding-top:6px}}
.provider-filters { display:flex; flex-wrap:wrap; align-items:end; gap:14px; padding:18px; margin-bottom:18px; }
.provider-filters .field { min-width:160px; flex:1; }
.provider-ledger { margin-top:20px; padding-bottom:18px; }
.provider-ledger > p { margin:14px 20px; color:var(--muted); font-size:12px; }
#view-my-production .mei-summary-grid { margin:20px 0; }
.sidebar { height:100dvh; overflow:hidden; }
.sidebar > .brand, .sidebar-bottom { flex-shrink:0; }
.sidebar .main-nav { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:3px 5px 10px 0; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#85877a #303130; }
.sidebar .main-nav > * { flex-shrink:0; }
.sidebar .main-nav::-webkit-scrollbar { width:6px; }
.sidebar .main-nav::-webkit-scrollbar-thumb { background:#85877a; border-radius:8px; }
.sidebar-bottom { margin-top:12px; }
@media (max-height:800px) {
  .sidebar { padding-top:14px; padding-bottom:12px; }
  .sidebar .brand { margin-bottom:16px; }
  .sidebar .brand-crop { height:65px; }
  .sidebar .support-card { padding:10px 12px; }
  .sidebar .support-card > span, .sidebar .support-card > strong { display:none; }
  .sidebar .support-card button { margin-top:0; }
  .sidebar-bottom { gap:8px; }
}
.login-visual .sewing-scene { display:none; }
.login-visual .login-copy { margin-top:auto; padding-bottom:70px; }
.login-video-stage { position:relative; margin:24px 0 30px; border-radius:18px; overflow:hidden; background:#d9d6c7; border:1px solid rgba(255,255,255,.15); box-shadow:0 18px 40px rgba(0,0,0,.18); }
.login-video-stage video { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; }
.login-video-stage button { position:absolute; right:12px; bottom:12px; border:1px solid rgba(255,255,255,.5); border-radius:20px; background:rgba(38,40,32,.78); color:white; padding:7px 12px; font-size:10px; }
.login-visual .login-copy h1 { font-size:clamp(30px,3.3vw,48px); }
.entry-loader { position:fixed; inset:0; z-index:120; display:grid; place-items:center; background:rgba(246,245,240,.94); }
.entry-loader.hidden { display:none; }
.entry-loader-card { display:grid; justify-items:center; gap:10px; color:var(--olive-dark); font-size:14px; }
.entry-loader svg { width:160px; height:65px; }
.loader-thread { stroke:var(--clay); stroke-width:2; stroke-dasharray:190; animation:thread-stitch 1.4s ease-in-out infinite; }
.loader-needle { stroke:var(--olive); stroke-width:2; animation:needle-stitch .7s ease-in-out infinite alternate; }
@keyframes thread-stitch { from { stroke-dashoffset:190; } to { stroke-dashoffset:0; } }
@keyframes needle-stitch { from { transform:translateY(-3px); } to { transform:translateY(3px); } }
@media (max-height:740px) and (min-width:721px) { .login-visual { padding-top:24px; }.login-visual .login-brand-crop { width:190px;height:80px; }.login-video-stage { margin:12px 0 20px; }.login-visual .login-copy { padding-bottom:60px; }.login-visual .login-copy h1 { font-size:32px; }.login-visual .login-copy p { margin-top:12px;font-size:12px; } }
@media (prefers-reduced-motion:reduce) { .loader-thread,.loader-needle { animation:none; } }
@media (max-height:660px) and (min-width:721px) { .login-video-stage { max-width:350px; margin:10px auto 16px; }.login-visual .login-copy h1 { font-size:28px; }.login-visual .login-copy { padding-bottom:54px; } }
.login-video-stage { aspect-ratio:16 / 9; background:#d9d6c7 url('assets/ponto-a-ponto-bordado-poster.png') 0 0 / 850% auto; }
.login-video-stage video { position:absolute; top:0; left:0; width:100%; height:auto; aspect-ratio:16 / 9; transition:transform .7s ease; }
.login-video-stage.is-finished video { transform:translateY(-9%); }
.login-video-stage::after { content:""; position:absolute; right:0; bottom:0; width:12%; height:25%; background-image:url('assets/ponto-a-ponto-bordado-poster.png'); background-size:850% auto; background-position:0 0; filter:blur(2px); pointer-events:none; }
.login-video-stage button { z-index:2; }
@media (min-width:971px) {
  .sidebar .close-sidebar { display:grid; color:var(--olive-dark); }
  .app-shell.sidebar-collapsed .sidebar { transform:translateX(-105%); visibility:hidden; }
  .app-shell.sidebar-collapsed .main-content { margin-left:0; }
  .app-shell.sidebar-collapsed .menu-button { display:grid; }
}
#cancellationModal .modal { max-height:calc(100dvh - 40px); overflow-y:auto; }
#cancellationModal input[type="checkbox"] { width:auto; }
.document-print-format{display:grid;gap:6px;margin:12px 0 16px;font-size:11px;color:var(--muted)}.document-print-format select{width:100%;min-height:38px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);padding:8px;font-size:12px}
.provider-mode-tabs{display:flex;gap:8px;margin:0 0 18px}.provider-mode-tabs button{padding:12px 22px;border:1px solid var(--line);border-radius:9px;background:#fff;font-weight:700;color:var(--muted)}.provider-mode-tabs button.active{background:var(--olive);color:#fff;border-color:var(--olive)}

.manager-cash-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 18px}.manager-cash-summary article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}.manager-cash-summary small{display:block;font-weight:800;color:var(--muted);font-size:11px}.manager-cash-summary strong{display:block;font:32px Georgia,serif;margin:12px 0}.manager-cash-summary p{font-size:12px;color:var(--muted);margin:0}.manager-cash-summary .featured{border:2px solid var(--olive)}.manager-cash-summary .cash-negative{color:#b34839}@media(max-width:750px){.manager-cash-summary{grid-template-columns:1fr}.manager-cash-summary article{padding:18px}}

.manager-operation{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:18px}.manager-operation article{padding:16px;background:#fff;border:1px solid var(--line);border-radius:12px}.manager-operation strong{display:block;font-size:26px;color:var(--olive)}.manager-operation span{display:block;font-size:12px;margin-top:7px}@media(max-width:1100px){.manager-operation{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:650px){.manager-operation{grid-template-columns:repeat(2,minmax(0,1fr))}}
.manager-cash-summary{grid-template-columns:repeat(4,minmax(0,1fr))}.manager-cash-summary strong{font-size:28px}@media(max-width:1150px){.manager-cash-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.manager-cash-summary{grid-template-columns:1fr}}
.statement-panel{padding:22px}.statement-totals{margin-top:20px}.statement-table{min-width:850px;width:100%;border-collapse:collapse}.statement-table th,.statement-table td{padding:15px;border-bottom:1px solid var(--line);text-align:left}.statement-table small{display:block;margin-top:5px;color:var(--muted)}.statement-table .cash-in{color:#27735b;font-weight:700;white-space:nowrap}.statement-table .cash-out{color:#b34839;font-weight:700;white-space:nowrap}
.logout-button{width:100%;padding:10px;border:1px solid #61635c;border-radius:8px;background:transparent;color:#f3f0df;font-weight:700;flex-shrink:0}.logout-button:hover{background:#44463e}
.garment-categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.garment-categories[hidden]{display:none}.garment-categories button{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 16px;text-align:center;color:var(--text);display:flex;align-items:center;flex-direction:column;gap:12px}.garment-categories button:hover{border-color:var(--olive);background:#f0f1e4}.garment-categories svg{width:64px;height:64px;color:var(--olive)}.garment-categories strong{font-size:16px}.garment-categories small,.garment-services small{color:var(--muted)}.garment-detail{padding:22px}.garment-services article{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}.garment-services article>div{flex:1}.garment-services small{display:block;margin-top:6px}.garment-field{min-width:140px}.service-item{flex-wrap:wrap}.catalog-price-note{display:block;font-size:11px;color:var(--muted);max-width:160px;margin-top:4px}@media(max-width:750px){.garment-categories{grid-template-columns:repeat(2,minmax(0,1fr))}.garment-services article{flex-wrap:wrap}.garment-services article>div{flex-basis:100%}}
.service-item:has(.garment-select){grid-template-columns:20px minmax(140px,1fr) minmax(110px,1fr) 60px 100px 31px}.service-item:has(.garment-select) .garment-field{grid-column:2/6;grid-row:1}.service-item:has(.garment-select) .drag{grid-row:1/3}.service-item:has(.garment-select) label:nth-of-type(2){grid-column:2;grid-row:2}.service-item:has(.garment-select) label:nth-of-type(3){grid-column:3;grid-row:2}.service-item:has(.garment-select) .short{grid-column:4;grid-row:2}.service-item:has(.garment-select) .price{grid-column:5;grid-row:2}.service-item:has(.garment-select) .remove-item{grid-column:6;grid-row:2}@media(max-width:850px){.service-item:has(.garment-select){grid-template-columns:18px minmax(0,1fr) 70px 90px 31px}.service-item:has(.garment-select) .garment-field{grid-column:2/5}.service-item:has(.garment-select) label:nth-of-type(2){grid-column:2/5}.service-item:has(.garment-select) label:nth-of-type(3){grid-column:2;grid-row:3}.service-item:has(.garment-select) .short{grid-column:3;grid-row:3}.service-item:has(.garment-select) .price{grid-column:4;grid-row:3}.service-item:has(.garment-select) .remove-item{grid-column:5;grid-row:2}}
.gold-icon-frame{width:120px;height:130px;border-radius:16px;background:radial-gradient(ellipse at 50% 30%,#292922,#10110e 75%);display:grid;place-items:center;border:1px solid #a8873a66;box-shadow:0 8px 20px #00000018}.garment-categories .gold-icon-frame svg{width:93px;height:105px;filter:drop-shadow(0 2px 3px #0006)}.gold-icon-frame .cut{fill:none;stroke:#151610;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.gold-icon-frame .dark{fill:#151610;stroke:none}.garment-categories button:hover .gold-icon-frame{border-color:#e5c36d;box-shadow:0 5px 22px #a8873a35}
.gold-icon-frame.reference-icon{width:150px;height:170px;background:#000;border-color:#ad8a4566;padding:12px}.garment-categories .reference-icon svg{width:100%;height:100%;filter:none}.reference-icon img{width:100%;height:100%;object-fit:contain}.garment-categories button{padding-top:22px;padding-bottom:22px}
@media(min-width:900px){#view-services .page-heading{margin-bottom:18px}#view-services .garment-categories{height:var(--catalog-height,calc(100dvh - 280px));grid-template-rows:repeat(3,minmax(0,1fr));gap:12px}#view-services .garment-categories button{display:grid;grid-template-columns:minmax(60px,32%) minmax(0,1fr);grid-template-rows:1fr 1fr;column-gap:14px;row-gap:4px;padding:12px 16px;text-align:left;min-height:0}#view-services .garment-categories .gold-icon-frame{grid-row:1/3;width:100%;height:100%;max-height:145px;min-height:0;padding:8px;justify-self:center}#view-services .garment-categories svg{width:100%;height:100%;max-height:130px}#view-services .garment-categories strong{align-self:end;font-size:14px;line-height:1.3}#view-services .garment-categories small{align-self:start;font-size:11px}}@media(min-width:900px) and (max-height:700px){#view-services .page-heading h1{font-size:30px}#view-services .page-heading p{font-size:12px}#view-services .garment-categories button{padding:8px 12px;column-gap:10px}#view-services .garment-categories strong{font-size:12px}}
.service-manager-modal{width:min(1050px,94vw);max-height:88dvh;overflow-y:auto}.catalog-management-row{display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.catalog-management-row>div{flex:1;min-width:140px}.catalog-management-row small{display:block;color:var(--muted);margin-top:5px}.catalog-management-row .button{padding:0 10px;min-height:36px}.catalog-management-row button:disabled{opacity:.4;cursor:not-allowed}#catalogHistory p{padding:12px;border-bottom:1px solid var(--line);line-height:1.6}#manageServices[hidden]{display:none!important}@media(max-width:750px){.catalog-management-row{flex-wrap:wrap}.catalog-management-row>div{flex-basis:70%}}

/* Os avisos de preço não deslocam os campos da linha. */
.service-item:has(.garment-select){align-items:start}.service-item .catalog-price-note:empty{display:none}