/* css/pages.css */

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   PAGES STRUCTURE
━━━━━━━━━━━━━━━━━━━━━━━━ */
.pg { display: none; padding: 28px; animation: pgIn .3s ease }
.pg.ACT { display: block }
@keyframes pgIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }
.pg-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 28px }
.pg-title { font-size: 22px; font-weight: 900; color: var(--white); letter-spacing: -.4px }
.pg-sub { font-size: 13px; color: var(--z400); margin-top: 4px; font-weight: 400 }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   STAT CARDS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 24px }
.sc {
  border-radius: 16px; padding: 20px; position: relative; overflow: hidden; cursor: pointer;
  transition: transform .22s, box-shadow .22s; border: 1px solid transparent;
}
.sc:hover { transform: translateY(-3px) }
.sc-amber { background: linear-gradient(135deg,#1C1400 0%,#2A1E00 100%); border-color: rgba(245,158,11,.15); box-shadow: 0 0 0 1px rgba(245,158,11,.05),inset 0 1px 0 rgba(245,158,11,.08) }
.sc-amber:hover { box-shadow: 0 12px 32px rgba(245,158,11,.15) }
.sc-green { background: linear-gradient(135deg,#001A10 0%,#002516 100%); border-color: rgba(16,185,129,.15); box-shadow: 0 0 0 1px rgba(16,185,129,.05),inset 0 1px 0 rgba(16,185,129,.08) }
.sc-green:hover { box-shadow: 0 12px 32px rgba(16,185,129,.12) }
.sc-blue { background: linear-gradient(135deg,#000F1C 0%,#001529 100%); border-color: rgba(96,165,250,.15); box-shadow: 0 0 0 1px rgba(96,165,250,.05),inset 0 1px 0 rgba(96,165,250,.08) }
.sc-blue:hover { box-shadow: 0 12px 32px rgba(96,165,250,.12) }
.sc-purple { background: linear-gradient(135deg,#100A1C 0%,#180F2A 100%); border-color: rgba(167,139,250,.15); box-shadow: 0 0 0 1px rgba(167,139,250,.05),inset 0 1px 0 rgba(167,139,250,.08) }
.sc-purple:hover { box-shadow: 0 12px 32px rgba(167,139,250,.12) }
.sc-shine { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent) }
.sc-ico-wrap { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; position: relative; z-index: 1; }
.sc-amber .sc-ico-wrap { background: var(--gold-bg) }
.sc-green .sc-ico-wrap { background: var(--g-bg) }
.sc-blue .sc-ico-wrap { background: var(--b-bg) }
.sc-purple .sc-ico-wrap { background: var(--v-bg) }
.sc-val { font-size: 32px; font-weight: 900; letter-spacing: -1.5px; line-height: 1; position: relative; z-index: 1; margin-bottom: 6px }
.sc-amber .sc-val { color: var(--gold-l) }
.sc-green .sc-val { color: var(--g-t) }
.sc-blue .sc-val { color: var(--b) }
.sc-purple .sc-val { color: var(--v) }
.sc-label { font-size: 12px; font-weight: 600; color: var(--z500,var(--z600)); position: relative; z-index: 1 }
.sc-amber .sc-label { color: rgba(245,158,11,.6) }
.sc-green .sc-label { color: rgba(52,211,153,.6) }
.sc-blue .sc-label { color: rgba(96,165,250,.6) }
.sc-purple .sc-label { color: rgba(167,139,250,.6) }
.sc-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; margin-top: 10px; position: relative; z-index: 1 }
.sc-amber .sc-badge { background: var(--gold-bg); color: var(--gold) }
.sc-green .sc-badge { background: var(--g-bg); color: var(--g-t) }
.sc-blue .sc-badge { background: var(--b-bg); color: var(--b) }
.sc-purple .sc-badge { background: var(--v-bg); color: var(--v) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   PANEL CARDS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.panel { background: var(--z900); border: 1px solid var(--z800); border-radius: 16px; overflow: hidden }
.panel-hd { padding: 14px 18px; border-bottom: 1px solid var(--z800); display: flex; align-items: center; justify-content: space-between }
.panel-ht { font-size: 13.5px; font-weight: 800; color: var(--white); letter-spacing: -.2px }
.panel-ha { font-size: 12px; font-weight: 700; color: var(--z600); cursor: pointer; padding: 4px 10px; border-radius: 20px; transition: all .15s }
.panel-ha:hover { background: var(--z800); color: var(--z300) }
.panel-bd { padding: 18px }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px }
.span2 { grid-column: span 2 }
.panel-empty { padding: 48px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px }
.pe-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--z800); display: flex; align-items: center; justify-content: center }
.pe-t { font-size: 13.5px; font-weight: 700; color: var(--z400) }
.pe-s { font-size: 12px; color: var(--z600) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   TASK DASHBOARD
━━━━━━━━━━━━━━━━━━━━━━━━ */
.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 1.25rem; margin-top: 2rem; }
.section-header h2 { font-size: 13px; font-weight: 500; color: var(--text3); text-transform: uppercase; letter-spacing: 0.1em; }
.section-header .line { flex: 1; height: 1px; background: var(--border); }
.section-header .count-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface2); color: var(--text2); }
.legend-bar { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text3); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.pending-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.task-card { background: var(--surface); border-radius: 16px; border: 1px solid var(--border); overflow: hidden; position: relative; cursor: pointer; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.task-card:hover { transform: translateY(-2px); }
.task-card::before { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%; z-index: 1; }

/* Overdue Task Styling */
.card-overdue { border-color: rgba(239,68,68,0.3); background: linear-gradient(135deg, var(--surface) 60%, rgba(239,68,68,0.05)); }
.card-overdue::before { background: var(--r-d); }
.card-overdue:hover { border-color: var(--r-d); box-shadow: 0 8px 32px rgba(239,68,68,0.08), 0 0 0 1px rgba(239,68,68,0.2); }
.card-overdue .pulse-ring { position: absolute; top: 16px; left: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--r-d); box-shadow: 0 0 0 0 var(--r-d); animation: pulse-overdue 2s infinite; }
@keyframes pulse-overdue { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); } 70% { box-shadow: 0 0 0 12px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }

/* Urgent Task Styling */
.card-urgent { border-color: var(--urgent-mid); background: linear-gradient(135deg, var(--surface) 60%, var(--urgent-glow)); }
.card-urgent::before { background: var(--urgent); }
.card-urgent:hover { border-color: var(--urgent); box-shadow: 0 8px 32px var(--urgent-glow), 0 0 0 1px var(--urgent-mid); }
.card-urgent .pulse-ring { position: absolute; top: 16px; left: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--urgent); box-shadow: 0 0 0 0 var(--urgent); animation: pulse-urgent 2s infinite; }
@keyframes pulse-urgent { 0% { box-shadow: 0 0 0 0 rgba(255,71,87,0.5); } 70% { box-shadow: 0 0 0 12px rgba(255,71,87,0); } 100% { box-shadow: 0 0 0 0 rgba(255,71,87,0); } }

/* Normal Task Styling */
.card-normal { border-color: var(--normal-mid); background: linear-gradient(135deg, var(--surface) 60%, var(--normal-glow)); }
.card-normal::before { background: var(--normal); }
.card-normal:hover { border-color: var(--normal); box-shadow: 0 8px 32px var(--normal-glow), 0 0 0 1px var(--normal-mid); }

/* Card Internals */
.card-inner { padding: 1.25rem 1.25rem 1.25rem 1.5rem; position: relative; }
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; width: 100%; }
.card-kind { display: flex; align-items: center; gap: 10px; }
.kind-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }
.kind-icon.urgent { background: var(--urgent-light); }
.kind-icon.normal { background: var(--normal-light); }
.kind-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.kind-label.urgent { color: var(--urgent); }
.kind-label.normal { color: var(--normal); }
.card-badge { font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 20px; border: 1px solid; white-space: nowrap; }
.badge-waiting { background: var(--waiting-light); color: var(--waiting); border-color: rgba(240,165,0,0.3); }
.badge-active { background: var(--normal-light); color: var(--normal); border-color: rgba(0,201,167,0.3); }
.badge-done { background: var(--border); color: var(--text3); border-color: var(--border2); }
.badge-rejected { background: var(--urgent-light); color: var(--urgent); border-color: rgba(255,71,87,0.3); }
.card-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 1.2rem; line-height: 1.4; }
.done-card .card-title { text-decoration: line-through; color: var(--text3); }
.card-fields { display: flex; flex-direction: column; gap: 0; }
.field-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.field-row:last-child { border-bottom: none; padding-bottom: 0; }
.field-key { color: var(--text3); font-weight: 600; }
.field-val { color: var(--text2); font-weight: 700; }
.card-footer { display: flex; align-items: center; gap: 10px; padding: 1rem 1.25rem; border-top: 1px solid var(--border); background: var(--bg2); }
.task-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.task-avatar.urgent { background: var(--urgent-light); color: var(--urgent); border: 1px solid rgba(255,71,87,0.3); }
.task-avatar.overdue { background: var(--r-bg); color: var(--r-d); border: 1px solid rgba(239,68,68,0.3); }
.task-avatar.normal { background: var(--normal-light); color: var(--normal); border: 1px solid rgba(0,201,167,0.3); }
.avatar-name { font-size: 12.5px; font-weight: 700; color: var(--text2); }
.footer-meta { margin-right: auto; font-size: 11px; font-weight: 600; color: var(--text3); }

/* Pending Cards */
.pending-card { position: relative; border-radius: 16px; border: 1px dashed var(--pending-border); background: linear-gradient(145deg, var(--bg2) 0%, var(--bg3) 100%); overflow: hidden; cursor: pointer; transition: transform 0.2s, border-color 0.2s; }
.pending-card:hover { transform: translateY(-2px); border-color: var(--pending); box-shadow: 0 6px 28px var(--pending-glow); }
.pending-card::after { content: ''; position: absolute; top: -60%; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, transparent, rgba(167,139,250,0.04), transparent); animation: scan 3s linear infinite; pointer-events: none; }
@keyframes scan { 0% { top: -60%; } 100% { top: 120%; } }
.pending-card-top { padding: 1.1rem 1.25rem 0.85rem; display: flex; align-items: center; justify-content: space-between; }
.pending-tag { display: flex; align-items: center; gap: 8px; }
.pending-icon-wrap { width: 30px; height: 30px; border-radius: 8px; background: var(--pending-light); border: 1px solid var(--pending-border); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.pending-tag-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; color: var(--pending); text-transform: uppercase; }
.badge-pending { font-size: 10.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--pending-light); color: var(--pending); border: 1px solid var(--pending-border); animation: blink-border 2.5s ease-in-out infinite; }
@keyframes blink-border { 0%, 100% { border-color: var(--pending-border); } 50% { border-color: var(--pending); } }
.pending-card-body { padding: 0 1.25rem 1rem; }
.pending-title { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 0.85rem; line-height: 1.4; }
.pending-fields { display: flex; flex-direction: column; }
.pending-field { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 12px; }
.pending-field:last-child { border-bottom: none; }
.pending-field .fk { color: var(--text3); font-weight: 600; }
.pending-field .fv { color: var(--text2); font-weight: 700; }
.pending-card-footer { padding: 0.85rem 1.25rem; border-top: 1px solid rgba(255,255,255,0.04); background: rgba(0,0,0,0.2); display: flex; align-items: center; gap: 10px; }
.avatar-pending { width: 24px; height: 24px; border-radius: 50%; background: var(--pending-light); color: var(--pending); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 1px solid var(--pending-border); flex-shrink: 0; }
.pending-footer-name { font-size: 12px; color: var(--text2); font-weight: 600; }
.pending-footer-wait { margin-right: auto; font-size: 11px; color: var(--pending); display: flex; align-items: center; gap: 6px; font-weight: 600; }
.wait-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pending); animation: pulse-pend 1.6s ease-in-out infinite; }
@keyframes pulse-pend { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.pending-timer { display: flex; align-items: center; gap: 6px; margin: 0.5rem 1.1rem 0.85rem; background: rgba(167,139,250,0.06); border: 1px solid var(--pending-border); border-radius: 8px; padding: 6px 10px; font-size: 11.5px; color: var(--pending); }
.pending-timer span { color: var(--text2); }

/* Task Details View (In Modal Wrapper) */
.detail-wrapper { background: var(--surface); border-radius: 20px; border: 1px solid var(--border); overflow: hidden; animation: fadeUp 0.45s 0.15s ease both; width: 100%; }
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.detail-top { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; background: var(--bg2); border-bottom: 1px solid var(--border); }
.detail-top-right { display: flex; align-items: center; gap: 12px; }
.detail-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--urgent-light); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.detail-title { font-size: 16px; font-weight: 600; color: var(--text); }
.detail-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }
.detail-cells { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border); }
.detail-cell { padding: 1.1rem 1.5rem; border-left: 1px solid var(--border); position: relative; }
.detail-cell:last-child { border-left: none; }
.detail-cell-label { font-size: 10.5px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px; }
.detail-cell-val { font-size: 13.5px; font-weight: 600; color: var(--text); }
.detail-cell-val.mono { font-size: 12px; letter-spacing: 0.03em; color: var(--text2); direction: ltr; display: inline-block; }
.duration-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--waiting-light); color: var(--waiting); border: 1px solid rgba(240,165,0,0.25); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; }
.detail-bottom { display: grid; grid-template-columns: 1fr 300px; }
.detail-note-col { padding: 1.25rem 1.5rem; border-left: 1px solid var(--border); }
.detail-note-col label { font-size: 10.5px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.07em; display: block; margin-bottom: 8px; }
.note-box { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--text2); min-height: 52px; }
.reject-label { font-size: 10.5px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.07em; display: block; margin-top: 12px; margin-bottom: 6px; }
.reject-box { background: var(--urgent-light); border: 1px dashed rgba(255,71,87,0.3); border-radius: 10px; padding: 8px 12px; font-size: 12px; color: var(--urgent); min-height: 38px; }
.detail-assignee-col { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 16px; }
.assignee-block label { font-size: 10.5px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.07em; display: block; margin-bottom: 8px; }
.assignee-row { display: flex; align-items: center; gap: 10px; }
.avatar-lg { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.avatar-lg.urgent { background: var(--urgent-light); color: var(--urgent); border: 1px solid rgba(255,71,87,0.3); }
.avatar-lg.normal { background: var(--normal-light); color: var(--normal); border: 1px solid rgba(0,201,167,0.3); }
.assignee-name { font-size: 14px; font-weight: 600; color: var(--text); }
.assignee-role { font-size: 11px; color: var(--text3); margin-top: 1px; }
.detail-actions { display: flex; align-items: center; gap: 8px; padding: 1rem 1.5rem; background: var(--bg2); border-top: 1px solid var(--border); flex-wrap: wrap; }
.btn-approve { background: var(--normal-light); color: var(--normal); border-color: rgba(0,201,167,0.35); } .btn-approve:hover { background: rgba(0,201,167,0.2); }
.btn-redo { background: var(--waiting-light); color: var(--waiting); border-color: rgba(240,165,0,0.35); } .btn-redo:hover { background: rgba(240,165,0,0.2); }
.btn-delete { background: var(--urgent-light); color: var(--urgent); border-color: rgba(255,71,87,0.35); } .btn-delete:hover { background: rgba(255,71,87,0.2); }
.btn-close { background: var(--surface2); color: var(--text2); border-color: var(--border2); margin-right: auto; } .btn-close:hover { background: var(--surface); color: var(--text); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   ACHIEVEMENT CARDS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.achievement-card { background: var(--z900); border: 1px solid var(--z800); border-radius: 14px; overflow: hidden; margin-bottom: 14px; transition: all .22s cubic-bezier(.16,1,.3,1); }
.achievement-card:hover { border-color: var(--z700); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.ach-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 14px; cursor: pointer; }
.ach-left { flex: 1; }
.ach-title { font-family: 'Tajawal', sans-serif; font-size: 16px; font-weight: 800; margin-bottom: 5px; color: var(--white); }
.ach-desc { font-size: 13px; color: var(--z400); line-height: 1.55; }
.ach-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; margin-right: 16px; }
.ach-items { padding: 0 20px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--z800); padding-top: 14px; padding-bottom: 14px; cursor: pointer; }
.ach-item { display: flex; align-items: center; gap: 10px; background: var(--z800); border-radius: 8px; padding: 10px 14px; }
.ach-item-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.ach-item-icon.green { background: var(--g-bg); color: var(--g-t); }
.ach-item-icon.purple { background: var(--v-bg); color: var(--v); }
.ach-item-icon.blue { background: var(--b-bg); color: var(--b); }
.ach-item-icon.amber { background: var(--gold-bg); color: var(--gold); }
.ach-item-text { flex: 1; }
.ach-item-name { font-size: 13px; font-weight: 500; color: var(--white); }
.ach-item-time { font-size: 11px; color: var(--z400); margin-top: 1px; }
.ach-item-chip { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 5px; flex-shrink: 0; letter-spacing: .2px; }
.chip-green { background: var(--g-bg); color: var(--g-t); border: 1px solid rgba(16,185,129,.25); }
.chip-purple { background: var(--v-bg); color: var(--v); border: 1px solid rgba(167,139,250,.25); }
.chip-amber { background: var(--gold-bg); color: var(--gold); border: 1px solid rgba(245,158,11,.25); }
.chip-blue { background: var(--b-bg); color: var(--b); border: 1px solid rgba(96,165,250,.25); }
.chip-red { background: var(--r-bg); color: var(--r); border: 1px solid rgba(248,113,113,.25); }
.ach-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid var(--z800); background: rgba(255,255,255,.01); flex-wrap: wrap; gap: 7px; }
.user-row { display: flex; align-items: center; gap: 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: var(--white); flex-shrink: 0; }
.user-name { font-size: 13px; font-weight: 600; color: var(--white); }
.user-date { font-size: 11px; color: var(--z400); }
.footer-actions { display: flex; gap: 8px; align-items: center; }
.abtn { height: 26px; padding: 0 9px; border-radius: 7px; font-family: 'Tajawal', sans-serif; font-size: 11px; font-weight: 800; cursor: pointer; border: 1px solid; transition: all .15s }
.abtn.apv { background: var(--g-bg); color: var(--g-t); border-color: rgba(16,185,129,.2) } .abtn.apv:hover { background: rgba(16,185,129,.2) }
.abtn.rjt { background: var(--r-bg); color: var(--r); border-color: rgba(248,113,113,.2) } .abtn.rjt:hover { background: rgba(248,113,113,.2) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   ARCHIVE & INVOICES
━━━━━━━━━━━━━━━━━━━━━━━━ */
#pg-arc .page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; }
#pg-arc .page-title { font-size: 22px; font-weight: 900; color: var(--white); margin-bottom: 4px; letter-spacing: -.4px; }
#pg-arc .page-sub { font-size: 13px; color: var(--z400); }
#pg-arc .btn-new { background: var(--gold); color: var(--z950); border: none; border-radius: 10px; padding: 10px 20px; font-size: 13px; font-family: 'Tajawal', sans-serif; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 7px; box-shadow: 0 2px 8px rgba(245,158,11,.3); transition: all .15s; }
#pg-arc .btn-new:hover { background: var(--gold-l); box-shadow: 0 4px 14px rgba(245,158,11,.4); transform: translateY(-1px); }
#pg-arc .btn-new-icon { font-size: 18px; line-height: 1; }
#pg-arc .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
#pg-arc .stat-card { background: var(--z900); border: 1px solid var(--z800); border-radius: 14px; padding: 18px 20px; display: flex; align-items: center; gap: 14px; transition: box-shadow .2s; }
#pg-arc .stat-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.2); }
#pg-arc .stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
#pg-arc .stat-icon.amber { background: var(--gold-bg); color: var(--gold); }
#pg-arc .stat-icon.blue { background: var(--b-bg); color: var(--b); }
#pg-arc .stat-icon.green { background: var(--g-bg); color: var(--g-t); }
#pg-arc .stat-label { font-size: 11px; color: var(--z400); margin-bottom: 2px; font-weight: 600; text-transform: uppercase; }
#pg-arc .stat-value { font-size: 19px; font-weight: 800; color: var(--white); }
#pg-arc .stat-value.amber { color: var(--gold); }
#pg-arc .filters-bar { background: var(--z900); border: 1px solid var(--z800); border-radius: 14px; padding: 16px 20px; margin-bottom: 22px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#pg-arc .search-wrap { flex: 2; min-width: 180px; position: relative; }
#pg-arc .search-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--z600); pointer-events: none; }
#pg-arc .search-icon svg { width: 15px; height: 15px; display: block; }
#pg-arc .filters-bar input[type=text] { width: 100%; padding: 9px 36px 9px 12px; border: 1px solid var(--z700); border-radius: 8px; background: var(--z800); color: var(--white); font-family: 'Tajawal', sans-serif; font-size: 13px; outline: none; transition: border-color .15s; }
#pg-arc .filters-bar input[type=text]:focus { border-color: var(--gold); }
#pg-arc .filters-bar input[type=text]::placeholder { color: var(--z500); }
#pg-arc .filters-bar select, #pg-arc .filters-bar input[type=month] { flex: 1; min-width: 120px; padding: 9px 12px; border: 1px solid var(--z700); border-radius: 8px; background: var(--z800); color: var(--white); font-family: 'Tajawal', sans-serif; font-size: 13px; outline: none; transition: border-color .15s; cursor: pointer; }
#pg-arc .filters-bar select:focus, #pg-arc .filters-bar input[type=month]:focus { border-color: var(--gold); }
#pg-arc .btn-clear { padding: 9px 16px; border: 1px solid var(--z700); border-radius: 8px; background: transparent; color: var(--z400); font-family: 'Tajawal', sans-serif; font-size: 12px; cursor: pointer; transition: all .15s; white-space: nowrap; }
#pg-arc .btn-clear:hover { background: var(--z800); color: var(--white); }
#pg-arc .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#pg-arc .empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--z400); font-size: 14px; }
#pg-arc .empty-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.6; filter: grayscale(1); }
#pg-arc .card { background: var(--z900); border: 1px solid var(--z800); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, box-shadow .2s; animation: fadeUp .3s ease both; }
#pg-arc .card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.3); transform: translateY(-2px); border-color: var(--z700); }
#pg-arc .card-accent { height: 3px; }
#pg-arc .card-accent.expense { background: linear-gradient(90deg, var(--gold), #E8A030); }
#pg-arc .card-accent.purchase { background: linear-gradient(90deg, var(--b), #4A90D9); }
#pg-arc .card-header { padding: 16px 18px 12px; }
#pg-arc .card-header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
#pg-arc .badge { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: .02em; }
#pg-arc .badge.expense { background: var(--gold-bg); color: var(--gold); border: 1px solid rgba(245,158,11,.2); }
#pg-arc .badge.purchase { background: var(--b-bg); color: var(--b); border: 1px solid rgba(96,165,250,.2); }
#pg-arc .card-num { font-size: 11px; color: var(--z500); font-weight: 600; }
#pg-arc .card-title { font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 2px; }
#pg-arc .card-supplier { font-size: 12px; color: var(--z400); }
#pg-arc .card-body { padding: 14px 18px; flex: 1; display: flex; flex-direction: column; gap: 0; }
#pg-arc .info-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--z800); }
#pg-arc .info-row:last-child { border-bottom: none; }
#pg-arc .info-label { font-size: 11px; color: var(--z400); font-weight: 600; }
#pg-arc .info-val { font-size: 12px; color: var(--white); font-weight: 600; }
#pg-arc .card-amount { margin: 10px 18px 0; background: var(--z800); border: 1px solid var(--z700); border-radius: 10px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; }
#pg-arc .amount-label { font-size: 11px; color: var(--z300); font-weight: 600; }
#pg-arc .amount-val { font-size: 17px; font-weight: 800; color: var(--gold); }
#pg-arc .card-footer { padding: 12px 18px; display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--z800); margin-top: 14px; background: rgba(0,0,0,.1); }
#pg-arc .btn-details { flex: 1; padding: 8px 0; text-align: center; border: 1px solid var(--z700); border-radius: 8px; background: var(--z800); color: var(--white); font-family: 'Tajawal', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; }
#pg-arc .btn-details:hover { background: var(--z700); border-color: var(--gold); color: var(--gold); }
#pg-arc .btn-attach { padding: 8px 14px; border: 1px solid var(--z700); border-radius: 8px; background: var(--z800); color: var(--z300); cursor: pointer; transition: background .15s; display: flex; align-items: center; justify-content: center; }
#pg-arc .btn-attach:hover { background: var(--z700); }
#pg-arc .btn-delete { padding: 8px 12px; border: 1px solid rgba(248,113,113,.2); border-radius: 8px; background: var(--r-bg); color: var(--r); cursor: pointer; transition: background .15s; display: flex; align-items: center; justify-content: center; }
#pg-arc .btn-delete:hover { background: rgba(248,113,113,.2); }
#pg-arc .footer-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--z800); }
#pg-arc .footer-info { font-size: 12px; color: var(--z400); }
#pg-arc .pagination { display: flex; gap: 6px; }
#pg-arc .pg-btn { width: 32px; height: 32px; border: 1px solid var(--z700); border-radius: 8px; background: var(--z800); color: var(--z300); font-family: 'Tajawal', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
#pg-arc .pg-btn:hover { border-color: var(--gold); color: var(--gold); }
#pg-arc .pg-btn.active { background: var(--gold); border-color: var(--gold); color: var(--z950); }

/* Modal specific to Archive (MA) */
#MA .modal { background: var(--z900); border-radius: 20px; width: 92%; max-width: 480px; box-shadow: 0 40px 80px rgba(0,0,0,.6); border: 1px solid var(--z700); overflow: hidden; animation: slideUp .25s cubic-bezier(.16,1,.3,1); display: flex; flex-direction: column; max-height: 90vh; }
#MA .modal-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--z800); display: flex; justify-content: space-between; align-items: flex-start; }
#MA .modal-header-title { font-size: 16px; font-weight: 800; color: var(--white); letter-spacing: -.2px; }
#MA .modal-header-sub { font-size: 12px; color: var(--z400); margin-top: 2px; }
#MA .modal-close { background: var(--z800); border: 1px solid var(--z700); border-radius: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; color: var(--z300); transition: all .15s; }
#MA .modal-close:hover { background: var(--r-bg); border-color: rgba(248,113,113,.2); color: var(--r); }
#MA .modal-body { padding: 20px 24px; overflow-y: auto; }
#MA .modal-badge-row { display: flex; gap: 8px; margin-bottom: 20px; }
#MA .modal-amount-box { background: var(--gold-bg); border: 1px solid rgba(245,158,11,.2); border-radius: 12px; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
#MA .modal-amount-lbl { font-size: 12px; color: var(--gold); font-weight: 700; }
#MA .modal-amount-val { font-size: 22px; font-weight: 800; color: var(--gold); }
#MA .modal-section { margin-bottom: 20px; }
#MA .modal-section-label { font-size: 10.5px; font-weight: 700; color: var(--z400); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
#MA .modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--z700); border-radius: 12px; overflow: hidden; border: 1px solid var(--z700); }
#MA .modal-cell { background: var(--z800); padding: 12px 14px; }
#MA .modal-cell-label { font-size: 10px; color: var(--z400); margin-bottom: 3px; font-weight: 600; }
#MA .modal-cell-val { font-size: 13px; font-weight: 700; color: var(--white); }
#MA .modal-notes { background: var(--z800); border: 1px solid var(--z700); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--z300); line-height: 1.6; }
#MA .modal-footer { padding: 16px 24px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--z800); background: var(--z900); }
#MA .btn-modal-attach { padding: 9px 18px; border: 1px solid var(--z700); border-radius: 8px; background: var(--z800); color: var(--white); font-family: 'Tajawal', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background .15s; }
#MA .btn-modal-attach:hover { background: var(--z700); }
#MA .btn-modal-close { padding: 9px 22px; border: none; border-radius: 8px; background: var(--gold); color: var(--z950); font-family: 'Tajawal', sans-serif; font-size: 13px; font-weight: 800; cursor: pointer; transition: background .15s; }
#MA .btn-modal-close:hover { background: var(--gold-l); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   TEAM
━━━━━━━━━━━━━━━━━━━━━━━━ */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 14px }
.tm-card { background: var(--z900); border: 1px solid var(--z800); border-radius: 14px; padding: 22px; text-align: center; transition: all .22s }
.tm-card:hover { border-color: var(--z700); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.4) }
.tm-av { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; color: var(--white); box-shadow: 0 4px 14px rgba(0,0,0,.4) }
.tm-name { font-size: 14px; font-weight: 800; color: var(--white) }
.tm-un { font-size: 11.5px; color: var(--z400); margin-top: 3px }
.tm-badge { display: inline-block; font-size: 9.5px; font-weight: 800; padding: 3px 9px; border-radius: 20px; margin-top: 7px; letter-spacing: .3px }
.tm-sup { background: var(--gold-bg); color: var(--gold) }
.tm-emp { background: var(--b-bg); color: var(--b) }
.tm-stats { display: flex; margin-top: 16px; border-top: 1px solid var(--z800); padding-top: 14px }
.tm-sv { font-size: 17px; font-weight: 900; color: var(--white) }
.tm-sl { font-size: 9.5px; color: var(--z600); margin-top: 2px; font-weight: 500 }
.tm-s { flex: 1; text-align: center } .tm-s + .tm-s { border-right: 1px solid var(--z800) }
.tm-del { margin-top: 12px; width: 100%; height: 32px; border-radius: 8px; background: var(--r-bg); color: var(--r); border: 1px solid rgba(248,113,113,.15); font-family: 'Tajawal', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s }
.tm-del:hover { background: rgba(248,113,113,.2) }
.tm-add { background: transparent; border: 1px dashed var(--z700); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all .22s; min-height: 200px; gap: 9px }
.tm-add:hover { background: var(--z900); border-color: var(--z600) }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   STATS KPI
━━━━━━━━━━━━━━━━━━━━━━━━ */
.kpi-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 22px }
.kpi { background: var(--z900); border: 1px solid var(--z800); border-radius: 14px; padding: 18px; position: relative; overflow: hidden }
.kpi::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent) }
.kpi-ico { width: 36px; height: 36px; border-radius: 9px; background: var(--gold-bg); display: flex; align-items: center; justify-content: center; margin-bottom: 14px }
.kpi-val { font-size: 30px; font-weight: 900; color: var(--gold-l); letter-spacing: -1px; line-height: 1 }
.kpi-lbl { font-size: 11.5px; color: var(--z400); margin-top: 5px; font-weight: 500 }
.kpi-trend { font-size: 11px; font-weight: 700; color: rgba(245,158,11,.5); margin-top: 6px }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   RATING BARS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.rb-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px }
.rb-lbl { font-size: 12px; color: var(--z400); width: 85px; text-align: right; flex-shrink: 0; font-weight: 600 }
.rb-track { flex: 1; height: 6px; background: var(--z800); border-radius: 4px; overflow: hidden }
.rb-fill { height: 100%; border-radius: 4px; background: var(--gold); transition: width .8s cubic-bezier(.16,1,.3,1) }
.rb-num { font-size: 12px; font-weight: 800; color: var(--z300); width: 20px; text-align: left; flex-shrink: 0 }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   SETTINGS
━━━━━━━━━━━━━━━━━━━━━━━━ */
.tags-wrap { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px }
.stag { display: flex; align-items: center; gap: 6px; background: var(--z800); border: 1px solid var(--z700); border-radius: 20px; padding: 5px 12px; font-size: 12.5px; color: var(--z300); font-weight: 600; transition: all .15s }
.stag:hover { border-color: var(--z600) }
.stag-x { cursor: pointer; color: var(--z600); display: flex; transition: color .13s; background: none; border: none; padding: 0 }
.stag-x:hover { color: var(--r) }
.acc-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 8px; background: var(--z800); border: 1px solid var(--z700); margin-bottom: 7px; transition: all .15s }
.acc-row:hover { border-color: var(--z600) }
.acc-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: var(--white); flex-shrink: 0 }
.acc-n { font-size: 13px; font-weight: 700; color: var(--white) }
.acc-r { font-size: 11px; color: var(--z500,var(--z600)) }
.acc-badge { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 20px; margin-right: auto }
.acc-sp { background: var(--gold-bg); color: var(--gold) }
.acc-em { background: var(--b-bg); color: var(--b) }

/* Form Row overrides specific to pages */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
#achRate, #manuR { font-size: 16px; font-weight: 800; color: var(--gold-l); text-align: center; border-color: rgba(245,158,11,.4); background: rgba(0,0,0,.15); }
#achRate:focus, #manuR:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-bg); background: var(--z900); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   EMPTY STATE
━━━━━━━━━━━━━━━━━━━━━━━━ */
.empty { padding: 56px 20px; text-align: center; color: var(--z400) }
.empty svg { width: 48px; height: 48px; stroke: var(--z600); fill: none; stroke-width: 1.5; margin: 0 auto 12px; display: block; opacity: 1; background: var(--z800); border-radius: 50%; padding: 12px }
.empty p { font-size: 14px; font-weight: 800; color: var(--z400); margin: 0 }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   SESSION BUILDER
━━━━━━━━━━━━━━━━━━━━━━━━ */
.ach-session { background: var(--z800); border-radius: 14px; padding: 14px; margin-bottom: 14px; border: 1px solid var(--z700) }
.ach-sess-hd { font-size: 12px; font-weight: 700; color: var(--z300); margin-bottom: 12px; display: flex; align-items: center; gap: 6px }
.ach-sess-hd span { background: var(--gold); color: var(--z950); border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900 }
.add-ach-entry { width: 100%; padding: 10px; border: 1px dashed var(--z600); border-radius: 8px; background: none; cursor: pointer; color: var(--z300); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all .15s; margin-top: 6px; font-family: 'Tajawal', sans-serif }
.add-ach-entry:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-bg) }
.entry-del { width: 24px; height: 24px; border-radius: 7px; border: 1px solid rgba(248,113,113,.2); background: var(--r-bg); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--r); margin-right: auto }
.entry-del svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.5 }
.dz { border: 1px dashed var(--z600); border-radius: 8px; padding: 16px; text-align: center; cursor: pointer; transition: all .2s; color: var(--z400); font-size: 12.5px; background: var(--z900) }
.dz:hover { border-color: var(--gold); background: var(--gold-bg); color: var(--gold) }
.dz svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; margin: 0 auto 5px; display: block }
.dur-live { background: var(--g-bg); border: 1px solid rgba(16,185,129,.2); border-radius: 7px; padding: 4px 9px; font-size: 11px; font-weight: 700; color: var(--g-t); display: none; align-items: center; gap: 3px; margin-bottom: 9px }
.dur-live svg { width: 11px; height: 11px; stroke: var(--g-t); fill: none; stroke-width: 2 }
.si { display: flex; gap: 4px; direction: ltr }
.si span { font-size: 24px; cursor: pointer; transition: transform .1s; color: var(--z700); line-height: 1; user-select: none }
.si span.on { color: var(--gold); transform: scale(1.12) }
.mi-item { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--z800) }
.mi-item:last-child { border-bottom: none }
.mi-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px }
.mi-chk { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--z700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: all .15s }
.mi-chk.done { background: var(--g); border-color: var(--g) }
.mi-info { flex: 1; min-width: 0 }
.mi-t { font-size: 13px; font-weight: 700; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mi-m { font-size: 11px; color: var(--z600); margin-top: 2px }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   ADMIN DATA TABLE
━━━━━━━━━━━━━━━━━━━━━━━━ */
.admin-table-wrapper { background: var(--z900); border: 1px solid var(--z800); border-radius: 14px; overflow-x: auto; margin-top: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.admin-table { width: 100%; border-collapse: collapse; text-align: right; font-family: 'Tajawal', sans-serif; }
.admin-table th { background: var(--z800); color: var(--z400); font-size: 12px; font-weight: 700; padding: 14px 16px; border-bottom: 2px solid var(--z700); white-space: nowrap; }
.admin-table td { padding: 14px 16px; border-bottom: 1px solid var(--z800); font-size: 13px; color: var(--white); vertical-align: middle; white-space: nowrap; }
.admin-table tbody tr { transition: background 0.2s; cursor: pointer; }
.admin-table tbody tr:hover { background: var(--z800); }
.admin-table tbody tr:last-child td { border-bottom: none; }
.tb-avatar-wrap { display: flex; align-items: center; gap: 10px; }
.tb-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; color: #fff; flex-shrink: 0; }
.tb-name-col { display: flex; flex-direction: column; gap: 2px; }
.tb-name { font-weight: 700; font-size: 13.5px; }
.tb-role { font-size: 11px; color: var(--z400); }
.btn-excel { background: #10B981; color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-family: 'Tajawal', sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; box-shadow: 0 2px 8px rgba(16,185,129,0.3); }
.btn-excel:hover { background: #059669; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,185,129,0.4); }
.btn-excel svg { width: 16px; height: 16px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   LIGHT MODE OVERRIDES FOR PAGES
━━━━━━━━━━━━━━━━━━━━━━━━ */
html[data-theme="light"] .sc-amber { background: linear-gradient(135deg,#FFFBEB,#FFF7E0); border-color: rgba(192,120,0,.2) }
html[data-theme="light"] .sc-amber .sc-val { color: #92400E }
html[data-theme="light"] .sc-amber .sc-label { color: rgba(146,64,14,.65) }
html[data-theme="light"] .sc-green { background: linear-gradient(135deg,#ECFDF5,#D1FAE5); border-color: rgba(5,150,105,.2) }
html[data-theme="light"] .sc-green .sc-val { color: #065F46 }
html[data-theme="light"] .sc-green .sc-label { color: rgba(6,95,70,.65) }
html[data-theme="light"] .sc-blue { background: linear-gradient(135deg,#EFF6FF,#DBEAFE); border-color: rgba(29,108,180,.2) }
html[data-theme="light"] .sc-blue .sc-val { color: #1E40AF }
html[data-theme="light"] .sc-blue .sc-label { color: rgba(30,64,175,.65) }
html[data-theme="light"] .sc-purple { background: linear-gradient(135deg,#F5F3FF,#EDE9FE); border-color: rgba(109,40,217,.2) }
html[data-theme="light"] .sc-purple .sc-val { color: #4C1D95 }
html[data-theme="light"] .sc-purple .sc-label { color: rgba(76,29,149,.65) }
html[data-theme="light"] .sc-amber .sc-shine, html[data-theme="light"] .sc-green .sc-shine,
html[data-theme="light"] .sc-blue .sc-shine, html[data-theme="light"] .sc-purple .sc-shine { background: linear-gradient(90deg,transparent,rgba(0,0,0,.04),transparent) }
html[data-theme="light"] .panel { background: #fff; border-color: #E2E5EF }
html[data-theme="light"] .panel-hd { border-color: #E2E5EF }
html[data-theme="light"] .panel-ht { color: #0A0E1A }
html[data-theme="light"] .panel-ha { color: #8A93AE }
html[data-theme="light"] .panel-ha:hover { background: #F4F5FA; color: #0A0E1A }
html[data-theme="light"] .panel-empty .pe-ico { background: #F4F5FA }
html[data-theme="light"] .panel-empty .pe-t { color: #6A738E }
html[data-theme="light"] .achievement-card { background: #fff; border-color: #E2E5EF }
html[data-theme="light"] .achievement-card:hover { border-color: #C8CCD8; box-shadow: 0 12px 32px rgba(0,0,0,.1) }
html[data-theme="light"] .ach-title { color: #0A0E1A }
html[data-theme="light"] .ach-desc { color: #6A738E }
html[data-theme="light"] .ach-items { border-color: #E2E5EF }
html[data-theme="light"] .ach-item { background: #F4F5FA }
html[data-theme="light"] .ach-item-name { color: #0A0E1A }
html[data-theme="light"] .ach-item-time { color: #8A93AE }
html[data-theme="light"] .ach-footer { background: rgba(0,0,0,.015); border-color: #E2E5EF }
html[data-theme="light"] .user-name { color: #0A0E1A }
html[data-theme="light"] .user-date { color: #8A93AE }
html[data-theme="light"] .tm-card { background: #fff; border-color: #E2E5EF }
html[data-theme="light"] .tm-card:hover { border-color: #C8CCD8; box-shadow: 0 12px 32px rgba(0,0,0,.1) }
html[data-theme="light"] .tm-name { color: #0A0E1A }
html[data-theme="light"] .tm-un { color: #8A93AE }
html[data-theme="light"] .tm-stats { border-color: #E2E5EF }
html[data-theme="light"] .tm-s { border-color: #E2E5EF }
html[data-theme="light"] .tm-sv { color: #0A0E1A }
html[data-theme="light"] .tm-sl { color: #8A93AE }
html[data-theme="light"] .tm-add { background: #F4F5FA; border-color: #DDE0EA }
html[data-theme="light"] .tm-add:hover { background: #fff; border-color: #0A0E1A }
html[data-theme="light"] .kpi { background: linear-gradient(135deg,#1E2740,#2D3E5C) }
html[data-theme="light"] .stag { background: #F4F5FA; border-color: #E2E5EF; color: #4A5268 }
html[data-theme="light"] .stag:hover { border-color: #C8CCD8 }
html[data-theme="light"] .acc-row { background: #F4F5FA; border-color: #E2E5EF }
html[data-theme="light"] .acc-row:hover { border-color: #C8CCD8 }
html[data-theme="light"] .acc-n { color: #0A0E1A }
html[data-theme="light"] .acc-r { color: #8A93AE }
html[data-theme="light"] #achRate, html[data-theme="light"] #manuR { color: var(--gold-d); border-color: rgba(192,120,0,.3); background: rgba(255,255,255,.6); }
html[data-theme="light"] #achRate:focus, html[data-theme="light"] #manuR:focus { border-color: var(--gold); background: var(--white); }
html[data-theme="light"] .mi-item { border-color: #E2E5EF }
html[data-theme="light"] .mi-chk { border-color: #DDE0EA }
html[data-theme="light"] .mi-t { color: #0A0E1A }
html[data-theme="light"] .mi-m { color: #8A93AE }
html[data-theme="light"] #pg-arc .page-title { color: #0A0E1A; }
html[data-theme="light"] #pg-arc .page-sub { color: #6A738E; }
html[data-theme="light"] #pg-arc .stat-card { background: #fff; border-color: #E2E5EF; }
html[data-theme="light"] #pg-arc .stat-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); }
html[data-theme="light"] #pg-arc .stat-label { color: #8A93AE; }
html[data-theme="light"] #pg-arc .stat-value { color: #0A0E1A; }
html[data-theme="light"] #pg-arc .filters-bar { background: #fff; border-color: #E2E5EF; }
html[data-theme="light"] #pg-arc .filters-bar input[type=text], html[data-theme="light"] #pg-arc .filters-bar select, html[data-theme="light"] #pg-arc .filters-bar input[type=month] { background: #F4F5FA; border-color: #E2E5EF; color: #0A0E1A; }
html[data-theme="light"] #pg-arc .btn-clear { border-color: #DDE0EA; color: #4A5268; }
html[data-theme="light"] #pg-arc .btn-clear:hover { background: #F4F5FA; color: #0A0E1A; }
html[data-theme="light"] #pg-arc .card { background: #fff; border-color: #E2E5EF; }
html[data-theme="light"] #pg-arc .card:hover { border-color: #C8CCD8; box-shadow: 0 12px 32px rgba(0,0,0,.1); }
html[data-theme="light"] #pg-arc .card-title { color: #0A0E1A; }
html[data-theme="light"] #pg-arc .card-supplier { color: #6A738E; }
html[data-theme="light"] #pg-arc .info-row { border-color: #E2E5EF; }
html[data-theme="light"] #pg-arc .info-label { color: #6A738E; }
html[data-theme="light"] #pg-arc .info-val { color: #0A0E1A; }
html[data-theme="light"] #pg-arc .card-amount { background: #F4F5FA; border-color: #E2E5EF; }
html[data-theme="light"] #pg-arc .amount-label { color: #4A5268; }
html[data-theme="light"] #pg-arc .card-footer { border-color: #E2E5EF; background: #F9FAFB; }
html[data-theme="light"] #pg-arc .btn-details { background: #fff; border-color: #E2E5EF; color: #0A0E1A; }
html[data-theme="light"] #pg-arc .btn-details:hover { background: #F4F5FA; border-color: var(--gold); color: var(--gold-d); }
html[data-theme="light"] #pg-arc .btn-attach { background: #fff; border-color: #E2E5EF; color: #4A5268; }
html[data-theme="light"] #pg-arc .btn-delete { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.2); color: #DC2626; }
html[data-theme="light"] #pg-arc .footer-bar { border-color: #E2E5EF; }
html[data-theme="light"] #pg-arc .footer-info { color: #6A738E; }
html[data-theme="light"] #pg-arc .pg-btn { background: #fff; border-color: #E2E5EF; color: #4A5268; }
html[data-theme="light"] #MA .modal { background: #fff; border-color: #E2E5EF; }
html[data-theme="light"] #MA .modal-header { border-color: #E2E5EF; }
html[data-theme="light"] #MA .modal-header-title { color: #0A0E1A; }
html[data-theme="light"] #MA .modal-close { background: #F4F5FA; border-color: #E2E5EF; color: #4A5268; }
html[data-theme="light"] #MA .modal-grid { background: #E2E5EF; border-color: #E2E5EF; }
html[data-theme="light"] #MA .modal-cell { background: #fff; }
html[data-theme="light"] #MA .modal-cell-label { color: #6A738E; }
html[data-theme="light"] #MA .modal-cell-val { color: #0A0E1A; }
html[data-theme="light"] #MA .modal-notes { background: #F4F5FA; border-color: #E2E5EF; color: #4A5268; }
html[data-theme="light"] #MA .modal-footer { border-color: #E2E5EF; background: #fff; }
html[data-theme="light"] #MA .btn-modal-attach { background: #F4F5FA; border-color: #E2E5EF; color: #0A0E1A; }
html[data-theme="light"] .admin-table-wrapper { background: #fff; border-color: #E2E5EF; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
html[data-theme="light"] .admin-table th { background: #F4F5FA; color: #6A738E; border-bottom-color: #E2E5EF; }
html[data-theme="light"] .admin-table td { border-bottom-color: #E2E5EF; color: #0A0E1A; }
html[data-theme="light"] .admin-table tbody tr:hover { background: #F9FAFB; }
html[data-theme="light"] .tb-role { color: #8A93AE; }
html[data-theme="light"] .card-overdue { background: linear-gradient(135deg, #fff 60%, rgba(239,68,68,0.05)); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE SPECIFIC RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:1280px) { .stats-grid,.kpi-row { grid-template-columns: repeat(2,1fr) } .items-grid, .pending-grid { grid-template-columns: repeat(2,1fr) } }
@media(max-width:900px) { 
  .g2,.frow { grid-template-columns: 1fr } .span2 { grid-column: auto } 
  #pg-arc .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #pg-arc .stats { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:768px) {
  .stats-grid,.kpi-row { grid-template-columns: 1fr 1fr }
  .pg { padding: 14px } .pg-hd { flex-direction: column; align-items: flex-start }
  .items-grid, .pending-grid { grid-template-columns: repeat(2,1fr) }
}
@media(max-width:700px) {
  .detail-cells { grid-template-columns: 1fr 1fr; }
  .detail-cells .detail-cell:nth-child(2) { border-left: none; }
  .detail-bottom { grid-template-columns: 1fr; }
  .detail-assignee-col { border-top: 1px solid var(--border); }
}
@media(max-width:600px) {
  #pg-arc .grid { grid-template-columns: 1fr; }
  #pg-arc .stats { grid-template-columns: 1fr 1fr; }
  #pg-arc .page-header { flex-direction: column; gap: 14px; align-items: flex-start; }
  #pg-arc .filters-bar { flex-direction: column; align-items: stretch; }
}
@media(max-width:480px) { .stats-grid,.kpi-row,.items-grid,.pending-grid,.team-grid { grid-template-columns: 1fr } .frow { grid-template-columns: 1fr } }