/* ===========================================================
   Satoshi font-face declarations
   Place the .otf files inside assets/fonts/ with these exact
   filenames, or update the src paths below to match yours.
   =========================================================== */
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html {
  font-family: 'Satoshi', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

body {
  font-family: 'Satoshi', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ===========================================================
   Small utilities Tailwind can't reasonably express
   =========================================================== */

/* Thin, quiet scrollbars for tables and the sidebar */
.thin-scrollbar::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.thin-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.thin-scrollbar::-webkit-scrollbar-thumb {
  background-color: #E5E7EB;
  border-radius: 9999px;
}
.thin-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #D1D5DB;
}

/* Sticky table header shadow-on-scroll cue */
.table-scroll {
  position: relative;
}
thead.sticky-head th {
  position: sticky;
  top: 0;
  z-index: 10;
}

.calendar-scroll {
  isolation: isolate;
}

.calendar-employee-head {
  min-width: 240px;
}

.calendar-employee-cell {
  min-width: 240px;
}

.calendar-grid-day {
  display: flex;
  min-height: clamp(42px, 7vw, 58px);
  align-items: center;
  justify-content: center;
}
.calendar-grid-day:not(.calendar-grid-empty):hover {
  transform: scale(1.08);
}
.calendar-grid-empty {
  pointer-events: none;
}
.calendar-grid-status {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.calendar-grid-day:not(.calendar-grid-empty):hover .calendar-grid-status {
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.14);
}
.calendar-grid-today .calendar-grid-status {
  outline: 2px solid #2563EB;
  outline-offset: 3px;
}
@media (min-width: 640px) {
  .calendar-grid-status {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.8rem;
  }
}

/* Punch timeline connector line: centred under the 32px icon, hidden on the last item */
.timeline-connector {
  position: absolute;
  left: 16px;
  top: 36px;
  bottom: 4px;
  width: 1px;
  transform: translateX(-50%);
  background-color: #E5E7EB;
}
.timeline-item:last-child .timeline-connector {
  display: none;
}
html.dark .timeline-connector {
  background-color: #334155;
}

/* Collapsible desktop sidebar. Mobile remains a full-width drawer. */
@media (min-width: 1024px) {
  #sidebar {
    transition: width 220ms ease, transform 200ms ease;
  }
  #sidebar.is-collapsed,
  html.sidebar-collapsed #sidebar {
    width: 5rem;
  }
  #sidebar.is-collapsed .sidebar-brand,
  html.sidebar-collapsed #sidebar .sidebar-brand {
    justify-content: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  #sidebar.is-collapsed .sidebar-label,
  #sidebar.is-collapsed .sidebar-user-details,
  html.sidebar-collapsed #sidebar .sidebar-label,
  html.sidebar-collapsed #sidebar .sidebar-user-details {
    width: 0;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
  }
  #sidebar.is-collapsed [data-nav],
  html.sidebar-collapsed #sidebar [data-nav] {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 2.5rem;
    min-width: 2.5rem;
    max-width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
    max-height: 2.5rem;
    flex: 0 0 2.5rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    gap: 0;
    padding: 0;
  }
  #sidebar.is-collapsed [data-nav] > svg,
  html.sidebar-collapsed #sidebar [data-nav] > svg {
    display: block;
    flex: 0 0 auto;
    margin: 0;
  }
  #sidebar.is-collapsed .sidebar-brand > a,
  html.sidebar-collapsed #sidebar .sidebar-brand > a {
    gap: 0;
  }
  #sidebar.is-collapsed .mt-1.flex,
  html.sidebar-collapsed #sidebar .mt-1.flex {
    justify-content: center;
    gap: 0;
  }
  #sidebar.is-collapsed .collapse-sidebar-icon,
  html.sidebar-collapsed .collapse-sidebar-icon {
    transform: rotate(180deg);
  }
}

/* Modal fade */
.modal-backdrop {
  transition: opacity 150ms ease;
}
.modal-panel {
  transition: opacity 150ms ease, transform 150ms ease;
}

/* Focus visibility (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

/* Sidebar "Download APK" card: icon-only when the sidebar is collapsed */
@media (min-width: 1024px) {
  #sidebar.is-collapsed .sidebar-apk-card,
  html.sidebar-collapsed #sidebar .sidebar-apk-card {
    justify-content: center;
    padding: 0.375rem;
    border-color: transparent;
    background: transparent;
  }
}

/* Calendar: punched but awaiting HR approval */
.pending-approval-cell {
  border: 2px dashed #38BDF8;
  background-color: #F0F9FF;
  color: #0EA5E9;
}
html.dark .pending-approval-cell {
  border-color: rgba(56, 189, 248, 0.6);
  background-color: rgba(14, 165, 233, 0.12);
  color: #7DD3FC;
}