/* Leave system stability and responsive fixes — 2026-07-18 */
:root {
  --leave-blue: #2463e8;
  --leave-blue-deep: #163f9e;
  --leave-yellow: #f4c84a;
  --leave-yellow-soft: #fff7cf;
  --leave-line: #dbe4f1;
  --leave-ink: #182945;
}

html,
body {
  min-height: 100%;
  overflow-x: hidden;
}

body {
  color: var(--leave-ink);
}

.app-shell {
  min-height: 100dvh;
}

.sidebar {
  z-index: 30;
}

.workspace {
  min-width: 0;
  overflow-x: clip;
}

.workspace > header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(18px);
}

.content,
.content > *,
.profile,
.profile-account,
.profile-account > span:last-child,
.staff-name,
.staff-name > div {
  min-width: 0;
}

.title-row h1 {
  text-wrap: balance;
}

.sidebar nav button.active {
  color: var(--leave-blue-deep) !important;
  background:
    linear-gradient(90deg, var(--leave-yellow-soft), #edf3ff 72%) !important;
  box-shadow: inset 3px 0 0 var(--leave-yellow) !important;
}

.sidebar nav button.active span {
  color: #9a6a00 !important;
}

.primary,
.approve,
.login-button {
  background: linear-gradient(
    135deg,
    var(--leave-blue),
    var(--leave-blue-deep)
  ) !important;
}

.primary:focus-visible,
.approve:focus-visible,
.login-button:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(244, 200, 74, 0.55) !important;
  outline-offset: 2px;
}

.staff-panel,
.approval-list,
.report-table,
.my-list,
.employee-history {
  max-width: 100%;
}

.lower-grid:has(> .calendar:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.staff-row select:disabled {
  color: #7a5a00 !important;
  background: var(--leave-yellow-soft) !important;
  border-color: #ead27d !important;
  cursor: not-allowed;
  opacity: 1;
}

.modal-bg {
  z-index: 100;
  overflow: auto;
  overscroll-behavior: contain;
}

.modal {
  max-width: calc(100vw - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}

.employee-modal {
  max-width: min(820px, calc(100vw - 40px));
}

@media (max-width: 1180px) and (min-width: 761px) {
  .staff-filters {
    grid-template-columns: 1fr 1fr;
  }

  .staff-search {
    grid-column: 1 / -1;
  }

  .staff-filters > span {
    grid-column: 1 / -1;
    text-align: left;
  }

  .staff-head {
    display: none;
  }

  .staff-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px 14px;
    padding: 18px;
  }

  .staff-name {
    grid-column: 1 / -1;
  }

  .staff-detail-button {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .profile-account > span:last-child {
    display: none;
  }

  .profile {
    gap: 8px;
  }

  .signout {
    padding-inline: 10px;
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  .workspace {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .workspace > header {
    height: 62px;
    padding-inline: 12px;
  }

  .content {
    width: 100%;
    padding: 16px !important;
  }

  .sidebar {
    width: min(86vw, 300px) !important;
  }

  .menu-backdrop {
    z-index: 29;
  }

  .title-row {
    align-items: flex-start;
    gap: 12px;
  }

  .title-row h1 {
    font-size: clamp(22px, 7vw, 27px);
  }

  .title-row .primary {
    flex: 0 0 auto;
  }

  .staff-row,
  .approval-row,
  .report-row,
  .my-row {
    min-width: 0;
  }

  .modal-bg {
    place-items: start center;
    padding: 10px;
  }

  .modal,
  .employee-modal {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 20px 16px;
    border-radius: 16px;
  }

  .modal-actions {
    position: sticky;
    bottom: -20px;
    z-index: 2;
    margin-inline: -16px;
    padding: 12px 16px 4px;
    background: linear-gradient(
      to top,
      #fff 78%,
      rgba(255, 255, 255, 0.88)
    );
  }
}

@media (max-width: 480px) {
  .refresh-button,
  .bell-button,
  .menu {
    min-width: 40px;
    min-height: 40px;
  }

  .profile {
    margin-left: auto;
  }

  .signout {
    font-size: 12px;
  }

  .stats,
  .report-stats,
  .settings-overview {
    grid-template-columns: 1fr !important;
  }

  .staff-filters {
    grid-template-columns: 1fr;
  }

  .staff-filters > * {
    grid-column: 1 !important;
    width: 100%;
  }
}