/* ============================================================
   style.css — Pontaj Application
   ============================================================ */

:root {
  --primary:     #1565c0;
  --primary-dk:  #0d47a1;
  --primary-lt:  #e3f2fd;
  --accent:      #f57c00;
  --success:     #2e7d32;
  --danger:      #c62828;
  --weekend-bg:  #fff3e0;
  --holiday-bg:  #fce4ec;
  --today-bg:    #e8f5e9;
  --row-hover:   #e8f0fe;
  --card-shadow: 0 2px 8px rgba(0,0,0,.10);
  --radius:      8px;
  --navbar-h:    52px;
  --font-main:   'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Base ─────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  background: #f0f4f8;
  color: #212121;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content { flex: 1; }

/* ── Navbar ───────────────────────────────────────────── */
#mainNav { height: var(--navbar-h); background: var(--primary) !important; }
#mainNav .navbar-brand { font-size: 1.1rem; letter-spacing: -.3px; }
#mainNav .brand-name   { font-weight: 800; letter-spacing: -1px; }
#mainNav .nav-link     { font-size: .85rem; padding: .6rem .5rem; border-bottom: 2px solid transparent; }
#mainNav .nav-link.active,
#mainNav .nav-link:hover { border-bottom-color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); }
.fs-7 { font-size: .75rem; }

.avatar-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  font-size: .8rem; font-weight: 700; color: #fff;
}

/* ── Cards ────────────────────────────────────────────── */
.card { border: none; border-radius: var(--radius); box-shadow: var(--card-shadow); }
.card-header { border-radius: var(--radius) var(--radius) 0 0 !important; }

/* ── Pontaj Grid ──────────────────────────────────────── */
.pontaj-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 140px);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  background: #fff;
}

.pontaj-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: .78rem;
  min-width: 100%;
  white-space: nowrap;
}

/* Frozen columns */
.pontaj-table .col-nr,
.pontaj-table .col-name {
  position: sticky;
  background: #fff;
  z-index: 3;
}
.pontaj-table .col-nr   { left: 0;   min-width: 38px; max-width: 38px; }
.pontaj-table .col-name { left: 38px; min-width: 160px; max-width: 200px; font-weight: 600; }

/* Frozen header */
.pontaj-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--primary);
  color: #fff;
  text-align: center;
  vertical-align: middle;
  border-bottom: 2px solid var(--primary-dk);
  padding: 3px 2px;
  font-weight: 600;
}
.pontaj-table thead th.col-nr,
.pontaj-table thead th.col-name { z-index: 5; text-align: left; padding-left: 6px; }

/* Sub-header (Intrare/Iesire) */
.pontaj-table .subhead th {
  background: var(--primary-dk);
  font-size: .7rem;
  font-weight: 500;
  top: 28px; /* after first header row */
}

/* Day column header */
.day-col { min-width: 84px; }
.day-col.weekend-col { background: #e65100 !important; }
.day-col.holiday-col { background: #ad1457 !important; }
.day-col.today-col   { background: #1b5e20 !important; }

/* Body rows */
.pontaj-table tbody tr { transition: background .1s; }
.pontaj-table tbody tr:hover td { background: var(--row-hover); }
.pontaj-table tbody tr:hover .col-nr,
.pontaj-table tbody tr:hover .col-name { background: var(--row-hover); }

.pontaj-table tbody td {
  padding: 2px 3px;
  border: 1px solid #e0e0e0;
  vertical-align: middle;
  text-align: center;
}
.pontaj-table tbody td.col-name {
  text-align: left;
  padding-left: 6px;
  border-right: 2px solid #bdbdbd;
  font-size: .8rem;
}
.pontaj-table tbody td.weekend-day  { background: var(--weekend-bg); }
.pontaj-table tbody td.holiday-day  { background: var(--holiday-bg); }
.pontaj-table tbody td.today-day    { background: var(--today-bg); }

/* Time cells */
.time-cell {
  position: relative;
  cursor: pointer;
  min-width: 42px;
  height: 28px;
  padding: 0 2px;
  font-variant-numeric: tabular-nums;
  font-size: .76rem;
}
.time-cell:hover { background: #bbdefb !important; }
.time-cell.has-value { color: var(--primary); font-weight: 600; }
.time-cell.card-entry::after {
  content: '';
  position: absolute; bottom: 1px; right: 1px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* Totals row */
.totals-col { background: #f5f5f5; font-weight: 600; font-size: .75rem; color: #333; }
.summary-col { min-width: 55px; background: #fafafa; font-size: .76rem; }

/* ── Inline time editor ────────────────────────────────── */
.time-input {
  width: 60px; border: none; background: transparent;
  text-align: center; font-size: .76rem; font-weight: 600;
  color: var(--primary); outline: none; padding: 0;
}
.time-input:focus { background: #fff; border-bottom: 2px solid var(--primary); }

/* ── Stat Cards ────────────────────────────────────────── */
.stat-card {
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  box-shadow: var(--card-shadow);
}
.stat-card .stat-icon {
  font-size: 2rem; width: 48px; text-align: center;
  opacity: .85;
}
.stat-card .stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; opacity: .8; }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.stat-card .stat-sub   { font-size: .75rem; opacity: .8; }

/* ── Badges ────────────────────────────────────────────── */
.badge-source-card   { background: var(--accent); }
.badge-source-manual { background: #546e7a; }
.badge-source-api    { background: var(--success); }

/* ── Tables ────────────────────────────────────────────── */
.table-pontaj-report th { background: var(--primary); color: #fff; }

/* ── Login page ────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--primary-dk) 0%, var(--primary) 60%, #1976d2 100%);
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  width: 100%; max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.login-card .logo-area {
  background: var(--primary-dk);
  border-radius: 12px 12px 0 0;
  padding: 2rem;
  text-align: center;
  color: #fff;
}
.login-card .logo-icon { font-size: 3rem; }
.login-card .logo-title { font-size: 1.8rem; font-weight: 800; letter-spacing: -2px; }

/* ── Dashboard presence grid ──────────────────────────── */
.presence-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .6rem; border-radius: 20px;
  font-size: .8rem; font-weight: 600;
}
.presence-in  { background: #e8f5e9; color: #1b5e20; }
.presence-out { background: #f5f5f5; color: #757575; }
.presence-absent { background: #fce4ec; color: #880e4f; }

/* ── App footer ────────────────────────────────────────── */
.app-footer { font-size: .78rem; background: #fff; margin-top: auto; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 576px) {
  .pontaj-table .col-name { min-width: 110px; max-width: 130px; }
}

/* ── Print styles ──────────────────────────────────────── */
@media print {
  #mainNav, .app-footer, .btn, .no-print { display: none !important; }
  .pontaj-wrapper { max-height: none; overflow: visible; box-shadow: none; }
  .pontaj-table { font-size: 7pt; }
  .pontaj-table .col-nr, .pontaj-table .col-name { position: static; }
  .pontaj-table thead th { background: #1565c0 !important; color: #fff !important; }
  @page { size: A3 landscape; margin: 10mm; }
}

/* ── Utilities ─────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.text-overflow-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-500 { font-weight: 500; }
.bg-primary-lt { background: var(--primary-lt); }