/* JEC Portal production dashboard and PWA polish */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html {
  background: var(--dark, #17231f);
}

body {
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

.top {
  padding-top: var(--safe-top);
  height: calc(72px + var(--safe-top));
  backdrop-filter: saturate(140%) blur(12px);
  background: rgba(255,255,255,.94);
}

.side {
  padding-left: calc(14px + var(--safe-left));
}

.mobile-nav {
  padding-bottom: var(--safe-bottom);
}

.employee-home-header,
.payroll-dashboard-header {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(255,255,255,.16),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #00543a,
      #0b7959
    );
  box-shadow: 0 14px 34px rgba(0,99,68,.18);
}

.employee-home-header h2 {
  margin: 0;
  font-size: clamp(23px, 3vw, 34px);
}

.employee-home-header p {
  margin: 7px 0 0;
  color: rgba(255,255,255,.78);
}

.employee-dashboard-grid {
  margin-top: 16px;
}

.stat.card {
  position: relative;
  overflow: hidden;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.stat.card::after {
  content: "";
  position: absolute;
  inset: auto -28px -32px auto;
  width: 90px;
  height: 90px;
  border-radius: 999px;
  background: rgba(0,99,68,.055);
}

.stat.card:hover {
  transform: translateY(-2px);
  border-color: rgba(0,99,68,.28);
  box-shadow: 0 14px 30px rgba(18,42,33,.12);
}

.panel {
  border-radius: 17px;
}

.table-wrap {
  border-radius: 12px;
}

table tbody tr {
  transition: background .14s ease;
}

table tbody tr:hover {
  background: #f5faf8;
}

button {
  min-height: 40px;
}

button.primary,
button.secondary,
button.small {
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background .12s ease;
}

button:active {
  transform: scale(.98);
}

dialog {
  max-height: calc(100dvh - 24px);
}

dialog::backdrop {
  background: rgba(8,20,15,.54);
  backdrop-filter: blur(3px);
}

.dialog-inner {
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding-bottom: calc(20px + var(--safe-bottom));
}

.timesheet-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin: 18px -18px -18px;
  padding:
    13px 18px
    calc(13px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
}

#installAppBtn {
  white-space: nowrap;
}

@media (display-mode: standalone) {
  #installAppBtn {
    display: none !important;
  }

  .top {
    user-select: none;
  }
}

@media (max-width: 760px) {
  .content {
    padding:
      14px
      calc(12px + var(--safe-right))
      calc(92px + var(--safe-bottom))
      calc(12px + var(--safe-left));
  }

  .top {
    padding-left: calc(14px + var(--safe-left));
    padding-right: calc(14px + var(--safe-right));
  }

  .top h1 {
    font-size: 19px;
  }

  .top p {
    display: none;
  }

  .top-actions {
    gap: 6px;
  }

  .top-actions button {
    padding-inline: 11px;
  }

  .employee-home-header {
    padding: 20px;
    border-radius: 16px;
  }

  .grid,
  .employee-dashboard-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .stat {
    padding: 15px;
  }

  .stat strong {
    font-size: 25px;
  }

  .panel {
    margin-top: 12px;
    padding: 14px;
  }

  .panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .panel-head > div:last-child {
    width: 100%;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .job-line,
  .expense-line {
    grid-template-columns: 1fr 1fr;
  }

  .job-line label,
  .expense-line label {
    min-width: 0;
  }

  .job-line .remove-line,
  .expense-line .remove-line {
    grid-column: 1 / -1;
    width: 100%;
  }

  dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .dialog-inner {
    min-height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
}

@media (max-width: 430px) {
  .grid,
  .employee-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .employee-timesheet-summary {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

  .job-line,
  .expense-line {
    grid-template-columns: 1fr;
  }
}