:root {
  --ink: #262626;
  --muted: #6e6965;
  --line: #ded8d3;
  --surface: #ffffff;
  --canvas: #f6f3f1;
  --green: #d16324;
  --green-strong: #aa4c17;
  --green-soft: #fae8dd;
  --orange: #d16324;
  --graphite: #262626;
  --graphite-soft: #3a3a3a;
  --red: #b7473f;
  --shadow: 0 14px 40px rgba(38, 38, 38, 0.09);
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--canvas); }

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 0%, rgba(209, 99, 36, .11), transparent 30rem),
    var(--canvas);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
.ui-icon { width: 18px; height: 18px; flex: 0 0 auto; }

.topbar {
  min-height: 94px;
  padding: 10px clamp(18px, 3.4vw, 56px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  background: rgba(38, 38, 38, .98);
  border-bottom: 3px solid var(--orange);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 30;
}

.brand-cluster { width: 318px; min-width: 0; flex: 0 0 318px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.brand { display: flex; align-items: center; color: inherit; text-decoration: none; }
.brand-logo { width: 318px; height: 72px; display: block; object-fit: contain; object-position: left center; }
.user-panel { display: flex; align-items: center; gap: 12px; }
.user-panel form { margin: 0; }
.main-nav { display: flex; align-items: center; justify-content: flex-start; gap: 5px; margin: 0 auto 0 18px; }
.main-nav a { padding: 10px 12px; color: #ddd; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: color .15s, background .15s; }
.main-nav a:hover { color: #fff; background: rgba(209, 99, 36, .18); }
.mobile-menu-toggle { width: 42px; height: 42px; padding: 10px; display: none; place-content: center; gap: 5px; color: white; background: #414141; border: 1px solid #555; border-radius: 10px; cursor: pointer; }
.mobile-menu-toggle span { width: 20px; height: 2px; display: block; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu-dialog { width: min(430px, calc(100% - 24px)); max-width: none; max-height: min(760px, calc(100dvh - 24px)); padding: 0; overflow: hidden; color: var(--ink); background: transparent; border: 0; border-radius: 20px; box-shadow: 0 28px 80px rgba(0, 0, 0, .34); }
.mobile-menu-dialog::backdrop { background: rgba(18, 18, 18, .72); backdrop-filter: blur(5px); }
.mobile-menu-dialog[open] { animation: mobile-menu-in .2s ease-out; }
.mobile-menu-panel { max-height: min(760px, calc(100dvh - 24px)); display: flex; flex-direction: column; overflow-y: auto; background: #f7f4f2; border: 1px solid rgba(255, 255, 255, .24); border-radius: inherit; }
.mobile-menu-header { padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: white; background: var(--graphite); border-bottom: 3px solid var(--orange); }
.mobile-menu-header h2 { margin: 4px 0 0; font-size: 24px; }
.mobile-menu-close { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; color: white; background: #414141; border: 1px solid #555; border-radius: 11px; cursor: pointer; }
.mobile-menu-close:hover, .mobile-menu-toggle:hover { background: #4b4b4b; border-color: #737373; }
.mobile-menu-user { margin: 16px 16px 8px; padding: 13px 14px; display: flex; align-items: center; gap: 11px; background: white; border: 1px solid var(--line); border-radius: 13px; }
.mobile-menu-user > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; color: white; background: var(--orange); border-radius: 11px; font-size: 15px; font-weight: 850; text-transform: uppercase; }
.mobile-menu-user strong, .mobile-menu-user small { display: block; }
.mobile-menu-user strong { font-size: 14px; }
.mobile-menu-user small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.mobile-menu-nav { padding: 8px 16px 14px; display: grid; gap: 7px; }
.mobile-menu-nav a { min-height: 50px; padding: 10px 13px; display: flex; align-items: center; gap: 12px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 11px; font-size: 15px; font-weight: 800; text-decoration: none; }
.mobile-menu-nav a:hover { color: var(--orange); border-color: #dfaf92; background: #fff9f5; }
.mobile-menu-nav a span { width: 29px; color: #aa9f98; font-size: 11px; letter-spacing: .06em; }
.mobile-menu-actions { padding: 14px 16px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #eee9e5; border-top: 1px solid #ddd5cf; }
.mobile-menu-actions a, .mobile-menu-actions button { width: 100%; min-height: 44px; padding: 9px 11px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #4c4642; background: white; border: 1px solid #d7d0ca; border-radius: 10px; font-size: 13px; font-weight: 750; text-decoration: none; cursor: pointer; }
.mobile-menu-actions form { margin: 0; }
.mobile-menu-actions b { min-width: 20px; height: 20px; display: grid; place-items: center; color: white; background: var(--orange); border-radius: 20px; font-size: 11px; }
.mobile-menu-actions form:last-child { grid-column: 1 / -1; }
body.mobile-menu-open { overflow: hidden; }
@keyframes mobile-menu-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.notification-button { width: 34px; height: 34px; display: grid; place-items: center; position: relative; color: white; background: #414141; border-radius: 9px; text-decoration: none; }
.notification-button > span { min-width: 19px; height: 19px; padding: 0 4px; display: grid; place-items: center; position: absolute; top: -7px; right: -7px; color: white; background: var(--orange); border: 2px solid var(--graphite); border-radius: 20px; font-size: 12px; font-weight: 850; }
.user-copy { text-align: right; line-height: 1.25; }
.user-copy strong, .user-copy small { display: block; }
.user-copy strong { color: #fff; font-size: 14px; }
.user-copy small { color: #bcbcbc; font-size: 12px; }

.page-shell { width: min(1800px, 100%); margin: 0 auto; padding: 34px clamp(16px, 3.4vw, 56px) 56px; flex: 1 0 auto; }
.site-footer { min-height: 68px; padding: 18px clamp(18px, 3.4vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #c7c7c7; background: var(--graphite); border-top: 3px solid var(--orange); font-size: 13px; }
.site-footer span:first-child { color: #fff; font-weight: 750; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 24px; }
.page-heading h1 { margin: 7px 0 8px; font-size: clamp(30px, 3vw, 46px); line-height: 1.05; letter-spacing: -.045em; }
.page-heading p { max-width: 680px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.eyebrow { color: var(--green); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.eyebrow-with-icon { display: inline-flex; align-items: center; gap: 7px; }
.eyebrow-with-icon .ui-icon { width: 16px; height: 16px; }
.heading-summary { min-width: 150px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: var(--muted); font-size: 14px; line-height: 1.35; }
.summary-symbol { width: 40px; height: 40px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 12px; }
.summary-symbol svg { width: 23px; height: 23px; }
.pdm-icon { display: block; object-fit: contain; }
.pdm-icon-summary { width: 32px; height: 22px; }
.pdm-icon-inline { width: 25px; height: 16px; }
.summary-number { color: var(--green); font-size: 42px; line-height: 1; font-weight: 750; letter-spacing: -.05em; }

.toolbar-card {
  display: grid; grid-template-columns: minmax(230px, 320px) 1px minmax(160px, 210px) minmax(280px, 1fr);
  align-items: center; gap: 26px; margin-bottom: 20px; padding: 18px 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
}
.date-picker label, .report-state small { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.date-control { display: flex; align-items: center; gap: 8px; }
.calendar-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--green); background: var(--green-soft); }
.date-control input { width: 160px; border: 0; padding: 3px 0; background: transparent; color: var(--ink); font-weight: 700; outline: 0; }
.toolbar-divider { width: 1px; height: 42px; background: var(--line); }
.status-pill { width: fit-content; display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 100px; color: #62542d; background: #f8f0d8; font-size: 14px; font-weight: 700; }
.status-pill .ui-icon { width: 14px; height: 14px; opacity: .7; }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: #d49d28; }
.status-submitted { color: #295078; background: #e7f0f8; }
.status-ktg_completed { color: #286943; background: #e3f1e8; }
.status-submitted i { background: #3b78ad; }
.status-confirmed { color: var(--green); background: var(--green-soft); }
.status-confirmed i { background: #31805b; }
.toolbar-hint { justify-self: end; display: grid; grid-template-columns: 32px auto minmax(160px, 380px); gap: 10px; align-items: center; padding-left: 18px; border-left: 3px solid var(--orange); }
.hint-icon { width: 32px; height: 32px; display: grid; place-items: center; color: #a45b27; background: #fff0e5; border-radius: 9px; }
.toolbar-hint strong { font-size: 14px; }
.toolbar-hint > span:last-child { color: var(--muted); font-size: 14px; line-height: 1.45; }

.location-stack { display: grid; gap: 18px; }
.location-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 7px 25px rgba(38, 38, 38, .055); }
.location-header { min-height: 64px; padding: 13px 18px; display: flex; justify-content: space-between; align-items: center; color: white; background: linear-gradient(110deg, var(--graphite), var(--graphite-soft)); border-left: 5px solid var(--orange); position: relative; }
.location-header::after { content: ""; position: absolute; inset: 0 10% 0 auto; width: 190px; opacity: .13; background: radial-gradient(circle, white 1px, transparent 1.5px); background-size: 13px 13px; mask-image: linear-gradient(90deg, transparent, black); pointer-events: none; }
.location-header > div { display: flex; align-items: center; gap: 12px; }
.location-header h2, .location-header p { margin: 0; }
.location-header h2 { font-size: 16px; letter-spacing: -.01em; }
.location-header p { margin-top: 3px; color: rgba(255, 255, 255, .72); font-size: 12px; }
.location-header > span { padding: 5px 9px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 100px; color: rgba(255, 255, 255, .85); font-size: 12px; }
.location-pin { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #f1a576; background: rgba(209, 99, 36, .16); }
.location-pin .ui-icon { width: 17px; height: 17px; }
.table-scroll { overflow-x: auto; }
.equipment-table { width: 100%; min-width: 1570px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.equipment-table th { padding: 12px 10px; color: #706b68; background: #faf8f6; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.35; font-weight: 800; text-transform: uppercase; letter-spacing: .045em; text-align: left; }
.equipment-table td { padding: 10px; vertical-align: top; border-bottom: 1px solid #edf0ed; background: white; }
.equipment-table tbody tr:last-child td { border-bottom: 0; }
.equipment-table tbody tr:hover td { background: #fbfcfb; }
.equipment-table th:nth-child(1), .equipment-table td:nth-child(1) { width: 300px; }
.equipment-table th:nth-child(2), .equipment-table td:nth-child(2) { width: 180px; }
.equipment-table th:nth-child(3), .equipment-table td:nth-child(3) { width: 175px; }
.equipment-table th:nth-child(4), .equipment-table td:nth-child(4) { width: 280px; }
.equipment-table th:nth-child(5), .equipment-table td:nth-child(5) { width: 160px; }
.equipment-table th:nth-child(6), .equipment-table td:nth-child(6) { width: 190px; }
.equipment-table th:nth-child(7), .equipment-table td:nth-child(7) { width: 150px; }
.equipment-table th:nth-child(8), .equipment-table td:nth-child(8) { width: 140px; }
.equipment-table .equipment-column, .equipment-cell { position: sticky; left: 0; z-index: 3; box-shadow: 8px 0 16px rgba(27, 48, 35, .035); }
.equipment-table .equipment-column { z-index: 5; }
.equipment-cell .equipment-line { display: block; margin-top: 9px; color: var(--ink); font-size: 14px; font-weight: 750; line-height: 1.4; white-space: nowrap; letter-spacing: -.01em; }
.equipment-cell .equipment-line span { display: inline; margin: 0; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
.equipment-cell .equipment-model { font-weight: 850; }
.equipment-table select, .equipment-table input, .equipment-table textarea {
  width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid #d5dcd7; border-radius: 8px; background: #fff; color: var(--ink); font-size: 14px; outline: 0; transition: border .15s, box-shadow .15s, background .15s;
}
.equipment-table textarea { min-height: 58px; resize: vertical; line-height: 1.35; }
.equipment-table select:focus, .equipment-table input:focus, .equipment-table textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(209, 99, 36, .14); }
.equipment-table :disabled { color: #626a65; background: #f2f4f2; cursor: not-allowed; }
.equipment-table .attention-field { border-color: #dc8a52; background: #fffaf6; }
.description-reminder { display: block; margin-top: 6px; color: #a94d18; font-size: 12px; font-weight: 700; line-height: 1.35; }
.description-reminder[hidden] { display: none; }
.row-error td { background: #fff9f8; }
.field-error { display: block; margin-top: 5px; color: var(--red); font-size: 12px; line-height: 1.35; }

.review-overview { margin-bottom: 18px; padding: 15px 18px; display: grid; grid-template-columns: 42px 1fr auto; gap: 13px; align-items: center; background: #fff8f3; border: 1px solid #ecc6ae; border-radius: 15px; }
.review-overview-icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--orange); background: white; border: 1px solid #efd2c0; border-radius: 11px; }
.review-overview-icon svg { width: 22px; height: 22px; }
.review-overview strong, .review-overview span { display: block; }
.review-overview strong { font-size: 14px; }
.review-overview span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.live-edit-counter { min-width: 125px; padding-left: 18px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; border-left: 1px solid #e6c9b7; }
.live-edit-counter small { color: var(--muted); font-size: 11px; text-align: right; }
.live-edit-counter strong { min-width: 35px; height: 35px; display: grid; place-items: center; color: var(--muted); background: white; border: 1px solid #dfd8d3; border-radius: 9px; font-size: 16px; }
.live-edit-counter.has-edits strong { color: white; background: var(--orange); border-color: var(--orange); }
.has-previous-changes td { background: #fffcf8; }
.previous-change-badge { width: fit-content; margin-top: 7px !important; padding: 4px 7px; color: #96501f !important; background: #fae8dc; border-radius: 6px; font-size: 11px !important; font-weight: 800 !important; }
.equipment-table .planner-row-edited td { background: #fff8f2; box-shadow: inset 0 2px 0 #e19666, inset 0 -2px 0 #e19666; }
.equipment-table .planner-row-edited td:first-child { box-shadow: inset 4px 0 0 var(--orange), inset 0 2px 0 #e19666, inset 0 -2px 0 #e19666, 8px 0 16px rgba(27, 48, 35, .035); }
.equipment-table .planner-field-edited { border-color: var(--orange); background: #fff8f3; box-shadow: 0 0 0 2px rgba(209, 99, 36, .11); }
.equipment-table .comparison-row td { padding: 0; background: #faf7f4; border-bottom: 1px solid #e7dfd9; }
.comparison-row details { padding: 8px 12px 9px 310px; }
.comparison-row summary { width: fit-content; color: #8e5b37; font-size: 11px; font-weight: 800; cursor: pointer; }
.comparison-changes { margin-top: 9px; display: grid; gap: 6px; }
.comparison-changes > div { padding: 7px 9px; display: grid; grid-template-columns: 175px minmax(150px, 1fr) 20px minmax(150px, 1fr); gap: 8px; align-items: center; background: white; border: 1px solid #ebe3dd; border-radius: 8px; }
.comparison-changes strong { font-size: 11px; }
.comparison-changes span { padding: 5px 7px; border-radius: 5px; font-size: 12px; line-height: 1.35; }
.comparison-changes i { color: var(--orange); font-style: normal; text-align: center; }
.comparison-old { color: #7a716b; background: #f1eeeb; text-decoration: line-through; }
.comparison-new { color: #7e421d; background: #fae9df; font-weight: 700; }

.planner-comment-card { margin-top: 18px; padding: 17px 18px; display: grid; grid-template-columns: minmax(240px, .45fr) minmax(400px, 1fr); gap: 20px; align-items: start; background: white; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 7px 25px rgba(38, 38, 38, .045); }
.planner-comment-card label span, .planner-comment-card label small { display: block; }
.planner-comment-card label span { font-size: 14px; font-weight: 800; }
.planner-comment-card label small { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.planner-comment-card textarea { width: 100%; min-height: 82px; padding: 10px 12px; resize: vertical; color: var(--ink); background: white; border: 1px solid #d5d0cc; border-radius: 9px; outline: 0; font-size: 14px; line-height: 1.45; }
.planner-comment-card textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(209, 99, 36, .12); }
.planner-comment-card textarea:disabled { color: #69635f; background: #f2efed; }

.review-history-card { margin-top: 28px; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 7px 25px rgba(38, 38, 38, .055); }
.review-history-card > header { padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee9e5; }
.review-history-card > header h2 { margin: 5px 0 0; font-size: 20px; }
.review-history-card > header > span { color: var(--muted); font-size: 12px; }
.review-history-list { padding: 18px 20px; }
.review-history-list > article { display: grid; grid-template-columns: 24px 1fr; gap: 10px; position: relative; }
.review-history-list > article:not(:last-child) { padding-bottom: 18px; }
.review-history-list > article:not(:last-child)::before { content: ""; width: 2px; position: absolute; top: 19px; bottom: 0; left: 6px; background: #e2dbd6; }
.review-history-marker { width: 14px; height: 14px; margin-top: 3px; position: relative; z-index: 1; background: var(--orange); border: 3px solid #fae8dd; border-radius: 50%; }
.review-history-content { padding: 0 0 15px; border-bottom: 1px solid #eeeae7; }
.review-history-list > article:last-child .review-history-content { border-bottom: 0; }
.review-history-content > header { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
.review-history-content > header strong, .review-history-content > header span { display: block; }
.review-history-content > header strong { font-size: 14px; }
.review-history-content > header span, .review-history-content time { margin-top: 3px; color: var(--muted); font-size: 11px; }
.review-history-content > p { margin: 10px 0 0; padding: 10px 12px; background: #faf7f4; border-radius: 8px; font-size: 13px; line-height: 1.45; }
.review-history-content > small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; }
.review-history-content details { margin-top: 9px; }
.review-history-content details > summary { width: fit-content; color: var(--orange); font-size: 12px; font-weight: 800; cursor: pointer; }
.review-history-changes { margin-top: 9px; display: grid; gap: 8px; }
.review-history-changes > section { padding: 10px 11px; background: #faf8f6; border: 1px solid #ece5e0; border-radius: 9px; }
.review-history-changes > section > strong { display: block; margin-bottom: 7px; font-size: 12px; }
.review-history-changes section > div { padding: 5px 0; display: grid; grid-template-columns: 150px 1fr 18px 1fr; gap: 7px; border-top: 1px solid #ebe5e1; font-size: 11px; }
.review-history-changes del { color: #7b716b; }
.review-history-changes ins { color: #8b4317; font-weight: 750; text-decoration: none; }
.review-history-changes i { color: var(--orange); font-style: normal; }

.form-actions { position: sticky; bottom: 14px; z-index: 20; margin-top: 22px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid rgba(216, 207, 200, .96); border-radius: 15px; background: rgba(255, 255, 255, .94); box-shadow: 0 16px 42px rgba(38, 38, 38, .14); backdrop-filter: blur(12px); }
.form-actions strong, .form-actions span { display: block; }
.form-actions strong { font-size: 14px; }
.form-actions span { margin-top: 3px; color: var(--muted); font-size: 14px; }
.action-buttons { display: flex; gap: 10px; }

.button, .icon-button { border: 0; cursor: pointer; text-decoration: none; transition: transform .14s, background .14s, border .14s; }
.button { min-height: 42px; padding: 10px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 9px; font-size: 14px; font-weight: 750; }
.button:hover, .icon-button:hover { transform: translateY(-1px); }
.button-primary { color: white; background: var(--green); }
.button-primary:hover { background: var(--green-strong); }
.button-secondary { color: var(--green); background: white; border: 1px solid #d7a383; }
.button-secondary:hover { border-color: var(--green); }
.button-quiet { min-height: 32px; padding: 7px 10px; color: #fff; background: rgba(209, 99, 36, .22); border: 1px solid rgba(209, 99, 36, .42); }
.button-large { width: 100%; min-height: 48px; font-size: 14px; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #414141; }

.message-stack { position: fixed; z-index: 50; top: 108px; right: 24px; width: min(390px, calc(100vw - 32px)); display: grid; gap: 8px; }
.message { padding: 12px 14px; border-radius: 10px; color: #234432; background: #e4f2e9; border: 1px solid #bcd8c6; box-shadow: var(--shadow); font-size: 14px; }
.message-error { color: #73362f; background: #fbe9e7; border-color: #efc2bc; }
.form-alert { margin: 0 0 16px; padding: 11px 13px; border-radius: 9px; color: #7a3932; background: #fcebe9; border: 1px solid #f0c8c3; font-size: 14px; }
.empty-state { padding: 70px 24px; text-align: center; background: white; border: 1px dashed #cbd4ce; border-radius: 16px; }
.empty-state > span { width: 50px; height: 50px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: var(--green-soft); font-size: 20px; }
.empty-state h2 { margin: 0 0 8px; font-size: 20px; }
.empty-state p { margin: 0; color: var(--muted); font-size: 14px; }

.filter-panel, .period-panel, .legend-card, .report-list-card, .matrix-card, .notification-list { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 7px 25px rgba(38, 38, 38, .055); }
.filter-panel { margin-bottom: 18px; padding: 17px 18px; }
.filter-grid { display: grid; grid-template-columns: 1.1fr repeat(3, minmax(135px, .8fr)) 1.5fr auto; gap: 12px; align-items: end; }
.filter-grid label, .period-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.filter-grid input, .filter-grid select, .period-form input, .period-form select { min-height: 42px; padding: 9px 10px; color: var(--ink); background: white; border: 1px solid #d5d0cc; border-radius: 8px; outline: 0; font-size: 14px; text-transform: none; letter-spacing: 0; }
.filter-grid input:focus, .filter-grid select:focus, .period-form input:focus, .period-form select:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(209, 99, 36, .12); }
.filter-actions { display: flex; gap: 7px; }
.report-list-card { overflow: hidden; }
.report-list-head, .report-list-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(280px, 2fr) minmax(170px, .9fr) 110px 120px; gap: 16px; align-items: center; }
.report-list-head { padding: 12px 18px; color: var(--muted); background: #faf8f6; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.report-list-row { min-height: 88px; padding: 14px 18px; border-bottom: 1px solid #ece8e5; position: relative; }
.report-list-row:last-child { border-bottom: 0; }
.report-list-row-pending { background: linear-gradient(90deg, rgba(209, 99, 36, .07), transparent 38%); }
.report-list-row-pending::before { content: ""; width: 4px; position: absolute; inset: 0 auto 0 0; background: var(--orange); }
.report-identity time, .report-identity small, .equipment-count strong, .equipment-count small { display: block; }
.report-identity time { margin-bottom: 5px; font-size: 18px; font-weight: 850; letter-spacing: -.02em; }
.report-identity small { color: var(--muted); }
.location-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.location-chips span { padding: 6px 8px; color: #55504c; background: #f2eeeb; border-radius: 6px; font-size: 12px; font-weight: 650; }
.equipment-count strong { font-size: 18px; }
.equipment-count small { color: var(--muted); }
.report-row-action { text-align: right; }
.ktg-filter-grid { grid-template-columns: minmax(220px, 1fr) minmax(180px, .7fr) auto; }
.ktg-report-list { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 7px 25px rgba(38, 38, 38, .055); }
.ktg-report-head, .ktg-report-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.25fr) 130px 150px minmax(150px, .8fr) 110px; gap: 14px; align-items: center; }
.ktg-report-head { padding: 12px 18px; color: var(--muted); background: #faf8f6; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ktg-report-row { min-height: 92px; padding: 14px 18px; position: relative; border-bottom: 1px solid #ece8e5; }
.ktg-report-row:last-child { border-bottom: 0; }
.ktg-report-pending { background: linear-gradient(90deg, rgba(209, 99, 36, .075), transparent 42%); box-shadow: inset 4px 0 var(--orange); }
.ktg-report-identity strong, .ktg-report-identity small, .ktg-value strong, .ktg-value small { display: block; }
.ktg-report-identity strong { margin-bottom: 5px; font-size: 18px; }
.ktg-report-identity small, .ktg-value small { color: var(--muted); font-size: 11px; }
.ktg-report-row .location-chips i { padding: 5px 7px; color: #55504c; background: #f2eeeb; border-radius: 6px; font-size: 11px; font-style: normal; font-weight: 700; }
.ktg-value strong { color: var(--orange); font-size: 18px; }
.ktg-detail-heading { align-items: center; }
.ktg-calculation-note { margin-bottom: 18px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; background: #fff8f3; border: 1px solid #ecc6ae; border-radius: 14px; }
.ktg-calculation-note > span { width: 48px; height: 48px; display: grid; place-items: center; color: white; background: var(--orange); border-radius: 12px; font-size: 19px; font-weight: 900; }
.ktg-calculation-note strong, .ktg-calculation-note p { display: block; }
.ktg-calculation-note p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.ktg-form-card { max-width: 980px; margin: 0 auto; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.ktg-form-card > header { padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid #eee9e5; }
.ktg-form-card h2 { margin: 5px 0 0; font-size: 25px; }
.ktg-form-card > header > small { max-width: 320px; color: var(--muted); text-align: right; }
.ktg-fields { padding: 28px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ktg-fields label { padding: 18px; display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; position: relative; background: #faf8f6; border: 1px solid #e7e0db; border-radius: 13px; }
.ktg-fields label > span, .ktg-fields label > small { grid-column: 1 / -1; }
.ktg-fields label > span { font-size: 15px; font-weight: 850; }
.ktg-fields label > small { color: var(--muted); font-size: 12px; }
.ktg-fields input { width: 100%; min-height: 54px; padding: 10px 42px 10px 12px; color: var(--ink); background: white; border: 1px solid #d6d0cb; border-radius: 9px; font-size: 23px; font-weight: 850; outline: 0; }
.ktg-fields input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(209, 99, 36, .13); }
.ktg-fields label > i { margin: 17px 12px 0 -48px; z-index: 1; color: var(--orange); font-size: 18px; font-style: normal; font-weight: 850; }
.ktg-form-card > footer { padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #f7f4f2; }
.ktg-form-card > footer > span { color: var(--muted); font-size: 13px; }
.ktg-table-heading { margin-bottom: 16px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: white; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 6px 20px rgba(38, 38, 38, .045); }
.ktg-table-heading h2 { margin: 5px 0 0; font-size: 24px; }
.ktg-table-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.ktg-table-heading > span { padding: 8px 11px; flex: 0 0 auto; color: var(--orange); background: #fff3eb; border-radius: 9px; font-size: 13px; font-weight: 850; }
.ktg-location-stack { display: grid; gap: 17px; }
.ktg-location-card { box-shadow: 0 6px 22px rgba(38, 38, 38, .05); }
.ktg-equipment-table { width: 100%; min-width: 1080px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.ktg-equipment-table th { padding: 12px; color: #706b68; background: #faf8f6; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.3; font-weight: 800; text-align: left; text-transform: uppercase; letter-spacing: .035em; }
.ktg-equipment-table th small { margin-top: 4px; display: block; color: #99918c; font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.ktg-equipment-table td { padding: 11px 12px; vertical-align: middle; background: white; border-bottom: 1px solid #eeeae7; }
.ktg-equipment-table tbody tr:last-child td { border-bottom: 0; }
.ktg-equipment-table tbody tr:hover td { background: #fffaf7; }
.ktg-equipment-table th:nth-child(1), .ktg-equipment-table td:nth-child(1) { width: 310px; position: sticky; left: 0; z-index: 3; box-shadow: 8px 0 16px rgba(38, 38, 38, .035); }
.ktg-equipment-table th:nth-child(1) { z-index: 5; }
.ktg-equipment-table th:nth-child(2), .ktg-equipment-table td:nth-child(2) { width: 210px; }
.ktg-equipment-table th:nth-child(3), .ktg-equipment-table td:nth-child(3) { width: 150px; }
.ktg-equipment-table th:nth-child(4), .ktg-equipment-table td:nth-child(4), .ktg-equipment-table th:nth-child(5), .ktg-equipment-table td:nth-child(5) { width: 205px; }
.ktg-equipment-link { display: flex; align-items: baseline; gap: 5px; color: var(--ink); font-size: 13px; text-decoration: none; white-space: nowrap; }
.ktg-equipment-link:hover strong { color: var(--orange); }
.ktg-equipment-link strong, .ktg-equipment-link span { font-weight: 850; }
.ktg-context-value { display: inline-flex; padding: 7px 9px; color: #514a46; background: #f1eeeb; border-radius: 7px; font-size: 12px; font-weight: 750; }
.ktg-table-input { max-width: 155px; position: relative; display: block; }
.ktg-table-input input { width: 100%; min-height: 44px; padding: 8px 38px 8px 10px; color: var(--ink); background: white; border: 1px solid #d6d0cb; border-radius: 8px; outline: 0; font-size: 18px; font-weight: 850; }
.ktg-table-input input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(209, 99, 36, .13); }
.ktg-table-input i { position: absolute; right: 12px; top: 12px; color: var(--orange); font-size: 15px; font-style: normal; font-weight: 850; }
.ktg-table-actions { margin-top: 17px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 20px rgba(38, 38, 38, .045); }
.ktg-table-actions > span { color: var(--muted); font-size: 13px; }
.pagination { margin: 18px 0 0; display: flex; justify-content: center; align-items: center; gap: 18px; color: var(--muted); font-size: 14px; }
.pagination a { color: var(--orange); font-weight: 750; text-decoration: none; }
.back-link { width: fit-content; margin-bottom: 13px; display: block; color: var(--orange); font-size: 14px; font-weight: 750; text-decoration: none; }
.planner-detail-heading { align-items: center; }
.detail-status-card { min-width: 220px; padding: 16px 18px; display: grid; gap: 9px; background: white; border: 1px solid var(--line); border-radius: 14px; }
.detail-status-card > small { color: var(--muted); }
.detail-status-card > strong { font-size: 14px; }

.period-panel { margin-bottom: 16px; padding: 15px 18px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.period-form { display: flex; align-items: end; gap: 10px; }
.period-form input { width: 155px; }
.period-form select { width: 210px; }
.period-form .location-filter { width: min(290px, 24vw); }
.filter-field { display: grid; gap: 6px; }
.filter-label { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.multi-select { position: relative; }
.multi-select summary { min-height: 42px; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); background: white; border: 1px solid #d5d0cc; border-radius: 8px; font-size: 14px; font-weight: 700; list-style: none; cursor: pointer; }
.multi-select summary::-webkit-details-marker { display: none; }
.multi-select[open] summary { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(209, 99, 36, .12); }
.multi-select-chevron { color: var(--orange); font-size: 18px; line-height: 1; transition: transform .15s; }
.multi-select[open] .multi-select-chevron { transform: rotate(180deg); }
.multi-select-menu { width: min(370px, calc(100vw - 32px)); max-height: 390px; padding: 10px; position: absolute; z-index: 45; top: calc(100% + 7px); left: 0; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 45px rgba(38, 38, 38, .17); }
.multi-select-menu-head { padding: 4px 4px 9px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #eee9e5; }
.multi-select-menu-head strong { font-size: 13px; }
.multi-select-menu-head button { padding: 4px; color: var(--orange); background: transparent; border: 0; font-size: 12px; font-weight: 800; cursor: pointer; }
.multi-select-options { max-height: 315px; padding-top: 5px; overflow-y: auto; }
.multi-select-option { min-height: 48px; padding: 7px 6px; display: flex; grid-template-columns: none; align-items: center; gap: 10px; color: var(--ink); border-radius: 8px; font-size: 14px; font-weight: 650; text-transform: none; letter-spacing: 0; cursor: pointer; }
.multi-select-option:hover { background: #faf3ee; }
.multi-select-option input { width: 18px !important; height: 18px; min-height: 18px !important; padding: 0 !important; flex: 0 0 auto; accent-color: var(--orange); box-shadow: none !important; }
.multi-select-option > span { min-width: 0; }
.multi-select-option strong, .multi-select-option small { display: block; }
.multi-select-option strong { font-size: 14px; }
.multi-select-option small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.period-caption { padding-bottom: 10px; color: var(--muted); font-size: 14px; font-weight: 700; }
.legend-card { margin-bottom: 16px; padding: 15px 18px; display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: center; }
.legend-title strong, .legend-title small { display: block; }
.legend-title strong { margin-bottom: 4px; font-size: 14px; }
.legend-title small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.legend-items { display: flex; flex-wrap: wrap; gap: 9px 17px; }
.legend-items > span { display: inline-flex; align-items: center; gap: 7px; color: #514d49; font-size: 14px; font-weight: 650; }
.legend-items i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 5px; color: white; font-size: 10px; font-style: normal; font-weight: 900; }
.matrix-card { overflow: hidden; }
.matrix-scroll { max-height: calc(100vh - 250px); overflow: auto; }
.operational-matrix { width: 100%; min-width: var(--matrix-min-width); border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.matrix-equipment-col { width: 280px; }
.matrix-warranty-col { width: 140px; }
.matrix-date-col { width: 47px; }
.matrix-spacer-col { width: auto; }
.operational-matrix thead th { width: 47px; min-width: 47px; max-width: 47px; height: 55px; padding: 7px 5px; position: sticky; top: 0; z-index: 12; color: #5f5a56; background: #f5f2ef; border-bottom: 1px solid var(--line); border-right: 1px solid #e7e2de; text-align: center; }
.operational-matrix thead th span, .operational-matrix thead th small { display: block; }
.operational-matrix thead th span { font-size: 12px; font-weight: 850; }
.operational-matrix thead th small { margin-top: 3px; color: #8d8680; font-size: 10px; text-transform: uppercase; }
.operational-matrix .matrix-equipment-head { width: 280px; min-width: 280px; max-width: 280px; left: 0; z-index: 16; padding-left: 16px; text-align: left; }
.operational-matrix .matrix-warranty-head { width: 140px; min-width: 140px; max-width: 140px; left: 280px; z-index: 16; padding-left: 10px; position: sticky; text-align: left; box-shadow: 7px 0 14px rgba(38, 38, 38, .04); }
.matrix-date-button { width: 100%; padding: 5px 2px; display: block; color: inherit; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.matrix-date-button:hover, .matrix-date-button:focus-visible { color: var(--orange); background: #fff; outline: 2px solid rgba(209, 99, 36, .2); }
.enterprise-row th { height: 37px; padding: 9px 15px; position: sticky; left: 0; z-index: 8; color: white; background: var(--graphite); border-left: 4px solid var(--orange); text-align: left; }
.enterprise-row strong { margin-right: 12px; font-size: 14px; }
.enterprise-row span { color: #ccc; font-size: 12px; font-weight: 600; }
.matrix-equipment-cell { min-width: 280px; max-width: 280px; height: 45px; padding: 0; position: sticky; left: 0; z-index: 7; background: white; border-bottom: 1px solid #ece8e5; box-shadow: 7px 0 14px rgba(38, 38, 38, .05); text-align: left; }
.matrix-equipment-cell a { height: 45px; padding: 7px 10px 7px 16px; display: flex; align-items: center; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.matrix-equipment-cell a:hover { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.operational-matrix td { width: 47px; height: 45px; padding: 5px; background: white; border-right: 1px solid #f0ece9; border-bottom: 1px solid #ece8e5; text-align: center; }
.operational-matrix td.matrix-warranty-cell { width: 140px; min-width: 140px; padding: 7px 8px; position: sticky; left: 280px; z-index: 6; text-align: left; box-shadow: 7px 0 14px rgba(38, 38, 38, .04); }
.operational-matrix thead th.matrix-spacer-head, .operational-matrix td.matrix-spacer-cell { width: auto; min-width: 0; max-width: none; background: #faf8f6; }
.warranty-badge { width: fit-content; padding: 6px 9px; display: inline-flex; align-items: center; border-radius: 100px; color: #65531d; background: #f6e9bd; font-size: 12px; font-weight: 800; white-space: nowrap; }
.warranty-out-of-warranty { color: #5f5a56; background: #ece8e5; }
.warranty-unknown { color: var(--muted); background: #f2f0ee; }
.matrix-cell { width: 34px; height: 34px; margin: auto; display: grid; place-items: center; border-radius: 6px; color: white; font-size: 11px; font-weight: 900; cursor: help; }
button.matrix-cell { padding: 0; border: 0; cursor: pointer; transition: transform .14s, box-shadow .14s; }
button.matrix-cell:hover, button.matrix-cell:focus-visible { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(38, 38, 38, .13); outline: 0; }
.equipment-matrix-row { cursor: pointer; }
.equipment-matrix-row:hover > th, .equipment-matrix-row:hover > td { background-color: #fffaf6; }
.matrix-green { background: #3f9660; }
.matrix-red { background: #c64b43; }
.matrix-gray { background: #767676; }
.matrix-yellow { color: #513e08 !important; background: #e5b936; }
.matrix-neutral { background: #8f8984; }
.matrix-empty { color: #aaa !important; background: #f1efed; border: 1px dashed #d5d0cc; }

.detail-drawer-overlay { position: fixed; inset: 0; z-index: 59; opacity: 0; background: rgba(24, 24, 24, .46); backdrop-filter: blur(2px); transition: opacity .18s; }
.detail-drawer-overlay.is-open { opacity: 1; }
.detail-drawer { width: min(480px, 100vw); height: 100vh; padding: 0; display: grid; grid-template-rows: auto 1fr; position: fixed; inset: 0 0 0 auto; z-index: 60; color: var(--ink); background: #f7f4f2; border-left: 1px solid var(--line); box-shadow: -24px 0 60px rgba(38, 38, 38, .2); transform: translateX(100%); transition: transform .18s ease-out; }
.detail-drawer.is-open { transform: translateX(0); }
.detail-drawer-header { padding: 22px 22px 18px; display: flex; align-items: start; justify-content: space-between; gap: 18px; color: white; background: var(--graphite); border-bottom: 3px solid var(--orange); }
.detail-drawer-header h2 { margin: 6px 0 0; font-size: 22px; line-height: 1.2; }
.drawer-close { width: 38px; height: 38px; flex: 0 0 auto; color: white; background: #444; border: 1px solid #5a5a5a; border-radius: 10px; font-size: 25px; line-height: 1; cursor: pointer; }
.detail-drawer-body { padding: 18px; overflow-y: auto; }
.drawer-record-card { margin-bottom: 12px; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 26px rgba(38, 38, 38, .07); }
.drawer-record-card header { padding: 14px; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #eee9e5; }
.drawer-record-card header strong, .drawer-record-card header time { display: block; }
.drawer-record-card header strong { font-size: 14px; line-height: 1.4; }
.drawer-record-card header time { margin-top: 4px; color: var(--muted); font-size: 12px; }
.drawer-status { height: fit-content; padding: 6px 8px; flex: 0 0 auto; color: white; border-radius: 7px; font-size: 11px; font-weight: 850; }
.drawer-description { padding: 14px; background: #fcfaf8; }
.drawer-description span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.drawer-description p { margin: 7px 0 0; font-size: 14px; line-height: 1.5; }
.drawer-facts { margin: 0; padding: 4px 14px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.drawer-facts div { padding: 10px 0; border-bottom: 1px solid #eeeae7; }
.drawer-facts dt { color: var(--muted); font-size: 12px; }
.drawer-facts dd { margin: 4px 0 0; font-size: 14px; font-weight: 750; }
.drawer-empty { padding: 50px 22px; color: var(--muted); background: white; border: 1px dashed var(--line); border-radius: 14px; text-align: center; }
body.drawer-open { overflow: hidden; }

.dashboard-heading { align-items: center; }
.dashboard-filter-card { margin-bottom: 18px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 7px 25px rgba(38, 38, 38, .055); }
.dashboard-filter-form { min-width: min(760px, 100%); display: grid; grid-template-columns: 170px minmax(250px, 320px) auto auto; gap: 10px; align-items: end; }
.dashboard-filter-form > label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.dashboard-filter-form input { width: 100%; min-height: 42px; padding: 9px 10px; color: var(--ink); background: white; border: 1px solid #d5d0cc; border-radius: 8px; outline: 0; font-size: 14px; }
.dashboard-data-note { max-width: 390px; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.dashboard-data-note > span { width: 8px; height: 8px; flex: 0 0 auto; background: #3f9660; border-radius: 50%; box-shadow: 0 0 0 5px rgba(63, 150, 96, .12); }

.dashboard-kpi-grid { margin-bottom: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dashboard-kpi { min-height: 190px; padding: 18px; display: flex; flex-direction: column; position: relative; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 7px 25px rgba(38, 38, 38, .055); }
.dashboard-kpi::after { content: ""; width: 100px; height: 100px; position: absolute; right: -50px; top: -50px; border: 1px solid rgba(209, 99, 36, .18); border-radius: 50%; box-shadow: 0 0 0 20px rgba(209, 99, 36, .035); }
.dashboard-kpi-primary { color: white; background: linear-gradient(135deg, #262626, #3b302a); border-color: #262626; }
.dashboard-kpi > span { margin: 14px 0 5px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.dashboard-kpi-primary > span, .dashboard-kpi-primary p { color: #c9c2be; }
.dashboard-kpi > strong { font-size: 42px; line-height: 1; letter-spacing: -.05em; }
.dashboard-kpi > strong small { margin-left: 2px; font-size: 20px; }
.dashboard-kpi p { margin: auto 0 0; color: var(--muted); font-size: 12px; }
.kpi-icon { width: 38px; height: 38px; display: grid; place-items: center; color: #f2a273; background: rgba(209, 99, 36, .14); border-radius: 11px; }
.kpi-icon svg { width: 21px; height: 21px; }
.kpi-icon-green { color: #31805b; background: #e5f2e9; }
.kpi-icon-red { color: #b7473f; background: #f8e5e3; }
.kpi-icon-blue { color: #376e9d; background: #e4eff8; }
.kpi-progress { height: 5px; margin-top: 13px; overflow: hidden; background: #514945; border-radius: 10px; }
.kpi-progress i { height: 100%; display: block; background: var(--orange); border-radius: inherit; }
.dashboard-kpi:not(.dashboard-kpi-primary) .kpi-progress { background: #e7e2de; }
.kpi-progress-blue i { background: #4b87b9; }

.dashboard-analytics-grid { margin-bottom: 18px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(330px, .8fr); gap: 18px; }
.dashboard-card { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 7px 25px rgba(38, 38, 38, .055); }
.dashboard-card-heading { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #eee9e5; }
.dashboard-card-heading h2 { margin: 5px 0 0; font-size: 20px; letter-spacing: -.025em; }
.dashboard-card-heading p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.dashboard-card-heading > strong { color: var(--orange); font-size: 30px; }
.readiness-chart { height: 250px; padding: 22px 18px 17px; display: grid; grid-template-columns: repeat(14, minmax(32px, 1fr)); gap: 8px; align-items: end; overflow-x: auto; }
.readiness-bar { min-width: 32px; display: grid; grid-template-rows: 20px 165px 20px; gap: 5px; align-items: end; text-align: center; }
.readiness-bar > span { color: var(--muted); font-size: 10px; font-weight: 750; }
.readiness-bar > div { width: 100%; height: 165px; display: flex; align-items: end; overflow: hidden; background: linear-gradient(to top, #f2efec, #faf9f8); border-radius: 6px 6px 3px 3px; }
.readiness-bar i { width: 100%; min-height: 3px; display: block; background: linear-gradient(to top, var(--orange), #e49364); border-radius: 5px 5px 2px 2px; transition: height .2s; }
.readiness-bar time { color: var(--muted); font-size: 10px; }
.dashboard-chart-card { margin-bottom: 18px; }
.dashboard-chart-card .dashboard-card-heading { align-items: center; }
.dashboard-svg-scroll { width: 100%; padding: 12px 14px 4px; overflow-x: auto; }
.dashboard-svg-chart { display: block; font-family: Inter, "Segoe UI", Arial, sans-serif; }
.chart-grid-line { stroke: #e9e4e0; stroke-width: 1; }
.chart-axis-label, .chart-x-label { fill: #716b67; font-size: 10px; font-weight: 650; }
.chart-segment-label { fill: white; font-size: 11px; font-weight: 850; pointer-events: none; }
.chart-total-label { fill: #262626; font-size: 11px; font-weight: 900; paint-order: stroke; stroke: white; stroke-width: 4px; stroke-linejoin: round; }
.chart-enterprise-label { fill: var(--orange); font-size: 11px; font-weight: 850; letter-spacing: .02em; }
.chart-group-separator { stroke: #b8aea7; stroke-width: 1; stroke-dasharray: 2 4; }
.chart-bar-operating { fill: #3f9660; }
.chart-bar-repair { fill: #c64b43; }
.chart-bar-no-crew { fill: #e5b936; }
.chart-legend { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 750; white-space: nowrap; }
.chart-legend i { width: 11px; height: 11px; border-radius: 3px; }
.legend-operating { background: #3f9660; }
.legend-repair { background: #c64b43; }
.legend-no-crew { background: #e5b936; }
.legend-warranty { background: var(--orange); border-radius: 50% !important; }
.legend-non-warranty { background: #486f82; border-radius: 50% !important; }
.chart-line-warranty, .chart-line-non-warranty { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-line-warranty { stroke: var(--orange); }
.chart-line-non-warranty { stroke: #486f82; }
.chart-marker-warranty { fill: white; stroke: var(--orange); stroke-width: 3; }
.chart-marker-non-warranty { fill: white; stroke: #486f82; stroke-width: 3; }
.chart-data-label { font-size: 9px; font-weight: 850; paint-order: stroke; stroke: white; stroke-width: 3px; stroke-linejoin: round; }
.chart-marker-warranty-label { fill: #ac4c16; }
.chart-marker-non-warranty-label { fill: #345d70; }
.distribution-cards-block { margin-bottom: 18px; }
.distribution-cards-block .dashboard-card-heading > strong { white-space: nowrap; }
.distribution-cards-block .dashboard-card-heading > strong small { font-size: 13px; }
.status-mini-cards { padding: 16px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; overflow-x: auto; scrollbar-width: thin; }
.status-mini-card { min-height: 126px; padding: 15px; position: relative; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(145deg, #fff, #faf8f6); border: 1px solid #ebe5e1; border-radius: 13px; box-shadow: 0 4px 14px rgba(38, 38, 38, .04); }
.status-mini-card::before { content: ""; height: 4px; position: absolute; inset: 0 0 auto; background: #8f8984; }
.status-mini-card.status-mini-green::before { background: #3f9660; }
.status-mini-card.status-mini-red::before, .status-mini-card.status-mini-dark-red::before { background: #c64b43; }
.status-mini-card.status-mini-orange::before { background: #d9783f; }
.status-mini-card.status-mini-yellow::before { background: #e5b936; }
.status-mini-card.status-mini-gray::before { background: #767676; }
.status-mini-card.status-mini-empty::before { background: #d8d2cd; }
.status-mini-card > span { min-height: 34px; display: flex; align-items: flex-start; gap: 7px; color: #554f4b; font-size: 12px; font-weight: 780; line-height: 1.25; }
.status-mini-card > span i { margin-top: 3px; flex: 0 0 auto; }
.status-mini-card > strong { margin-top: 7px; font-size: 30px; line-height: 1; letter-spacing: -.04em; }
.status-mini-card > strong small { color: var(--muted); font-size: 12px; letter-spacing: 0; }
.status-mini-card > div { margin-top: auto; padding-top: 9px; display: flex; align-items: baseline; justify-content: space-between; gap: 7px; border-top: 1px solid #eee9e5; }
.status-mini-card > div b { color: var(--orange); font-size: 13px; }
.status-mini-card > div span { color: var(--muted); font-size: 9px; text-align: right; }
.warranty-charts-row { margin-bottom: 18px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(220px, 1fr); gap: 18px; align-items: stretch; }
.warranty-charts-row .dashboard-chart-card { margin-bottom: 0; }
.warranty-share-card { min-width: 0; min-height: 0; }
.warranty-share-card .dashboard-card-heading { min-height: 106px; align-items: flex-start; }
.warranty-share-wrap { width: 100%; overflow: hidden; }
.warranty-share-chart { display: block; font-family: Inter, "Segoe UI", Arial, sans-serif; }
.chart-donut-track { fill: none; stroke: #eee9e5; stroke-width: 38; }
.warranty-share-chart circle[stroke-dasharray] { fill: none; stroke-width: 38; }
.chart-donut-warranty { fill: var(--orange); stroke: var(--orange); }
.chart-donut-non-warranty { fill: #486f82; stroke: #486f82; }
.chart-donut-unknown { fill: #a7a09b; stroke: #a7a09b; }
.chart-donut-total { fill: #262626; font-size: 38px; font-weight: 900; letter-spacing: -.05em; }
.chart-donut-caption { fill: var(--muted); font-size: 11px; font-weight: 700; }
.chart-donut-label { fill: #655e59; font-size: 12px; font-weight: 750; }
.chart-donut-value { fill: #262626; font-size: 22px; font-weight: 900; }
.distribution-wide-card { margin-bottom: 18px; }
.distribution-wide-layout { display: grid; grid-template-columns: 180px 1fr; align-items: start; gap: 10px; }
.distribution-wide-layout .distribution-list { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 0 24px; padding-top: 14px; }
.distribution-wide-layout .distribution-list-head { grid-column: 1 / -1; }
.distribution-card { position: relative; }
.distribution-total { margin: 21px 20px 11px; display: flex; align-items: center; gap: 10px; }
.distribution-total strong { font-size: 42px; line-height: 1; letter-spacing: -.05em; }
.distribution-total span { color: var(--muted); font-size: 12px; line-height: 1.25; }
.distribution-list { padding: 0 20px 17px; }
.distribution-list > div { min-height: 31px; display: grid; grid-template-columns: 9px 1fr auto 38px; gap: 8px; align-items: center; border-bottom: 1px solid #f0ece9; }
.distribution-list > div:last-child { border-bottom: 0; }
.distribution-list > .distribution-list-head { min-height: 26px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; }
.distribution-list-head strong, .distribution-list-head small { font-size: 10px; font-weight: 800; }
.distribution-list span { font-size: 12px; }
.distribution-list strong { font-size: 14px; }
.distribution-list small { color: var(--muted); font-size: 11px; text-align: right; }
.distribution-dot { width: 8px; height: 8px; border-radius: 3px; }
.distribution-green { background: #3f9660; }
.distribution-red, .distribution-dark-red { background: #c64b43; }
.distribution-orange { background: #d9783f; }
.distribution-yellow { background: #e5b936; }
.distribution-gray { background: #767676; }
.distribution-neutral { background: #8f8984; }
.distribution-empty { background: #d8d2cd; }

.attention-card, .location-performance-card { margin-bottom: 18px; }
.attention-heading { border-left: 5px solid var(--orange); }
.attention-count { min-width: 45px; height: 45px; display: grid; place-items: center; color: #a33e37; background: #f9e8e6; border-radius: 13px; font-size: 20px; font-weight: 850; }
.attention-list { display: grid; }
.attention-row { min-height: 92px; padding: 14px 18px; display: grid; grid-template-columns: 92px minmax(230px, 1fr) minmax(150px, .55fr) minmax(290px, 1.25fr) 28px; gap: 14px; align-items: center; color: inherit; border-bottom: 1px solid #eeeae7; text-decoration: none; transition: background .14s; }
.attention-row:last-child { border-bottom: 0; }
.attention-row:hover { background: #fffaf6; }
.attention-row.attention-critical { background: linear-gradient(90deg, rgba(198, 75, 67, .055), transparent 38%); box-shadow: inset 4px 0 #c64b43; }
.attention-row.attention-warning { box-shadow: inset 4px 0 #d9a72d; }
.attention-priority { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.attention-priority i { width: 8px; height: 8px; background: #8f8984; border-radius: 50%; }
.attention-critical .attention-priority { color: #a33e37; }
.attention-critical .attention-priority i { background: #c64b43; box-shadow: 0 0 0 5px rgba(198, 75, 67, .1); }
.attention-warning .attention-priority { color: #906516; }
.attention-warning .attention-priority i { background: #d9a72d; }
.attention-equipment strong, .attention-equipment small, .attention-problem strong, .attention-problem small { display: block; }
.attention-equipment strong { font-size: 14px; white-space: nowrap; }
.attention-equipment small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.attention-status { width: fit-content; padding: 6px 8px; border-radius: 7px; font-size: 11px; font-weight: 800; }
.status-visual-green { color: #286943; background: #e3f1e8; }
.status-visual-red, .status-visual-dark-red { color: #993e37; background: #f9e6e4; }
.status-visual-orange { color: #99501f; background: #fae9de; }
.status-visual-yellow { color: #725817; background: #f7edc8; }
.status-visual-gray, .status-visual-neutral, .status-visual-empty { color: #625e5b; background: #ece9e6; }
.attention-problems { display: grid; gap: 6px; }
.attention-problem { min-height: 48px; padding: 7px 10px; display: grid; grid-template-columns: 10px 1fr; gap: 9px; align-items: center; background: #f7f4f2; border: 1px solid #e8e1dc; border-radius: 9px; }
.attention-problem > i { width: 9px; height: 9px; background: #8d8782; border-radius: 50%; }
.attention-problem strong { color: #4a4541; font-size: 13px; line-height: 1.25; }
.attention-problem small { margin-top: 3px; color: #716a65; font-size: 11px; line-height: 1.3; }
.problem-overdue { background: #fff0ee; border-color: #efc0bc; }
.problem-overdue > i { background: #c64b43; box-shadow: 0 0 0 4px rgba(198, 75, 67, .11); }
.problem-overdue strong { color: #9c352f; }
.problem-emergency { background: #fff3ea; border-color: #edc8ad; }
.problem-emergency > i { background: var(--orange); box-shadow: 0 0 0 4px rgba(209, 99, 36, .11); }
.problem-emergency strong { color: #a44b18; }
.problem-stale { background: #f1f5f7; border-color: #d4e0e5; }
.problem-stale > i { background: #587887; box-shadow: 0 0 0 4px rgba(88, 120, 135, .1); }
.problem-stale strong { color: #3f6474; }
.problem-long-repair { background: #fff8e7; border-color: #ead79f; }
.problem-long-repair > i { background: #c18a16; }
.problem-long-repair strong { color: #8b6211; }
.attention-arrow { color: var(--orange); font-size: 18px; font-weight: 800; }
.dashboard-empty { padding: 50px 20px; color: var(--muted); text-align: center; font-size: 14px; }
.dashboard-empty-success span { width: 30px; height: 30px; margin: 0 auto 9px; display: grid; place-items: center; color: #2f7950; background: #e3f1e8; border-radius: 50%; }
.dashboard-muted { color: var(--muted); font-size: 12px; }
.location-performance-table { overflow-x: auto; }
.location-performance-head, .location-performance-row { min-width: 980px; display: grid; grid-template-columns: minmax(240px, 1.5fr) 180px repeat(4, minmax(90px, .55fr)) 35px; gap: 12px; align-items: center; }
.location-performance-head { min-height: 42px; padding: 8px 18px; color: var(--muted); background: #faf8f6; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.location-performance-row { min-height: 72px; padding: 10px 18px; border-bottom: 1px solid #eeeae7; }
.location-performance-row:last-child { border-bottom: 0; }
.location-performance-row > span > strong, .location-performance-row > span > small { display: block; }
.location-performance-name strong { font-size: 14px; }
.location-performance-name small, .location-performance-row > span > small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.location-readiness { display: grid; grid-template-columns: 42px 1fr; gap: 8px; align-items: center; }
.location-readiness strong { font-size: 14px; }
.location-readiness i { height: 6px; overflow: hidden; background: #e8e3df; border-radius: 10px; }
.location-readiness b { height: 100%; display: block; background: var(--orange); border-radius: inherit; }
.metric-danger strong { color: #ad453d; }
.coverage-badge { width: fit-content; min-width: 48px; padding: 6px 7px; color: #725817; background: #f7edc8; border-radius: 7px; font-size: 11px; font-weight: 850; text-align: center; }
.coverage-complete { color: #286943; background: #e3f1e8; }
.coverage-missing { color: #993e37; background: #f9e6e4; }
.location-performance-row > a { width: 28px; height: 28px; display: grid; place-items: center; color: var(--orange); background: #faece3; border-radius: 8px; font-weight: 850; text-decoration: none; }

.equipment-profile-hero { min-height: 310px; padding: clamp(28px, 4vw, 55px); display: flex; justify-content: space-between; align-items: center; gap: 30px; position: relative; overflow: hidden; color: white; background: linear-gradient(120deg, #222 0%, #303030 70%, #3a2b23 100%); border-left: 6px solid var(--orange); border-radius: 22px; box-shadow: 0 24px 55px rgba(38, 38, 38, .18); }
.equipment-profile-hero::after { content: ""; width: 420px; height: 420px; position: absolute; right: -130px; bottom: -250px; border: 1px solid rgba(209, 99, 36, .35); border-radius: 50%; box-shadow: 0 0 0 48px rgba(209, 99, 36, .06), 0 0 0 96px rgba(209, 99, 36, .03); }
.equipment-profile-hero > * { position: relative; z-index: 1; }
.equipment-profile-hero .back-link { color: #efa072; }
.equipment-profile-hero .eyebrow { color: #efa072; }
.equipment-profile-hero h1 { margin: 9px 0 6px; font-size: clamp(38px, 5vw, 68px); line-height: 1; letter-spacing: -.055em; }
.equipment-profile-id { margin: 0 0 28px; color: #ddd; font-size: 18px; font-weight: 750; }
.profile-location { width: fit-content; min-width: 260px; padding: 12px 15px; display: grid; grid-template-columns: auto auto; gap: 3px 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); border-radius: 12px; }
.profile-location span { grid-column: 1 / -1; color: #aaa; font-size: 12px; text-transform: uppercase; }
.profile-location strong { color: #f2a173; font-size: 16px; }
.profile-location small { align-self: center; color: white; font-size: 14px; }
.profile-machine-icon { width: 170px; height: 170px; display: grid; place-items: center; color: #ed9663; background: rgba(209, 99, 36, .09); border: 1px solid rgba(209, 99, 36, .24); border-radius: 50%; }
.profile-machine-icon svg { width: 105px; height: 105px; }
.pdm-icon-profile { width: 148px; height: 96px; filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .24)); }
.profile-summary-grid { margin: 18px 0 34px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.profile-summary-grid article { min-height: 105px; padding: 17px 18px; display: flex; flex-direction: column; justify-content: space-between; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 7px 22px rgba(38, 38, 38, .05); }
.profile-summary-grid span { color: var(--muted); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .035em; }
.profile-summary-grid strong { font-size: 17px; line-height: 1.3; }
.history-section { max-width: 1180px; margin: 0 auto; }
.history-heading { margin-bottom: 18px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.history-heading h2 { margin: 6px 0 0; font-size: 30px; letter-spacing: -.035em; }
.history-count { padding: 7px 10px; color: var(--muted); background: white; border: 1px solid var(--line); border-radius: 100px; font-size: 12px; font-weight: 750; }
.equipment-timeline { position: relative; }
.equipment-timeline::before { content: ""; width: 2px; position: absolute; top: 18px; bottom: 18px; left: 20px; background: #ddd6d1; }
.timeline-entry { margin-bottom: 16px; display: grid; grid-template-columns: 42px 1fr; gap: 15px; position: relative; }
.timeline-marker { width: 42px; height: 42px; display: grid; place-items: center; position: relative; z-index: 1; color: white; border: 4px solid var(--canvas); border-radius: 50%; font-size: 10px; font-weight: 900; }
.timeline-card { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 8px 26px rgba(38, 38, 38, .055); }
.timeline-card > header { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #eeeae7; }
.timeline-card > header time { margin-right: 12px; font-size: 17px; font-weight: 850; }
.timeline-card > header div > span { color: var(--muted); font-size: 14px; }
.timeline-description { padding: 15px 16px; background: #fcfaf8; }
.timeline-description span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.timeline-description p { margin: 7px 0 0; font-size: 15px; line-height: 1.55; }
.timeline-facts { margin: 0; padding: 5px 16px 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 18px; }
.timeline-facts div { padding: 11px 0; border-bottom: 1px solid #eeeae7; }
.timeline-facts dt { color: var(--muted); font-size: 12px; }
.timeline-facts dd { margin: 4px 0 0; font-size: 14px; font-weight: 750; }
.timeline-card footer { padding: 10px 16px; color: var(--muted); background: #f7f4f2; font-size: 12px; }

.compact-heading { align-items: center; }
.notification-list { overflow: hidden; }
.notification-item { min-height: 105px; padding: 17px 18px; display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: start; border-bottom: 1px solid #ece8e5; }
.notification-item:last-child { border-bottom: 0; }
.notification-unread { background: linear-gradient(90deg, rgba(209, 99, 36, .08), transparent 45%); }
.notification-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--orange); background: var(--green-soft); border-radius: 11px; }
.notification-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.notification-meta span { padding: 3px 6px; color: white; background: var(--orange); border-radius: 10px; font-weight: 800; text-transform: uppercase; }
.notification-item h2 { margin: 6px 0 4px; font-size: 16px; }
.notification-item p { margin: 0; max-width: 850px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.notification-action { align-self: center; }

.login-layout { min-height: calc(100vh - 140px); display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(360px, .55fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.login-intro { min-height: 600px; max-width: 980px; padding: clamp(36px, 5vw, 70px); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; color: white; border-radius: 26px; background-image: linear-gradient(90deg, rgba(38, 38, 38, .98) 0%, rgba(38, 38, 38, .80) 39%, rgba(38, 38, 38, .10) 67%), url("../images/okt-mining-control-hero.png"); background-size: cover, cover; background-position: center, 74% center; box-shadow: 0 32px 70px rgba(38, 38, 38, .24); }
.login-intro::after { content: ""; position: absolute; inset: auto -70px -90px auto; width: 290px; height: 290px; border: 1px solid rgba(209, 99, 36, .38); border-radius: 50%; box-shadow: 0 0 0 38px rgba(209, 99, 36, .05), 0 0 0 76px rgba(209, 99, 36, .03); }
.login-intro > * { position: relative; z-index: 1; }
.login-intro .eyebrow { color: #efa072; }
.login-live { width: fit-content; margin-bottom: 34px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 8px; color: #f6b58c; background: rgba(209, 99, 36, .14); border: 1px solid rgba(209, 99, 36, .35); border-radius: 100px; font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(8px); }
.login-live .ui-icon { width: 16px; height: 16px; }
.login-intro h1 { max-width: 690px; margin: 12px 0 18px; font-size: clamp(40px, 4.5vw, 68px); line-height: .98; letter-spacing: -.06em; }
.login-intro > p { max-width: 550px; margin: 0 0 38px; color: rgba(255, 255, 255, .68); font-size: 15px; line-height: 1.65; }
.login-feature { max-width: 525px; display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; margin-top: 14px; }
.feature-icon { width: 32px; height: 32px; padding: 7px; display: grid; place-items: center; color: #ef9b69; background: rgba(209, 99, 36, .13); border: 1px solid rgba(209, 99, 36, .28); border-radius: 9px; }
.feature-icon svg { width: 18px; height: 18px; }
.login-feature p { margin: 0; color: rgba(255, 255, 255, .66); font-size: 14px; line-height: 1.5; }
.login-feature strong { color: white; }
.login-card { padding: clamp(28px, 4vw, 48px); background: rgba(255, 255, 255, .95); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 70px rgba(24, 45, 32, .13); }
.login-card-copy { position: relative; }
.login-monogram { position: absolute; right: 0; top: -8px; width: 48px; height: 48px; display: grid; place-items: center; color: white; background: var(--green); border-radius: 14px; font-size: 14px; font-weight: 850; letter-spacing: .08em; box-shadow: 0 10px 24px rgba(209, 99, 36, .25); }
.login-card h2 { margin: 8px 0 5px; font-size: 28px; letter-spacing: -.035em; }
.login-card-copy > p { margin: 0 0 25px; color: var(--muted); font-size: 14px; }
.login-form { display: grid; }
.login-form label { margin: 13px 0 7px; color: #3f4843; font-size: 14px; font-weight: 750; }
.login-form input { width: 100%; min-height: 48px; padding: 10px 13px; border: 1px solid #d4dbd6; border-radius: 9px; outline: 0; }
.login-form input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(209, 99, 36, .14); }
.login-form .button { margin-top: 22px; }
.login-note { display: block; margin-top: 18px; color: #929995; text-align: center; }
.login-recovery-link { margin-top: 12px; justify-self: end; color: var(--orange); font-size: 14px; font-weight: 750; text-decoration: none; }
.login-recovery-link:hover { color: #a94816; text-decoration: underline; }
.password-reset-shell { min-height: calc(100vh - 220px); display: grid; place-items: center; padding-block: 36px; }
.password-reset-card { width: min(620px, 100%); padding: clamp(24px, 4vw, 40px); background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 65px rgba(38, 38, 38, .11); }
.password-reset-card-wide { width: min(780px, 100%); }
.reset-symbol { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 20px; color: #fff; background: var(--orange); border-radius: 17px; box-shadow: 0 12px 28px rgba(209, 99, 36, .28); }
.reset-symbol svg { width: 28px; height: 28px; }
.password-reset-card h1 { margin: 0 0 10px; color: var(--ink); font-size: clamp(28px, 4vw, 38px); letter-spacing: -.04em; }
.password-reset-card > p { margin: 0 0 26px; color: var(--muted); line-height: 1.65; }
.password-reset-form { display: grid; gap: 10px; }
.password-reset-form label { color: #3f4843; font-size: 14px; font-weight: 750; }
.password-reset-form input:not([type="hidden"]) { width: 100%; min-height: 50px; padding: 11px 13px; border: 1px solid #d4dbd6; border-radius: 9px; outline: 0; }
.password-reset-form input:not([type="hidden"]):focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(209, 99, 36, .14); }
.password-reset-form #id_code { max-width: 210px; font-size: 30px; font-weight: 850; letter-spacing: .25em; text-align: center; }
.password-reset-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
.password-reset-fields > div { display: grid; gap: 8px; align-content: start; }
.password-rules { margin: 8px 0 4px; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.reset-security-note { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 4px; padding: 13px 15px; color: #5b625e; background: #fff7f1; border: 1px solid #f2d2bd; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.reset-security-note svg { width: 18px; min-width: 18px; height: 18px; color: var(--orange); }
.password-reset-form .button { margin-top: 14px; }
.password-reset-back { display: inline-flex; margin-top: 20px; color: var(--orange); font-weight: 750; text-decoration: none; }
.password-reset-back:hover { text-decoration: underline; }

@media (max-width: 1350px) {
  .topbar { flex-wrap: wrap; }
  .main-nav { order: 3; width: 100%; margin: 0; justify-content: flex-start; overflow-x: auto; border-top: 1px solid #444; }
}

@media (max-width: 1180px) {
  .topbar { flex-wrap: wrap; }
  .main-nav { order: 3; width: 100%; margin: 0; justify-content: flex-start; overflow-x: auto; border-top: 1px solid #444; }
  .period-form { display: grid; grid-template-columns: 155px 155px minmax(230px, 1fr); }
  .period-form select, .period-form .location-filter { width: 100%; }
  .dashboard-filter-card { align-items: stretch; flex-direction: column; }
  .dashboard-filter-form { grid-template-columns: 170px minmax(230px, 1fr) auto auto; }
  .dashboard-data-note { max-width: none; }
  .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-analytics-grid { grid-template-columns: 1fr; }
  .warranty-charts-row { grid-template-columns: 1fr; }
  .warranty-share-card { max-width: none; }
  .distribution-wide-layout .distribution-list { grid-template-columns: 1fr; }
  .distribution-wide-layout .distribution-list-head { grid-column: auto; }
  .comparison-row details { padding-left: 20px; }
  .toolbar-card { grid-template-columns: 1fr 1fr; }
  .filter-grid { grid-template-columns: repeat(3, 1fr); }
  .report-list-head { display: none; }
  .report-list-row { grid-template-columns: 1fr 1.5fr auto; }
  .report-list-row > :nth-child(4) { display: none; }
  .ktg-report-head { display: none; }
  .ktg-report-row { grid-template-columns: 1fr 1fr auto; }
  .ktg-report-row > :nth-child(2) { grid-column: 1 / 3; }
  .period-panel, .legend-card { align-items: stretch; flex-direction: column; grid-template-columns: 1fr; }
  .profile-summary-grid { grid-template-columns: 1fr 1fr; }
  .timeline-facts { grid-template-columns: 1fr 1fr; }
  .toolbar-divider { display: none; }
  .toolbar-hint { justify-self: stretch; grid-column: 1 / -1; }
  .login-layout { grid-template-columns: 1fr; padding-top: 20px; }
  .login-intro { min-height: 520px; max-width: none; }
  .login-intro h1 { font-size: clamp(40px, 10vw, 64px); }
  .login-card { max-width: 560px; width: 100%; }
}

@media (max-width: 900px) {
  .topbar { min-height: 78px; flex-wrap: nowrap; gap: 14px; }
  .main-nav { display: none; }
  .mobile-menu-toggle { display: grid; }
  .user-copy, .button-quiet, .header-logout { display: none; }
  .brand-cluster { margin-right: auto; }
  .daily-equipment-table, .daily-equipment-table tbody, .daily-equipment-table tr, .daily-equipment-table td { width: 100%; display: block; }
  .daily-equipment-table { min-width: 0; padding: 12px; background: #f1eeeb; }
  .daily-equipment-table thead { display: none; }
  .daily-equipment-table tbody { display: grid; gap: 13px; }
  .daily-equipment-table tbody tr { overflow: hidden; background: white; border: 1px solid #dcd5d0; border-radius: 13px; box-shadow: 0 5px 16px rgba(38, 38, 38, .055); }
  .daily-equipment-table tbody tr:hover td { background: white; }
  .daily-equipment-table td, .daily-equipment-table td:nth-child(n) { width: 100% !important; padding: 12px 13px; position: static; border-bottom: 1px solid #eee9e5; box-shadow: none; }
  .daily-equipment-table td::before { content: attr(data-label); margin-bottom: 7px; display: block; color: #766e68; font-size: 12px; font-weight: 850; line-height: 1.3; letter-spacing: .035em; text-transform: uppercase; }
  .daily-equipment-table td.equipment-cell { padding: 14px 13px; background: #fff8f3; border-bottom-color: #ead4c6; }
  .daily-equipment-table tbody tr:hover td.equipment-cell { background: #fff8f3; }
  .daily-equipment-table .equipment-cell::before { color: var(--orange); }
  .daily-equipment-table .equipment-line { margin-top: 0; white-space: normal; font-size: 15px; line-height: 1.45; }
  .daily-equipment-table select, .daily-equipment-table input, .daily-equipment-table textarea { min-height: 48px; font-size: 16px; }
  .daily-equipment-table textarea { min-height: 88px; }
  .daily-equipment-table tbody tr:last-child td:not(:last-child) { border-bottom: 1px solid #eee9e5; }
  .daily-equipment-table tbody tr td:last-child { border-bottom: 0; }
  .location-card:has(.daily-equipment-table) { overflow: visible; background: transparent; box-shadow: none; }
  .location-card:has(.daily-equipment-table) .location-header { border-radius: 14px 14px 0 0; }
  .location-card:has(.daily-equipment-table) .table-scroll { overflow: visible; }
}

@media (max-width: 680px) {
  .topbar { min-height: 74px; padding: 8px 12px; gap: 10px; }
  .password-reset-shell { min-height: auto; padding-block: 18px 32px; }
  .password-reset-card { padding: 22px 18px; border-radius: 16px; }
  .password-reset-fields { grid-template-columns: 1fr; }
  .password-reset-form #id_code { max-width: 100%; }
  .brand-cluster { width: 220px; flex-basis: 220px; }
  .brand-logo { width: 220px; height: 50px; }
  .user-panel { gap: 8px; }
  .notification-button { width: 42px; height: 42px; }
  .page-shell { padding-top: 24px; }
  .page-heading { align-items: start; }
  .planner-detail-heading, .compact-heading { flex-direction: column; align-items: stretch; }
  .detail-status-card { width: 100%; min-width: 0; }
  .heading-summary { display: none; }
  .toolbar-card { grid-template-columns: 1fr; gap: 17px; padding: 16px; }
  .toolbar-hint { grid-column: auto; grid-template-columns: 32px 1fr; }
  .toolbar-hint > span:last-child { grid-column: 1 / -1; }
  .form-actions { position: relative; bottom: auto; align-items: stretch; flex-direction: column; }
  .filter-grid { grid-template-columns: 1fr; }
  .report-list-row { grid-template-columns: 1fr auto; gap: 12px; }
  .report-list-row > :nth-child(2), .report-list-row > :nth-child(4) { display: none; }
  .site-footer { align-items: flex-start; flex-direction: column; }
  .ktg-filter-grid { grid-template-columns: 1fr; }
  .ktg-report-row { grid-template-columns: 1fr auto; }
  .ktg-report-row > :nth-child(2) { grid-column: 1 / -1; }
  .ktg-report-row > :nth-child(3), .ktg-report-row > :nth-child(4) { display: none; }
  .ktg-detail-heading { align-items: flex-start; flex-direction: column; }
  .ktg-calculation-note { align-items: flex-start; }
  .ktg-fields { grid-template-columns: 1fr; padding: 18px 14px; }
  .ktg-form-card > header, .ktg-form-card > footer { align-items: stretch; flex-direction: column; }
  .ktg-form-card > header > small { text-align: left; }
  .ktg-table-heading, .ktg-table-actions { align-items: stretch; flex-direction: column; }
  .ktg-table-heading > span { width: fit-content; }
  .ktg-equipment-table th:nth-child(1), .ktg-equipment-table td:nth-child(1) { width: 270px; }
  .period-form { display: grid; grid-template-columns: 1fr 1fr; }
  .period-form input { width: 100%; }
  .period-form .location-filter { grid-column: 1 / -1; }
  .period-form .multi-select-menu { width: 100%; }
  .period-form .warranty-filter { grid-column: 1 / -1; }
  .period-form select { width: 100%; }
  .dashboard-heading { align-items: stretch; flex-direction: column; }
  .dashboard-heading .button { width: 100%; }
  .dashboard-filter-form { min-width: 0; grid-template-columns: 1fr 1fr; }
  .dashboard-filter-form .location-filter { grid-column: 1 / -1; }
  .dashboard-filter-form .multi-select-menu { width: 100%; }
  .dashboard-filter-form .button { width: 100%; }
  .dashboard-kpi-grid { grid-template-columns: 1fr; }
  .dashboard-kpi { min-height: 175px; }
  .dashboard-card-heading { align-items: start; }
  .dashboard-chart-card .dashboard-card-heading { align-items: flex-start; flex-direction: column; }
  .chart-legend { justify-content: flex-start; }
  .distribution-wide-layout { grid-template-columns: 1fr; }
  .distribution-wide-layout .distribution-total { margin-bottom: 0; }
  .readiness-chart { padding-inline: 12px; }
  .attention-row { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .attention-priority { grid-column: 1; }
  .attention-equipment { grid-column: 1; }
  .attention-status { grid-column: 2; grid-row: 1 / span 2; }
  .attention-problems { grid-column: 1 / -1; }
  .attention-arrow { display: none; }
  .dashboard-muted { display: none; }
  .review-overview { grid-template-columns: 38px 1fr; }
  .live-edit-counter { grid-column: 1 / -1; padding: 10px 0 0; justify-content: space-between; border-top: 1px solid #e6c9b7; border-left: 0; }
  .planner-comment-card { grid-template-columns: 1fr; gap: 12px; }
  .comparison-changes > div { grid-template-columns: 1fr 20px 1fr; }
  .comparison-changes strong { grid-column: 1 / -1; }
  .review-history-content > header { flex-direction: column; }
  .review-history-changes section > div { grid-template-columns: 1fr 15px 1fr; }
  .review-history-changes section > div > span { grid-column: 1 / -1; }
  .legend-items { display: grid; grid-template-columns: 1fr; }
  .notification-item { grid-template-columns: 35px 1fr; }
  .notification-action { grid-column: 2; }
  .equipment-table th:nth-child(1), .equipment-table td:nth-child(1) { width: 250px; }
  .operational-matrix .matrix-equipment-head, .matrix-equipment-cell { min-width: 230px; max-width: 230px; }
  .operational-matrix .matrix-warranty-head, .operational-matrix td.matrix-warranty-cell { min-width: 132px; width: 132px; position: static; }
  .matrix-equipment-col { width: 230px; }
  .matrix-warranty-col { width: 132px; }
  .equipment-profile-hero { min-height: 0; padding: 30px 24px; }
  .profile-machine-icon { display: none; }
  .profile-summary-grid { grid-template-columns: 1fr; }
  .history-heading { align-items: start; flex-direction: column; }
  .timeline-entry { grid-template-columns: 30px 1fr; gap: 9px; }
  .equipment-timeline::before { left: 14px; }
  .timeline-marker { width: 30px; height: 30px; border-width: 3px; }
  .timeline-card > header { align-items: start; flex-direction: column; }
  .timeline-card > header time, .timeline-card > header div > span { display: block; }
  .timeline-facts, .drawer-facts { grid-template-columns: 1fr; }
  .detail-drawer { width: 100%; }
  .action-buttons { display: grid; grid-template-columns: 1fr; }
  .login-intro { min-height: 480px; padding: 30px 24px; background-position: center, 68% center; }
  .login-live { margin-bottom: 24px; }
  .login-intro .login-feature { display: none; }
  .login-intro > p { margin-bottom: 10px; }
  .login-card { padding: 28px 22px; }
}

@media (max-width: 360px) {
  .topbar { padding-inline: 8px; gap: 8px; }
  .brand-cluster { width: 190px; flex-basis: 190px; }
  .brand-logo { width: 190px; }
  .mobile-menu-dialog { width: calc(100% - 12px); }
  .page-shell { padding-inline: 12px; }
  .period-form { grid-template-columns: 1fr; }
}