/* Shared styling for the Süperadmin (admin.html) and Yönetici (amir.html) web
   panels, plus the login page (index.html). Plain CSS, no build step — kept
   simple and hand-authored to match the FTP-based deploy flow this project
   already uses (see server/index.js's express.static(...) at the domain
   root). */

/* Palette matches the ARGA Safety brand (see the sibling "Ekipman Yönetim
   Sistemi" product at smyloc.com: warm cream background, white card, brand
   red accent, pale lavender input fields) — Fall Alarm is ARGA Safety's own
   product under that same brand, so this panel should read as part of the
   same family rather than a visually unrelated tool. */
:root {
  --bg: #f0ede6;
  --surface: #ffffff;
  --sidebar-bg: #fbf9f6;
  --sidebar-text: #706a62;
  --sidebar-text-active: var(--primary);
  --sidebar-active-bg: var(--primary-muted);
  --text: #1a1a1a;
  --text-muted: #6f6a64;
  --border: #e8e4de;
  --primary: #c8341a;
  --primary-muted: #fbebe7;
  --input-bg: #f5f2ee;
  --danger: #e2483a;
  --danger-muted: #fdeceb;
  --warning: #f5a524;
  --warning-muted: #fef3e0;
  --success: #16a34a;
  --success-muted: #e8f8ee;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
}

* { box-sizing: border-box; }

/* Generic base for every `.ico` icon (an inline PanelIcons SVG, see
   js/api.js) — outline treatment + a sane default size, so a button that
   never got its own sizing rule (an SVG with no width/height renders at
   the browser's ~300x150 replaced-element default, not "small") still
   looks like an icon. Every more specific per-context rule below
   (.nav-item svg, .icon-btn .ico svg, …) comes LATER in this file and, at
   equal specificity, wins on source order — so this only ever supplies
   the size nothing else claims. */
.ico svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

body {
  margin: 0;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Arka plan görseli (img/webpanel.jpeg) olduğu gibi kullanılıyor; görsel
     yüklenmezse eski zemin rengi kalır. Sabit: kaydırırken yerinde durur. */
  background: var(--bg) url("../img/webpanel.jpeg") center bottom / cover no-repeat fixed;
  color: var(--text);
}

a { color: inherit; }

/* ---------- Login page ---------- */

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Zemin body'den (webpanel.jpeg) gelsin. */
  background: transparent;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(28, 24, 20, 0.08);
  overflow: hidden;
}

.login-card .card-body {
  padding: 34px 34px 28px;
}

.login-logo {
  text-align: center;
  margin-bottom: 18px;
}

.login-logo .mark {
  font-size: 26px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.5px;
  line-height: 1;
}

.login-logo .sub-mark {
  font-size: 12px;
  font-weight: 600;
  color: #8a8a8a;
  letter-spacing: 4px;
  margin-top: 2px;
}

.login-card h1 {
  font-size: 19px;
  margin: 0 0 4px;
  text-align: center;
}

.login-card p.subtitle {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 26px;
  text-align: center;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #9a958d;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid transparent;
  background: var(--input-bg);
  border-radius: 10px;
  font-size: 14.5px;
  outline: none;
}

.field input:focus {
  border-color: var(--primary);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  width: 100%;
}

.btn-primary:hover { background: #a8321f; }

.btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

.error-box {
  background: var(--danger-muted);
  color: var(--danger);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

.error-box.visible { display: block; }

.login-footer {
  border-top: 1px solid var(--border);
  padding: 16px 24px;
  text-align: center;
  font-size: 11.5px;
  color: #a39d93;
  line-height: 1.6;
}

/* ---------- Dashboard shell ---------- */
/* Top header bar + sidebar-below layout, matching the ARGA Safety "Ekipman
   Yönetim Sistemi" reference: light sidebar, red active-item accent, a
   fixed-ish top bar carrying the brand mark + account pill + logout. */

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 64px;
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  gap: 16px;
}

.topbar .topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar .hamburger {
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  display: none;
}

.topbar .brand-mark {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 800;
  font-size: 17px;
  color: var(--primary);
  letter-spacing: 0.3px;
}

.topbar .brand-mark .sub {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  color: #8a8a8a;
}

.topbar .topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.role-pill {
  background: #1c2130;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.btn-ghost:hover { background: var(--bg); }

.shell-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
}

.nav-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #a39d93;
  padding: 14px 10px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--sidebar-text);
}

.nav-item:hover { background: rgba(0, 0, 0, 0.03); }

.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-text-active);
  font-weight: 700;
}

.nav-item .badge {
  margin-left: auto;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
  font-size: 11px;
  border-radius: 999px;
  padding: 1px 7px;
}

.nav-item.active .badge {
  background: rgba(192, 57, 43, 0.15);
  color: var(--primary);
}

.main {
  flex: 1;
  min-width: 0;
  padding: 24px 28px 40px;
  overflow-y: auto;
}

/* ---------- Hızlı Erişim (quick-access tiles) ---------- */

.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.quick-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border: 1px solid transparent;
}

.quick-card:hover { border-color: var(--primary); }

.quick-card .quick-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--primary-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.quick-card .quick-title {
  font-size: 13.5px;
  font-weight: 700;
}

.quick-card .quick-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.main-header h1 {
  font-size: 20px;
  margin: 0;
}

.main-header p {
  color: var(--text-muted);
  font-size: 13px;
  margin: 2px 0 0;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}

.status-pill.on { background: var(--success-muted); color: var(--success); }
.status-pill.off { background: var(--danger-muted); color: var(--danger); }

.status-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.tabs {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.tab-btn {
  border: none;
  background: transparent;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.tab-btn.active {
  background: var(--primary);
  color: #fff;
}

/* ---------- Stat cards ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}

.stat-label {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
}

.stat-value.danger { color: var(--danger); }
.stat-value.success { color: var(--success); }
.stat-value.warning { color: var(--warning); }

/* ---------- Panels / cards / lists ---------- */

.panel {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.panel h2 {
  font-size: 14.5px;
  margin: 0 0 14px;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px) {
  .content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .topbar .hamburger { display: block; }
  .sidebar {
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    z-index: 20;
    width: 230px;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
  }
}

.list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  border: 1px solid transparent;
}

.list-row:hover { background: var(--bg); }
.list-row.active { background: var(--primary-muted); border-color: var(--primary); }

.list-row .name { font-weight: 600; flex: 1; }
.list-row .meta { color: var(--text-muted); font-size: 12px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}

.pill.on-shift { background: var(--success-muted); color: var(--success); }
.pill.off-shift { background: var(--border); color: var(--text-muted); }
.pill.alarm { background: var(--danger-muted); color: var(--danger); }

/* Generic muted small-text utility — used standalone (e.g. inside
   report-table cells) as well as scoped inside .list-row/.alert-row above. */
.meta {
  color: var(--text-muted);
  font-size: 12px;
}

.empty-note {
  color: var(--text-muted);
  font-size: 13px;
  padding: 20px 4px;
  text-align: center;
}

#map {
  height: 340px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}

table.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.report-table th, table.report-table td {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
}

table.report-table th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.filter-row input[type="date"] {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
}

.chip {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.alert-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 10px;
  background: var(--bg);
  padding: 12px;
  margin-bottom: 8px;
  font-size: 13px;
}

.alert-row.recent { background: var(--danger-muted); }

.alert-row .icon-box {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.alert-row .body { flex: 1; min-width: 0; }
.alert-row .title { font-weight: 600; }
.alert-row .meta { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.alert-row .detail { color: var(--text-muted); font-size: 12.5px; margin-top: 3px; }
.alert-row .time { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; flex-shrink: 0; }

/* ---------- Avatar (personnel cards) ---------- */

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
  background: var(--primary);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sensor-charts {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.sensor-charts canvas {
  background: var(--bg);
  border-radius: 10px;
  flex: 1;
}

.sensor-caption {
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 4px;
}

/* ---------- emergency banner ----------
   The web twin of the mobile app's full-screen CountdownAlert/
   EmergencyAlertBanner — a new "fall-alert" websocket message used to
   just add a row to the "Son Uyarılar" list at the bottom of the page,
   easy to miss if the Yönetici wasn't looking at that exact spot. This
   blocks the whole page until acknowledged, same as the mobile side. */
.emergency-banner {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(28, 20, 18, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.emergency-banner-card {
  background: var(--surface);
  border-radius: 20px;
  padding: 36px 32px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(20, 10, 8, 0.35);
  animation: emergencyPulseCard 1.4s ease-in-out infinite;
}

@keyframes emergencyPulseCard {
  0%, 100% { box-shadow: 0 20px 60px rgba(20, 10, 8, 0.35); }
  50% { box-shadow: 0 20px 70px rgba(226, 72, 58, 0.45); }
}

.emergency-banner-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--danger);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.emergency-banner-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--danger);
}

.emergency-banner-name {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  margin-top: 6px;
}

.emergency-banner-detail {
  font-size: 13.5px;
  color: var(--danger);
  font-weight: 600;
  margin-top: 10px;
  line-height: 1.5;
}

.emergency-banner-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
}

.btn-primary-light, .btn-ghost-light {
  border: none;
  border-radius: 999px;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.btn-primary-light {
  background: var(--primary);
  color: #fff;
}
.btn-primary-light:hover { background: #a8321f; }

.btn-ghost-light {
  background: #fff;
  color: var(--danger);
  border: 1.5px solid var(--danger);
}
.btn-ghost-light:hover { background: var(--danger-muted); }


/* =====================================================================
   Yönetici paneli — mobil uygulamanın yeni Yönetici düzeninin web karşılığı
   (kimlik kartı, sekmeler, uyarı kartları, raporlar + dışa aktarma).
   ===================================================================== */

/* ---------- kimlik + durum kartı ---------- */
.hcard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  margin-bottom: 18px;
}
.hcard-name { font-size: 22px; font-weight: 800; line-height: 1.15; }
.hcard-company {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--text-muted);
}

.live-pill {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
}
.live-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.live-pill.on { background: var(--success-muted); color: #0b7a3b; }
.live-pill.on .dot { animation: livePulse 1.6s ease-in-out infinite; }
.live-pill.off { background: var(--danger-muted); color: var(--danger); }
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}

.panel h2 .count { color: var(--text-muted); font-weight: 600; font-size: 14px; }
#alerts-badge { background: var(--danger); color: #fff; font-weight: 800; }

/* ---------- Canlı izleme ---------- */
.map-panel #map { height: 420px; }
.worker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.wcard {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.wcard:hover { box-shadow: var(--shadow); }
.wcard.alarm { background: var(--danger-muted); border-color: rgba(226, 72, 58, 0.35); }
.wcard.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-muted); }
.wc-text { flex: 1; min-width: 0; }
.wc-name { font-weight: 700; font-size: 14.5px; }
.wc-role { font-size: 13px; color: var(--text-muted); }
.wc-upd { font-size: 11.5px; color: #9b968d; margin-top: 3px; }
.wc-check { display: none; color: var(--primary); font-weight: 800; }
.wcard.active .wc-check { display: inline; }

/* ---------- Sensör izleme ---------- */
.sens-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sens-head b { font-size: 17px; font-weight: 800; }
.sens-role { font-size: 13px; color: var(--text-muted); font-weight: 500; margin-left: 8px; }
.live-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #0b7a3b; }
.live-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: livePulse 1.6s ease-in-out infinite; }
.sens-card {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px;
}
.trace-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }
.trace-head b { font-size: 20px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; color: var(--text); }
.trace-label { display: inline-flex; align-items: center; gap: 6px; }
.trace-icon { width: 15px; height: 15px; object-fit: contain; }
.trace canvas { display: block; width: 100%; height: 96px; margin-top: 6px; }

/* ---------- Uyarılar ---------- */
.alert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.acard {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px; box-shadow: var(--shadow);
}
.acard.recent { background: var(--danger-muted); border-color: rgba(226, 72, 58, 0.4); }
.acard-new {
  position: absolute; top: -9px; right: 16px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .5px; padding: 3px 9px; border-radius: 999px;
}
.acard-head { display: flex; align-items: center; gap: 14px; }
.acard-icon {
  width: 52px; height: 52px; border-radius: 13px; background: var(--danger); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.acard-icon.manual { background: var(--danger); }
/* fall/inactivity carry their own full-color symbol now (2026-09-22 client
   revision) — a light neutral backdrop instead of a colored one behind it,
   same choice as the mobile app's AlertCard. */
.acard-icon.fall, .acard-icon.inactivity { background: var(--bg); }
.acard-icon svg, .rr-icon svg, .emergency-banner-icon svg, .acard-link svg {
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.acard-icon svg { width: 30px; height: 30px; }
.acard-icon img, .rr-icon img { width: 70%; height: 70%; object-fit: contain; }
.acard-who { min-width: 0; }
.acard-name { font-size: 18px; font-weight: 800; line-height: 1.2; }
.acard-role { font-size: 13.5px; color: var(--text-muted); margin-top: 1px; }
.acard-kind {
  display: inline-block; margin-top: 7px; padding: 2px 10px; border-radius: 999px;
  background: var(--danger-muted); color: var(--danger); font-size: 11.5px; font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(226, 72, 58, 0.22);
}
.acard.recent .acard-kind { background: #fff; }
.acard-meas, .emergency-banner-meas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.acard-meas > div, .emergency-banner-meas > div {
  background: #fff; border: 1.5px solid rgba(226, 72, 58, 0.3); border-radius: 14px; padding: 11px 14px 13px;
}
.acard:not(.recent) .acard-meas > div { background: var(--danger-muted); }
.acard-meas .lb, .emergency-banner-meas .lb { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); line-height: 1.25; }
.acard-meas .vl, .emergency-banner-meas .vl { margin-top: 4px; font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--danger); font-variant-numeric: tabular-nums; }
.acard-meas .vl small, .emergency-banner-meas .vl small { font-size: 17px; font-weight: 700; margin-left: 3px; letter-spacing: 0; }
.acard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.acard-date { font-size: 12px; color: var(--text-muted); }
.acard-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: #2563eb; text-decoration: none; }
.acard-link svg { width: 14px; height: 14px; }
.acard-link:hover { text-decoration: underline; }

/* acil durum penceresi — yeni içerik (ikon SVG, görev, ölçüm kutuları) */
.emergency-banner-icon svg { width: 44px; height: 44px; color: #fff; }
.emergency-banner-role { font-size: 14px; color: var(--text-muted); margin-top: 2px; }

/* ---------- Raporlar ---------- */
.month-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--bg); border-radius: 999px; padding: 3px; }
.stepper button {
  width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--text-muted);
}
.stepper button:hover:not(:disabled) { background: var(--surface); }
.stepper button:disabled { opacity: .3; cursor: default; }
.stepper span { min-width: 140px; text-align: center; font-weight: 800; font-size: 14.5px; }
.stepper.off { opacity: .45; pointer-events: none; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sum-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 6px; }
.sum-grid > div { background: var(--bg); border-radius: 14px; padding: 12px 8px; text-align: center; }
.sum-grid b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sum-grid span { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.sum-grid .r b { color: var(--danger); }
.sum-grid .g b { color: #0b7a3b; }

.export-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
}
.export-info { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.export-info b { font-size: 15px; font-weight: 800; }
.export-info span { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.xbtn {
  border: 0; border-radius: 999px; padding: 10px 22px; font-size: 14px; font-weight: 800; color: #fff; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}
.xbtn.pdf { background: var(--danger); }
.xbtn.xls { background: #08764f; }
.xbtn:hover:not(:disabled) { filter: brightness(1.06); }
.xbtn:disabled { opacity: .4; cursor: default; box-shadow: none; }

.rrow { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--border); }
.rrow:last-child { border-bottom: 0; }
.rr-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--danger); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.rr-icon svg { width: 22px; height: 22px; }
.rr-icon.fall, .rr-icon.inactivity { background: var(--bg); }
.rr-icon.start, .rr-icon.shift-start { background: var(--success); }
.rr-icon.end, .rr-icon.shift-end { background: #3d5afe; }
.rr-body { flex: 1; min-width: 0; }
.rr-title { font-size: 14.5px; }
.rr-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.rr-detail { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-top: 3px; }
.rr-detail.red { color: var(--danger); }
.rr-time { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

@media (max-width: 760px) {
  .hcard { flex-direction: column; align-items: flex-start; }
  .sum-grid { grid-template-columns: repeat(2, 1fr); }
  .alert-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .export-info { flex-basis: 100%; }
}


/* =====================================================================
   ARGA Safety "Ekipman Yönetim Sistemi" ile aynı görsel dil:
   Outfit yazı tipi, krem üst şerit, çizgi ikonlar, solda kırmızı çizgili
   aktif menü, ince kenarlıklı kartlar, dikey "Hızlı erişim" kutuları.
   Fall Alarm logosu üst şeritte ve giriş kartında.
   ===================================================================== */

button, input, select, textarea { font-family: inherit; }

/* ---------- logo ---------- */
.brand-logo { height: 26px; width: auto; display: block; }
.login-logo { margin-bottom: 20px; }
.login-logo img { display: block; width: 200px; max-width: 70%; height: auto; margin: 0 auto; }

/* ---------- üst şerit ---------- */
.topbar { background: #f5f2ee; border-bottom-color: #e0dbd4; }
.role-pill { background: #1a1a1a; font-weight: 500; }
.btn-ghost { font-weight: 500; }

/* ---------- yan menü ---------- */
.sidebar { padding: 14px 0; }
.nav-section-label {
  margin-top: 10px; padding: 16px 20px 8px; border-top: 1px solid var(--border);
  font-size: 11px; font-weight: 500; letter-spacing: .12em; color: #9a9590;
}
.nav-item {
  gap: 12px; padding: 11px 20px 11px 17px; border-radius: 0;
  border-left: 3px solid transparent; font-size: 14.5px; font-weight: 400;
}
.nav-item.active { border-left-color: var(--primary); font-weight: 500; }
.nav-item svg, .quick-icon svg {
  width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.nav-item .ico { display: inline-flex; }
.nav-item .badge { font-weight: 500; }

/* ---------- kartlar ---------- */
.panel, .stat-card, .hcard { border: 1px solid var(--border); }
.panel > h2 {
  margin: -18px -20px 16px; padding: 15px 20px; border-bottom: 1px solid var(--border);
  font-size: 16px; font-weight: 500;
}
.panel h2 .count { font-weight: 400; }
.stat-label { font-size: 12.5px; margin-bottom: 10px; }
.stat-value { font-size: 34px; font-weight: 500; }
.hcard-name { font-weight: 600; }
.main-header h1 { font-weight: 500; font-size: 22px; }

/* ---------- hızlı erişim ---------- */
.section-label { margin: 4px 0 12px; font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #9a9590; }
.quick-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.quick-card {
  flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px 18px 20px;
  border: 1px solid var(--border); box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.quick-card:hover { border-color: #d9d3c9; box-shadow: 0 4px 14px rgba(26, 26, 26, 0.06); }
.quick-card .quick-icon { width: 44px; height: 44px; border-radius: 12px; color: var(--primary); }
.quick-card .quick-icon svg { width: 22px; height: 22px; }
.quick-icon.blue { background: #e8f0fe; color: #2f5fd0; }
.quick-icon.yellow { background: #fdf3d9; color: #b7791f; }
.quick-icon.green { background: #e6f6ec; color: #16803c; }
.quick-card .quick-title { font-size: 15px; font-weight: 500; }
.quick-card .quick-sub { font-size: 12.5px; margin-top: 3px; }

/* ---------- formlar ---------- */
.field label { font-weight: 500; letter-spacing: .08em; }
.field input { border-color: var(--border); }
.field input:focus { border-color: var(--primary); }
.btn { font-weight: 500; }
.btn-primary:hover { background: #ac2c15; }
.chip { font-weight: 500; }
.tab-btn { font-weight: 500; }

.icon-box svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.icon-box { color: var(--primary); }
.alert-row { align-items: center; }

/* ---------- Personel: silme butonu + Excel toplu ekleme modalı (2026-09-22) ---------- */
.panel-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-head-row h2 { margin: 0; }
.row-delete {
  flex: none; width: 30px; height: 30px; border-radius: 8px; border: none;
  background: var(--danger-muted); color: var(--danger); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.row-delete .ico svg { width: 15px; height: 15px; }
.row-delete:hover { filter: brightness(0.96); }
.row-delete:disabled { opacity: .5; cursor: default; }

.modal-backdrop {
  /* Same tier as .emergency-banner (1000) — Leaflet's own panes/controls sit
     up to z-index 1000 too (see #map's leaflet-control), so anything meant
     to float ABOVE the map, like this modal or the Düşme Testi panel, has to
     clear that same ceiling. 50 sat well under it, so the map floated over
     the modal instead of behind it. */
  position: fixed; inset: 0; background: rgba(23,27,34,0.45); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal-card {
  width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--radius);
  padding: 22px; box-shadow: 0 12px 32px rgba(0,0,0,0.22); display: flex; flex-direction: column; gap: 12px;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 16px; font-weight: 700; }
.icon-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; }
.icon-btn .ico svg { width: 18px; height: 18px; }
.modal-steps { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-muted); line-height: 1.7; }

/* ---------- Mesajlar (2026-09-22) ---------- */
.msg-row { cursor: pointer; }
.msg-unread {
  flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.thread-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.thread-head b { font-size: 15px; font-weight: 700; }
.thread-head .meta { font-size: 12.5px; color: var(--text-muted); }
.msg-bubbles {
  display: flex; flex-direction: column; gap: 10px; min-height: 240px; max-height: 420px;
  overflow-y: auto; padding: 4px 2px 10px;
}
.msg-bubble-row { max-width: 75%; align-self: flex-start; }
.msg-bubble-row.mine { align-self: flex-end; text-align: right; }
.msg-bubble { background: var(--bg); border-radius: 14px 14px 14px 4px; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; }
.msg-bubble.mine { background: var(--input-bg); border-radius: 14px 14px 4px 14px; }
.msg-time { margin-top: 3px; font-size: 11px; color: var(--text-muted); }
.msg-compose { display: flex; align-items: flex-end; gap: 10px; border-top: 1px solid var(--border); padding-top: 12px; }
.msg-compose textarea {
  flex: 1; resize: none; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px;
  font-family: inherit; font-size: 13.5px; background: var(--bg); max-height: 100px;
}
.icon-btn.send { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; align-items: center; justify-content: center; flex: none; }
.icon-btn.send .ico svg { width: 17px; height: 17px; stroke: #fff; }
.pick-list { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; font-size: 13.5px; cursor: pointer; }
.pick-row .ico svg { width: 18px; height: 18px; stroke: var(--text-muted); }
#msg-broadcast-input {
  width: 100%; resize: vertical; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; font-family: inherit; font-size: 13.5px; background: var(--bg);
}

/* ---------- Profil kartı (js/profile-card.js) ---------- */
.pc-modal { max-width: 760px; max-height: 90vh; overflow-y: auto; }
.pc-head { display: flex; align-items: center; gap: 14px; }
.pc-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.pc-avatar-initial { display: flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-size: 26px; font-weight: 700; }
.pc-name { font-size: 20px; font-weight: 700; }
.pc-section-title { margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-muted); }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 18px; }
.pc-label { font-size: 11.5px; color: var(--text-muted); margin-bottom: 2px; }
.pc-value { font-size: 14px; word-break: break-word; }
.pc-value .meta, .pc-scroll .meta, .pc-modal .meta { color: var(--text-muted); font-size: 12px; }
.pc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.pc-tile { background: var(--bg); border-radius: 12px; padding: 10px 8px; text-align: center; }
.pc-tile-value { font-size: 22px; font-weight: 700; }
.pc-tile-value.danger { color: var(--danger); }
.pc-tile-label { font-size: 11.5px; color: var(--text-muted); }
.pc-scroll { max-height: 260px; overflow: auto; }
.pc-activity { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.row-profile { flex: none; }
.reg-table-wrap { max-height: 380px; overflow: auto; }
.reg-table-wrap tr[data-profile-acc] { cursor: pointer; }
.reg-table-wrap tr[data-profile-acc]:hover { background: var(--bg); }

.pc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pc-actions .btn-ghost { width: auto; }
.pc-danger { color: var(--danger); border-color: var(--danger); }