/* ═══════════════════════════════════════════════
   AMARA STAFF PORTAL — Scoped CSS (prefix: asp-)
   All rules scoped inside .asp-root to avoid
   clashing with WordPress / Elementor styles.
═══════════════════════════════════════════════ */

/* ── CSS VARIABLES ── */
.asp-root {
  --t:  #306e6b;
  --td: #1f4e4c;
  --tl: #4a9e9a;
  --tp: #e8f4f3;
  --tpp:#cce8e6;
  --g:  #c9a84c;
  --gl: #e8cb78;
  --gd: #a07830;
  --tx: #1a2e2d;
  --txl:#4a6968;
  --txm:#8aabaa;
  --bg: #eef6f5;
  --red:   #e05c5c;
  --green: #2ea86c;
  --orange:#f59e0b;
  --purple:#8b5cf6;
  --sh:    0 4px 20px rgba(48,110,107,.10);
  --sh-lg: 0 14px 48px rgba(48,110,107,.17);
  --r:  18px;
  --rm: 12px;
  --rs: 8px;
  --glass: rgba(255,255,255,.13);
  --glb:   rgba(255,255,255,.24);

  all: initial;
  display: block;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  color: var(--tx);
  background: var(--bg);
  min-height: 500px;
  position: relative;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.asp-root *, .asp-root *::before, .asp-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.asp-root button { font-family: inherit; cursor: pointer; border: none; background: none; }
.asp-root input, .asp-root select, .asp-root textarea { font-family: inherit; }
.asp-root a { text-decoration: none; color: inherit; }
.asp-root img { max-width: 100%; height: auto; }
.asp-root ::-webkit-scrollbar { width: 5px; height: 5px; }
.asp-root ::-webkit-scrollbar-thumb { background: var(--tpp); border-radius: 4px; }

/* ── UTILITY ── */
.asp-hide { display: none !important; }
.asp-fw   { width: 100%; }

/* ── CHIPS ── */
.asp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 50px; font-size: .69rem; font-weight: 700; }
.asp-chip-green  { background: rgba(46,168,108,.11);  color: #1a7a4a; }
.asp-chip-red    { background: rgba(224,92,92,.11);   color: #b52e2e; }
.asp-chip-teal   { background: rgba(48,110,107,.11);  color: var(--td); }
.asp-chip-gold   { background: rgba(201,168,76,.14);  color: #7a5a10; }
.asp-chip-purple { background: rgba(139,92,246,.1);   color: #5b21b6; }
.asp-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.asp-dot-green  { background: var(--green); }
.asp-dot-red    { background: var(--red); }
.asp-dot-orange { background: var(--orange); }

/* ── ROLE TAGS ── */
.asp-rtag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 50px; font-size: .69rem; font-weight: 700; }
.asp-rtag-RN        { background: rgba(48,110,107,.1);    color: var(--td); }
.asp-rtag-LPN       { background: rgba(201,168,76,.14);   color: #7a5a10; }
.asp-rtag-CNA       { background: rgba(99,102,241,.1);    color: #4338ca; }
.asp-rtag-Caregiver { background: rgba(245,158,11,.13);   color: #8a5000; }
.asp-rtag-Admin     { background: rgba(139,92,246,.1);    color: #5b21b6; }

/* ═══════════════════════════════════════════════
   AUTH SCREENS
═══════════════════════════════════════════════ */
.asp-auth-bg {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: linear-gradient(145deg, #040e0d 0%, #0d2e2c 40%, #1e5250 70%, #2d6b68 100%);
  padding: 16px; position: relative; overflow: hidden;
}
.asp-orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .85; }
.asp-o1  { width: 520px; height: 520px; background: rgba(48,110,107,.2);  top: -160px; right: -140px; }
.asp-o2  { width: 380px; height: 380px; background: rgba(201,168,76,.08); bottom: -110px; left: -90px; }
.asp-o3  { width: 240px; height: 240px; background: rgba(48,110,107,.13); top: 40%; left: 28%; }

.asp-auth-card {
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 26px; padding: 36px 34px;
  width: 100%; max-width: 430px;
  box-shadow: 0 40px 100px rgba(0,0,0,.42);
  position: relative; z-index: 2;
}
.asp-auth-card-wide { max-width: 560px; padding: 30px 32px; }

/* Logo */
.asp-logo { text-align: center; margin-bottom: 24px; }
.asp-logo-name { display: block; font-size: 1.85rem; font-weight: 700; color: #fff;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; }
.asp-logo-sub  { display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.44); margin-top: 2px; }
.asp-logo-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(201,168,76,.14); border: 1px solid rgba(201,168,76,.28); border-radius: 50px; padding: 5px 14px; margin-top: 9px; font-size: .7rem; font-weight: 600; color: var(--g); }
.asp-pulse { width: 6px; height: 6px; background: var(--g); border-radius: 50%; animation: asp-pd 2s infinite; }
@keyframes asp-pd { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.7);opacity:.3} }

/* Auth tabs */
.asp-auth-tabs { display: flex; background: rgba(255,255,255,.06); border-radius: var(--rm); padding: 4px; gap: 4px; margin-bottom: 20px; }
.asp-atab { flex: 1; padding: 9px; border-radius: 9px; font-size: .83rem; font-weight: 600; color: rgba(255,255,255,.5); transition: all .25s; }
.asp-atab-on { background: rgba(255,255,255,.14); color: #fff; }

/* Form fields — dark */
.asp-fg { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.asp-fg label { font-size: .74rem; font-weight: 600; color: rgba(255,255,255,.64); letter-spacing: .05em; }
.asp-fg input, .asp-fg select, .asp-fg textarea {
  padding: 11px 14px;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.14);
  border-radius: var(--rm); color: #fff; font-size: .9rem;
  outline: none; transition: all .25s; width: 100%;
}
.asp-fg input:focus, .asp-fg select:focus, .asp-fg textarea:focus {
  border-color: rgba(201,168,76,.55); background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 3px rgba(201,168,76,.1);
}
.asp-fg input::placeholder, .asp-fg textarea::placeholder { color: rgba(255,255,255,.27); }
.asp-fg select option { background: #1a3a38; color: #fff; }
.asp-fg textarea { resize: none; min-height: 74px; }
.asp-fg-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

.asp-btn-primary {
  padding: 13px 22px; margin-top: 6px;
  background: linear-gradient(135deg, var(--g), var(--gd));
  color: #18180a; border-radius: var(--rm); font-size: .94rem; font-weight: 700;
  transition: all .32s; box-shadow: 0 8px 26px rgba(201,168,76,.3);
}
.asp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(201,168,76,.44); }
.asp-btn-primary:active { transform: translateY(0); }
.asp-btn-full { width: 100%; }

.asp-msg { border-radius: var(--rs); padding: 10px 14px; font-size: .8rem; margin-bottom: 11px; text-align: center; }
.asp-msg-err { background: rgba(224,92,92,.14); border: 1px solid rgba(224,92,92,.28); color: #ffb8b8; }
.asp-msg-ok  { background: rgba(46,168,108,.14); border: 1px solid rgba(46,168,108,.28); color: #a3f0c0; }
.asp-auth-hint { font-size: .74rem; color: rgba(255,255,255,.38); text-align: center; margin-top: 12px; }

/* ── Avatar upload — auth ── */
.asp-av-upload-center { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-bottom: 18px; }
.asp-av-circle {
  width: 82px; height: 82px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.09); border: 2px dashed rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; overflow: hidden; transition: all .25s; position: relative;
}
.asp-av-circle:hover { border-color: rgba(201,168,76,.6); background: rgba(255,255,255,.14); }
.asp-av-circle img  { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.asp-av-hover { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,.42); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; font-size: 1.2rem; }
.asp-av-circle:hover .asp-av-hover { opacity: 1; }
.asp-av-hint { font-size: .7rem; color: rgba(255,255,255,.38); text-align: center; line-height: 1.5; }
.asp-av-hint small { color: rgba(255,255,255,.22); }
.asp-file-hidden { display: none; }

/* ═══════════════════════════════════════════════
   APP SHELL
═══════════════════════════════════════════════ */
#asp-app { display: flex; flex-direction: column; min-height: 500px; }

/* TOP NAV */
.asp-topnav {
  background: linear-gradient(135deg, var(--td) 0%, var(--t) 100%);
  padding: 0 20px; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 20px rgba(0,0,0,.18);
}
.asp-brand { display: flex; align-items: center; gap: 8px; }
.asp-brand-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.25rem; font-weight: 700; color: #fff; }
.asp-brand-tag  { font-size: .6rem; background: rgba(201,168,76,.2); border: 1px solid rgba(201,168,76,.3); border-radius: 50px; padding: 2px 8px; font-weight: 600; color: var(--g); letter-spacing: .07em; text-transform: uppercase; }
.asp-nav-right  { display: flex; align-items: center; gap: 9px; }
.asp-nav-user   { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 50px; padding: 5px 14px 5px 5px; cursor: pointer; transition: all .25s; }
.asp-nav-user:hover { background: rgba(255,255,255,.18); }
.asp-nav-av     { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(201,168,76,.5); background: rgba(201,168,76,.18); display: flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 700; color: var(--g); overflow: hidden; flex-shrink: 0; }
.asp-nav-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.asp-nav-name   { font-size: .81rem; font-weight: 600; color: rgba(255,255,255,.92); }
.asp-nav-role   { font-size: .67rem; color: rgba(255,255,255,.5); }
.asp-btn-logout { padding: 7px 13px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--rs); font-size: .77rem; font-weight: 600; color: rgba(255,255,255,.75); transition: all .22s; }
.asp-btn-logout:hover { background: rgba(255,255,255,.15); color: #fff; }

/* TAB NAVS */
.asp-tabnav, .asp-staff-tabnav {
  background: #fff; border-bottom: 2px solid var(--tpp);
  display: flex; overflow-x: auto; padding: 0 16px; gap: 2px;
  -webkit-overflow-scrolling: touch;
}
.asp-tabnav::-webkit-scrollbar, .asp-staff-tabnav::-webkit-scrollbar { height: 0; }
.asp-tab, .asp-stab {
  padding: 13px 17px; font-size: .81rem; font-weight: 600; color: var(--txl);
  white-space: nowrap; border-bottom: 2.5px solid transparent; margin-bottom: -2px; transition: all .25s;
}
.asp-tab-on, .asp-stab-on { color: var(--t); border-bottom-color: var(--t); }

.asp-main { flex: 1; padding: 18px; max-width: 1120px; margin: 0 auto; width: 100%; }

/* ═══════════════════════════════════════════════
   STAFF DASHBOARD
═══════════════════════════════════════════════ */
.asp-hero {
  background: linear-gradient(135deg, var(--td) 0%, var(--t) 60%, #3a8a86 100%);
  border-radius: var(--r); padding: 22px; margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.asp-hero::before { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.05); top: -90px; right: -70px; }
.asp-hero::after  { content: ''; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(201,168,76,.07); bottom: -50px; left: -30px; }
.asp-hero-inner   { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.asp-hero-av      { width: 66px; height: 66px; border-radius: 50%; border: 3px solid rgba(255,255,255,.3); background: rgba(255,255,255,.13); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: #fff; overflow: hidden; flex-shrink: 0; }
.asp-hero-av img  { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.asp-hero-greet   { font-size: .71rem; color: rgba(255,255,255,.56); text-transform: uppercase; letter-spacing: .1em; }
.asp-hero-name    { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1.1; margin-top: 1px; }
.asp-hero-role    { font-size: .77rem; color: rgba(255,255,255,.6); margin-top: 3px; }
.asp-hero-foot    { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.asp-hero-time    { font-size: .79rem; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.asp-hero-status  { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.17); border-radius: 50px; padding: 6px 14px; font-size: .79rem; font-weight: 600; color: rgba(255,255,255,.92); }

/* GPS accuracy badge */
.asp-gps-acc { font-size: .7rem; color: rgba(255,255,255,.5); margin-left: 4px; }

/* Clock */
.asp-clock-section { margin: 14px 0; }
.asp-clock-btn {
  width: 100%; padding: 17px; border-radius: var(--r);
  font-size: 1.04rem; font-weight: 700; letter-spacing: .03em;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  transition: all .3s; overflow: hidden; position: relative;
}
.asp-clock-btn::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.07); opacity: 0; transition: opacity .25s; }
.asp-clock-btn:hover::after { opacity: 1; }
.asp-clock-btn:active { transform: scale(.985); }
.asp-btn-in  { background: linear-gradient(135deg, #2ea86c, #1a7a4e); color: #fff; box-shadow: 0 8px 26px rgba(46,168,108,.32); }
.asp-btn-out { background: linear-gradient(135deg, #e05c5c, #b52e2e); color: #fff; box-shadow: 0 8px 26px rgba(224,92,92,.32); }
.asp-ck-icon { font-size: 1.4rem; }
.asp-ck-sub  { font-size: .71rem; opacity: .77; display: block; margin-top: 2px; font-weight: 400; }

/* Active shift */
.asp-active-shift { background: #fff; border-radius: var(--rm); border-left: 4px solid var(--green); padding: 14px 17px; margin-bottom: 14px; box-shadow: var(--sh); }
.asp-as-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--green); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.asp-as-row   { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.asp-as-k     { font-size: .75rem; color: var(--txl); }
.asp-as-v     { font-size: .87rem; font-weight: 600; color: var(--tx); }
.asp-elapsed  { font-size: 1.32rem; font-weight: 700; color: var(--t); font-variant-numeric: tabular-nums; }
.asp-gps-info { font-size: .72rem; color: var(--txm); margin-top: 5px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.asp-gps-info a { color: var(--t); font-weight: 600; }

/* Mini stats */
.asp-mini-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 11px; margin-bottom: 14px; }
.asp-mstat { background: #fff; border-radius: var(--rm); padding: 13px 11px; box-shadow: var(--sh); text-align: center; }
.asp-mstat-v { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.75rem; font-weight: 700; color: var(--t); line-height: 1; }
.asp-mstat-l { font-size: .69rem; color: var(--txl); margin-top: 3px; }

/* ═══════════════════════════════════════════════
   PROFILE PAGE
═══════════════════════════════════════════════ */
.asp-profile-banner {
  background: linear-gradient(135deg, var(--td), var(--t) 60%, #3d8f8b);
  border-radius: var(--r); padding: 26px 22px; margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.asp-profile-banner::before { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.04); top: -80px; right: -60px; }
.asp-pb-inner   { position: relative; z-index: 1; }
.asp-pb-top     { display: flex; align-items: flex-start; gap: 17px; flex-wrap: wrap; }
.asp-pav-wrap   { position: relative; cursor: pointer; flex-shrink: 0; }
.asp-pav        { width: 96px; height: 96px; border-radius: 50%; border: 4px solid rgba(255,255,255,.32); background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: #fff; overflow: hidden; }
.asp-pav img    { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.asp-pav-cam    { position: absolute; bottom: 2px; right: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--g); border: 2.5px solid #fff; display: flex; align-items: center; justify-content: center; font-size: .78rem; transition: transform .2s; }
.asp-pav-wrap:hover .asp-pav-cam { transform: scale(1.15); }
.asp-pb-info    { flex: 1; min-width: 180px; }
.asp-pb-name    { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.7rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.asp-pb-role-row { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 50px; padding: 5px 14px; font-size: .77rem; font-weight: 600; color: rgba(255,255,255,.9); margin-bottom: 9px; }
.asp-pb-contacts { display: flex; flex-wrap: wrap; gap: 12px; }
.asp-pb-contacts span { font-size: .78rem; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 5px; }
.asp-pb-actions { margin-top: 14px; }
.asp-btn-edit-pf { background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.28); border-radius: var(--rs); padding: 8px 16px; font-size: .79rem; font-weight: 600; color: #fff; transition: all .25s; display: inline-flex; align-items: center; gap: 6px; }
.asp-btn-edit-pf:hover { background: rgba(255,255,255,.24); }

/* Profile info cards */
.asp-pcard { background: #fff; border-radius: var(--r); padding: 20px; box-shadow: var(--sh); margin-bottom: 14px; }
.asp-pcard-title { font-size: .86rem; font-weight: 700; color: var(--tx); margin-bottom: 14px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--tpp); padding-bottom: 11px; }
.asp-pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.asp-pf-row { display: flex; flex-direction: column; gap: 3px; }
.asp-pf-row.asp-pf-full { grid-column: 1 / -1; }
.asp-pf-row label { font-size: .69rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--txm); }
.asp-pf-row .asp-val { font-size: .88rem; color: var(--tx); font-weight: 500; line-height: 1.5; }
.asp-pf-row .asp-val.asp-mt { color: var(--txm); font-style: italic; }

/* Edit inputs inside white cards */
.asp-pf-input    { width: 100%; padding: 10px 12px; border: 1.5px solid #d8e8e6; border-radius: var(--rs); font-size: .87rem; color: var(--tx); outline: none; transition: all .25s; }
.asp-pf-input:focus { border-color: var(--t); box-shadow: 0 0 0 3px rgba(48,110,107,.09); }
.asp-pf-select   { width: 100%; padding: 10px 12px; border: 1.5px solid #d8e8e6; border-radius: var(--rs); font-size: .87rem; color: var(--tx); outline: none; background: #fff; }
.asp-pf-textarea { width: 100%; padding: 10px 12px; border: 1.5px solid #d8e8e6; border-radius: var(--rs); font-size: .87rem; color: var(--tx); outline: none; resize: none; min-height: 86px; }
.asp-pf-textarea:focus, .asp-pf-select:focus { border-color: var(--t); }
.asp-edit-actions { display: flex; gap: 9px; margin-top: 6px; }
.asp-btn-save-pf   { padding: 11px 22px; background: linear-gradient(135deg, var(--t), var(--td)); color: #fff; border-radius: var(--rs); font-size: .87rem; font-weight: 700; transition: all .3s; box-shadow: 0 4px 14px rgba(48,110,107,.24); }
.asp-btn-save-pf:hover { box-shadow: 0 8px 22px rgba(48,110,107,.38); }
.asp-btn-cancel-pf { padding: 11px 18px; background: #eef4f3; color: var(--txl); border-radius: var(--rs); font-size: .87rem; font-weight: 600; }
.asp-btn-cancel-pf:hover { background: var(--tpp); }

/* ═══════════════════════════════════════════════
   SHARED CARD / TABLE
═══════════════════════════════════════════════ */
.asp-card { background: #fff; border-radius: var(--r); padding: 18px; box-shadow: var(--sh); }
.asp-card-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 9px; }
.asp-card-title { font-size: .89rem; font-weight: 700; color: var(--tx); }
.asp-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.asp-tbl-wrap table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.asp-tbl-wrap th { padding: 9px 11px; text-align: left; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--txm); border-bottom: 2px solid var(--tpp); white-space: nowrap; }
.asp-tbl-wrap td { padding: 10px 11px; border-bottom: 1px solid #eef4f3; color: var(--tx); vertical-align: middle; }
.asp-tbl-wrap tr:last-child td { border-bottom: none; }
.asp-tbl-wrap tr:hover td { background: #f8fbfb; }
.asp-td-bold { font-weight: 600; }
.asp-td-hrs  { font-weight: 700; color: var(--t); }
.asp-gps-cell { font-size: .71rem; color: var(--txm); }
.asp-gps-cell a { color: var(--t); font-weight: 600; text-decoration: underline; }

/* ═══════════════════════════════════════════════
   ADMIN STATS
═══════════════════════════════════════════════ */
.asp-astats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 16px; }
.asp-asc { background: #fff; border-radius: var(--rm); padding: 17px 15px; box-shadow: var(--sh); position: relative; overflow: hidden; }
.asp-asc::after { content: ''; position: absolute; right: -12px; bottom: -12px; width: 68px; height: 68px; border-radius: 50%; opacity: .07; }
.asp-asc-0::after { background: var(--t); }
.asp-asc-1::after { background: var(--g); }
.asp-asc-2::after { background: var(--green); }
.asp-asc-3::after { background: var(--purple); }
.asp-asc-icon { font-size: 1.3rem; margin-bottom: 8px; }
.asp-asc-val  { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.85rem; font-weight: 700; color: var(--tx); line-height: 1; }
.asp-asc-lbl  { font-size: .71rem; color: var(--txl); margin-top: 3px; }

/* ── Staff Grid ── */
.asp-staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px,1fr)); gap: 14px; margin-top: 4px; }
.asp-scard { background: #fff; border-radius: var(--r); padding: 20px 16px 16px; box-shadow: var(--sh); text-align: center; transition: all .3s cubic-bezier(.16,1,.3,1); border: 1.5px solid transparent; position: relative; overflow: hidden; cursor: pointer; }
.asp-scard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--t), var(--g)); }
.asp-scard:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--tpp); }
.asp-scard-av { width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 11px; background: var(--tp); border: 3px solid var(--tpp); display: flex; align-items: center; justify-content: center; font-size: 1.45rem; font-weight: 700; color: var(--t); overflow: hidden; }
.asp-scard-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.asp-scard-name   { font-weight: 700; font-size: .92rem; margin-bottom: 3px; color: var(--tx); }
.asp-scard-role   { font-size: .74rem; color: var(--txl); margin-bottom: 7px; }
.asp-scard-detail { font-size: .72rem; color: var(--txm); margin-bottom: 3px; }
.asp-scard-actions { display: flex; gap: 7px; justify-content: center; margin-top: 11px; padding-top: 11px; border-top: 1px solid #eef4f3; }

/* icon buttons */
.asp-bico { width: 30px; height: 30px; border-radius: var(--rs); display: flex; align-items: center; justify-content: center; font-size: .85rem; transition: all .22s; }
.asp-bico-view { background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.22); color: #7a5a10; }
.asp-bico-view:hover { background: rgba(201,168,76,.2); }
.asp-bico-edit { background: rgba(48,110,107,.1); border: 1px solid rgba(48,110,107,.2); color: var(--t); }
.asp-bico-edit:hover { background: rgba(48,110,107,.2); }
.asp-bico-del  { background: rgba(224,92,92,.1); border: 1px solid rgba(224,92,92,.2); color: var(--red); }
.asp-bico-del:hover  { background: rgba(224,92,92,.2); }

/* filter row */
.asp-filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 13px; align-items: flex-end; }
.asp-filter-row input, .asp-filter-row select { padding: 8px 12px; border: 1.5px solid #d8e8e6; border-radius: var(--rs); font-size: .81rem; color: var(--tx); background: #fff; outline: none; transition: border-color .22s; }
.asp-filter-row input:focus, .asp-filter-row select:focus { border-color: var(--t); }
.asp-filter-row input[type=search] { flex: 1; min-width: 140px; }

.asp-btn-add { background: linear-gradient(135deg, var(--t), var(--td)); color: #fff; padding: 9px 16px; border-radius: var(--rs); font-size: .8rem; font-weight: 700; display: flex; align-items: center; gap: 6px; transition: all .3s; box-shadow: 0 4px 14px rgba(48,110,107,.22); }
.asp-btn-add:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(48,110,107,.32); }
.asp-btn-toggle { background: #eef4f3; border: 1.5px solid var(--tpp); border-radius: var(--rs); padding: 8px 12px; font-size: .78rem; font-weight: 600; color: var(--txl); transition: all .22s; }
.asp-btn-toggle:hover { background: var(--tpp); color: var(--t); }

.asp-export-row { display: flex; gap: 8px; flex-wrap: wrap; }
.asp-btn-exp { padding: 9px 14px; border-radius: var(--rs); font-size: .78rem; font-weight: 700; display: flex; align-items: center; gap: 6px; transition: all .22s; }
.asp-btn-xl { background: rgba(46,168,108,.1); border: 1.5px solid rgba(46,168,108,.28); color: #1a7a4a; }
.asp-btn-xl:hover { background: rgba(46,168,108,.18); }
.asp-btn-pd { background: rgba(224,92,92,.1); border: 1.5px solid rgba(224,92,92,.28); color: #b52e2e; }
.asp-btn-pd:hover { background: rgba(224,92,92,.18); }

/* ═══════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════ */
.asp-modal-bg {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(4,14,12,.64); backdrop-filter: blur(7px);
  display: none; align-items: center; justify-content: center; padding: 14px;
}
.asp-modal-bg.asp-modal-open { display: flex; }
.asp-modal {
  background: #fff; border-radius: 22px; width: 100%; max-width: 525px;
  box-shadow: 0 40px 90px rgba(0,0,0,.28);
  overflow: hidden; display: flex; flex-direction: column;
  max-height: 90vh; animation: asp-mIn .33s cubic-bezier(.16,1,.3,1);
}
@keyframes asp-mIn { from { opacity:0; transform: translateY(15px) scale(.97); } to { opacity:1; transform: none; } }
.asp-modal-head { background: linear-gradient(135deg, var(--td), var(--t)); padding: 19px 21px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.asp-modal-head h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.22rem; font-weight: 700; color: #fff; }
.asp-modal-close { width: 29px; height: 29px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: .95rem; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.asp-modal-close:hover { background: rgba(255,255,255,.27); }
.asp-modal-body { padding: 20px 21px; overflow-y: auto; flex: 1; }
.asp-modal-foot { padding: 0 21px 20px; display: flex; gap: 8px; flex-shrink: 0; }
.asp-m-cancel { flex: 1; padding: 11px; border-radius: var(--rs); background: #eef4f3; color: var(--txl); font-size: .87rem; font-weight: 600; }
.asp-m-cancel:hover { background: var(--tpp); }
.asp-m-save   { flex: 2; padding: 11px; border-radius: var(--rs); background: linear-gradient(135deg, var(--t), var(--td)); color: #fff; font-size: .87rem; font-weight: 700; box-shadow: 0 4px 14px rgba(48,110,107,.24); }
.asp-m-save:hover { box-shadow: 0 8px 22px rgba(48,110,107,.36); }

/* Modal form */
.asp-mfg { display: flex; flex-direction: column; gap: 4px; margin-bottom: 11px; }
.asp-mfg label { font-size: .75rem; font-weight: 600; color: var(--tx); }
.asp-mfg input, .asp-mfg select, .asp-mfg textarea { padding: 10px 12px; border: 1.5px solid #d8e8e6; border-radius: var(--rs); font-size: .87rem; color: var(--tx); background: #fff; outline: none; width: 100%; transition: all .22s; }
.asp-mfg input:focus, .asp-mfg select:focus, .asp-mfg textarea:focus { border-color: var(--t); box-shadow: 0 0 0 3px rgba(48,110,107,.09); }
.asp-mfg textarea { resize: none; min-height: 70px; }
.asp-mfg-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.asp-m-av-row { display: flex; align-items: center; gap: 13px; background: var(--tp); border-radius: var(--rm); padding: 13px; margin-bottom: 15px; }
.asp-m-av { width: 62px; height: 62px; border-radius: 50%; border: 3px solid var(--tpp); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; color: var(--t); overflow: hidden; flex-shrink: 0; }
.asp-m-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.asp-m-av-btns p  { font-size: .79rem; font-weight: 600; color: var(--tx); margin-bottom: 3px; }
.asp-m-av-btns span { font-size: .7rem; color: var(--txm); }
.asp-btn-pick-av { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 6px 12px; background: var(--t); color: #fff; border-radius: var(--rs); font-size: .75rem; font-weight: 600; transition: background .22s; }
.asp-btn-pick-av:hover { background: var(--td); }

/* Staff profile modal */
.asp-spm-top { background: linear-gradient(135deg, var(--td), var(--t) 65%, #3d8f8b); padding: 24px 20px 18px; text-align: center; margin: -20px -21px 0; }
.asp-spm-av { width: 84px; height: 84px; border-radius: 50%; border: 4px solid rgba(255,255,255,.32); background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700; color: #fff; margin: 0 auto 11px; overflow: hidden; }
.asp-spm-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.asp-spm-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.35rem; font-weight: 700; color: #fff; }
.asp-spm-role { font-size: .76rem; color: rgba(255,255,255,.66); margin-top: 4px; }
.asp-spm-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; padding: 15px 0; }
.asp-spm-stat { background: var(--tp); border-radius: var(--rm); padding: 11px; text-align: center; }
.asp-spm-sv { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.45rem; font-weight: 700; color: var(--t); }
.asp-spm-sl { font-size: .67rem; color: var(--txm); margin-top: 2px; }
.asp-spm-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid #eef4f3; }
.asp-spm-row:last-child { border-bottom: none; }
.asp-spm-k { font-size: .71rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--txm); }
.asp-spm-v { font-size: .85rem; color: var(--tx); font-weight: 500; text-align: right; max-width: 58%; }
.asp-spm-bio { margin: 10px 0 4px; padding: 11px 13px; background: var(--tp); border-radius: var(--rm); font-size: .82rem; color: var(--td); line-height: 1.65; font-style: italic; }

/* ═══════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════ */
.asp-toast {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--tx); color: #fff;
  padding: 11px 22px; border-radius: 50px;
  font-size: .82rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  z-index: 999999; transition: transform .4s cubic-bezier(.16,1,.3,1);
  white-space: nowrap; pointer-events: none;
}
.asp-toast.asp-toast-show  { transform: translateX(-50%) translateY(0); }
.asp-toast.asp-t-success   { background: var(--green); }
.asp-toast.asp-t-error     { background: var(--red); }
.asp-toast.asp-t-info      { background: var(--t); }

/* GPS status bar */
.asp-gps-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 99998;
  background: linear-gradient(135deg, var(--td), var(--t));
  color: #fff; padding: 10px 20px;
  display: flex; align-items: center; gap: 10px;
  font-size: .83rem; font-weight: 600;
  box-shadow: 0 -2px 12px rgba(0,0,0,.15);
}
.asp-gps-spin { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: asp-sp .7s linear infinite; flex-shrink: 0; }
@keyframes asp-sp { to { transform: rotate(360deg); } }

/* Empty state */
.asp-empty { text-align: center; padding: 34px 14px; color: var(--txm); }
.asp-empty-icon { font-size: 2.3rem; margin-bottom: 9px; }
.asp-empty p { font-size: .82rem; line-height: 1.6; }

/* Loading skeleton */
.asp-loading { display: flex; align-items: center; justify-content: center; padding: 40px; color: var(--txm); gap: 10px; font-size: .86rem; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 700px) {
  .asp-astats   { grid-template-columns: 1fr 1fr; }
  .asp-auth-card { padding: 24px 18px; }
  .asp-main     { padding: 12px; }
  .asp-pf-grid  { grid-template-columns: 1fr; }
  .asp-mfg-2, .asp-fg-2 { grid-template-columns: 1fr; }
  .asp-tbl-wrap th, .asp-tbl-wrap td { padding: 8px 9px; }
  .asp-staff-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .asp-astats    { grid-template-columns: 1fr 1fr; }
  .asp-mini-stats { grid-template-columns: 1fr 1fr 1fr; }
  .asp-nav-info  { display: none; }
  .asp-tabnav, .asp-staff-tabnav { padding: 0 8px; }
  .asp-tab, .asp-stab { padding: 11px 10px; font-size: .75rem; }
  .asp-staff-grid { grid-template-columns: 1fr; }
  .asp-pb-top { flex-direction: column; align-items: flex-start; }
}