.permission-fields {
  margin: 0;
  padding: 14px;
  border: 1px solid #b8c5cc;
  border-radius: 11px;
  background: #f7fafb;
}

.permission-fields legend {
  padding: 0 7px;
  color: #435d6c;
  font-size: 12px;
  font-weight: 800;
}

.permission-fields .check-field { margin: 4px 0; }

.permission-chip {
  display: inline-flex;
  margin: 2px;
  padding: 4px 7px;
  border: 1px solid #a8c7da;
  border-radius: 999px;
  background: #eaf4fa;
  color: #315f7f;
  font-size: 10px;
  font-weight: 800;
}

.permission-chip.off {
  border-color: #d1b7b7;
  background: #f8eeee;
  color: #8a4545;
}

.timesheet-table .table-sort {
  display: flex;
  width: 100%;
  min-width: max-content;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.timesheet-table .table-sort span {
  color: #526c7a;
  font-size: 8px;
}

.timesheet-table .table-sort:hover,
.timesheet-table .table-sort:focus-visible { color: #174f70; }

.timesheet-table .table-sort:focus-visible {
  outline: 2px solid #568fbb;
  outline-offset: 2px;
  border-radius: 3px;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #75858e;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.login-divider::before,
.login-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: #d4dde2;
}

.google-login-btn {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 10px 14px;
  border: 1px solid #b9c7cf;
  border-radius: 11px;
  background: #fff;
  color: #30434e;
  box-shadow: 0 2px 7px rgba(42, 75, 95, .08);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.google-login-btn:hover,
.google-login-btn:focus-visible {
  border-color: #78a9d1;
  box-shadow: 0 5px 15px rgba(67, 125, 170, .15);
  color: #244d69;
}

.google-login-btn:active { transform: translateY(1px); }

.google-login-btn:focus-visible {
  outline: 3px solid rgba(120, 169, 209, .25);
  outline-offset: 2px;
}

.google-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: conic-gradient(from -35deg, #4285f4 0 25%, #34a853 25% 45%, #fbbc05 45% 68%, #ea4335 68% 82%, #4285f4 82% 100%);
  color: #fff;
  box-shadow: inset 0 0 0 2px #fff;
  font: 900 13px Arial, sans-serif;
}

.notification-modal { width: min(640px, 100%); }
.notification-master {
  padding: 12px 14px;
  border: 1px solid #b9cbd9;
  border-radius: 10px;
  background: #edf5fb;
  color: #244d69;
  font-weight: 700;
}
.notification-info {
  margin: 0;
  padding: 11px 13px;
  border-radius: 9px;
  background: #f3f6f8;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.notification-device-help { display: block; margin-top: 5px; line-height: 1.45; }
.notification-times-field { display: grid; gap: 9px; }
.notification-times-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#notificationTimes { display: grid; gap: 8px; }
.notification-time-row { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: 8px; align-items: center; }
.notification-time-row input { width: 100%; }
.notification-time-row button:disabled { opacity: .45; cursor: not-allowed; }
.notification-days-field { display: grid; gap: 9px; }
.notification-days { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.notification-day { display: flex; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid #b9cbd9; border-radius: 9px; background: #f8fbfd; cursor: pointer; font-size: 12px; font-weight: 650; }
.notification-day input { width: 16px; height: 16px; margin: 0; }
.push-toggle.compact {
  border: 1px solid #a9c8de;
  border-radius: 10px;
  background: #eaf4fb;
  color: #285b7d;
  padding: 9px 11px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.push-toggle.compact:hover { background: #dceef9; border-color: #78a9d1; }
.push-toggle.compact.active { background: #dff1e8; border-color: #94c4ac; color: #286047; }
.push-toggle.compact.needs-attention {
  background: #cf3f3f;
  border-color: #a92424;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(207,63,63,.18);
  animation: push-notification-alert 1s ease-in-out infinite;
}
.push-toggle.compact.needs-attention:hover { background: #b92f2f; border-color: #8f1f1f; }
.push-toggle.compact:disabled { cursor: not-allowed; opacity: .65; }
@keyframes push-notification-alert {
  0%,100% { opacity: 1; box-shadow: 0 0 0 2px rgba(207,63,63,.18); }
  50% { opacity: .55; box-shadow: 0 0 0 7px rgba(207,63,63,.28); }
}
@media (prefers-reduced-motion: reduce) {
  .push-toggle.compact.needs-attention { animation: none; }
}
@media (max-width: 760px) {
  .notification-days { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .push-toggle.compact { max-width: 82px; padding: 8px 7px; white-space: normal; line-height: 1.15; font-size: 10px; }
}

.attendance-save-bottom {
  display: flex;
  justify-content: flex-end;
  padding: 14px 16px;
  border-top: 1px solid #c2ccc6;
  background: #f8faf9;
}
.attendance-save-bottom .primary { min-width: 190px; }
@media (max-width: 540px) {
  .attendance-save-bottom .primary { width: 100%; }
}

.sidebar nav {
  flex: 1;
  min-height: 0;
  align-content: start;
}
.sidebar-logout-wrap {
  margin-top: auto;
  padding-top: 14px;
}
.sidebar-logout {
  width: 100%;
  min-height: 42px;
}
.timesheet-table .status-worked,
.status-key.status-worked b,
.status-print-legend .status-worked { background: #d9f0df !important; color: #24633a !important; }
.timesheet-table .status-annual_leave,
.timesheet-table .status-paid_leave,
.timesheet-table .status-unpaid_leave,
.status-key.status-leave b,
.status-print-legend .status-leave { background: #dcecf7 !important; color: #275f84 !important; }
.timesheet-table .status-medical_report,
.status-key.status-report b,
.status-print-legend .status-report { background: #eadcf4 !important; color: #6d3f82 !important; }
.timesheet-table .status-absent,
.status-key.status-absent b,
.status-print-legend .status-absent { background: #f7d7d4 !important; color: #a92621 !important; }
.timesheet-table .status-weekly_rest,
.status-key.status-rest b,
.status-print-legend .status-rest { background: #e6e9eb !important; color: #4f5c63 !important; }
.timesheet-table .status-public_holiday,
.status-key.status-holiday b,
.status-print-legend .status-holiday { background: #d5e8f5 !important; color: #285f82 !important; }
.timesheet-table .status-half_day,
.status-key.status-half b,
.status-print-legend .status-half { background: #ffe0b2 !important; color: #934d00 !important; }
.status-print-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.status-print-legend span { padding: 4px 7px; border: 1px solid rgba(70,85,80,.28); border-radius: 5px; font-weight: 700; }
.install-guide-compact { width: min(480px,100%); }
.install-guide-compact .install-guide-card { margin-top: 4px; }
.install-guide-compact .install-native { margin: 12px 0 0; }
.install-notification-note {
  margin: 12px 0 0;
  padding: 11px 13px;
  border: 1px solid #e1bd78;
  border-radius: 10px;
  background: #fff4dc;
  color: #76521a;
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 760px) {
  .sidebar .brand {
    position: relative;
    min-height: 78px;
    padding: 2px 48px 18px 8px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
  }
  .sidebar .brand-logo {
    width: 132px;
    max-width: 100%;
  }
  .sidebar .brand > span {
    display: block;
    padding-left: 2px;
    font-size: 16px;
    line-height: 1.1;
  }
  .sidebar .close-nav {
    display: grid;
    place-items: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    margin: 0;
    z-index: 2;
    font-size: 22px;
    line-height: 1;
  }
}

/* Mobil üst alan: marka, sayfa başlığı ve hesap işlemleri birbirine taşmadan sıralanır. */
@media (max-width: 760px) {
  .sidebar { overflow: hidden; }
  .topbar {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    grid-template-areas:
      "brand brand"
      "menu title"
      "account account";
    min-height: 0;
    padding: 10px 16px 12px;
    gap: 9px 12px;
    align-items: center;
    align-content: normal;
  }
  .mobile-app-brand {
    grid-area: brand;
    width: 100%;
    height: 38px;
    padding: 0;
    border: 0;
  }
  .mobile-app-brand img { width: auto; max-width: none; height: 1em; flex: 0 0 auto; }
  .mobile-app-brand { font-size: clamp(20px, 7vw, 42px); gap: 9px; height: auto; min-height: 38px; }
  .mobile-app-brand > span { flex-shrink: 0; font-size: inherit; line-height: 1; }
  .menu-btn { grid-area: menu; margin: 0; }
  .topbar-title { grid-area: title; width: 100%; margin: 0; }
  .topbar-title p { margin-bottom: 3px; }
  .topbar-title h2 {
    max-width: none;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.2;
  }
  .top-account {
    grid-area: account;
    width: 100%;
    margin: 0;
    justify-content: flex-end;
    gap: 7px;
  }
  .top-account .push-toggle.compact {
    max-width: none;
    min-height: 40px;
    padding: 8px 10px;
    white-space: nowrap;
    font-size: 10px;
  }
  .top-account .user-chip.compact {
    min-width: 44px;
    min-height: 40px;
    padding: 4px;
    justify-content: center;
  }
  .top-account .logout-btn.compact {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
  }
}

@media (max-width: 760px) {
  .topbar {
    grid-template-columns: 44px minmax(0,1fr) auto;
    grid-template-areas:
      "brand brand brand"
      "menu title logout"
      "actions actions actions";
  }
  .top-account { display: contents; }
  .top-account .user-chip.compact { display: none; }
  .top-account .logout-btn.compact {
    grid-area: logout;
    width: auto;
    min-width: 58px;
    margin: 0;
    padding: 9px 12px;
    font-size: 12px;
    line-height: 1;
  }
  .top-account .logout-btn.compact::first-letter { font-size: inherit; }
  .top-account .push-toggle.compact {
    grid-area: actions;
    width: 100%;
    justify-self: stretch;
  }
  .top-account .role-preview.compact {
    grid-area: actions;
    width: 100%;
    max-width: none;
    margin: 0;
  }
}
.print-paper .timesheet-table { width:100%; min-width:0; table-layout:auto; }
.print-paper .timesheet-table th,.print-paper .timesheet-table td { width:auto; min-width:0; max-width:none; overflow:visible; text-overflow:clip; }
.timesheet-table .status-religious_holiday,.status-key.status-religious b,.status-print-legend .status-religious { background:#f7ead2!important; color:#7b5722!important; }

.user-site-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}.user-site-grid .check-field{margin:0;display:flex;align-items:center;gap:6px}
.personnel-supervisor-row>td{background:#eaf3fc!important}
.personnel-supervisor-row>td:first-child{box-shadow:inset 4px 0 #387db5}
.personnel-supervisor-row>td:first-child strong{color:#174f7d}
.personnel-supervisor-row:hover>td{background:#deecfa!important}
.personnel-supervisor-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border:1px solid #719ec2;border-radius:6px;background:#d3e7f9;color:#174f7d;font-size:11px;font-weight:800;white-space:nowrap}
.personnel-supervisor-badge .card-icon{width:18px;height:18px;flex-shrink:0}
.dashboard-job-counts{margin-bottom:18px}
.dashboard-job-counts .card-head{padding:16px 18px 0}
.dashboard-job-counts td:last-child,.dashboard-job-counts th:last-child{white-space:nowrap;text-align:right}
.dashboard-job-counts table{width:100%;table-layout:auto}
.dashboard-job-counts thead th{white-space:normal;min-width:90px;text-align:center}
.dashboard-job-counts tbody th{background:#fff;text-align:left;white-space:nowrap;font-weight:600;min-width:160px}
.dashboard-job-counts td{text-align:center}
.dashboard-job-counts thead th:first-child,.dashboard-job-counts tfoot th{text-align:left}
.dashboard-job-counts .job-total{background:#e8eef3;font-weight:700}
.dashboard-job-counts tfoot th,.dashboard-job-counts tfoot td{background:#d7dfe5;font-weight:700;border-top:2px solid #8b99a5}
.dashboard-job-counts table{width:100%;table-layout:auto}
.dashboard-job-counts thead th{white-space:normal;min-width:90px;text-align:center}
.dashboard-job-counts tbody th{background:#fff;text-align:left;white-space:nowrap;font-weight:600;min-width:160px}
.dashboard-job-counts td{text-align:center}
.dashboard-job-counts thead th:first-child,.dashboard-job-counts tfoot th{text-align:left}
.dashboard-job-counts .job-total{background:#e8eef3;font-weight:700}
.dashboard-job-counts tfoot th,.dashboard-job-counts tfoot td{background:#d7dfe5;font-weight:700;border-top:2px solid #8b99a5}
.dashboard-actions-section{margin-bottom:18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:18px;align-items:stretch}
.personnel-pie-layout{display:flex;align-items:center;gap:24px;min-height:220px}
.personnel-pie{flex:0 0 210px;width:210px;height:210px;border-radius:50%;display:grid;place-items:center}
.personnel-pie-center{width:140px;height:140px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.personnel-pie-center strong{font-size:30px;color:#254d6a}
.personnel-pie-center span{font-size:12px;color:#657684}
.personnel-pie-key{flex:1;min-width:0;max-height:260px;overflow:auto}
.personnel-pie-key ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.personnel-pie-key li{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;align-items:center;gap:8px;font-size:12px}
.pie-color{height:12px;width:12px;border-radius:3px}
.pie-site-name{overflow-wrap:anywhere}
.personnel-pie-key small{color:#657684;min-width:40px;text-align:right}
@media(max-width:1100px){.dashboard-actions-section{grid-template-columns:1fr}.personnel-pie-key{max-height:none}}
@media(max-width:550px){.personnel-pie-layout{flex-direction:column;gap:18px}.personnel-pie-key{width:100%}}
.monthly-attendance-card .dashboard-chart-tools{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:700px){.monthly-attendance-card .card-head{flex-direction:column;align-items:stretch;gap:12px}.monthly-attendance-card .dashboard-chart-tools{justify-content:flex-start}}
.dashboard-site-pies-section{margin-bottom:18px}
.dashboard-site-pies{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.site-mini-pie-card{padding:16px;min-width:0}
.site-mini-pie-card h3{margin:0 0 14px;font-size:14px;overflow-wrap:anywhere}
.site-mini-pie-content{display:flex;flex-direction:column;align-items:center;gap:8px}
.site-mini-pie{width:170px;height:170px;flex:0 0 170px;border-radius:50%;display:grid;place-items:center;position:relative}
.site-mini-pie>.site-pie-center{width:82px;height:82px;background:#fff;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center}
.site-pie-number{position:absolute;transform:translate(-50%,-50%);min-width:24px;padding:2px 4px;border-radius:5px;font-size:14px;font-weight:800;color:#17221f;line-height:18px;text-align:center;border:1px solid #fff;box-shadow:0 1px 3px #0002}
.site-pie-zeros{display:flex;gap:6px;min-height:22px}
.site-pie-zero{min-width:24px;text-align:center;border-radius:5px;font-size:12px;font-weight:700;padding:2px 5px;color:#17221f}
.site-pies-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:14px 0 0;font-size:13px;font-weight:600}
.site-pies-legend span{display:inline-flex;align-items:center;gap:7px}
.site-pies-legend i{width:12px;height:12px;border-radius:50%}
.site-mini-pie strong{font-size:23px}
.site-mini-pie small{font-size:10px;color:#657684}
.site-mini-pie-content ul{list-style:none;padding:0;margin:0;flex:1;display:grid;gap:9px;font-size:12px}
.site-mini-pie-content li{display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:7px;align-items:center}
.site-mini-pie-content li i{width:9px;height:9px;border-radius:50%}
.site-pie-present{background:#34a853}.site-pie-absent{background:#dc4545}.site-pie-missing{background:#f4c542}
.site-pies-note{margin:10px 0 0;font-size:12px;line-height:1.5}
@media(max-width:500px){.dashboard-site-pies{grid-template-columns:1fr}}
.dashboard-overview-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1.1fr);gap:16px;margin-bottom:20px;align-items:stretch}
.dashboard-overview-row>.card{min-width:0;padding:18px}
.dashboard-overview-row .card-head{align-items:flex-start;gap:8px;margin-bottom:16px;min-height:40px}
.dashboard-summary-card .stat{background:#f5f7f9;border:0;border-radius:10px;box-shadow:none;padding:12px;margin-bottom:10px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px}
.dashboard-summary-card .stat:last-child{margin-bottom:0}
.dashboard-summary-card .stat-top{align-items:center;justify-content:flex-start;gap:8px;grid-column:1;grid-row:1;color:#405363}
.dashboard-summary-card .stat-icon{order:-1}
.dashboard-summary-card .stat-icon{width:28px;height:28px;flex:0 0 28px}
.dashboard-summary-card .stat-icon svg{width:21px;height:21px}
.dashboard-summary-card .stat strong{margin:0;font-size:25px;grid-column:2;grid-row:1 / span 2;align-self:center;text-align:right;font-variant-numeric:tabular-nums}
.dashboard-summary-card .stat small{grid-column:1;font-size:11px;margin-top:4px}
.dashboard-overview-row .personnel-pie-layout{flex-direction:row;align-items:center;justify-content:center;gap:14px;min-height:0}
.dashboard-overview-row .personnel-pie{width:clamp(160px,14vw,210px);height:clamp(160px,14vw,210px);flex:0 0 clamp(160px,14vw,210px)}
.dashboard-overview-row .personnel-pie-center{width:66%;height:66%}
.dashboard-overview-row .personnel-pie-center strong{font-size:26px}
.dashboard-overview-row .personnel-pie-key{flex:0 1 220px;width:220px;max-width:220px;max-height:230px;padding-right:4px;scrollbar-width:thin}
.dashboard-overview-row .personnel-pie-key ul{gap:4px}
.dashboard-overview-row .personnel-pie-key li{grid-template-columns:12px minmax(0,1fr) 24px 38px;line-height:18px;gap:5px;font-size:11px}
.dashboard-overview-row .personnel-pie-key strong{text-align:right}
.dashboard-overview-row .personnel-pie-key strong,.dashboard-overview-row .personnel-pie-key small{font-variant-numeric:tabular-nums}
.dashboard-overview-row .personnel-pie-key small{min-width:38px}
.dashboard-overview-row .alert{gap:9px;padding:12px;text-align:left;border-radius:10px}
.dashboard-overview-row .alert>span:nth-child(2){flex:1;min-width:0}
.dashboard-overview-row .alert .count{margin-left:auto;align-self:flex-start}
.dashboard-overview-row .alert small{line-height:1.6}
@media(max-width:1100px){.dashboard-overview-row{grid-template-columns:1fr}.dashboard-overview-row .personnel-pie-layout{flex-direction:row}.dashboard-overview-row .personnel-pie-key{max-height:none}}
@media(min-width:1101px) and (max-width:1400px){.dashboard-overview-row{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr)}.dashboard-overview-row .dashboard-action-card{grid-column:1 / -1}.dashboard-overview-row .dashboard-action-card .alert-list{grid-template-columns:1fr 1fr}}
@media(max-width:550px){.dashboard-overview-row .personnel-pie-layout{flex-direction:column}}
.dashboard-overview-row .dashboard-distribution-compact .personnel-pie-layout{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,220px);justify-content:start;gap:16px}
.dashboard-overview-row .dashboard-distribution-compact .personnel-pie{width:100%;height:auto;aspect-ratio:1;max-width:210px;min-width:150px;justify-self:center}
.dashboard-overview-row .dashboard-distribution-compact .personnel-pie-key{width:auto;max-width:220px;min-width:0}
.dashboard-overview-row .dashboard-distribution-compact .personnel-pie-key li{grid-template-columns:12px minmax(0,125px) 24px 38px;justify-content:start;gap:5px}
@media(max-width:550px){.dashboard-overview-row .dashboard-distribution-compact .personnel-pie-layout{grid-template-columns:1fr}.dashboard-overview-row .dashboard-distribution-compact .personnel-pie{width:210px}.dashboard-overview-row .dashboard-distribution-compact .personnel-pie-key{width:220px;justify-self:center}}
.main .content{max-width:none;padding-left:12px;padding-right:12px}
.site-mini-pie-card h3{text-align:center}
/* Keep one page heading and make column labels easier to read. */
.topbar-title #breadcrumb{display:none}
#greetingSites{margin-top:6px;font-size:17px;line-height:1.4;color:#344c40;font-weight:700;overflow-wrap:anywhere;max-width:620px}
.topbar-title #pageTitle:empty{display:none}
.topbar-title #pageTitle:empty + #greetingSites{margin-top:0}
.topbar:has(#greetingSites:not(.hidden)){height:auto;min-height:88px}
.page-heading{min-width:0}
.mobile-nav-backdrop{display:none}
@media(max-width:760px){
 .sidebar{border:2px solid #727978!important;border-left:0!important;box-shadow:6px 0 24px rgba(20,28,25,.22)}
 .sidebar.open + .mobile-nav-backdrop{display:block;position:fixed;inset:0;z-index:19;border:0;border-radius:0;background:rgba(30,38,34,.22);padding:0;cursor:pointer;touch-action:manipulation}
}
#supervisorsTable .supervisor-sites-cell>div+div{margin-top:4px}
#supervisorsTable .supervisor-actions-cell{white-space:nowrap}
#supervisorsTable .small-btn{white-space:nowrap;margin:0;vertical-align:middle}
#supervisorsTable .supervisor-device-compact{display:grid;gap:4px;white-space:nowrap}
#supervisorsTable .supervisor-device-compact .device-status{white-space:nowrap}
#supervisorsTable .device-status{padding:3px 6px}
.supervisor-device-compact{display:grid;gap:5px;justify-items:start;font-size:12px;white-space:nowrap}.supervisor-device-compact>span:first-child{font-weight:700}
.device-status{display:inline-block;padding:5px 8px;border-radius:6px;border:1px solid #bdc8cf;font-size:12px;font-weight:700;white-space:nowrap}
.device-status.good{background:#e6f5e9;color:#245d32;border-color:#9cc5a4}.device-status.bad{background:#ffe9e7;color:#a32920;border-color:#dfaaa6}.device-status.neutral{background:#fff2d7;color:#795916;border-color:#d9c597}.device-status.unknown{background:#eef1f3;color:#65717b}
.device-status-date{display:block;margin-top:5px;font-size:11px;color:#65717b;white-space:nowrap}
.supervisor-whatsapp,#bulkSupervisorWhatsapp,#prepareSupervisorWhatsapp,#openSupervisorWhatsapp,#confirmSingleWhatsapp,#prepareBulkWhatsapp,#whatsappQueueNext,.bulk-whatsapp-result .primary{background:#25d366!important;border-color:#159947!important;color:#073b20!important}
.supervisor-whatsapp:hover,#bulkSupervisorWhatsapp:hover,#openSupervisorWhatsapp:hover,#whatsappQueueNext:hover{background:#20bd5a!important}
.whatsapp-sent-date{display:inline-block;margin-left:8px;font-size:11px;color:#52655c;white-space:nowrap}
#whatsappQueue{border:1px solid #9acdac;border-radius:10px;padding:14px;background:#effbf3}
#whatsappQueueProgress{font-weight:800;font-size:17px}
.bulk-whatsapp-modal{width:min(860px,100%)}.bulk-whatsapp-list{display:grid;gap:10px;max-height:50vh;overflow:auto}
.bulk-whatsapp-row{display:grid;grid-template-columns:minmax(0,1fr) 180px 145px;align-items:center;gap:10px;border:1px solid #c2ccd4;padding:10px;border-radius:9px}
.bulk-whatsapp-row .check-field{display:flex;gap:7px;align-items:center;font-size:13px}.bulk-whatsapp-row input[type=tel]{width:100%;min-width:0;height:40px;padding:8px;border:1px solid #c2ccd4;border-radius:8px}
.bulk-whatsapp-result{font-size:12px;overflow-wrap:anywhere}.bulk-whatsapp-result .primary{display:inline-block;text-decoration:none;padding:9px;font-size:12px}
@media(max-width:600px){.bulk-whatsapp-row{grid-template-columns:1fr}.bulk-whatsapp-row .check-field{overflow-wrap:anywhere}}
.supervisor-whatsapp{display:inline-flex;align-items:center;gap:5px}.supervisor-whatsapp svg{flex-shrink:0}
.whatsapp-preview-label{display:grid;gap:7px;font-size:13px;font-weight:700}
#whatsappPreview{width:100%;resize:vertical;padding:10px;font:13px/1.5 "Segoe UI",Arial,sans-serif;border:1px solid #b8c5ce;border-radius:9px;background:#f5f8fa}
#supervisorWhatsappForm .modal-actions{flex-wrap:wrap}
#openSupervisorWhatsapp{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.supervisor-edit-modal{width:min(720px,100%);padding:18px;max-height:calc(100dvh - 32px)}
.supervisor-edit-modal .modal-head{margin-bottom:12px}.supervisor-edit-modal .form-grid{gap:10px 14px}
.supervisor-edit-modal .form-grid>label.full:has([name=name]),.supervisor-edit-modal .form-grid>label.full:has([name=email]){grid-column:auto}
.supervisor-edit-modal .user-site-grid{max-height:180px;overflow:auto;padding:4px;gap:6px 12px}
.supervisor-edit-modal fieldset{min-width:0;margin:0;padding:10px;border:1px solid #c2ccd4;border-radius:9px}
.supervisor-edit-modal .user-site-grid label{min-width:0;overflow-wrap:anywhere}
.supervisor-edit-modal .modal-actions{margin-top:12px}
@media(max-width:600px){.supervisor-edit-modal{padding:15px}.supervisor-edit-modal .user-site-grid{max-height:145px}.supervisor-edit-modal .modal-head h3{font-size:18px}}
.sites-toolbar,.timesheet-filters{align-items:center;flex-wrap:wrap}
.sites-toolbar>.filter,.timesheet-filters>.filter{min-width:170px;min-height:42px}
.timesheet-filters>.filter{flex:0 1 auto}
@media(max-width:600px){.sites-toolbar>.filter,.timesheet-filters>.filter{width:100%;flex:1 1 100%;min-width:0}}
.help-guide{display:grid;gap:16px;max-width:1100px;margin:0 auto}
.help-intro{padding:16px 20px;border:1px solid #b7cbdc;border-radius:12px;background:#eaf3fa}
.help-guide p,.help-guide li{font-size:14px;line-height:1.7;color:#43574c}
.help-intro p{margin:6px 0 0}
.help-role{padding:0;overflow:hidden}
.help-role>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;cursor:pointer;list-style:none;background:#f0f4f7}
.help-role>summary::-webkit-details-marker{display:none}
.help-role summary strong{font-size:20px;color:#233e50}
.help-role summary small{display:block;margin-top:5px;font-size:13px;color:#52665b}
.help-expand{font-size:24px;transition:transform .15s}
.help-role[open] .help-expand{transform:rotate(180deg)}
.help-role-body{padding:4px 22px 18px;border-top:1px solid #c2ccd4}
.help-role-body h3{font-size:16px;margin:22px 0 8px;color:#233e50}
.help-role-body p{margin:8px 0}.help-role-body ol{padding-left:24px;margin:8px 0}.help-role-body li+li{margin-top:8px}
.help-common h3{margin:0 0 12px;font-size:19px}.help-common details{border-top:1px solid #c2ccd4;padding:13px 0}.help-common summary{cursor:pointer;font-weight:700;line-height:1.5}.help-common p{margin:10px 0 0}
.help-guide summary:focus-visible{outline:3px solid #78a9d1;outline-offset:-3px}
@media(max-width:760px){.help-guide{gap:12px}.help-role>summary{padding:16px}.help-role-body{padding:0 16px 16px}.help-role summary strong{font-size:18px}.help-guide p,.help-guide li{font-size:14px}}
@media(max-width:760px){.table-wrap .leave-table{table-layout:auto;width:max-content;min-width:100%}.table-wrap .leave-table th,.table-wrap .leave-table td{width:auto;white-space:nowrap;overflow-wrap:normal;word-break:normal}}
.page-heading h2{font-size:24px;line-height:1.25;margin:0 0 6px;font-weight:800;letter-spacing:-.4px}
@media(max-width:760px){.page-heading h2{font-size:22px}}
table thead th{font-size:12px;line-height:1.3}
.timesheet-card .timesheet-table thead th,.print-paper .timesheet-table thead th{font-size:11px}
@media(min-width:761px){.sidebar .brand{flex-direction:column;align-items:center;gap:9px;padding:0 0 24px}.sidebar .brand-logo{width:100%;max-width:100%;height:auto}.sidebar .brand>span{display:block;font-size:29.37px;line-height:1;text-align:center}}
@media(max-width:760px){.sidebar .brand-logo{height:18px;width:auto}.sidebar .brand>span{font-size:18px;line-height:1}}
.site-status-date-label{display:grid;gap:5px;font-size:12px;font-weight:700;flex-shrink:0}
.site-status-date-label input{min-width:155px}
.monthly-attendance-card .attendance-bar-values{font-size:12px;gap:4px}
.monthly-attendance-card .attendance-daily-rate{font-size:14px;line-height:1.2;color:#285572;font-variant-numeric:tabular-nums}
.monthly-attendance-card .attendance-comparison-chart.monthly{min-width:1400px;height:255px}
@media(max-width:600px){.dashboard-site-status .card-head{align-items:flex-start;flex-wrap:wrap;gap:12px}}
#missingSupervisorAction[hidden]{display:none!important}
#missingSupervisorNames{overflow-wrap:anywhere}
.personnel-supervisor-check{text-align:center}
.personnel-supervisor-check span{display:inline-grid;place-items:center;width:26px;height:26px;background:#dcece2;color:#245b3d;border:1px solid #9cbea9;border-radius:6px;font-weight:800}
.footer-company-legal{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px}
.footer-company-legal .footer-legal{margin-left:0}
@media(max-width:760px){.footer-company-legal{font-size:10px;gap:4px 8px}}
.supervisor-compact-summary{padding:14px;margin-bottom:14px}
.supervisor-summary-heading h3{margin:0;font-size:16px}
.supervisor-summary-heading p{margin:4px 0 12px;font-size:12px;color:#657684}
.supervisor-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.supervisor-summary-grid .stat{min-width:0;margin:0;padding:10px 12px;border:1px solid #c2ccd4;border-radius:9px;box-shadow:none;background:#f5f7f9}
.supervisor-summary-grid .stat-top{font-size:12px;line-height:1.3;min-height:16px}
.supervisor-summary-grid .stat strong{display:block;font-size:25px;line-height:1.1;margin:7px 0 0;font-variant-numeric:tabular-nums}
.supervisor-summary-grid .stat small{display:none}
.supervisor-summary-grid .supervisor-missing-stat{background:#fff2f0;border-color:#e9aba6}
.supervisor-summary-grid .supervisor-missing-stat strong{color:#b42318}
@media(max-width:600px){.supervisor-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.supervisor-compact-summary{padding:12px}.supervisor-summary-grid .stat{padding:10px}.supervisor-dashboard-buttons{gap:8px}.supervisor-dashboard-buttons button{padding:11px 10px;font-size:13px}}
[data-dashboard-widget][hidden],.dashboard-overview-row[hidden],.dashboard-supervisor-stats[hidden]{display:none!important}
.dashboard-overview-row[data-visible-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.dashboard-overview-row[data-visible-count="1"]{grid-template-columns:minmax(0,1fr)}
.dashboard-overview-row[data-visible-count="2"]>.dashboard-action-card,.dashboard-overview-row[data-visible-count="1"]>.dashboard-action-card{grid-column:auto}
.dashboard-supervisor-stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.supervisor-dashboard-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.supervisor-dashboard-buttons button{min-height:44px;padding:12px 24px}
.dashboard-view-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}
.dashboard-view-options label{display:flex;align-items:center;gap:10px;border:1px solid #b8c5ce;border-radius:8px;padding:12px;cursor:pointer}
.dashboard-view-options input{width:18px;height:18px;flex:0 0 18px;margin:0}
.dashboard-view-modal .modal-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
@media(max-width:760px){.dashboard-overview-row[data-visible-count="2"]{grid-template-columns:1fr}.dashboard-view-options{grid-template-columns:1fr}.supervisor-dashboard-buttons button{flex:1}}
@media(max-width:760px){.main .content{padding-left:8px;padding-right:8px}}

/* One shared data-table layout; the monthly calendar keeps its compact day cells. */
.main{min-width:0}
.main .content{min-width:0}
.main .table-wrap{max-width:100%;overflow-x:auto}
.main .table-wrap table:not(.timesheet-table){width:100%;min-width:max-content;table-layout:auto;border-collapse:collapse}
.main .table-wrap table:not(.timesheet-table) th,
.main .table-wrap table:not(.timesheet-table) td{width:auto;white-space:nowrap;overflow-wrap:normal;word-break:normal;vertical-align:middle;padding:7px 10px;line-height:1.25}
.main .table-wrap table:not(.timesheet-table) thead th{font-size:12px;background:#c9cecc;color:#2f3b36;border-bottom:1px solid #aeb6b2}
.main .table-wrap .small-btn{padding:6px 9px;white-space:nowrap;vertical-align:middle}

/* Window closing is only offered in the mobile layout. */
@media(min-width:761px){#closeWindow{display:none}}

/* Keep account controls right-aligned when a page hides its greeting. */
@media(min-width:761px){.topbar .top-account{margin-inline-start:auto}}