@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --navy: #142c3d;
  --navy-deep: #0f2231;
  --navy-mid: #234154;
  --ink: #1d3340;
  --muted: #788996;
  --line: #e5ebef;
  --canvas: #f4f7f8;
  --white: #fff;
  --green: #218571;
  --green-dark: #136551;
  --green-pale: #e8f5ef;
  --amber: #c78638;
  --amber-pale: #fff4e1;
  --red: #cb625e;
  --red-pale: #fceceb;
  --blue: #477db2;
  --blue-pale: #eaf1fc;
  --purple: #8776ba;
  --shadow: 0 10px 35px rgba(29, 55, 72, .045);
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  color: var(--ink);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); min-width: 320px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .54; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #75cbb2; outline-offset: 2px; }
::selection { background: #b8e8d9; }

.shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 258px; z-index: 30;
  background: linear-gradient(155deg, #19374b, #0f2534 76%);
  color: #dce7ed; display: flex; flex-direction: column; padding: 27px 15px 18px;
  box-shadow: 4px 0 25px rgba(12, 36, 50, .06);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 6px 14px 35px; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(145deg, #4bb6a0, #1f7d70); color: white;
  display: grid; place-items: center; box-shadow: 0 9px 22px #073d3b44;
}
.brand-copy { line-height: 1.14; }
.brand-copy strong { display: block; color: white; font-family: Manrope, sans-serif; font-size: 19px; letter-spacing: -.7px; }
.brand-copy strong span { color: #79d4b9; }
.brand-copy small { color: #91adb9; font-size: 10px; letter-spacing: 1.25px; text-transform: uppercase; }
.nav-section { color: #71909f; padding: 14px 15px 10px; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; }
.nav-link { border: 0; background: transparent; display: flex; gap: 13px; align-items: center; width: 100%; text-align: left; border-radius: 11px; color: #b8cbd4; font-weight: 600; font-size: 13.5px; padding: 12px 14px; transition: .15s ease; margin: 2px 0; }
.nav-link:hover { background: #ffffff11; color: white; }
.nav-link.active { background: #2a786c61; color: #f5fffb; box-shadow: inset 3px 0 #5bcaae; }
.nav-link svg { width: 19px; height: 19px; stroke-width: 1.8; flex-shrink: 0; }
.nav-link .nav-badge { margin-left: auto; min-width: 22px; padding: 3px 6px; color: #85dfc1; background: #3687793b; border-radius: 6px; font-size: 10px; text-align: center; }
.sidebar-bottom { margin-top: auto; }
.sidebar-help { margin: 20px 8px 14px; border: 1px solid #ffffff16; border-radius: 14px; padding: 17px; background: #ffffff0c; }
.sidebar-help .eyebrow { color: #9ce0c5; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.sidebar-help strong { display: block; color: #fff; font-size: 14px; margin: 6px 0; }
.sidebar-help p { color: #a5bbc5; margin: 0 0 14px; font-size: 11.5px; line-height: 1.55; }
.sidebar-help button { width: 100%; background: #ffffff14; border: 1px solid #ffffff23; color: #ecfcf5; border-radius: 9px; padding: 9px; font-weight: 700; font-size: 11.5px; }
.sidebar-help button:hover { background: #ffffff26; }
.sidebar-foot { padding: 10px 15px 0; color: #7695a2; font-size: 10px; }
.main { margin-left: 258px; min-height: 100vh; }
.topbar { height: 79px; background: #fff; border-bottom: 1px solid var(--line); padding: 0 38px; display: flex; justify-content: space-between; align-items: center; gap: 25px; }
.top-left { display: flex; align-items: center; gap: 15px; }
.top-crumb { color: #8a9aa4; font-size: 12px; }
.top-crumb strong { color: var(--ink); font-weight: 800; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.search-global { width: 238px; position: relative; display: flex; align-items: center; }
.search-global svg { position: absolute; left: 12px; color: #8a9eaa; pointer-events: none; }
.search-global input { width: 100%; border: 1px solid #e9edf0; background: #f8fafb; border-radius: 9px; padding: 10px 10px 10px 37px; outline: 0; font-size: 12px; }
.search-global input:focus { border-color: #76c4ad; background: #fff; }
.icon-button { border: 1px solid var(--line); background: white; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #617884; }
.icon-button:hover { color: var(--green); border-color: #b5dacd; }
.user-mini { display: flex; align-items: center; gap: 10px; border-left: 1px solid var(--line); padding-left: 17px; }
.avatar { background: #e0f0ea; color: #237c67; border-radius: 50%; display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; font-weight: 800; font-size: 12px; letter-spacing: .2px; }
.user-mini strong { display: block; font-size: 12px; }
.user-mini small { color: var(--muted); display: block; font-size: 10px; margin-top: 2px; }
.menu-toggle { display: none; }
.content { padding: 31px 38px 50px; max-width: 1600px; margin: auto; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 27px; }
.eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: 1.7px; text-transform: uppercase; color: var(--green); }
h1,h2,h3,h4,p { margin-top: 0; }
h1,h2,h3,h4 { font-family: Manrope, 'Segoe UI', sans-serif; }
h1 { margin: 5px 0 5px; font-size: clamp(24px, 2.1vw, 30px); font-weight: 800; letter-spacing: -1.25px; }
h2 { margin-bottom: 0; font-size: 17px; letter-spacing: -.45px; font-weight: 800; }
h3 { font-size: 14px; font-weight: 800; letter-spacing: -.2px; margin-bottom: 6px; }
.subhead { margin: 0; font-size: 12.5px; color: #8696a1; line-height: 1.5; }
.page-actions, .row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; border: 1px solid transparent; padding: 11px 17px; font-weight: 800; font-size: 12px; transition: .15s ease; white-space: nowrap; line-height: 1.2; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--green); color: white; box-shadow: 0 5px 13px #1b806d1c; }
.btn-primary:hover { background: var(--green-dark); transform: translateY(-1px); }
.btn-outline { background: white; color: #3c5664; border-color: #dfe7eb; }
.btn-outline:hover { border-color: #9fcdbf; color: var(--green); }
.btn-soft { background: var(--green-pale); color: var(--green-dark); }
.btn-soft:hover { background: #d3ebdf; }
.btn-plain { background: transparent; color: #56717f; padding: 8px 10px; }
.btn-danger { background: var(--red-pale); color: #bb4c49; }
.btn-sm { padding: 8px 12px; border-radius: 8px; font-size: 11px; }
.text-button { border: none; background: none; color: var(--green); font-weight: 800; font-size: 12px; padding: 0; }
.text-button:hover { text-decoration: underline; }
.panel { background: white; border: 1px solid #e8edf0; border-radius: 17px; box-shadow: var(--shadow); min-width: 0; }
.panel-pad { padding: 23px; }
.panel-head { padding: 22px 23px 17px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panel-head p { margin: 5px 0 0; font-size: 11px; color: #8d9ba5; }
.panel-head .right { display: flex; align-items: center; gap: 10px; }
.panel-divider { border-top: 1px solid var(--line); }

.welcome-banner { position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(110deg, #183d4c, #216858 95%); color: #fff; padding: 30px 35px; min-height: 164px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.welcome-banner:before { content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%; border: 48px solid #ffffff0b; right: -65px; top: -155px; }
.welcome-banner:after { content: ''; position: absolute; height: 230px; width: 230px; border-radius: 50%; border: 1px solid #ffffff24; right: 135px; top: 30px; }
.welcome-banner .eyebrow { color: #91e0bf; }
.welcome-banner h2 { font-size: 24px; letter-spacing: -.8px; margin: 8px 0; }
.welcome-banner p { font-size: 12px; max-width: 390px; line-height: 1.65; color: #d0e9e6; margin-bottom: 0; }
.banner-art { position: relative; display: flex; align-items: center; justify-content: center; z-index: 1; flex-shrink: 0; margin-right: 50px; width: 140px; height: 115px; }
.banner-art .art-circle { background: #ffffff14; border: 1px solid #ffffff20; width: 116px; height: 116px; display: grid; place-items: center; border-radius: 26px; transform: rotate(-8deg); }
.banner-art .art-circle svg { width: 60px; height: 60px; color: #b4f3d7; transform: rotate(8deg); }
.banner-art .art-badge { position: absolute; bottom: -2px; right: -6px; background: #ebaf6c; color: #2d433f; font-size: 10px; font-weight: 800; border-radius: 9px; padding: 9px 11px; box-shadow: 0 12px 22px #0002; }
.stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 21px; }
.stat-card { background: white; border: 1px solid #e9eef0; border-radius: 16px; padding: 21px; box-shadow: var(--shadow); display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.stat-icon { height: 43px; width: 43px; border-radius: 12px; flex: 0 0 43px; display: grid; place-items: center; }
.stat-icon.green { color: #237f65; background: #eaf6ef; }
.stat-icon.amber { color: #c98738; background: #fff3de; }
.stat-icon.blue { color: #467db4; background: #e9f1fc; }
.stat-icon.purple { color: #8376b2; background: #f1eefa; }
.stat-copy { flex: 1; min-width: 0; }
.stat-copy span { display: block; color: #83929c; font-size: 11px; margin-bottom: 9px; }
.stat-copy strong { font-family: Manrope,sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.9px; line-height: 1; color: #203747; display: block; white-space: nowrap; }
.stat-copy small { display: block; color: #7b9f90; font-size: 10px; margin-top: 9px; line-height: 1.4; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(270px,1fr); gap: 19px; margin-bottom: 19px; }
.dashboard-bottom { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); gap: 19px; }
.mini-list { padding: 0 22px 17px; }
.mini-row { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding: 14px 0; }
.mini-row:first-child { border-top: none; }
.mini-icon { height: 38px; width: 38px; display: grid; place-items: center; border-radius: 11px; background: #eff5f5; color: #50727b; flex-shrink: 0; }
.mini-row .grow { flex: 1; min-width: 0; }
.mini-row strong { font-size: 11.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-row small { display: block; color: #8d9fa9; font-size: 10px; margin-top: 5px; }
.mini-row time { color: #5f7887; font-size: 11px; font-weight: 700; }
.activity-time { min-width: 58px; text-align: right; }
.chart-wrap { padding: 0 24px 23px; }
.bar-chart { min-height: 190px; display: flex; align-items: end; gap: 15px; border-bottom: 1px solid #dbe5e8; padding-top: 12px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: end; height: 170px; gap: 9px; min-width: 0; }
.bar { width: min(39px,68%); border-radius: 7px 7px 0 0; background: linear-gradient(180deg, #69bd9f, #218571); min-height: 3px; position: relative; transition: .2s ease; }
.bar:hover { filter: brightness(.94); }
.bar-col:last-child .bar { background: linear-gradient(180deg, #e8b273, #c98a49); }
.bar-col small { height: 15px; color: #8e9da6; font-size: 10px; font-weight: 700; }
.chart-foot { padding-top: 17px; display: flex; align-items: center; justify-content: space-between; }
.chart-foot strong { font-size: 18px; font-family: Manrope,sans-serif; }
.chart-foot small { color: var(--muted); font-size: 10.5px; }
.indicator { color: #1f8d72; font-size: 11px; font-weight: 800; background: #ebf6ef; border-radius: 20px; padding: 6px 9px; }

.table-scroll { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { background: #f9fbfc; color: #8a9ca7; text-transform: uppercase; letter-spacing: .7px; font-size: 10px; font-weight: 800; padding: 13px 18px; white-space: nowrap; }
td { border-top: 1px solid #edf1f2; padding: 15px 18px; font-size: 12px; white-space: nowrap; vertical-align: middle; }
td small, .table-sub { display: block; font-size: 10.5px; color: #8a9aa3; margin-top: 4px; font-weight: 500; }
.table-title { color: #274251; font-weight: 800; font-size: 12px; }
.table-title:hover { color: var(--green); }
.vehicle-cell { display: flex; align-items: center; gap: 10px; }
.vehicle-icon { background: #ecf3f5; color: #537686; height: 36px; width: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 7px; font-weight: 800; font-size: 10px; white-space: nowrap; }
.badge:before { content:''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.recebido { color: #6d7f96; background: #edf1f6; }
.badge.diagnostico { color: #4e7dac; background: #e9f2fd; }
.badge.aguardando_aprovacao { color: #c18839; background: #fff2df; }
.badge.em_execucao { color: #277f68; background: #e5f5ed; }
.badge.pronto { color: #6e69ac; background: #eeebfb; }
.badge.entregue { color: #6e8290; background: #edf2f3; }
.badge.warning { color: #be6453; background: #fff0eb; }
.table-action { border: none; background: #f3f7f8; color: #66808d; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.table-action:hover { color: var(--green); background: var(--green-pale); }
.table-footer { display: flex; align-items: center; justify-content: space-between; color: #8295a0; padding: 14px 22px; border-top: 1px solid var(--line); font-size: 11px; gap: 12px; }
.toolbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; padding: 17px 20px; }
.filter-input { border: 1px solid #e2e9ed; border-radius: 9px; min-width: 220px; outline: 0; height: 39px; padding: 9px 13px; font-size: 12px; background: #fff; color: var(--ink); }
.filter-input:focus { border-color: #71c5a8; }
select.filter-input { min-width: 165px; }
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tabs { display: flex; align-items: center; gap: 4px; padding: 4px; background: #eff3f4; border-radius: 10px; width: max-content; }
.tab { background: transparent; border: 0; padding: 9px 13px; border-radius: 8px; color: #7a8e99; font-size: 11px; font-weight: 800; }
.tab.active { background: white; color: var(--green); box-shadow: 0 3px 10px #1f344910; }
.empty-state { min-height: 235px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 38px 20px; color: #8b9ca6; }
.empty-state svg { width: 37px; height: 37px; color: #9cbcb7; margin-bottom: 12px; }
.empty-state h3 { color: #324b5b; font-size: 14px; margin-bottom: 5px; }
.empty-state p { font-size: 11.5px; max-width: 280px; line-height: 1.5; margin: 0; }

.kanban-board { display: grid; grid-template-columns: repeat(5,minmax(210px,1fr)); gap: 13px; overflow-x: auto; align-items: start; padding: 3px 2px 17px; }
.kanban-col { background: #eaf0f1; border: 1px solid #e4ebed; border-radius: 14px; padding: 12px; min-height: 390px; }
.kanban-col.over { outline: 2px dashed var(--green); outline-offset: -5px; background: #e0f0e8; }
.kanban-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 3px 15px; }
.kanban-header strong { font-size: 11px; color: #516b79; }
.kanban-header span { font-size: 10px; border-radius: 7px; background: white; padding: 4px 7px; font-weight: 800; color: #8b9aa5; }
.kanban-card { background: white; box-shadow: 0 3px 13px #1b42500d; border: 1px solid #e1e8eb; padding: 14px; border-radius: 11px; margin-bottom: 11px; cursor: grab; }
.kanban-card:active { cursor: grabbing; }
.kanban-card:hover { border-color: #a4cdc0; }
.kanban-card .id { color: #8ca1ab; font-size: 10px; font-weight: 800; }
.kanban-card strong { font-size: 12px; display: block; margin: 8px 0 4px; line-height: 1.3; }
.kanban-card p { margin: 0 0 10px; color: #81929f; font-size: 10px; line-height: 1.45; }
.kanban-card .card-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid #edf0f1; color: #7d929e; font-size: 10px; }
.priority-dot { width: 7px; height: 7px; display: inline-block; background: var(--amber); border-radius: 50%; margin-right: 5px; }
.priority-dot.alta { background: var(--red); }
.priority-dot.baixa { background: var(--green); }
.kanban-tip { color: #82949f; font-size: 11px; padding: 4px 2px 0; }

.customer-layout { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.customer-card { background: white; border: 1px solid var(--line); border-radius: 15px; padding: 19px; box-shadow: var(--shadow); min-width: 0; }
.customer-card:hover { border-color: #bad9ce; }
.customer-head { display: flex; gap: 11px; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.customer-head .avatar { width: 42px; height: 42px; }
.customer-head .grow { flex:1; min-width: 0; }
.customer-head strong { font-size: 13px; font-weight: 800; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-head small { display: block; color: #8b9da7; font-size: 10.5px; margin-top: 5px; }
.customer-metrics { display: flex; gap: 12px; margin: 15px 0 17px; }
.customer-metrics .metric { flex:1; }
.customer-metrics small { color: #95a4ae; font-size: 10px; display: block; margin-bottom: 5px; }
.customer-metrics strong { display: block; font-size: 12px; }
.car-chip { display: flex; align-items: center; gap: 9px; background: #f5f8f8; border-radius: 10px; padding: 10px; margin: 7px 0; font-size: 11px; color: #466273; }
.car-chip .grow { flex: 1; min-width:0; }
.car-chip strong { display: block; color: #284251; }
.car-chip small { color: #8b9ca7; font-size: 10px; }
.customer-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 17px; align-items: center; }
.info-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.info-box { background: #f6f9f9; border-radius: 11px; padding: 14px; min-width: 0; }
.info-box small { display: block; font-size: 10px; color: #8496a1; margin-bottom: 7px; }
.info-box strong { display: block; font-size: 12px; overflow-wrap: anywhere; }

.appointment-list { padding: 4px 22px 22px; }
.appointment { display: flex; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--line); align-items: center; }
.appointment:last-child { border-bottom: 0; }
.appointment-date { display:flex; flex-direction:column; align-items: center; justify-content: center; background: #eaf3ef; color: var(--green-dark); min-width: 54px; height: 58px; border-radius: 10px; }
.appointment-date strong { font-family: Manrope,sans-serif; font-size: 21px; line-height: 1; }
.appointment-date small { font-weight: 800; font-size: 9px; text-transform: uppercase; margin-top: 5px; }
.appointment-info { flex: 1; }
.appointment-info h3 { margin-bottom: 4px; font-size: 12px; }
.appointment-info p { font-size: 11px; color: #8d9ea8; margin-bottom: 5px; }
.appointment-info span { font-size: 10px; color: #577486; }
.appointment-time { color: #446779; font-size: 11px; font-weight: 800; background: #f0f5f6; border-radius: 7px; padding: 7px 10px; }
.agenda-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(270px,.8fr); gap: 20px; }
.agenda-note { border-radius: 15px; padding: 23px; background: linear-gradient(135deg, #e3f0e9, #e8f3f4); color: #2e685b; border: 1px solid #d4e7df; }
.agenda-note p { font-size: 12px; line-height: 1.7; margin: 10px 0 0; }

.finance-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(270px,.65fr); gap: 19px; margin-bottom: 19px; }
.finance-summary { padding: 24px; background: #f3faf5; border-radius: 12px; margin: 0 20px 20px; border: 1px solid #e1f0e5; }
.finance-summary small { color: #6b9481; font-size: 11px; }
.finance-summary strong { display: block; color: #267761; font-size: 28px; letter-spacing: -1px; font-family: Manrope,sans-serif; margin: 9px 0; }
.finance-summary p { font-size: 11px; color: #749387; margin: 0; }
.finance-key { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding:15px 0; font-size:11px; color:#667e8b; }
.finance-key strong { color:#243d4d; font-size:12px; }
.stock-number { font-weight: 800; font-size: 12px; }
.stock-number.low { color: var(--red); }
.inventory-top { display:flex; flex-wrap:wrap; gap:15px; margin-bottom:18px; }
.inventory-card { flex:1; min-width:210px; background:#fff; border:1px solid var(--line); border-radius:13px; padding:20px; display:flex; align-items:center; justify-content:space-between; }
.inventory-card small { display:block; font-size:11px; color:#8b9ba6; margin-bottom:8px; }
.inventory-card strong { font-size:23px; font-family: Manrope,sans-serif; }
.inventory-card svg { color:#91aaa8; }

.drawer-overlay, .modal-overlay { position: fixed; inset: 0; z-index: 45; background: #102b3b80; backdrop-filter: blur(2px); display:flex; justify-content:flex-end; }
.drawer { background:white; width: min(650px, 100%); height:100%; overflow-y:auto; box-shadow:-20px 0 40px #112a371d; animation: enterDrawer .2s ease; }
@keyframes enterDrawer { from { transform:translateX(25px); opacity:.7; } to {transform:translateX(0);opacity:1;} }
.drawer-head { display:flex; align-items:flex-start; justify-content:space-between; padding:26px 29px 20px; border-bottom:1px solid var(--line); gap:15px; }
.drawer-head h2 { font-size:23px; letter-spacing:-1px; margin:6px 0 7px; }
.drawer-body { padding:25px 29px 40px; }
.drawer-section { padding:22px 0; border-bottom:1px solid var(--line); }
.drawer-section:first-child { padding-top:0; }
.drawer-section:last-child { border-bottom:0; }
.drawer-section h3 { margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; }
.drawer-section h3 small { font-weight:500; color:#8c9ea8; font-family:'DM Sans',sans-serif; }
.detail-vehicle { display:flex; align-items:center; gap:16px; padding:19px; border:1px solid #dfebe9; background:linear-gradient(90deg,#f4faf7,#f9fbfc); border-radius:13px; margin-bottom:18px; }
.detail-vehicle .vehicle-icon { width:56px; height:56px; border-radius:14px; background:#dfefe8; color:#1d806a; }
.detail-vehicle h3 { font-size:16px; margin:0 0 5px; }
.detail-vehicle p { font-size:11px; color:#77919d; margin:0; }
.detail-vehicle .plate { margin-left:auto; border:1px solid #bed2db; border-radius:6px; background:#fff; padding:8px; color:#395769; font-weight:800; font-size:11px; }
.detail-total { background:#eaf6ef; color:#2b7560; border-radius:12px; padding:17px 19px; display:flex; align-items:center; justify-content:space-between; gap:15px; margin:17px 0; }
.detail-total small { font-size:11px; display:block; margin-bottom:5px; }
.detail-total strong { font-family: Manrope,sans-serif; font-size:21px; }
.detail-items { width:100%; }
.detail-items td { white-space:normal; padding:11px 8px; }
.detail-items th { padding:10px 8px; }
.detail-items td:last-child { text-align:right; }
.detail-items th:last-child { text-align:right; }
.timeline { position:relative; padding-left:22px; margin-left:8px; }
.timeline:before { content:''; position:absolute; left:5px; top:8px; bottom:13px; width:2px; background:#dcece7; }
.timeline-entry { position:relative; padding:0 0 19px 7px; }
.timeline-entry:last-child { padding-bottom:0; }
.timeline-entry:before { content:''; position:absolute; left:-22px; top:5px; border:3px solid #fff; box-shadow:0 0 0 2px #73bda4; background:#2e9a7e; border-radius:50%; width:9px; height:9px; }
.timeline-entry strong { display:block; font-size:11.5px; margin-bottom:5px; }
.timeline-entry p { margin:0 0 5px; font-size:11px; color:#7e929e; line-height:1.5; }
.timeline-entry time { font-size:10px; color:#a2aeb5; }
.inline-add { display:flex; gap:8px; align-items:end; flex-wrap:wrap; }
.inline-add .field { flex:1; margin-bottom:0; min-width:90px; }
.inline-add .field:nth-child(2) { max-width:80px; }
.inline-add .field:nth-child(3) { max-width:110px; }
.inline-add button { height:39px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.field { margin-bottom:16px; }
.field label { font-size:11px; color:#536c7a; display:block; font-weight:800; margin-bottom:7px; }
.field input, .field select, .field textarea { width:100%; background:#fff; border:1px solid #dce5e9; padding:11px 12px; border-radius:9px; color:#273f4e; outline:none; font-size:12px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:#54b79a; box-shadow:0 0 0 3px #54b79a18; }
.field textarea { min-height:85px; resize:vertical; }
.field small { display:block; color:#8ea0a9; margin-top:5px; font-size:10px; }
.field.span-2 { grid-column:span 2; }
.modal-overlay { z-index: 55; justify-content:center; align-items:center; padding:20px; overflow-y:auto; }
.modal { background:white; border-radius:18px; width:min(590px,100%); max-height: min(90vh,940px); overflow-y:auto; box-shadow:0 20px 70px #122c3c30; animation:modalIn .18s ease; }
@keyframes modalIn { from { transform:translateY(12px); opacity:.6; } to {transform:translateY(0);opacity:1;} }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:23px 26px; border-bottom:1px solid var(--line); }
.modal-head h2 { font-size:19px; margin:3px 0 0; }
.modal-body { padding:24px 26px 11px; }
.modal-footer { display:flex; align-items:center; justify-content:flex-end; gap:9px; padding:18px 26px; border-top:1px solid var(--line); }
.helper-text { color:#8a9ba5; font-size:11px; line-height:1.55; margin-bottom:15px; }
.modal-tip { background:#f0f8f4; border:1px solid #d7eee3; color:#52816e; border-radius:9px; font-size:11px; padding:11px 13px; margin-bottom:18px; }
.toast-layer { position:fixed; right:20px; bottom:22px; z-index:100; display:flex; flex-direction:column; gap:8px; }
.toast { background:#173e3e; color:white; padding:13px 17px; font-size:12px; border-radius:11px; box-shadow:0 10px 33px #0002; animation:modalIn .2s ease; max-width:370px; line-height:1.45; }

.portal-shell { min-height:100vh; background:#f4f8f7; }
.portal-top { background:#173747; color:white; padding:18px max(25px, calc((100vw - 1000px)/2)); display:flex; justify-content:space-between; align-items:center; gap:15px; }
.portal-logo { display:flex; align-items:center; gap:10px; font-family:Manrope,sans-serif; font-size:17px; font-weight:800; }
.portal-logo span { color:#87d9bd; }
.portal-top small { color:#a7bfcb; font-size:11px; }
.portal-main { max-width:1030px; margin:auto; padding:34px 24px 75px; }
.portal-back { background:transparent; border:0; color:#3b8d7b; padding:0; margin:0 0 21px; display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; }
.portal-greeting { margin-bottom:24px; }
.portal-greeting h1 { font-size:27px; }
.portal-greeting p { color:#8599a2; font-size:12px; line-height:1.55; margin:5px 0 0; }
.portal-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.85fr); gap:18px; }
.portal-vehicle { padding:24px; display:flex; align-items:center; gap:18px; background:linear-gradient(115deg,#1c4c50,#23846e); border-radius:15px; color:white; margin-bottom:19px; overflow:hidden; position:relative; }
.portal-vehicle:after { content:''; width:190px; height:190px; border:27px solid #ffffff11; border-radius:50%; position:absolute; right:-80px; top:-60px; }
.portal-vehicle .vehicle-icon { background:#ffffff26; color:white; width:64px; height:64px; border-radius:15px; }
.portal-vehicle h2 { font-size:19px; margin:0 0 5px; position:relative; z-index:1; }
.portal-vehicle p { font-size:11px; color:#ccece3; margin:0; position:relative; z-index:1; }
.portal-card { padding:24px; margin-bottom:18px; }
.portal-card h2 { font-size:15px; margin-bottom:17px; }
.portal-status { display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:16px; background:#f4f9f7; border-radius:10px; margin:12px 0 17px; }
.portal-status strong { display:block; font-size:12px; margin:0 0 5px; }
.portal-status small { display:block; color:#8b9ba5; font-size:10px; }
.progress-track { height:7px; border-radius:10px; background:#e5eeec; overflow:hidden; margin:21px 0 12px; }
.progress-track span { display:block; background:linear-gradient(90deg,#55bf9e,#22866d); height:100%; border-radius:10px; }
.progress-labels { display:flex; justify-content:space-between; font-size:10px; color:#92a5ad; }
.portal-meta { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:19px 0; border-top:1px solid var(--line); margin-top:19px; }
.portal-meta small { display:block; color:#8b9da5; font-size:10px; margin-bottom:7px; }
.portal-meta strong { display:block; font-size:12px; }
.portal-history-row { border-top:1px solid var(--line); padding:16px 0; }
.portal-history-row:first-of-type { border-top:0; }
.portal-history-row .top { display:flex; justify-content:space-between; gap:10px; }
.portal-history-row strong { font-size:11px; }
.portal-history-row small { font-size:10px; color:#90a0a9; }
.portal-history-row p { font-size:11px; color:#7b8f9b; line-height:1.5; margin:6px 0 0; }
.portal-total { display:flex; align-items:center; justify-content:space-between; gap:10px; background:#f5f9f6; padding:14px; margin:14px 0; border-radius:10px; }
.portal-total span { font-size:11px; color:#668a7c; }
.portal-total strong { font-size:20px; font-family:Manrope,sans-serif; color:#267660; }
.portal-disclaimer { margin-top:22px; color:#9eabb1; font-size:10.5px; line-height:1.55; text-align:center; }
.demo-label { display:inline-flex; align-items:center; background:#fff4de; color:#a5793d; font-size:10px; border-radius:6px; padding:5px 8px; font-weight:800; letter-spacing:.4px; }
.note-callout { background:#fff8eb; border:1px solid #f3e4c9; padding:12px 14px; font-size:11px; color:#937145; border-radius:10px; line-height:1.5; }
.print-only { display:none; }

@media(max-width:1350px) {
  .content { padding:28px 25px 45px; }
  .topbar { padding:0 25px; }
  .stat-card { padding:17px; gap:10px; }
  .stat-icon { width:38px; height:38px; flex-basis:38px; }
  .stat-copy strong { font-size:21px; }
  .customer-layout { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:1080px) {
  .sidebar { width:220px; }
  .main { margin-left:220px; }
  .search-global { width:190px; }
  .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-grid,.dashboard-bottom { grid-template-columns:1fr; }
  .banner-art { margin-right:16px; }
  .finance-grid { grid-template-columns:1fr; }
}
@media(max-width:800px) {
  .sidebar { transform:translateX(-102%); transition:transform .2s ease; width:265px; }
  body.nav-open .sidebar { transform:translateX(0); }
  body.nav-open:before { content:''; position:fixed; inset:0; z-index:25; background:#041b269c; }
  .main { margin-left:0; }
  .topbar { height:67px; padding:0 19px; }
  .menu-toggle { display:grid; }
  .search-global { width:200px; }
  .content { padding:23px 19px 50px; }
  .portal-grid,.agenda-grid { grid-template-columns:1fr; }
}
@media(max-width:580px) {
  .top-crumb,.user-mini span,.search-global,.top-actions>.icon-button { display:none; }
  .user-mini { padding-left:0; border-left:0; }
  .page-head { align-items:flex-start; flex-direction:column; gap:14px; }
  .page-actions { width:100%; }
  .page-actions .btn { flex:1; }
  .welcome-banner { padding:25px; min-height:175px; }
  .welcome-banner h2 { font-size:20px; }
  .welcome-banner p { max-width:260px; }
  .banner-art { display:none; }
  .stat-grid { gap:10px; }
  .stat-card { padding:14px; flex-direction:column; gap:11px; }
  .stat-copy strong { font-size:22px; }
  .stat-copy span { margin-bottom:7px; }
  .panel-head { padding:18px 17px 15px; }
  .toolbar { padding:14px; }
  .toolbar-left,.toolbar-right { width:100%; }
  .toolbar .filter-input { min-width:0; flex:1; }
  .customer-layout { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; gap:0; }
  .field.span-2 { grid-column:span 1; }
  .modal-overlay { padding:7px; }
  .modal { max-height:95vh; }
  .modal-body { padding:20px 18px 8px; }
  .modal-head,.modal-footer { padding:18px; }
  .drawer-head { padding:20px; }
  .drawer-body { padding:19px 20px 35px; }
  .inline-add { display:grid; grid-template-columns:1fr 1fr; }
  .inline-add .field { max-width:none!important; }
  .inline-add .field:first-child { grid-column:span 2; }
  .detail-vehicle { flex-wrap:wrap; }
  .portal-top { padding:15px 20px; }
  .portal-main { padding:23px 14px 50px; }
  .portal-card { padding:18px; }
  .portal-vehicle { padding:20px; }
  .portal-meta { gap:10px; }
  .portal-top small { display:none; }
}
@media print {
  @page { size:A4; margin:14mm; }
  body { background:white; }
  .sidebar,.topbar,.page-head,.toolbar,.page-actions,.modal-overlay,.toast-layer,.drawer-overlay,.no-print { display:none!important; }
  .main { margin:0; }
  .content { padding:0; }
  .panel { border:0; box-shadow:none; }
  .print-only { display:block; }
  .portal-top,.portal-back { display:none; }
  .portal-main { padding:0; }
  .portal-card { break-inside:avoid; }
}