:root { color-scheme: light; --ink: #212529; --muted: #6c757d; --line: #dee2e6; --surface: #fff; --bg: #f7f7f7; --brand: #f37f00; --brand-dark: #d96d00; --accent: #007bff; --accent-dark: #0056b3; --warning: #fff3cd; --warning-ink: #856404; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; } button, input, select { font: inherit; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top right, #fff0df, transparent 45%), var(--bg); }
.login-card { width: min(440px, 100%); padding: 38px; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--brand); border-radius: 4px; box-shadow: 0 20px 60px #21252918; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.03em; }
.logo-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 4px; color: #fff; background: var(--brand); }
h1, h2, h3, p { margin-top: 0; } h1 { margin: 28px 0 10px; font-size: clamp(28px, 5vw, 40px); letter-spacing: -.04em; } h2 { margin-bottom: 8px; font-size: 25px; letter-spacing: -.03em; }
.muted { color: var(--muted); } .small { font-size: 13px; } .field { margin: 18px 0; } label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
input, select { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: #fff; outline: none; } input:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px #f37f001f; }
button, .button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 11px 16px; border: 0; border-radius: 4px; color: #fff; background: var(--brand); font-weight: 700; cursor: pointer; } button:hover, .button:hover { background: var(--brand-dark); } button.secondary, .button.secondary { color: #fff; background: var(--brand); } button.secondary:hover, .button.secondary:hover { background: var(--brand-dark); } button:disabled { color: #8b94a6; background: #edf0f4; cursor: not-allowed; } .full { width: 100%; }
.alert { margin: 18px 0; padding: 13px 15px; border-radius: 4px; font-size: 14px; } .alert.error { color: #842029; background: #f8d7da; } .alert.notice { color: var(--warning-ink); background: var(--warning); }
.preview-link { display: block; margin-top: 18px; padding: 12px; border: 1px dashed #bec9e7; border-radius: 10px; color: var(--brand-dark); background: #f7f9ff; text-align: center; font-size: 14px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; } .sidebar { padding: 25px 16px; border-right: 1px solid #111; color: #fff; background: #212121; } .sidebar .logo { padding: 0 10px 28px; }
.nav-label { margin: 22px 10px 8px; color: #adb5bd; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .nav-link { display: block; margin: 3px 0; padding: 11px 12px; border-radius: 4px; color: #f8f9fa; font-size: 14px; font-weight: 500; } .nav-link:hover, .nav-link.active { color: #fff; background: var(--brand); } .nav-sub { margin: 2px 0 10px 12px; padding-left: 11px; border-left: 1px solid #495057; }
.main { min-width: 0; } .topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px clamp(20px, 4vw, 52px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); } .topbar h1 { margin: 0; font-size: 18px; letter-spacing: -.02em; } .topbar-right { display: flex; align-items: center; gap: 12px; } .user-pill { padding: 8px 11px; border-radius: 4px; color: #fff; background: var(--brand-dark); font-size: 13px; font-weight: 700; }
.content { max-width: 1220px; margin: 0 auto; padding: clamp(24px, 4vw, 52px); } .eyebrow { margin-bottom: 9px; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .page-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; } .page-head p { margin-bottom: 0; color: var(--muted); }
.card { padding: 22px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); box-shadow: 0 8px 25px #2125290d; } .card + .card { margin-top: 18px; } .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; min-width: 760px; } th, td { padding: 15px 13px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; } th { color: #6c757d; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; } tbody tr:last-child td { border-bottom: 0; }
.empty-state { padding: 42px 18px; text-align: center; } .empty-icon { width: 44px; height: 44px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 4px; color: var(--brand); background: #fff0df; font-weight: 900; } .status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 4px; font-size: 12px; font-weight: 800; } .status.pending { color: var(--warning-ink); background: var(--warning); } .status.off { color: #6c757d; background: #e9ecef; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } .form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 10px; } .info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; } .metric { padding: 18px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); } .metric strong { display: block; margin-top: 7px; font-size: 23px; } .tech-list { display: grid; gap: 10px; } .tech-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 15px; border: 1px solid var(--line); border-radius: 4px; } .tech-name { font-weight: 700; } .readonly { border-left: 4px solid var(--brand); }
@media (max-width: 800px) { .app-shell { display: block; } .sidebar { padding: 14px; border-right: 0; border-bottom: 1px solid var(--line); } .sidebar .logo { padding-bottom: 12px; } .nav-label { display: none; } .nav-sub { display: inline-flex; margin: 0; border: 0; padding: 0; } .nav-link { display: inline-block; margin-right: 4px; } .page-head, .topbar { align-items: flex-start; flex-direction: column; } .info-grid, .form-grid { grid-template-columns: 1fr; } }
.sidebar-footer { display: none; }
.dt-container { margin-top: 4px; color: var(--ink); font-size: 13px; }
.dt-layout-row { align-items: center; gap: 16px; margin: 0 0 16px; }
.dt-layout-row:last-child { margin: 16px 0 0; }
.dt-search input, .dt-length select { min-width: 170px; width: auto; padding: 8px 10px; border-radius: 4px; }
.dt-length select { min-width: 76px; margin: 0 4px; }
.dt-paging-button { border-radius: 4px !important; }
.dt-paging-button.current, .dt-paging-button:hover { color: #fff !important; border-color: var(--brand) !important; background: var(--brand) !important; }
table.dataTable thead th { color: #6c757d; }
table.dataTable tbody td { border-bottom: 1px solid var(--line); }
@media (max-width: 800px) { .dt-layout-row { align-items: flex-start; flex-direction: column; } .dt-search input { width: 100%; } }
.nav-link::before { display: inline-block; width: 16px; color: currentColor; font-size: 15px; line-height: 1; text-align: center; }
.nav-sub .nav-link:first-child::before { content: "▦"; }
.nav-sub .nav-link:nth-child(2)::before { content: "+"; font-size: 19px; font-weight: 300; }
.nav-link[href*="technicians"]::before { content: "⚙"; font-size: 14px; }
.password-field { position: relative; }
.password-field input { padding-right: 48px; }
.password-toggle { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; padding: 7px; border: 0; border-radius: 4px; color: var(--muted); background: #f1f3f5; }
.password-toggle:hover, .password-toggle:focus, .password-toggle.visible { color: var(--brand); background: #fff0df; }
.password-toggle svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.tech-action-form, .customer-action-form { margin: 0; }
.danger-button { padding: 7px 11px; color: #842029; background: #f8d7da; font-size: 12px; }
.danger-button:hover, .danger-button:focus { color: #fff; background: #b02a37; }