/* Launch layer: compact overrides for demo-ready Presensi Cloud. */
:root {
  --brand: #1f83e8;
  --brand-2: #16c7e6;
  --brand-3: #22c55e;
  --ink: #111827;
  --muted: #7b8aa0;
  --line: #dcebf7;
  --soft: #eef8ff;
  --paper: #ffffff;
  --danger: #f43f5e;
  --warning: #f59e0b;
  --shadow-soft: 0 18px 45px rgba(31, 131, 232, .14);
  --shadow-card: 0 12px 28px rgba(20, 79, 120, .10);
}

html,
body {
  overscroll-behavior: none;
  touch-action: manipulation;
  background:
    linear-gradient(180deg, rgba(31, 131, 232, .12), rgba(22, 199, 230, .08) 36%, #f7fbff 100%) !important;
}

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

.connection-status {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  z-index: 80;
  transform: translateX(-50%) translateY(-140%);
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #0f2742;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-card);
  font-size: 13px;
  font-weight: 800;
  opacity: 0;
  transition: .25s ease;
}

.connection-status.offline,
.connection-status.online {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.connection-status.online {
  color: #08784e;
}

.connection-status.offline {
  color: #b42318;
  background: #fff7ed;
  border-color: #fed7aa;
}

.primary,
.secondary,
.danger-button,
.icon-button {
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.primary:hover,
.secondary:hover,
.icon-button:hover {
  transform: translateY(-1px);
}

.is-loading {
  color: transparent !important;
  pointer-events: none;
}

.is-loading::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-top-color: rgba(255, 255, 255, .55);
  border-radius: 999px;
  animation: launch-spin .7s linear infinite;
  color: #fff;
}

.secondary.is-loading::after,
.icon-button.is-loading::after {
  color: var(--brand);
  border-top-color: rgba(31, 131, 232, .2);
}

@keyframes launch-spin {
  to { transform: rotate(360deg); }
}

.demo-hint {
  border: 1px solid rgba(31, 131, 232, .18) !important;
  background: linear-gradient(135deg, #eff8ff, #ffffff) !important;
}

.sidebar {
  background: rgba(255, 255, 255, .78) !important;
  backdrop-filter: blur(18px);
  border-right: 1px solid rgba(125, 189, 236, .35) !important;
}

.nav button {
  --nav-bg: #eff8ff;
  --nav-color: #8292a8;
  --nav-symbol: "•";
  gap: 16px !important;
  border-radius: 22px !important;
  background: transparent !important;
  color: var(--nav-color) !important;
}

.nav button::before {
  content: var(--nav-symbol);
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  color: #fff;
  background: var(--nav-bg);
  box-shadow: 0 10px 24px rgba(31, 131, 232, .14);
  font-size: 22px;
  font-weight: 950;
}

.nav button.active {
  --nav-color: #0b71d9;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: var(--shadow-card);
}

.nav button[data-icon="Home"] { --nav-bg: linear-gradient(135deg, #1f83e8, #12b9e8); --nav-symbol: "⌂"; }
.nav button[data-icon="+"] { --nav-bg: linear-gradient(135deg, #22c55e, #16c7a7); --nav-symbol: "+"; }
.nav button[data-icon="!"] { --nav-bg: linear-gradient(135deg, #f59e0b, #f97316); --nav-symbol: "✉"; }
.nav button[data-icon="Rekap"] { --nav-bg: linear-gradient(135deg, #7c3aed, #6366f1); --nav-symbol: "▣"; }
.nav button[data-icon="Gaji"] { --nav-bg: linear-gradient(135deg, #06b6d4, #1f83e8); --nav-symbol: "▤"; }
.nav button[data-icon="Set"] { --nav-bg: linear-gradient(135deg, #64748b, #0f172a); --nav-symbol: "⚙"; }
.nav button[data-icon="Jurnal"] { --nav-bg: linear-gradient(135deg, #2563eb, #22c1dc); --nav-symbol: "≡"; }
.nav button[data-icon="ID"] { --nav-bg: linear-gradient(135deg, #1f83e8, #16c7e6); --nav-symbol: "◉"; }
.nav button[data-icon="Req"] { --nav-bg: linear-gradient(135deg, #06b6d4, #7c3aed); --nav-symbol: "✉"; }

.dashboard-hero,
.launch-panel {
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #1f83e8 0%, #11aee6 58%, #16c7e6 100%) !important;
  box-shadow: 0 20px 48px rgba(31, 131, 232, .22) !important;
}

.dashboard-hero p,
.dashboard-hero h2,
.dashboard-hero h3 {
  color: #fff !important;
}

.launch-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 28px;
}

.launch-panel h3 {
  max-width: 720px;
  margin: 6px 0 8px;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.08;
}

.launch-panel p {
  margin: 0;
  color: rgba(255, 255, 255, .82);
}

.mini-label,
.launch-badges span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-weight: 900;
}

.launch-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(70px, 1fr));
  gap: 10px;
}

.stat {
  overflow: hidden;
  border: 1px solid rgba(220, 235, 247, .9) !important;
  border-radius: 26px !important;
  box-shadow: var(--shadow-card) !important;
}

.stat::after {
  content: "";
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.stat:nth-child(2)::after,
.stat:nth-child(4)::after { background: linear-gradient(90deg, #10b981, #22c55e); }
.stat:nth-child(3)::after,
.stat:nth-child(7)::after { background: linear-gradient(90deg, #f59e0b, #f97316); }
.stat:nth-child(5)::after,
.stat:nth-child(6)::after { background: linear-gradient(90deg, #f43f5e, #fb7185); }

.empty-state-cell {
  padding: 26px !important;
  background: linear-gradient(135deg, #fbfdff, #f0f9ff) !important;
}

.empty-state {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 136px;
  text-align: center;
  color: var(--muted);
}

.empty-state b {
  color: var(--ink);
  font-size: 18px;
}

.empty-state small {
  max-width: 420px;
}

.empty-state-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 35% 35%, #fff 0 12%, transparent 13%),
    linear-gradient(135deg, rgba(31, 131, 232, .95), rgba(22, 199, 230, .95));
  box-shadow: 0 14px 28px rgba(31, 131, 232, .18);
}

.data-load-card {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(220, 235, 247, .9) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .86) !important;
}

.data-load-card p {
  margin: 0;
  color: var(--muted);
}

.table-wrap {
  border-radius: 24px !important;
  box-shadow: var(--shadow-card);
}

@media (max-width: 760px) {
  body {
    position: fixed;
    inset: 0;
    overflow: hidden;
  }

  .shell,
  .content {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .content {
    overflow-y: auto !important;
    padding-bottom: calc(118px + env(safe-area-inset-bottom)) !important;
  }

  .sidebar {
    overflow: visible !important;
  }

  .nav {
    border-top: 1px solid rgba(203, 226, 242, .72);
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(18px);
  }

  .nav button {
    border-radius: 16px !important;
    gap: 4px !important;
    font-size: 12px !important;
  }

  .nav button::before {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 13px;
    font-size: 18px;
  }

  .launch-panel,
  .data-load-card {
    display: grid !important;
    border-radius: 24px;
  }

  .launch-badges {
    grid-template-columns: repeat(4, 1fr);
  }

  .connection-status {
    width: calc(100% - 28px);
    text-align: center;
  }
}

/* Final polish: keep panels stable, readable, and app-like on phone/desktop. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow: hidden !important;
}

#admin-app,
#employee-app,
.shell {
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  overflow: hidden !important;
}

.content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}

.sidebar {
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.nav {
  min-height: 0;
}

.admin-panel,
.employee-panel,
.card,
.launch-panel,
.dashboard-hero,
.data-load-card,
.table-card {
  max-width: 100%;
  min-width: 0;
}

.table-card {
  display: grid !important;
  gap: 16px;
  padding: clamp(16px, 2.2vw, 22px) !important;
  border: 1px solid rgba(220, 235, 247, .9) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, .88) !important;
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.table-toolbar h3 {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.1;
}

.table-toolbar .primary,
.table-toolbar .secondary {
  min-height: 46px;
  padding-inline: 18px;
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

table {
  min-width: 720px;
}

td,
th {
  max-width: 220px;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: normal;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.small-button {
  min-height: 38px !important;
  min-width: max-content;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
}

.stats {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
}

.stat {
  min-width: 0;
}

.stat b {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(26px, 3.1vw, 42px) !important;
  line-height: 1.05;
}

#payroll-summary .stat b {
  font-size: clamp(20px, 2.4vw, 34px) !important;
}

.quick-actions {
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)) !important;
}

.quick-action {
  --qa-a: #1f83e8;
  --qa-b: #16c7e6;
  --qa-icon: "";
  position: relative;
  display: grid !important;
  place-items: center;
  align-content: center;
  gap: 12px;
  min-height: 136px;
  overflow: hidden;
}

.quick-action::before {
  content: "";
  width: 58px !important;
  height: 58px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, var(--qa-a), var(--qa-b)) !important;
  box-shadow: 0 16px 32px color-mix(in srgb, var(--qa-a) 28%, transparent);
}

.quick-action::after {
  content: var(--qa-icon) !important;
  position: absolute;
  top: 38px;
  left: 50%;
  width: auto;
  height: auto;
  transform: translateX(-50%);
  color: #fff;
  background: transparent !important;
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
}

.quick-action[data-icon="Rekap"] { --qa-a: #1f83e8; --qa-b: #16c7e6; --qa-icon: "▤"; }
.quick-action[data-icon="!"] { --qa-a: #f59e0b; --qa-b: #f97316; --qa-icon: "✓"; }
.quick-action[data-icon="+"] { --qa-a: #10b981; --qa-b: #22c55e; --qa-icon: "+"; }
.quick-action[data-icon="Gaji"] { --qa-a: #7c3aed; --qa-b: #6366f1; --qa-icon: "Rp"; }

.nav button::before {
  color: #fff !important;
  font-family: Arial, sans-serif;
}

.nav button[data-icon="Home"] { --nav-symbol: "⌂"; }
.nav button[data-icon="+"] { --nav-symbol: "+"; }
.nav button[data-icon="!"],
.nav button[data-icon="Req"] { --nav-symbol: "✓"; }
.nav button[data-icon="Rekap"],
.nav button[data-icon="Jurnal"] { --nav-symbol: "▤"; }
.nav button[data-icon="Gaji"] { --nav-symbol: "Rp"; }
.nav button[data-icon="Set"] { --nav-symbol: "⚙"; }
.nav button[data-icon="ID"] { --nav-symbol: "ID"; }

.attendance-card {
  overflow: hidden;
}

.attendance-actions {
  display: flex;
  flex-wrap: wrap;
}

.attendance-actions button {
  min-width: min(220px, 100%);
}

@media (max-width: 899px) {
  body {
    position: static !important;
    overflow: hidden !important;
  }

  .shell {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .sidebar {
    overflow: visible !important;
  }

  .content {
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 76px 14px calc(118px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .admin-panel,
  .employee-panel {
    width: 100%;
    max-width: 100%;
  }

  .table-toolbar {
    display: grid;
    align-items: stretch;
  }

  .table-toolbar button {
    width: 100%;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .stat {
    border-radius: 22px !important;
    padding: 18px !important;
  }

  .stat b {
    font-size: clamp(24px, 9vw, 34px) !important;
  }

  #payroll-summary .stat b {
    font-size: clamp(18px, 6vw, 25px) !important;
  }

  .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .quick-action {
    min-height: 108px;
    border-radius: 22px !important;
    font-size: 14px !important;
  }

  .quick-action::before {
    width: 50px !important;
    height: 50px !important;
    border-radius: 18px !important;
  }

  .quick-action::after {
    top: 30px;
    font-size: 22px;
  }

  .camera-box {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
  }

  .attendance-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #capture-photo {
    grid-column: 1 / -1;
  }

  .attendance-actions button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-inline: 10px;
    font-size: 14px;
  }

  table {
    min-width: 680px;
  }
}

/* 3D navigation icons and an unclipped administrator header. */
.sidebar .nav button {
  --nav-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3 10.8 12 3l9 7.8v9.7a.5.5 0 0 1-.5.5H15v-6H9v6H3.5a.5.5 0 0 1-.5-.5Z'/%3E%3C/svg%3E");
  --nav-icon-a: #39b8ff;
  --nav-icon-b: #0068c9;
}

.sidebar .nav button[data-icon="+"] {
  --nav-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 8c0-3.3 3.1-6 7-6 1 0 2 .2 2.9.5A6 6 0 0 0 14 18c0 .7.1 1.4.4 2Zm14-7v3h3v2h-3v3h-2v-3h-3v-2h3v-3Z'/%3E%3C/svg%3E");
  --nav-icon-a: #45d6a4;
  --nav-icon-b: #07966c;
}

.sidebar .nav button[data-icon="!"],
.sidebar .nav button[data-icon="Req"] {
  --nav-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm0 3v.4l8 5.2 8-5.2V7l-8 5.2Z'/%3E%3C/svg%3E");
  --nav-icon-a: #ffbd45;
  --nav-icon-b: #e76a00;
}

.sidebar .nav button[data-icon="Rekap"],
.sidebar .nav button[data-icon="Jurnal"] {
  --nav-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M6 2h9l5 5v15H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 2v4h4ZM8 12h8v2H8Zm0 4h8v2H8Z'/%3E%3C/svg%3E");
  --nav-icon-a: #a78bfa;
  --nav-icon-b: #6337cb;
}

.sidebar .nav button[data-icon="Gaji"] {
  --nav-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 4h18V7H3Zm4 7h5v-4H7Zm9 0h3v-2h-3Z'/%3E%3C/svg%3E");
  --nav-icon-a: #35d1eb;
  --nav-icon-b: #0879bb;
}

.sidebar .nav button[data-icon="Set"] {
  --nav-icon-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-rule='evenodd' d='m9.6 2 .5 2.1a8 8 0 0 1 3.8 0l.5-2.1 2.8 1.2-1.1 1.8a8 8 0 0 1 2.7 2.7l1.8-1.1L22 9.4l-2.1.5a8 8 0 0 1 0 3.8l2.1.5-1.2 2.8-1.8-1.1a8 8 0 0 1-2.7 2.7l1.1 1.8-2.8 1.2-.5-2.1a8 8 0 0 1-3.8 0l-.5 2.1L7 20.4l1.1-1.8a8 8 0 0 1-2.7-2.7L3.6 17l-1.2-2.8 2.1-.5a8 8 0 0 1 0-3.8l-2.1-.5 1.2-2.8 1.8 1.1A8 8 0 0 1 8.1 5L7 3.2Zm2.4 13.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z'/%3E%3C/svg%3E");
  --nav-icon-a: #8fa5bd;
  --nav-icon-b: #354a63;
}

.sidebar .nav button::before,
.sidebar .nav button.nav-center::before {
  content: "" !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 255, 255, .58), transparent 25%),
    linear-gradient(145deg, var(--nav-icon-a), var(--nav-icon-b)) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .65),
    inset 0 -3px 5px rgba(0, 37, 79, .22),
    0 7px 12px rgba(0, 35, 75, .25) !important;
}

#admin-app .sidebar .nav button::after,
#employee-app .sidebar .nav button::after,
#admin-app .sidebar .nav button.nav-center::after,
#employee-app .sidebar .nav button.nav-center::after {
  content: "\00a0" !important;
  display: block !important;
  position: absolute !important;
  width: 20px !important;
  height: 20px !important;
  background: #fff !important;
  -webkit-mask: var(--nav-icon-svg) center / contain no-repeat !important;
  mask: var(--nav-icon-svg) center / contain no-repeat !important;
  filter: drop-shadow(0 2px 1px rgba(0, 32, 72, .24));
  pointer-events: none;
}

@media (min-width: 900px) {
  #admin-app .mobile-appbar,
  #employee-app .mobile-appbar {
    left: auto !important;
    right: auto !important;
    top: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 78px !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  #admin-app .sidebar .nav button::after,
  #employee-app .sidebar .nav button::after,
  #admin-app .sidebar .nav button.nav-center::after,
  #employee-app .sidebar .nav button.nav-center::after {
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 899px) {
  #admin-app .sidebar .nav button::after,
  #employee-app .sidebar .nav button::after,
  #admin-app .sidebar .nav button.nav-center::after,
  #employee-app .sidebar .nav button.nav-center::after {
    left: 50% !important;
    top: 9px !important;
    transform: translateX(-50%) !important;
  }

  /* Keep the mobile title centered against the viewport, not between unequal buttons. */
  #admin-app .mobile-appbar,
  #employee-app .mobile-appbar {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) 72px !important;
    align-items: center !important;
    column-gap: 4px !important;
  }

  #admin-app .mobile-appbar strong,
  #employee-app .mobile-appbar strong {
    width: 100% !important;
    max-width: none !important;
    justify-self: center !important;
    text-align: center !important;
  }

  #admin-app .mobile-appbar > :first-child,
  #employee-app .mobile-appbar > :first-child {
    justify-self: start !important;
  }

  #admin-app .mobile-appbar > :last-child,
  #employee-app .mobile-appbar > :last-child {
    justify-self: end !important;
  }
}

@media (max-width: 420px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .stat span {
    font-size: 12px !important;
  }

  .stat b {
    font-size: clamp(21px, 8vw, 30px) !important;
  }

  .attendance-actions button {
    font-size: 13px;
  }
}

/* Mobile bottom navigation hard fix: full-width, no clipping, both admin/user. */
@media (max-width: 899px) {
  #admin-app .shell,
  #employee-app .shell {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  #admin-app .content,
  #employee-app .content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 76px 14px calc(132px + env(safe-area-inset-bottom)) !important;
  }

  #admin-app .sidebar,
  #employee-app .sidebar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 90 !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: calc(88px + env(safe-area-inset-bottom)) !important;
    min-height: calc(88px + env(safe-area-inset-bottom)) !important;
    max-height: calc(88px + env(safe-area-inset-bottom)) !important;
    padding: 7px max(10px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right)) !important;
    border: 0 !important;
    border-top: 1px solid rgba(214, 236, 249, .95) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 -18px 44px rgba(20, 79, 120, .16) !important;
    transform: none !important;
    overflow: visible !important;
    backdrop-filter: blur(22px);
  }

  #admin-app .sidebar .brand,
  #employee-app .sidebar .brand,
  #admin-app .sidebar > .button-row,
  #employee-app .sidebar > .button-row {
    display: none !important;
  }

  #admin-app .sidebar .nav,
  #employee-app .sidebar .nav,
  #admin-app .sidebar .admin-nav,
  #employee-app .sidebar .employee-nav {
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    align-items: end !important;
    justify-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #admin-app .sidebar .admin-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  #employee-app .sidebar .employee-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  #admin-app .sidebar .nav button,
  #employee-app .sidebar .nav button,
  #admin-app .sidebar .nav button.nav-center,
  #employee-app .sidebar .nav button.nav-center {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 2px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #8ca0b8 !important;
    font-size: clamp(9px, 2.8vw, 12px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: nowrap !important;
    transform: none !important;
    overflow: visible !important;
  }

  #admin-app .sidebar .nav button::before,
  #employee-app .sidebar .nav button::before,
  #admin-app .sidebar .nav button.nav-center::before,
  #employee-app .sidebar .nav button.nav-center::before {
    content: var(--nav-symbol) !important;
    position: static !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
    margin: 0 0 4px !important;
    border: 0 !important;
    border-radius: 14px !important;
    color: #fff !important;
    background: var(--nav-bg) !important;
    box-shadow: 0 10px 22px rgba(31, 131, 232, .14) !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    transform: none !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  #admin-app .sidebar .nav button::after,
  #employee-app .sidebar .nav button::after,
  #admin-app .sidebar .nav button.nav-center::after,
  #employee-app .sidebar .nav button.nav-center::after {
    content: none !important;
  }

  #admin-app .sidebar .nav button.active,
  #employee-app .sidebar .nav button.active {
    color: var(--brand) !important;
    background: linear-gradient(180deg, rgba(231, 243, 255, .9), rgba(255, 255, 255, .35)) !important;
  }

  #employee-app .sidebar .employee-nav button.nav-center {
    z-index: 2 !important;
    transform: translateY(-20px) !important;
    color: #0b71d9 !important;
  }

  #employee-app .sidebar .employee-nav button.nav-center::before {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    border: 7px solid #fff !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #1f83e8, #16c7e6) !important;
    box-shadow: 0 18px 34px rgba(31, 131, 232, .28) !important;
    font-size: 17px !important;
  }
}

@media (max-width: 380px) {
  #admin-app .sidebar .nav button,
  #employee-app .sidebar .nav button {
    font-size: 9px !important;
  }

  #admin-app .sidebar .nav button::before,
  #employee-app .sidebar .nav button::before {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 12px !important;
  }
}

.login-aside .login-credit {
  display: block !important;
  margin-top: 14px !important;
  color: rgba(255, 255, 255, .76) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

@media (max-width: 899px) {
  .login-aside > .login-credit {
    display: block !important;
  }
}

/* BRI-inspired responsive design system. Keep this final so it wins old layers. */
:root {
  --brand: #00529b;
  --brand-dark: #003b71;
  --brand-cyan: #00aeef;
  --brand-2: #0076c8;
  --ink: #10233f;
  --muted: #667b96;
  --line: #d7e5f1;
  --soft: #f1f7fc;
  --paper: #ffffff;
  --shadow-soft: 0 18px 46px rgba(0, 82, 155, .13);
  --shadow-card: 0 9px 28px rgba(10, 61, 107, .09);
}

html,
body {
  color: var(--ink);
  background: #f3f7fb !important;
}

* {
  min-width: 0;
}

h1,
h2,
h3,
h4,
p,
span,
small,
label,
button,
td,
th {
  overflow-wrap: anywhere;
  word-break: normal;
}

h1,
h2,
h3,
h4 {
  line-height: 1.2 !important;
}

p,
small {
  line-height: 1.5 !important;
}

.shell {
  background: #f3f7fb !important;
}

.content {
  background:
    radial-gradient(circle at 100% 0, rgba(0, 174, 239, .08), transparent 30%),
    #f3f7fb !important;
}

.card,
.table-card,
.organization-card,
.company-identity-card.card {
  border: 1px solid #dbe8f2 !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: var(--shadow-card) !important;
}

.admin-panel,
.employee-panel {
  gap: 18px !important;
}

.topbar {
  margin-bottom: 18px !important;
}

.topbar h2 {
  color: var(--ink) !important;
  font-size: clamp(24px, 2.3vw, 34px) !important;
}

.field {
  min-width: 0;
}

.field > span,
label > span {
  display: block;
  max-width: 100%;
  color: #4e6683 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

input,
select,
textarea {
  width: 100%;
  max-width: 100%;
  min-height: 46px;
  border: 1px solid #cbddea !important;
  border-radius: 13px !important;
  color: var(--ink) !important;
  background: #fff !important;
  font-size: 15px !important;
}

textarea {
  min-height: 108px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-cyan) !important;
  box-shadow: 0 0 0 4px rgba(0, 174, 239, .13) !important;
  outline: none !important;
}

.primary {
  border-color: var(--brand) !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--brand), #0077c8) !important;
  box-shadow: 0 10px 22px rgba(0, 82, 155, .18) !important;
}

.secondary {
  border-color: #bfdaed !important;
  color: var(--brand) !important;
  background: #eef7fd !important;
}

.primary,
.secondary,
.danger-button {
  min-height: 44px;
  border-radius: 12px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

.sidebar {
  border-right: 0 !important;
  background: linear-gradient(180deg, #00498d 0%, #0069b7 58%, #00a1dc 100%) !important;
  box-shadow: 10px 0 32px rgba(0, 54, 105, .16);
}

@media (min-width: 900px) {
  #admin-app .sidebar,
  #employee-app .sidebar {
    width: 264px !important;
    padding: 22px 18px !important;
  }

  #admin-app .sidebar .brand,
  #employee-app .sidebar .brand {
    border: 1px solid rgba(255, 255, 255, .2) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .12) !important;
    box-shadow: none !important;
  }

  #admin-app .sidebar .brand b,
  #employee-app .sidebar .brand b,
  #admin-app .sidebar .brand small,
  #employee-app .sidebar .brand small {
    color: #fff !important;
  }

  #admin-app .sidebar .nav button,
  #employee-app .sidebar .nav button {
    min-height: 54px !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    color: rgba(255, 255, 255, .82) !important;
  }

  #admin-app .sidebar .nav button::before,
  #employee-app .sidebar .nav button::before {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
    border-radius: 11px !important;
    background-color: rgba(255, 255, 255, .15) !important;
    box-shadow: none !important;
  }

  #admin-app .sidebar .nav button.active,
  #employee-app .sidebar .nav button.active {
    color: var(--brand-dark) !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(0, 39, 76, .18) !important;
  }

  #admin-app .content,
  #employee-app .content {
    padding: 28px clamp(24px, 3vw, 44px) 48px !important;
  }

  .mobile-appbar {
    position: sticky !important;
    top: -28px !important;
    z-index: 30 !important;
    height: 86px !important;
    margin: -28px calc(clamp(24px, 3vw, 44px) * -1) 26px !important;
    padding: 28px clamp(24px, 3vw, 44px) 14px !important;
    border-bottom: 1px solid #dce8f2 !important;
    background: rgba(255, 255, 255, .94) !important;
    backdrop-filter: blur(16px);
  }
}

.organization-panels {
  align-items: start;
  gap: 16px !important;
}

.organization-card {
  overflow: hidden;
  padding: 20px !important;
}

.organization-card .table-toolbar {
  align-items: flex-start !important;
}

.organization-card .table-toolbar > div {
  flex: 1 1 220px;
}

.organization-card h3 {
  margin: 0 0 5px !important;
  color: var(--ink);
  font-size: clamp(20px, 2vw, 26px) !important;
}

.organization-card p {
  margin: 0 !important;
}

.nested-form {
  margin-top: 16px;
  border-color: #cfe3f2 !important;
  border-radius: 16px !important;
  background: #f4f9fd !important;
}

.organization-item {
  border-color: #d8e7f2 !important;
  border-left: 4px solid var(--brand-cyan) !important;
  border-radius: 14px !important;
  box-shadow: 0 5px 15px rgba(0, 82, 155, .06);
}

/* Workday controls: prevent global input rules from making giant boxes. */
.check-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(82px, 1fr)) !important;
  gap: 10px !important;
}

.workday-pill {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 44px !important;
  padding: 9px 11px !important;
  border: 1px solid #d4e4f0 !important;
  border-radius: 12px !important;
  color: #385572 !important;
  background: #f8fbfe !important;
  cursor: pointer;
}

.workday-pill input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  display: block !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  accent-color: var(--brand);
}

.workday-pill span {
  display: inline !important;
  color: inherit !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.company-identity-card {
  overflow: hidden;
  padding: 20px !important;
  background: linear-gradient(135deg, #f5faff, #edf7fd) !important;
}

.logo-editor,
.logo-controls {
  max-width: 100%;
}

input[type="file"] {
  min-height: 48px;
  padding: 7px !important;
  overflow: hidden;
}

input[type="file"]::file-selector-button {
  height: 34px;
  margin-right: 10px;
  border: 0;
  border-radius: 9px;
  padding: 0 13px;
  color: #fff;
  background: var(--brand);
  font: inherit;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .check-grid {
    grid-template-columns: repeat(4, minmax(100px, 1fr)) !important;
  }

  .organization-panels {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 899px) {
  #admin-app .content,
  #employee-app .content {
    padding: 74px 12px calc(104px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-appbar {
    height: 62px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid #d9e7f1 !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 8px 24px rgba(0, 82, 155, .09) !important;
  }

  .mobile-appbar strong {
    max-width: 58vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
    font-size: 18px !important;
  }

  .mobile-icon-button,
  .mobile-logout {
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }

  .admin-panel,
  .employee-panel {
    gap: 12px !important;
  }

  .card,
  .table-card,
  .organization-card {
    padding: 15px !important;
    border-radius: 16px !important;
  }

  .form-grid,
  .toolbar-grid {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }

  .organization-card .table-toolbar {
    display: grid !important;
    gap: 12px !important;
  }

  .organization-card .table-toolbar button {
    width: 100% !important;
  }

  .organization-item {
    padding: 12px !important;
  }

  .organization-item .row-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organization-item .row-actions button {
    width: 100%;
  }

  .check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .workday-pill {
    min-height: 42px !important;
  }

  .company-identity-card .logo-editor {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .company-identity-card .brand-mark {
    width: 72px !important;
    height: 72px !important;
  }

  #admin-app .sidebar,
  #employee-app .sidebar {
    height: calc(76px + env(safe-area-inset-bottom)) !important;
    min-height: calc(76px + env(safe-area-inset-bottom)) !important;
    max-height: calc(76px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #d4e4ef !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 -10px 30px rgba(0, 82, 155, .13) !important;
  }

  #admin-app .sidebar .nav button,
  #employee-app .sidebar .nav button,
  #admin-app .sidebar .nav button.nav-center,
  #employee-app .sidebar .nav button.nav-center {
    height: 62px !important;
    min-height: 62px !important;
    border-radius: 12px !important;
    color: #71849a !important;
    font-size: clamp(8px, 2.45vw, 11px) !important;
  }

  #admin-app .sidebar .nav button::before,
  #employee-app .sidebar .nav button::before {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    margin-bottom: 3px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
  }

  #admin-app .sidebar .nav button.active,
  #employee-app .sidebar .nav button.active {
    color: var(--brand) !important;
    background: #eaf5fc !important;
  }

  #employee-app .sidebar .employee-nav button.nav-center {
    transform: none !important;
  }

  #employee-app .sidebar .employee-nav button.nav-center::before {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border: 3px solid #fff !important;
  }
}

@media (max-width: 430px) {
  #admin-app .content,
  #employee-app .content {
    padding-inline: 9px !important;
  }

  .mobile-appbar strong {
    font-size: 16px !important;
  }

  .card,
  .table-card,
  .organization-card {
    padding: 13px !important;
  }

  .organization-card h3 {
    font-size: 19px !important;
  }

  .organization-card p,
  .organization-item-details small {
    font-size: 12px !important;
  }

  .button-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .button-row button {
    width: 100% !important;
  }

  .stats {
    gap: 8px !important;
  }

  .stat {
    padding: 14px !important;
    border-radius: 15px !important;
  }

  .check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Responsive sidebar/header corrections. Keep this block last. */
.mobile-logout,
.sidebar .danger-button {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

@media (min-width: 900px) {
  #admin-app .shell,
  #employee-app .shell {
    grid-template-columns: clamp(248px, 20vw, 280px) minmax(0, 1fr) !important;
  }

  #admin-app .sidebar,
  #employee-app .sidebar {
    width: auto !important;
    padding: 20px !important;
  }

  #admin-app .sidebar .brand,
  #employee-app .sidebar .brand {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
  }

  #admin-app .sidebar .brand-mark,
  #employee-app .sidebar .brand-mark {
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
  }

  #admin-app .sidebar .brand b,
  #employee-app .sidebar .brand b,
  #admin-app .sidebar .brand small,
  #employee-app .sidebar .brand small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #admin-app .sidebar .nav button,
  #employee-app .sidebar .nav button,
  #admin-app .sidebar .nav button.nav-center,
  #employee-app .sidebar .nav button.nav-center {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 52px !important;
    padding: 7px 10px !important;
    gap: 12px !important;
    text-align: left !important;
    line-height: 1.15 !important;
  }

  #admin-app .sidebar .nav button::before,
  #employee-app .sidebar .nav button::before {
    position: static !important;
    display: inline-grid !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    margin: 0 !important;
    transform: none !important;
  }

  #admin-app .sidebar .nav button::after,
  #employee-app .sidebar .nav button::after {
    content: none !important;
  }

  #admin-app .sidebar > .button-row,
  #employee-app .sidebar > .button-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  #admin-app .sidebar > .button-row button,
  #employee-app .sidebar > .button-row button {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 8px !important;
  }

  #admin-app .content,
  #employee-app .content {
    padding-top: 0 !important;
  }

  #admin-app .mobile-appbar,
  #employee-app .mobile-appbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    height: 78px !important;
    margin: 0 calc(clamp(24px, 3vw, 44px) * -1) 26px !important;
    padding: 20px clamp(24px, 3vw, 44px) 14px !important;
    overflow: visible !important;
  }
}

@media (max-width: 899px) {
  #admin-app .mobile-appbar,
  #employee-app .mobile-appbar {
    position: fixed !important;
    inset: 0 0 auto !important;
    z-index: 100 !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .mobile-appbar strong {
    flex: 1 1 auto !important;
    max-width: none !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-logout {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 66px !important;
    padding-inline: 10px !important;
  }

  #admin-app .sidebar .nav button,
  #employee-app .sidebar .nav button,
  #admin-app .sidebar .nav button.nav-center,
  #employee-app .sidebar .nav button.nav-center {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    padding: 3px 1px !important;
    line-height: 1.05 !important;
  }
}

/* Must remain the final cascade rule: render the SVG glyph over each 3D tile. */
#admin-app .sidebar .nav button::after,
#employee-app .sidebar .nav button::after,
#admin-app .sidebar .nav button.nav-center::after,
#employee-app .sidebar .nav button.nav-center::after {
  content: "\00a0" !important;
  display: block !important;
  position: absolute !important;
  width: 20px !important;
  height: 20px !important;
  background: #fff !important;
  -webkit-mask: var(--nav-icon-svg) center / contain no-repeat !important;
  mask: var(--nav-icon-svg) center / contain no-repeat !important;
  filter: drop-shadow(0 2px 1px rgba(0, 32, 72, .24));
  pointer-events: none;
}

@media (min-width: 900px) {
  #admin-app .sidebar .nav button::after,
  #employee-app .sidebar .nav button::after,
  #admin-app .sidebar .nav button.nav-center::after,
  #employee-app .sidebar .nav button.nav-center::after {
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 899px) {
  #admin-app .sidebar .nav button::after,
  #employee-app .sidebar .nav button::after,
  #admin-app .sidebar .nav button.nav-center::after,
  #employee-app .sidebar .nav button.nav-center::after {
    left: 50% !important;
    top: 9px !important;
    transform: translateX(-50%) !important;
  }
}

/* Final mobile app-bar alignment. */
@media (max-width: 899px) {
  #admin-app .mobile-appbar,
  #employee-app .mobile-appbar {
    position: fixed !important;
    inset: 0 auto auto 0 !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 64px !important;
    align-items: center !important;
    column-gap: 4px !important;
    overflow: visible !important;
  }

  #admin-app .mobile-appbar strong,
  #employee-app .mobile-appbar strong {
    width: 100% !important;
    max-width: none !important;
    justify-self: center !important;
    text-align: center !important;
    font-size: clamp(13px, 4.3vw, 18px) !important;
    line-height: 1.15 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  #admin-app .mobile-appbar > :first-child,
  #employee-app .mobile-appbar > :first-child {
    justify-self: start !important;
    width: 46px !important;
    min-width: 46px !important;
    padding-inline: 4px !important;
  }

  #admin-app .mobile-appbar > :last-child,
  #employee-app .mobile-appbar > :last-child {
    justify-self: end !important;
    width: 60px !important;
    min-width: 60px !important;
    padding-inline: 5px !important;
  }
}