/*
 * Spacepod admin: additions on top of admin.css (the design prototype, kept unmodified).
 * - readability: the prototype uses 9-11px text; raise it slightly
 * - visible keyboard focus
 * - components the Laravel pages need (alerts, field errors, switches, secrets, pagination links)
 * - badges for Spacepod's real statuses
 */

/* Readability */
.table{font-size:12.5px}
.table th{font-size:10.5px}
.cell-sub,.stat-meta,.queue-info small,.quick small,.detail-card small,.profile-card small,.drawer-head p,.card-head p{font-size:11px}
.badge{font-size:10.5px}
.chip,.pager-btn,.table-pagination-info,.tab,.info-row,.metric-row span,.field label,.toast{font-size:11.5px}
.btn{font-size:12.5px}
.nav a{font-size:13.5px}
.stat-label{font-size:12px}
.card-head h3{font-size:14px}
.detail-card strong,.queue-info strong,.quick strong{font-size:12.5px}
input,select,textarea,.search input{font-size:13px}
.page-head p{font-size:13.5px}

/* Keyboard focus */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--primary);outline-offset:2px}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(108,92,231,.15)}

/* Rows that open a drawer */
tr[data-drawer-url]{cursor:pointer}

/* Alerts and field errors */
.alert{border-radius:11px;padding:12px 14px;font-size:12.5px;margin-bottom:14px;border:1px solid transparent}
.alert-success{background:#eaf8f2;color:#0f7452;border-color:#ccebdc}
.alert-warning,.alert-danger,.alert-error{background:#fff0f0;color:#a53838;border-color:#f3d0d0}
.alert-info{background:#eeedff;color:#4c3fc4;border-color:#dcd8ff}
.alert ul{margin:6px 0 0;padding-left:18px}
.field-error{font-size:11px;color:var(--danger)}
.field .hint{font-size:11px;color:var(--muted)}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--danger)}
.required{color:var(--danger)}

/* Status badges for Spacepod's states */
.badge-expired,.badge-finished{background:#eff2f5;color:#687386}
.badge-fixed{background:#eeedff;color:#594ad1}
.badge-flexible{background:#e9f4ff;color:#1f5f99}
.badge-meeting{background:#fff0df;color:#9a5d00}
.badge-public{background:#eff2f5;color:#4b5565}
.badge-premium{background:#eeedff;color:#594ad1}
.dark .badge-expired,.dark .badge-finished,.dark .badge-public{background:#262b36;color:#aab2c2}

/* Toggle switch */
.switch{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;cursor:pointer}
.switch input{appearance:none;width:36px;height:20px;border-radius:20px;background:var(--border);position:relative;padding:0;border:0;cursor:pointer;transition:.15s}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.15s}
.switch input:checked{background:var(--primary)}
.switch input:checked::after{left:19px}

/* Secrets (router passwords, access keys) */
.secret{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.link-btn{border:0;background:none;color:var(--primary);font-weight:700;cursor:pointer;padding:0 0 0 6px;font-size:11px}

/* Pagination rendered by Laravel: links, plus spans for the current page and disabled Previous / Next */
.pager-btn{display:inline-grid;place-items:center;text-decoration:none}
.pager-btn.dots{border-color:transparent;background:none;cursor:default}

/* Modal (server-rendered, toggled with the hidden attribute) */
.modal-shell[hidden]{display:none}
.modal.modal-wide{width:min(860px,100%)}
.modal-body .form-grid + .form-grid{margin-top:13px}

/* Repeater rows (plan options, pricing, bulk spaces) */
.repeat-table td{padding:8px 6px;white-space:normal}
.repeat-table input,.repeat-table select{width:100%;min-width:90px}

/* Drawer loading state */
.drawer-loading{padding:60px 20px;text-align:center;color:var(--muted);font-size:12px}

/* Small helpers */
.inline-form{display:inline}
.text-right{text-align:right}
.nowrap{white-space:nowrap}
.stack{display:flex;flex-direction:column;gap:4px}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.section-gap{margin-top:14px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.sidebar-user .role{font-size:10.5px;color:var(--muted)}
.nav a .nav-sub{margin-left:auto;font-size:10px;color:var(--muted)}
.empty-cell{padding:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Drawer: anchor to the viewport edges instead of 100vh (mobile browsers' 100vh includes hidden toolbars) */
.drawer{top:0;bottom:0;height:auto}

/* Phones: two stat cards per row instead of one tall column */
@media(max-width:700px){
.stats{grid-template-columns:1fr 1fr}
.stat{min-height:0;padding:14px}
.stat-value{font-size:22px;margin:8px 0 2px}
}
@media(max-width:700px){
.detail-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.detail-card{padding:10px}
}

/* Dark mode fixes for prototype components */
.dark .chip.active{background:#f1f3f5;border-color:#f1f3f5;color:#111}
.dark .badge-active,.dark .badge-paid,.dark .badge-online,.dark .badge-won,.dark .badge-checked-in{background:rgba(52,199,140,.16);color:#6fdcb0}
.dark .badge-pending,.dark .badge-new,.dark .badge-contacted,.dark .badge-warning,.dark .badge-maintenance,.dark .badge-meeting{background:rgba(245,176,65,.16);color:#f3c56b}
.dark .badge-upcoming,.dark .badge-qualified,.dark .badge-fixed,.dark .badge-premium{background:rgba(140,124,255,.18);color:#b9b1ff}
.dark .badge-flexible{background:rgba(90,160,240,.18);color:#9cc8ff}
.dark .badge-inactive,.dark .badge-unpaid{background:rgba(240,90,90,.16);color:#ff9d9d}
.dark .alert-success{background:rgba(52,199,140,.12);color:#6fdcb0;border-color:rgba(52,199,140,.3)}
.dark .alert-warning,.dark .alert-danger,.dark .alert-error{background:rgba(240,90,90,.12);color:#ff9d9d;border-color:rgba(240,90,90,.3)}
.dark .alert-info{background:rgba(140,124,255,.12);color:#b9b1ff;border-color:rgba(140,124,255,.3)}
.dark .nav-badge{background:#28243e;color:#b9b1ff}
.badge{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0}
.radio-row{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;cursor:pointer}
.radio-row input{width:auto;padding:0;accent-color:var(--primary)}

/* The hidden attribute must win over component display rules (e.g. .field{display:flex}) */
[hidden]{display:none !important}

/* Revenue report */
.rv-chip{display:inline-grid;place-items:center;text-decoration:none}
.rv-up{color:var(--success);font-weight:800}
.rv-down{color:var(--danger);font-weight:800}
.rv-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:10px;font-weight:700;color:var(--muted)}
.rv-legend span{display:inline-flex;align-items:center;gap:6px}
.rv-legend i,.rv-type i{display:inline-block;width:10px;height:10px;border-radius:3px}
.rv-legend .rv-line-key{height:2px;width:14px;border-radius:0;background:#18202c}
.dark .rv-legend .rv-line-key{background:#f3f4f6}
.rv-chart{display:block;width:100%;height:auto}
.rv-chart-wrap{overflow-x:auto}
@media(max-width:700px){.rv-chart{min-width:640px}}
.rv-grid{stroke:var(--border);stroke-width:1}
.rv-axis{font-size:11px;fill:var(--muted);font-weight:600}
.rv-axis-on{fill:var(--primary);font-weight:800}
.rv-hit{fill:transparent}
.rv-chart a:hover .rv-hit{fill:var(--soft)}
.rv-line{fill:none;stroke:#18202c;stroke-width:2;stroke-dasharray:5 4;opacity:.55}
.rv-dot{fill:#18202c;opacity:.55}
.dark .rv-line{stroke:#f3f4f6}.dark .rv-dot{fill:#f3f4f6}
.rv-table tfoot th{padding:12px 14px;text-align:left;font-size:11px;color:var(--text);border-top:2px solid var(--border);white-space:nowrap}
.rv-table td a{text-decoration:none}
.rv-row-on{background:#efedff}
.dark .rv-row-on{background:#28243e}
.rv-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.rv-bars{display:flex;flex-direction:column;gap:14px}
.rv-bar-head{display:flex;justify-content:space-between;gap:10px;font-size:11px;margin-bottom:6px}
.rv-bars small{display:block;margin-top:4px;font-size:9px;color:var(--muted)}
.rv-type{display:inline-flex;align-items:center;gap:6px;margin-right:6px}
@media(max-width:1050px){.rv-three{grid-template-columns:1fr}}

/* Website images and photo fields */
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.img-card img{display:block;width:100%;height:180px;object-fit:cover;background:var(--soft)}
.img-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.img-card-head h3{margin:0;font-size:14px}
.img-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 10px}
.img-form input[type=file]{flex:1;min-width:0;padding:7px;font-size:11px}
.photo-field{display:flex;gap:12px;align-items:center}
.photo-field img{width:96px;height:64px;object-fit:cover;border-radius:9px;background:var(--soft);flex:none}
.photo-field img[hidden]{display:none}
.photo-field .photo-inputs{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.thumb{width:44px;height:32px;object-fit:cover;border-radius:6px;background:var(--soft);vertical-align:middle}

/* Show / hide password button (js/password-toggle.js) */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap input { width: 100%; padding-right: 44px; }
.pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #6B7280; cursor: pointer; }
.pw-toggle:hover { background: rgba(99, 102, 241, .1); color: #4F46E5; }
.pw-toggle:focus-visible { outline: 2px solid #6366F1; outline-offset: 1px; }
body.dark .pw-toggle { color: #9CA3AF; }

/* Backup Wi-Fi switch (partials/backup-wifi) */
.backup-wifi { margin-bottom: 14px; }
.backup-wifi-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.backup-wifi-row:first-of-type { border-top: 0; }
.backup-wifi-info { display: grid; gap: 4px; min-width: 0; }
.backup-wifi-info .cell-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Phone / tablet menu: the sidebar must sit above the dimming overlay (admin.css has it at 50, the overlay at 70),
   otherwise the open menu is greyed out and every tap lands on the overlay and just closes it. */
@media (max-width: 1050px) {
    .sidebar { z-index: 75; box-shadow: 20px 0 50px rgba(10, 13, 20, .18); }
    .sidebar:not(.open) { box-shadow: none; }
    body.menu-open { overflow: hidden; }
}

/* ---- Phones (admin) ---------------------------------------------------------------- */
/* The closed drawer sits off-screen to the right (admin.css). Hidden, so it can't widen the page on phones. */
.drawer { visibility: hidden; transition: transform .25s, visibility 0s .25s; }
.drawer.open { visibility: visible; transition: transform .25s; }
html, body { overflow-x: clip; }

@media (max-width: 700px) {
    /* Top bar: one line */
    .topbar { padding: 0 12px; gap: 8px; height: 60px; }
    .topbar-left { min-width: 0; gap: 6px; }
    .topbar-left > div { min-width: 0; }
    .topbar-left small { display: none; }
    .topbar-left strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .top-actions { gap: 6px; flex: none; }
    .top-actions .chip { white-space: nowrap; height: 34px; padding: 0 10px; }
    .page { padding: 16px 12px 40px; }
    .page-head h1 { font-size: 22px; }
    .page-actions { width: 100%; }
    .card-head { flex-wrap: wrap; }
    .toolbar .search, .toolbar form.search { min-width: 0; width: 100%; }

    /* Lists: each row becomes a card (labels come from the column headings, js/admin.js) */
    .table.table-cards thead { display: none; }
    .table.table-cards, .table.table-cards tbody { display: block; width: 100%; }
    .table.table-cards tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
    .table.table-cards tbody tr:hover { background: transparent; }
    .table.table-cards tbody tr[data-drawer-url]:active { background: var(--soft); }
    .table.table-cards td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; overflow-wrap: anywhere; text-align: left; }
    .table.table-cards td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: 9px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; color: var(--muted); }
    .table.table-cards td:first-child, .table.table-cards td[colspan], .table.table-cards td.td-actions { grid-column: 1 / -1; }
    .table.table-cards td.td-chevron { display: none; }
    .table.table-cards td.td-actions .row-actions, .table.table-cards td.td-actions form { flex-wrap: wrap; }
    .table.table-cards td.td-actions .btn { min-height: 40px; }
    .table-wrap:has(> .table-cards) { overflow: visible; }

    /* Tab bars (drawers, Settings, Spaces): one line that scrolls sideways */
    .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { white-space: nowrap; flex: none; padding: 12px 12px; font-size: 11px; }
}

/* Shift handover (partials/handover-card, shift/show modal, handovers/index, reports/daily) */
.handover-card { border: 1.5px solid #c9c2ff; }
.handover-head { background: #f7f6ff; flex-wrap: wrap; }
.dark .handover-head { background: #1e1b33; }
.handover-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.handover-who h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.handover-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
.handover-label { margin: 0 0 8px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.handover-note { margin: 0 0 8px; font-size: 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.handover-note.muted { color: var(--muted); font-style: italic; }
.handover-facts { display: grid; gap: 10px; align-content: start; }
.handover-list { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.handover-list-head { padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 750; }
.handover-list-row { padding: 9px 12px; display: flex; justify-content: space-between; gap: 10px; font-size: 12px; border-top: 1px solid var(--border); }
.handover-list-head + .handover-list-row { border-top: 0; }
.handover-backup { padding: 9px 12px; border-radius: 11px; background: #e9f7f1; color: #0f6b4c; font-size: 12px; line-height: 1.5; }
.handover-backup.is-on { background: #fff5da; color: #7a5200; }
.handover-modal { width: min(640px, 100%); max-height: calc(100vh - 40px); overflow: auto; }
.handover-form { display: grid; gap: 14px; }
.handover-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.handover-stats div { padding: 12px; border: 1px solid var(--border); border-radius: 11px; }
.handover-stats strong { display: block; font-size: 22px; letter-spacing: -.03em; }
.handover-stats span { font-size: 11px; color: var(--muted); }
.handover-foot { flex-wrap: wrap; }
.dr-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.dr-two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; }
.dr-row { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.dr-row:first-child { border-top: 0; }
.dr-handover { padding: 16px 18px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 220px minmax(0, 1fr) 170px; gap: 16px; }
.dr-handover:first-child { border-top: 0; }
.dr-bar { height: 6px; margin-top: 6px; border-radius: 10px; background: var(--soft); overflow: hidden; }
.dr-bar span { display: block; height: 100%; border-radius: 10px; background: var(--primary); }
.dr-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dr-filters input, .dr-filters select { height: 38px; padding: 0 10px; }
@media (max-width: 1050px) { .dr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dr-two { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
    .handover-body { grid-template-columns: 1fr; }
    .handover-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .handover-foot .btn { flex: 1 1 auto; }
    .dr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dr-handover { grid-template-columns: 1fr; gap: 6px; }
}
@media print {
    .sidebar, .topbar, .page-actions, .dr-filters, .toast-root, #overlay { display: none !important; }
    .main { margin-left: 0 !important; }
    .page { padding: 0 !important; max-width: none; }
    body { background: #fff; }
    .card, .stat { break-inside: avoid; box-shadow: none; }
    .dr-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Roles & access grid (roles/index) */
.access-grid .access-col { width: 1%; min-width: 96px; text-align: center; white-space: nowrap; }
.access-grid .access-col input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary, #6c5ce7); cursor: pointer; }
.access-grid .access-col input[disabled] { cursor: not-allowed; opacity: .6; }
.access-grid tr.access-area th { background: var(--soft); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; }

/* Power card (Overview, My shift): each branch's latest inverter and meter check */
.power-row { display: grid; grid-template-columns: minmax(160px, 1fr) auto; gap: 8px 18px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.power-row:last-child { border-bottom: 0; }
.power-row.has-problem { background: #fff8ec; }
.dark .power-row.has-problem { background: #2b2416; }
.power-where strong { display: block; font-size: 13px; }
.power-figures { display: flex; gap: 18px; flex-wrap: wrap; }
.power-figures span { display: flex; flex-direction: column; min-width: 64px; }
.power-figures small { font-size: 10px; color: var(--muted); }
.power-figures strong { font-size: 15px; }
.power-problems { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: #9a5d00; }
.dark .power-problems { color: #f0b45a; }
@media (max-width: 700px) { .power-row { grid-template-columns: 1fr; } }