/* ══════════════════════════════════════════════════════════
   assets/app.css — All styles for the AOA app
   ══════════════════════════════════════════════════════════ */

/* ── Base ────────────────────────────────────────────────── */
body { font-family: Georgia, serif; background: #f4efe6; color: #1c1a14; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #ece6da; }
::-webkit-scrollbar-thumb { background: #ddd6c4; border-radius: 3px; }

/* ── Tab navigation ──────────────────────────────────────── */
.tab-active { color: #d97038 !important; border-bottom-color: #d97038 !important; }

/* ── Content panes ───────────────────────────────────────── */
.pane    { display: none; }
.pane.on { display: block; }

/* ── Modals / overlays ───────────────────────────────────── */
.overlay      { display: none; }
.overlay.open { display: flex; }

/* ── Apartment card states ───────────────────────────────── */
.apt-overdue { border-color: #e0c0c0 !important; background: #fdf8f8 !important; }
.apt-overdue::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 0; height: 0; border-style: solid;
  border-width: 0 22px 22px 0;
  border-color: transparent #a82e2e transparent transparent;
}
.apt-vacant { border-style: dashed !important; opacity: 0.7; }

/* ── Summary card accent bars ────────────────────────────── */
.sc-accent::before,
.sc-green::before,
.sc-red::before,
.sc-gold::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 14px 14px 0 0;
}
.sc-accent::before { background: #b85c28; }
.sc-green::before  { background: #276642; }
.sc-red::before    { background: #a82e2e; }
.sc-gold::before   { background: #a8880a; }

/* ── Floor divider rule ──────────────────────────────────── */
.floor-rule::after { content: ''; flex: 1; height: 1px; background: #ddd6c4; }

/* ── Active filter pill ──────────────────────────────────── */
.fp-on { background: #b85c28 !important; color: #fff !important; border-color: #b85c28 !important; }

/* ── OTP digit input boxes ───────────────────────────────── */
.otp-box {
  width: 48px; height: 56px; text-align: center;
  font-size: 1.5rem; font-weight: 700;
  background: #f4efe6; border: 2px solid #ddd6c4;
  border-radius: 10px; outline: none;
  transition: border-color .15s;
  font-family: Arial, sans-serif; color: #1c1a14;
}
.otp-box:focus { border-color: #b85c28; }

/* ── Asset status badges ─────────────────────────────────── */
.ast-operational    { background:#e4f2ea; color:#276642; }
.ast-maintenance    { background:#fdeee2; color:#b07010; }
.ast-faulty         { background:#fae6e6; color:#a82e2e; }
.ast-decommissioned { background:#ece6da; color:#988e82; }

/* ── Asset card hover ────────────────────────────────────── */
.asset-card { transition: transform .15s, box-shadow .15s; }
.asset-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(50,35,15,.14) !important; }

/* ── Service log timeline ────────────────────────────────── */
.log-line { border-left: 2px solid #ddd6c4; padding-left: 1rem; margin-left: .4rem; }
.log-line:last-child { border-left-color: transparent; }

/* ── Service due urgency ─────────────────────────────────── */
.due-overdue { color: #a82e2e; font-weight: 700; }
.due-soon    { color: #b07010; font-weight: 600; }
.due-ok      { color: #276642; }

/* ══════════════════════════════════════════════════════════
   STAFF MODULE
   ══════════════════════════════════════════════════════════ */

/* ── Staff card ─────────────────────────────────────────── */
.staff-card { transition: transform .15s, box-shadow .15s; cursor: pointer; }
.staff-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(50,35,15,.14) !important; }

/* ── Shift badges ────────────────────────────────────────── */
.shift-day     { background:#e4edf8; color:#2a547e; }
.shift-night   { background:#2a2a3a; color:#a0a8d0; }
.shift-regular { background:#e4f2ea; color:#276642; }
.shift-manager { background:#fdeee2; color:#b07010; }

/* ── Staff status badges ─────────────────────────────────── */
.stf-active     { background:#e4f2ea; color:#276642; }
.stf-on_leave   { background:#fdeee2; color:#b07010; }
.stf-resigned   { background:#ece6da; color:#988e82; }
.stf-terminated { background:#fae6e6; color:#a82e2e; }

/* ── On-duty glow (current shift) ───────────────────────── */
.on-duty-ring {
  box-shadow: 0 0 0 3px #276642, 0 4px 20px rgba(39,102,66,.18) !important;
  border-color: #276642 !important;
}

/* ── Attendance badge colours ────────────────────────────── */
.att-present  { background:#e4f2ea; color:#276642; }
.att-absent   { background:#fae6e6; color:#a82e2e; }
.att-late     { background:#fdeee2; color:#b07010; }
.att-half_day { background:#e4edf8; color:#2a547e; }
.att-leave    { background:#ece6da; color:#988e82; }

/* ── Live clock chip ─────────────────────────────────────── */
.live-clock {
  font-family: Arial, sans-serif; font-size: .72rem; font-weight: 700;
  background: #1c1a14; color: #d97038;
  padding: .22rem .7rem; border-radius: 6px; letter-spacing: .08em;
}

/* ── Attendance log timeline ─────────────────────────────── */
.att-log-row { border-bottom: 1px solid #ece6da; }
.att-log-row:last-child { border-bottom: none; }

/* ══════════════════════════════════════════════════════════
   STAFF DETAIL TABS  (dark header)
   ══════════════════════════════════════════════════════════ */
.staff-dtab {
  font-family: Arial, sans-serif; font-size: .73rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .52rem 1.1rem; background: none; border: none;
  color: #6a6460; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.staff-dtab:hover   { color: #ccc6bc; }
.staff-dtab-on      { color: #d97038 !important; border-bottom-color: #d97038 !important; }
.sdpanel            { display: block; }

/* ══════════════════════════════════════════════════════════
   EDIT STAFF TABS  (dark header)
   ══════════════════════════════════════════════════════════ */
.seditab {
  font-family: Arial, sans-serif; font-size: .73rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .52rem 1.05rem; background: none; border: none;
  color: #6a6460; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.seditab:hover  { color: #ccc6bc; }
.seditab-on     { color: #d97038 !important; border-bottom-color: #d97038 !important; }
.sepanel        { display: block; }

/* ── sf-input focus style ────────────────────────────────── */
.sf-input:focus { border-color: #b85c28 !important; }

/* ── Photo drop zone hover ───────────────────────────────── */
.photo-drop-hover { border-color: #b85c28 !important; background: #fdf5ef !important; }

/* ── Attendance stats mini-cards ─────────────────────────── */
.att-stat-card {
  background: #f4efe6; border-radius: 10px; padding: .6rem .7rem; text-align: center;
}

/* ── Bank field secure look ──────────────────────────────── */
.bank-secure-val {
  font-family: 'Courier New', monospace; font-size: .84rem;
  font-weight: 700; letter-spacing: .06em; color: #1c1a14;
}

/* ══════════════════════════════════════════════════════════
   DOCUMENTS MODULE
   ══════════════════════════════════════════════════════════ */

/* ── Document card ───────────────────────────────────────── */
.doc-card {
  background: #faf8f3; border: 1px solid #ddd6c4; border-radius: 14px;
  padding: 1rem 1.2rem; transition: transform .15s, box-shadow .15s;
  cursor: default;
}
.doc-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(50,35,15,.12) !important; }

/* ── Category filter pills (reuses .fp / .fp-on from Apartments) ── */

/* ── MIME type icon badge ─────────────────────────────────── */
.doc-icon {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; font-weight: 700;
}
.doc-icon-pdf   { background: #fae6e6; color: #a82e2e; }
.doc-icon-word  { background: #e4edf8; color: #2a547e; }
.doc-icon-excel { background: #e4f2ea; color: #276642; }
.doc-icon-image { background: #fdeee2; color: #b07010; }
.doc-icon-text  { background: #ece6da; color: #58524a; }
.doc-icon-other { background: #ece6da; color: #988e82; }

/* ── Category label chips ─────────────────────────────────── */
.doc-cat {
  font-family: Arial, sans-serif; font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  padding: .18rem .55rem; border-radius: 4px;
  background: #ece6da; color: #58524a;
}

/* ── Upload input focus ───────────────────────────────────── */
.doc-inp:focus { border-color: #b85c28 !important; }

/* ── Drop zone active state ───────────────────────────────── */
.doc-drop-active { border-color: #b85c28 !important; background: #fdf5ef !important; }

/* ── Empty state illustration ────────────────────────────── */
.doc-empty {
  text-align: center; padding: 3.5rem 1rem;
  color: #988e82; font-family: Arial, sans-serif;
}

/* ══════════════════════════════════════════════════════════
   WEEKLY ROSTER MODULE
   ══════════════════════════════════════════════════════════ */

/* ── Roster grid ─────────────────────────────────────────── */
.roster-table {
  width: 100%; border-collapse: collapse;
  font-family: Arial, sans-serif; font-size: .8rem;
}
.roster-table th {
  padding: .55rem .4rem; text-align: center;
  font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #988e82;
  border-bottom: 1px solid #ddd6c4;
}
.roster-table th.today-col {
  color: #b85c28; background: #fdf5ef; border-radius: 6px 6px 0 0;
}
.roster-table td {
  padding: .38rem .3rem; vertical-align: middle;
  border-bottom: 1px solid #ece6da;
}
.roster-table tr:last-child td { border-bottom: none; }
.roster-table td.staff-name-cell {
  font-weight: 600; color: #1c1a14;
  white-space: nowrap; padding-right: .75rem; min-width: 100px;
}
.roster-table td.today-col { background: #fdf9f7; }

/* ── Shift cell select ───────────────────────────────────── */
.roster-sel {
  width: 100%; border: 1.5px solid #ddd6c4; border-radius: 7px;
  padding: .3rem .2rem; font-family: Arial, sans-serif; font-size: .76rem;
  font-weight: 700; text-align: center; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  outline: none; transition: border-color .15s;
}
.roster-sel:focus { border-color: #b85c28; }
.roster-sel.shift-day    { background: #e4edf8; color: #2a547e; }
.roster-sel.shift-night  { background: #2a2a3a; color: #a0a8d0; }
.roster-sel.shift-off    { background: #ece6da; color: #988e82; }
.roster-sel.shift-default{ background: #f4efe6; color: #58524a; border-style: dashed; }

/* ── Week nav bar ────────────────────────────────────────── */
.roster-week-nav {
  display: flex; align-items: center; gap: .6rem;
  background: #f4efe6; border-radius: 10px; padding: .4rem .7rem;
  font-family: Arial, sans-serif; font-size: .82rem; font-weight: 700; color: #1c1a14;
}
.roster-nav-btn {
  background: #ece6da; border: 1px solid #ddd6c4; border-radius: 7px;
  width: 28px; height: 28px; cursor: pointer; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.roster-nav-btn:hover { background: #ddd6c4; }

/* ── Legend ──────────────────────────────────────────────── */
.roster-legend { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .7rem; }
.roster-legend-item {
  display: flex; align-items: center; gap: .3rem;
  font-family: Arial, sans-serif; font-size: .72rem; color: #58524a;
}