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

:root{
  --brand:#5b8bc9;
  --brand-600:#3f6dac;
  --surface:#0b0b0b;
  --bg:#f7f8fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --ok:#22c55e; 
  --warn:#f59e0b; 
  --danger:#ef4444; 
  --border:#e5e7eb;
  --radius:12px;
  --shadow:0 10px 30px -12px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.06);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; --card:#0f172a; --text:#e5e7eb; --muted:#9aa3af; --border:#1f2937;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;font-family:Inter, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;color:var(--text);background:var(--bg)}

/* Hide content until i18n is initialized */
.i18n-loading{opacity:0;transition:opacity 0.2s ease-in}
.i18n-ready{opacity:1}

.navbar{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:16px;padding:16px 22px;background:linear-gradient(180deg,var(--brand),var(--brand-600));border-bottom:1px solid rgba(255,255,255,.12);backdrop-filter:saturate(140%) blur(6px);box-shadow:0 2px 12px rgba(0,0,0,.12)}
.nav-left{display:flex;align-items:center;gap:12px;justify-self:start}
.logos{display:flex;align-items:center;gap:6px}
.brand{color:#fff;margin:0;font-size:20px;font-weight:700;letter-spacing:.3px}
.nav-links{display:flex;gap:8px;align-items:center;justify-self:center}
.nav-links a{color:#fff;text-decoration:none;padding:8px 12px;border-radius:10px;opacity:.95;transition:.2s background-color}
.nav-links a.active,.nav-links a:hover{background:rgba(255,255,255,.16)}
.nav-right{display:flex;gap:12px;align-items:center;justify-self:end}
.logo{height:44px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}

/* Language switcher */
.language-switcher{display:flex;gap:4px;align-items:center}
.language-switcher .btn{min-width:40px;padding:6px 8px;font-size:12px;font-weight:600}
.language-switcher .btn:disabled{opacity:0.6;cursor:not-allowed}

.container{max-width:1100px;margin:28px auto;padding:0 18px}
.narrow{max-width:520px}
.page-title{margin:0 0 14px 0;letter-spacing:.2px}
.controls-row{display:flex;gap:12px;margin:12px 0 18px 0}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.row-gap{display:flex;flex-direction:column;gap:14px}

.grid.two{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grid.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.field{display:flex;flex-direction:column;gap:8px}
.field span{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.2px}
input,select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);font-size:14px;background:var(--card);color:var(--text);transition:border-color .2s, box-shadow .2s}
select{appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;padding-right:40px}
input:focus,select:focus,button:focus{outline:none;border-color:color-mix(in oklab, var(--brand) 40%, white);box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 24%, transparent)}

.btn{padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:linear-gradient(180deg,#fff,#f6f7fb);cursor:pointer;transition:transform .05s ease, box-shadow .2s;background-clip:padding-box}
.btn:hover{box-shadow:0 4px 12px rgba(16,24,40,.10)}
.btn:active{transform:translateY(1px)}
.btn.full{width:100%}
.btn-primary{background:linear-gradient(180deg,var(--brand),var(--brand-600));border-color:transparent;color:#fff;box-shadow:0 6px 20px -6px rgba(91,139,201,.6)}
.btn-primary:hover{filter:brightness(.98)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

.table-wrap{overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
table.table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
table.table thead th{position:sticky;top:0;background:linear-gradient(180deg, color-mix(in oklab, var(--card) 80%, white), var(--card));border-bottom:1px solid var(--border);text-align:left;padding:12px 12px;font-weight:600}
table.table tbody tr:nth-child(even){background:color-mix(in oklab, var(--card) 95%, #000)}
table.table tbody tr:hover{background:color-mix(in oklab, var(--card) 92%, #000)}
table.table tbody td{border-top:1px solid var(--border);padding:12px;vertical-align:middle}

/* Fixed column widths for settings table */
table.table.settings-table th:nth-child(1), table.table.settings-table td:nth-child(1){width:60px} /* # */
table.table.settings-table th:nth-child(2), table.table.settings-table td:nth-child(2){width:120px} /* Category */
table.table.settings-table th:nth-child(3), table.table.settings-table td:nth-child(3){width:200px} /* Chinese */
table.table.settings-table th:nth-child(4), table.table.settings-table td:nth-child(4){width:200px} /* English */
table.table.settings-table th:nth-child(5), table.table.settings-table td:nth-child(5){width:150px} /* Actions */

/* Fixed column widths for dashboard table */
table.table.dashboard-table th:nth-child(1), table.table.dashboard-table td:nth-child(1){width:100px} /* Room */
table.table.dashboard-table th:nth-child(2), table.table.dashboard-table td:nth-child(2){width:80px} /* Signal */
table.table.dashboard-table th:nth-child(3), table.table.dashboard-table td:nth-child(3){width:100px} /* Online */
table.table.dashboard-table th:nth-child(4), table.table.dashboard-table td:nth-child(4){width:80px} /* Battery */
table.table.dashboard-table th:nth-child(5), table.table.dashboard-table td:nth-child(5){width:150px} /* Last Update */
table.table.dashboard-table th:nth-child(6), table.table.dashboard-table td:nth-child(6){width:200px} /* Staff */
table.table.dashboard-table th:nth-child(7), table.table.dashboard-table td:nth-child(7){width:150px} /* Actions */

.status{display:flex;align-items:center;gap:8px}
.dot{width:10px;height:10px;border-radius:50%}
.dot.online{background:var(--ok)}
.dot.offline{background:var(--danger)}
.bars{display:flex;gap:3px}
.bar{width:5px;height:12px;background:#e5e7eb;border-radius:2px}
.bar.on{background:#4b5563}
.battery{min-width:64px;font-variant-numeric:tabular-nums}
.standby{padding:6px 10px;border-radius:999px;background:#111;color:#fff;font-size:12px}

/* Toggle switch */
.switch{position:relative;display:inline-block;width:44px;height:24px;vertical-align:middle}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#bbb;transition:.2s;border-radius:999px}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;top:3px;background:white;transition:.2s;border-radius:50%}
.switch input:checked + .slider{background:#16a34a}
.switch input:checked + .slider:before{transform:translateX(20px)}
.switch-label{margin-left:8px;font-size:13px;color:var(--muted);min-width:60px;display:inline-block}

/* Modal styles */
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center}
.modal-content{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);max-width:600px;width:90%;max-height:90vh;overflow:hidden}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--border)}
.modal-header h3{margin:0;font-size:18px;font-weight:600}
.modal-body{padding:20px}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}

.footer{display:flex;justify-content:center;align-items:center;padding:20px;color:var(--muted)}

.warning{background:color-mix(in oklab, var(--warn) 12%, transparent);border:1px solid color-mix(in oklab, var(--warn) 30%, transparent);border-radius:var(--radius);padding:12px 16px;margin-top:8px}
.warning span{color:var(--warn);font-size:14px;font-weight:500}

@media (max-width:760px){
  .grid.two{grid-template-columns:1fr}
  .brand{font-size:18px}
}

/* PWA Styles */
.install-btn {
  display: none;
  background: linear-gradient(180deg, var(--brand), var(--brand-600));
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.install-btn:hover {
  filter: brightness(0.95);
}

.offline-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--warn);
  color: #fff;
  text-align: center;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  z-index: 1001;
  display: none;
}

.update-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 1000;
  max-width: 300px;
}

.update-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.update-content span {
  font-weight: 600;
  color: var(--text);
}

.update-content button {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.update-content button:first-of-type {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.update-content button:hover {
  filter: brightness(0.95);
}

/* PWA-specific responsive adjustments */
@media (display-mode: standalone) {
  .navbar {
    padding-top: calc(16px + env(safe-area-inset-top));
  }
  
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Prevent zoom on input focus for PWA */
@media screen and (max-width: 768px) {
  input, select, textarea {
    font-size: 16px;
  }
}