:root {
    --slp-bg: #f4f6fa;
    --slp-surface: #ffffff;
    --slp-surface-alt: #f8fafc;
    --slp-text: #172033;
    --slp-muted: #6f7b8f;
    --slp-border: #e2e7ef;
    --slp-border-strong: #ccd5e2;
    --slp-sidebar: #121a2a;
    --slp-sidebar-2: #182338;
    --slp-sidebar-text: #e8edf6;
    --slp-sidebar-muted: #8fa0ba;
    --slp-primary: #3659c9;
    --slp-primary-hover: #2948b0;
    --slp-primary-soft: #edf2ff;
    --slp-success: #178060;
    --slp-success-soft: #eaf7f2;
    --slp-warning: #a56508;
    --slp-warning-soft: #fff6df;
    --slp-danger: #b73b4b;
    --slp-danger-soft: #fff0f2;
    --slp-info: #167d96;
    --slp-info-soft: #eaf8fb;
    --slp-shadow: 0 8px 24px rgba(23, 32, 51, .055);
    --slp-radius: 15px;
    --slp-sidebar-width: 275px;
}

* { box-sizing: border-box; }
html, body { background: var(--slp-bg); color: var(--slp-text); }
body.app-body { overflow-x: hidden; }
.app-shell { min-height: 100vh; }

/* Sidebar */
.app-sidebar {
    position: fixed; inset: 0 0 0 auto; width: var(--slp-sidebar-width); z-index: 1040;
    display: flex; flex-direction: column; background: linear-gradient(180deg, var(--slp-sidebar) 0%, #0f1726 100%);
    color: var(--slp-sidebar-text); border-left: 1px solid rgba(255,255,255,.035);
    box-shadow: -8px 0 30px rgba(7, 13, 24, .08);
}
.brand-block { height: 78px; display:flex; align-items:center; gap:12px; padding:0 19px; text-decoration:none; color:#fff; border-bottom:1px solid rgba(255,255,255,.07); }
.brand-block:hover { color:#fff; }
.brand-mark { width:42px; height:42px; border-radius:12px; flex:0 0 42px; display:grid; place-items:center; background:linear-gradient(145deg,#5271e7,#2d4dc3); color:#fff; font-weight:800; letter-spacing:.04em; box-shadow:0 7px 18px rgba(54,89,201,.28); }
.brand-copy { display:flex; flex-direction:column; line-height:1.2; }
.brand-copy strong { font-size:.93rem; letter-spacing:.01em; }
.brand-copy small { margin-top:4px; color:#9cacc4; font-size:.69rem; }
.sidebar-user { margin:14px 14px 8px; padding:12px; display:flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.075); border-radius:13px; background:rgba(255,255,255,.035); }
.avatar-circle { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:0 0 38px; background:#273754; color:#fff; font-weight:800; }
.sidebar-user-copy { min-width:0; flex:1; display:flex; flex-direction:column; }
.sidebar-user-copy strong { font-size:.8rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.sidebar-user-copy span { margin-top:3px; color:#95a5bd; font-size:.66rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.online-badge { width:8px; height:8px; border-radius:50%; background:#3ecf8e; box-shadow:0 0 0 3px rgba(62,207,142,.13); }
.sidebar-nav { flex:1; overflow-y:auto; padding:3px 10px 18px; scrollbar-width:thin; scrollbar-color:#34445f transparent; }
.nav-caption { margin:17px 11px 7px; color:#72849f; font-size:.63rem; font-weight:700; letter-spacing:.03em; }
.sidebar-link { min-height:40px; display:flex; align-items:center; gap:10px; margin:2px 0; padding:8px 10px; border-radius:10px; color:#c9d3e3; text-decoration:none; font-size:.78rem; transition:background .15s ease,color .15s ease,transform .15s ease; }
.sidebar-link:hover { color:#fff; background:rgba(255,255,255,.055); transform:translateX(-1px); }
.sidebar-link.active { color:#fff; background:rgba(74,103,220,.22); box-shadow:inset -3px 0 0 #7189ef; }
.nav-icon { width:24px; height:24px; display:grid; place-items:center; border-radius:7px; background:rgba(255,255,255,.045); color:#aab8cf; font-size:.86rem; }
.sidebar-link.active .nav-icon { color:#fff; background:rgba(108,132,234,.24); }
.sidebar-link.sidebar-sub { min-height:34px; margin-right:26px; padding:6px 9px; color:#a9b7cc; font-size:.72rem; }
.nav-dot { width:5px; height:5px; border-radius:50%; background:#5d708e; flex:0 0 5px; }
.sidebar-footer { padding:12px 14px 15px; border-top:1px solid rgba(255,255,255,.07); display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.sidebar-footer a,.sidebar-footer button { width:100%; height:34px; border:1px solid rgba(255,255,255,.08); border-radius:9px; background:rgba(255,255,255,.035); color:#b8c4d7; text-decoration:none; display:grid; place-items:center; font-size:.68rem; }
.sidebar-footer button { cursor:pointer; }
.sidebar-footer a:hover,.sidebar-footer button:hover { color:#fff; background:rgba(255,255,255,.075); }
.sidebar-backdrop { display:none; }

/* Main shell */
.app-main { min-height:100vh; margin-right:var(--slp-sidebar-width); display:flex; flex-direction:column; }
.app-topbar { height:68px; position:sticky; top:0; z-index:1020; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 26px; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--slp-border); }
.topbar-start,.topbar-actions { display:flex; align-items:center; gap:12px; }
.topbar-title { display:flex; flex-direction:column; min-width:0; }
.topbar-title strong { font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-title span { margin-top:2px; color:var(--slp-muted); font-size:.64rem; }
.sidebar-toggle { display:none; width:38px; height:38px; border:1px solid var(--slp-border); border-radius:10px; background:#fff; color:var(--slp-text); }
.connection-state { display:flex; align-items:center; gap:7px; color:var(--slp-muted); font-size:.68rem; }
.live-dot { width:8px; height:8px; border-radius:50%; background:#27ae75; box-shadow:0 0 0 4px rgba(39,174,117,.1); }
.topbar-user { display:flex; flex-direction:column; text-align:left; padding-right:12px; border-right:1px solid var(--slp-border); }
.topbar-user span { font-size:.73rem; font-weight:700; }
.topbar-user small { color:var(--slp-muted); font-size:.62rem; }
.app-content { width:100%; max-width:1640px; margin:0 auto; padding:25px 26px 36px; flex:1; }
.app-footer { padding:13px 26px; border-top:1px solid var(--slp-border); background:#fff; color:#8b96a8; font-size:.65rem; text-align:center; }

/* Page headings and common surfaces */
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.page-heading h1 { margin:3px 0 7px; font-size:1.42rem; font-weight:850; letter-spacing:-.02em; }
.page-heading p { max-width:850px; margin:0; color:var(--slp-muted); font-size:.76rem; line-height:1.85; }
.page-kicker { color:var(--slp-primary); font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.page-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.panel-card,.scope-card { background:var(--slp-surface); border:1px solid var(--slp-border); border-radius:var(--slp-radius); box-shadow:var(--slp-shadow); padding:18px; }
.panel-header { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px; }
.panel-header h2 { margin:0; font-size:.93rem; font-weight:800; }
.panel-header p { margin:4px 0 0; color:var(--slp-muted); font-size:.69rem; line-height:1.6; }
.form-card { max-width:1240px; }
.note-box { padding:13px 14px; border-radius:11px; border:1px solid #dbe3f0; background:#f8fafc; color:#475467; font-size:.77rem; line-height:1.85; white-space:pre-wrap; }

/* Forms */
.form-grid,.filter-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:end; }
.form-grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; }
.field-group { min-width:0; }
.field-group label,.form-label { display:block; margin-bottom:6px; color:#43506a; font-size:.72rem; font-weight:700; }
.field-span-2 { grid-column:span 2; }
.field-span-full { grid-column:1/-1; }
.form-control,.form-select { min-height:41px; border-color:#d8e0ea; border-radius:9px; background-color:#fff; color:var(--slp-text); font-size:.78rem; box-shadow:none !important; }
textarea.form-control { min-height:96px; }
.form-control:focus,.form-select:focus { border-color:#8fa5ed; box-shadow:0 0 0 3px rgba(54,89,201,.09) !important; }
.form-control::placeholder { color:#a1aabd; }
.form-check-input:checked { background-color:var(--slp-primary); border-color:var(--slp-primary); }
.form-actions,.filter-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.form-actions { margin-top:20px; padding-top:17px; border-top:1px solid #edf0f4; }
.compact-search { max-width:320px; }
.btn { border-radius:9px; font-size:.75rem; font-weight:700; min-height:37px; }
.btn-sm { min-height:31px; font-size:.68rem; }
.btn-lg { min-height:47px; }
.btn-primary { background:var(--slp-primary); border-color:var(--slp-primary); }
.btn-primary:hover,.btn-primary:focus { background:var(--slp-primary-hover); border-color:var(--slp-primary-hover); }
.btn-light { border-color:var(--slp-border); background:#fff; color:#536075; }
.alert { border-radius:11px; border-width:1px; font-size:.76rem; line-height:1.7; }

/* Tables */
.table-responsive { scrollbar-width:thin; }
.smart-table { margin:0; font-size:.75rem; vertical-align:middle; }
.smart-table thead th { padding:12px 13px; color:#657188; background:#f8fafc; border-bottom:1px solid var(--slp-border); font-size:.68rem; font-weight:800; white-space:nowrap; }
.smart-table tbody td { padding:11px 13px; border-bottom-color:#edf0f4; color:#354056; }
.smart-table tbody tr:hover { background:#fbfcfe; }
.smart-table tbody tr:last-child td { border-bottom:0; }
.table-sub { display:block; max-width:330px; margin-top:3px; color:#8994a7; font-size:.62rem; }
.text-truncate-soft { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.table-toolbar { min-height:49px; padding:10px 15px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--slp-border); color:var(--slp-muted); font-size:.69rem; }
.table-toolbar strong { color:var(--slp-text); font-size:.85rem; }
.status-pill { display:inline-flex; align-items:center; min-height:25px; padding:4px 9px; border-radius:999px; background:#eef2f7; color:#59667b; font-size:.64rem; white-space:nowrap; }
.status-pill.success { color:var(--slp-success); background:var(--slp-success-soft); }
.status-pill.danger { color:var(--slp-danger); background:var(--slp-danger-soft); }
.status-pill.warning { color:var(--slp-warning); background:var(--slp-warning-soft); }
.status-pill.info { color:var(--slp-info); background:var(--slp-info-soft); }
.count-chip { display:inline-grid; min-width:30px; min-height:25px; place-items:center; border-radius:8px; padding:0 6px; background:#eef2f8; color:#46536a; font-size:.7rem; font-weight:800; }
.empty-state { padding:30px 18px; text-align:center; color:#8994a7; font-size:.76rem; }
.empty-icon { margin-bottom:8px; font-size:2rem; color:#b5bfce; }
.pager-bar { margin-top:14px; display:flex; align-items:center; justify-content:center; gap:12px; color:var(--slp-muted); font-size:.7rem; }

/* Dashboard */
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:13px; }
.metric-grid-secondary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:13px; margin-bottom:17px; }
.metric-card { min-width:0; padding:16px; display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--slp-border); border-radius:14px; box-shadow:0 4px 18px rgba(27,39,62,.035); text-decoration:none; color:inherit; transition:transform .15s ease,border-color .15s ease; }
a.metric-card:hover { transform:translateY(-2px); border-color:#cbd6e6; color:inherit; }
.metric-card.compact { padding:13px; }
.metric-icon { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:11px; background:var(--slp-primary-soft); color:var(--slp-primary); font-weight:800; }
.metric-card span:not(.metric-icon) { display:block; color:var(--slp-muted); font-size:.66rem; }
.metric-card strong { display:block; margin-top:3px; font-size:1.34rem; }
.metric-card.warning .metric-icon { background:var(--slp-warning-soft); color:var(--slp-warning); }
.metric-card.danger .metric-icon { background:var(--slp-danger-soft); color:var(--slp-danger); }
.metric-card.info .metric-icon { background:var(--slp-info-soft); color:var(--slp-info); }
.dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.panel-span-2 { grid-column:span 2; }
.activity-list { display:grid; }
.activity-item { display:flex; gap:10px; padding:10px 2px; border-bottom:1px solid #eff2f6; }
.activity-item:last-child { border-bottom:0; }
.activity-dot { width:8px; height:8px; margin-top:6px; flex:0 0 8px; border-radius:50%; background:#e5a238; }
.activity-dot.material { background:#536fe1; }.activity-dot.device { background:#219880; }
.activity-item strong { display:block; font-size:.75rem; }.activity-item p { margin:3px 0; color:var(--slp-muted); font-size:.68rem; }.activity-item small { color:#9aa5b6; font-size:.6rem; }
.scope-card-title { display:flex; gap:11px; align-items:center; }.scope-card-title>span { width:40px; height:40px; display:grid; place-items:center; border-radius:11px; background:var(--slp-primary-soft); }
.scope-card-title h2 { margin:0; font-size:.9rem; }.scope-card-title small { color:var(--slp-muted); font-size:.63rem; }
.scope-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:15px 0; }.scope-stats div { padding:9px; text-align:center; border-radius:9px; background:#f8fafc; }.scope-stats strong,.scope-stats span { display:block; }.scope-stats span { margin-top:3px; color:var(--slp-muted); font-size:.61rem; }
.scope-meta { display:grid; gap:7px; }.scope-meta div { display:flex; justify-content:space-between; gap:12px; font-size:.68rem; }.scope-meta span { color:var(--slp-muted); }

/* Details / media */
.details-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr); gap:15px; }
.detail-list { display:grid; gap:0; margin:0; }.detail-list.two-column { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:22px; }
.detail-list>div { display:grid; grid-template-columns:155px minmax(0,1fr); gap:12px; padding:10px 0; border-bottom:1px solid #edf1f5; }.detail-list>div:last-child { border-bottom:0; }
.detail-list dt { color:var(--slp-muted); font-weight:500; font-size:.7rem; }.detail-list dd { margin:0; font-size:.76rem; font-weight:650; overflow-wrap:anywhere; }
.material-hero,.profile-header { display:flex; align-items:center; gap:16px; }
.material-hero-photo,.material-photo-empty,.profile-photo,.profile-photo-placeholder { width:116px; height:116px; flex:0 0 116px; border-radius:14px; border:1px solid var(--slp-border); object-fit:cover; background:#f8fafc; }
.material-photo-empty,.profile-photo-placeholder { display:grid; place-items:center; color:var(--slp-muted); font-size:2rem; }
.material-photo-preview { width:105px; height:105px; object-fit:cover; border:1px solid var(--slp-border); border-radius:12px; background:#f8fafc; }
.material-description,.preserve-lines { white-space:pre-wrap; line-height:1.95; font-size:.77rem; color:#445168; }
.inventory-big { margin-bottom:8px; padding:12px; display:flex; align-items:center; justify-content:space-between; border-radius:10px; background:#f8fafc; }.inventory-big.primary { background:var(--slp-primary-soft); }.inventory-big span { color:var(--slp-muted); font-size:.68rem; }.inventory-big strong { font-size:.9rem; }
.device-hero-image { width:100%; max-height:280px; object-fit:cover; border-radius:13px; border:1px solid var(--slp-border); background:#f8fafc; }.device-image-placeholder { height:210px; display:grid; place-items:center; border:1px dashed var(--slp-border-strong); border-radius:13px; background:#f8fafc; font-size:2.8rem; }
.stack-list { display:grid; gap:8px; }.stack-list-item { padding:10px 11px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid #edf0f4; border-radius:10px; background:#fbfcfe; }.stack-list-item strong,.stack-list-item small { display:block; }.stack-list-item strong { font-size:.73rem; }.stack-list-item small { margin-top:3px; color:var(--slp-muted); font-size:.62rem; }

/* Members and material pickers */
.member-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-height:285px; overflow:auto; padding:9px; border:1px solid var(--slp-border); border-radius:11px; background:#fbfcfe; }
.member-option { display:flex; align-items:center; gap:7px; min-width:0; padding:9px 10px; border:1px solid #e8edf3; border-radius:9px; background:#fff; cursor:pointer; }.member-option:hover { border-color:#c9d5e6; }.member-option span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.member-option small { margin-right:auto; color:var(--slp-muted); font-size:.61rem; }
.safety-box { padding:14px; border:1px solid #ebd8a8; border-radius:12px; background:#fffaf0; color:#615231; line-height:1.85; font-size:.75rem; }
.searchable-combobox { position:relative; }
.searchable-combobox-input-wrap { position:relative; display:flex; align-items:center; }
.searchable-combobox-input { padding-left:38px; }
.searchable-combobox-clear { position:absolute; left:7px; width:27px; height:27px; border:0; border-radius:7px; background:#eef2f7; color:#667085; display:grid; place-items:center; cursor:pointer; }
.searchable-combobox-menu { position:absolute; top:calc(100% + 6px); right:0; left:0; z-index:1060; max-height:310px; overflow:auto; padding:6px; border:1px solid var(--slp-border-strong); border-radius:11px; background:#fff; box-shadow:0 14px 35px rgba(23,32,51,.15); display:none; }
.searchable-combobox.open .searchable-combobox-menu { display:block; }
.searchable-option { width:100%; border:0; background:transparent; padding:9px 10px; display:flex; justify-content:space-between; gap:10px; text-align:right; border-radius:8px; color:var(--slp-text); cursor:pointer; }.searchable-option:hover,.searchable-option.active { background:var(--slp-primary-soft); }.searchable-option strong { font-size:.72rem; }.searchable-option small { color:var(--slp-muted); font-size:.61rem; white-space:nowrap; }.searchable-option[hidden] { display:none; }
.searchable-empty { padding:18px 10px; text-align:center; color:var(--slp-muted); font-size:.69rem; display:none; }
.searchable-combobox.no-results .searchable-empty { display:block; }
.selected-material-summary { margin-top:7px; min-height:24px; color:var(--slp-muted); font-size:.65rem; }

/* Attendance */
.attendance-kiosk-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); gap:15px; }
.attendance-kiosk { min-height:260px; display:flex; align-items:center; }.attendance-kiosk form { width:100%; }
.barcode-input-wrap { display:grid; grid-template-columns:1fr auto; gap:9px; align-items:end; }.barcode-input-wrap label { grid-column:1/-1; margin-bottom:-3px; color:#43506a; font-size:.73rem; font-weight:700; }.barcode-input { min-height:57px; font-size:1.4rem; letter-spacing:.05em; direction:ltr; text-align:center; }
.attendance-result-card { min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }.attendance-result-card h2 { margin:12px 0 5px; font-size:1.2rem; }.attendance-result-card p { margin:0 0 12px; color:var(--slp-muted); }.attendance-result-card>strong { font-size:2rem; }.attendance-result-card>small { margin-top:4px; color:var(--slp-muted); }.result-action { min-width:80px; padding:7px 12px; border-radius:999px; font-weight:800; }.result-action.in { color:var(--slp-success); background:var(--slp-success-soft); }.result-action.out { color:var(--slp-info); background:var(--slp-info-soft); }

/* Permission / access */
.access-check-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.access-check-card { display:flex; gap:8px; align-items:center; padding:10px 11px; border:1px solid var(--slp-border); border-radius:9px; background:#fff; font-size:.72rem; cursor:pointer; }.access-check-card:hover { border-color:#c9d5e6; background:#fafcff; }
.access-summary-list { display:grid; gap:8px; }.access-summary-list>div { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:9px 11px; background:#f8fafc; border-radius:9px; }.access-summary-list strong { font-size:.73rem; }.access-summary-list span { color:var(--slp-muted); font-size:.62rem; direction:ltr; }
.permission-chip-list { display:flex; flex-wrap:wrap; gap:5px; }.permission-chip-list span { padding:4px 7px; border:1px solid var(--slp-border); border-radius:999px; background:#f8fafc; font-size:.6rem; direction:ltr; }
.permission-role-grid { display:grid; gap:15px; }.permission-role-card { padding:0; overflow:hidden; }.permission-role-card>.panel-header { margin:0; padding:15px 17px; border-bottom:1px solid var(--slp-border); background:#fbfcfe; }
.permission-module { padding:15px 17px; border-bottom:1px solid #eff2f6; }.permission-module:last-child { border-bottom:0; }.permission-module-title { margin-bottom:9px; color:#344054; font-size:.72rem; font-weight:800; }.permission-check-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.permission-check { min-width:0; padding:9px; display:flex; align-items:flex-start; gap:8px; border:1px solid #e7ecf3; border-radius:9px; background:#fff; cursor:pointer; }.permission-check:hover { border-color:#cad6e7; }.permission-check span { min-width:0; }.permission-check strong,.permission-check small { display:block; }.permission-check strong { font-size:.69rem; }.permission-check small { margin-top:3px; color:#8a96a8; font-size:.57rem; direction:ltr; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.permission-matrix-wrap { max-height:70vh; }.permission-matrix-table thead th { position:sticky; top:0; z-index:2; }.permission-matrix-table td:first-child,.permission-matrix-table th:first-child { position:sticky; right:0; min-width:260px; background:#fff; z-index:1; }.permission-matrix-table thead th:first-child { z-index:3; background:#f8fafc; }
.access-matrix-table th,.access-matrix-table td { text-align:center; }.access-matrix-table th:nth-child(1),.access-matrix-table th:nth-child(2),.access-matrix-table td:nth-child(1),.access-matrix-table td:nth-child(2) { text-align:right; }
.audit-text { padding:12px; border:1px solid var(--slp-border); border-radius:9px; background:#f8fafc; font-family:Tahoma,Arial,sans-serif; font-size:.7rem; line-height:1.9; white-space:pre-wrap; direction:rtl; text-align:right; }

/* Public pages */
.public-body { background:#f6f8fb; min-height:100vh; display:flex; flex-direction:column; }.public-header { background:#fff; border-bottom:1px solid var(--slp-border); }.public-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--slp-text); }.public-footer { margin-top:auto; padding:16px 0; border-top:1px solid var(--slp-border); background:#fff; color:var(--slp-muted); font-size:.68rem; }

code { direction:ltr; unicode-bidi:embed; color:#475467; }

@media (max-width: 1240px) {
    .metric-grid-secondary { grid-template-columns:repeat(3,1fr); }
    .filter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 992px) {
    .app-sidebar { transform:translateX(100%); transition:transform .2s ease; }
    .app-sidebar.open { transform:translateX(0); }
    .app-main { margin-right:0; }
    .sidebar-toggle { display:grid; place-items:center; }
    .sidebar-backdrop { position:fixed; inset:0; z-index:1030; background:rgba(12,18,30,.42); backdrop-filter:blur(2px); }
    body.sidebar-open .sidebar-backdrop { display:block; }
    .metric-grid { grid-template-columns:repeat(2,1fr); }
    .form-grid,.filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .permission-check-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .app-content { padding:18px 12px 28px; }.app-topbar { height:61px; padding:0 12px; }.topbar-user { display:none; }
    .page-heading { display:block; }.page-actions { margin-top:13px; }
    .page-heading h1 { font-size:1.2rem; }
    .metric-grid,.metric-grid-secondary { grid-template-columns:1fr 1fr; }
    .dashboard-grid,.details-grid,.attendance-kiosk-grid { grid-template-columns:1fr; }.panel-span-2 { grid-column:auto; }
    .form-grid,.filter-grid { grid-template-columns:1fr; }.field-span-2,.field-span-full { grid-column:auto; }
    .member-picker { grid-template-columns:repeat(2,1fr); }
    .detail-list.two-column { grid-template-columns:1fr; }.detail-list>div { grid-template-columns:125px 1fr; }
    .permission-check-grid,.access-check-grid { grid-template-columns:1fr; }
    .barcode-input-wrap { grid-template-columns:1fr; }.barcode-input-wrap label { grid-column:auto; }
}
@media (max-width: 480px) {
    .metric-grid,.metric-grid-secondary { grid-template-columns:1fr; }
    .member-picker { grid-template-columns:1fr; }
    .detail-list>div { grid-template-columns:1fr; gap:3px; }
    .material-hero,.profile-header { align-items:flex-start; }.material-hero-photo,.material-photo-empty,.profile-photo,.profile-photo-placeholder { width:84px; height:84px; flex-basis:84px; }
}


/* Phase 8: smart attendance / Jalali / mol conversion */
.attendance-smart-grid, .smart-attendance-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.8fr); gap:1rem; }
.attendance-kiosk-card { min-height:100%; }
#attendanceVideo, .attendance-video, .face-enroll-video { width:100%; min-height:260px; max-height:520px; object-fit:cover; border-radius:18px; background:#0f172a; transform:scaleX(-1); }
.camera-status { padding:.7rem .9rem; border-radius:12px; background:#f8fafc; border:1px solid #e2e8f0; color:#475569; }
.status-pill { display:inline-flex; align-items:center; border-radius:999px; padding:.3rem .65rem; font-size:.8rem; font-weight:700; }
.status-pill.success { background:#dcfce7; color:#166534; }
.status-pill.warning { background:#fef3c7; color:#92400e; }
.kiosk-result { border:1px dashed #cbd5e1; border-radius:18px; background:linear-gradient(180deg,#fff,#f8fafc); }
.result-action { display:inline-flex; min-width:72px; justify-content:center; border-radius:999px; padding:.4rem .9rem; background:#e0f2fe; color:#075985; font-weight:800; }
.mol-conversion-box { border:1px solid #dbeafe; background:#eff6ff; border-radius:14px; padding:.8rem; }
.persian-date-input { text-align:center; font-variant-numeric:tabular-nums; }
.searchable-combobox-menu { max-height:320px; overflow:auto; }
.searchable-option small { display:block; color:#64748b; margin-top:.15rem; }
@media (max-width: 991.98px) { .attendance-smart-grid, .attendance-smart-grid, .smart-attendance-grid { grid-template-columns:1fr; } #attendanceVideo,.attendance-video,.face-enroll-video { min-height:220px; } }

/* Phase 9: refined lightweight shell -------------------------------------------------- */
.sidebar-head{display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.07)}
.sidebar-head .brand-block{flex:1;border-bottom:0}.sidebar-mobile-close{display:none;margin-left:10px;width:32px;height:32px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:rgba(255,255,255,.04);color:#c8d3e4;font-size:1.25rem;line-height:1}
.sidebar-nav{padding:8px 10px 20px}.nav-dashboard{margin:4px 0 9px;background:rgba(255,255,255,.025)}
.nav-group{margin:5px 0;border:1px solid transparent;border-radius:12px;overflow:hidden}.nav-group.open{background:rgba(255,255,255,.018);border-color:rgba(255,255,255,.035)}
.nav-group-toggle{width:100%;min-height:40px;padding:8px 10px;border:0;background:transparent;color:#8ea0ba;display:flex;align-items:center;justify-content:space-between;font-family:inherit;font-size:.68rem;font-weight:800;cursor:pointer;text-align:right}.nav-group-toggle>span{display:flex;align-items:center;gap:8px}.nav-group-icon{width:23px;height:23px;display:grid;place-items:center;border-radius:7px;background:rgba(255,255,255,.04);font-style:normal;color:#91a2bd}.nav-chevron{font-style:normal;transition:transform .18s ease;color:#697c99}.nav-group.open .nav-chevron{transform:rotate(180deg)}
.nav-group-body{display:none;padding:0 4px 5px}.nav-group.open .nav-group-body{display:block}.nav-group-body .sidebar-link{margin:1px 0;font-size:.745rem}.menu-badge{margin-right:auto;padding:2px 6px;border-radius:999px;background:rgba(83,111,228,.18);color:#aebdf8;font-size:.52rem;font-weight:800}
.topbar-action{position:relative;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--slp-border);border-radius:10px;background:#fff;color:#536075;text-decoration:none;font-size:.92rem;transition:.15s ease}.topbar-action:hover{color:var(--slp-primary);border-color:#cbd7fa;background:#f7f9ff}.notification-action{color:#cf7e19}.app-footer{display:flex;justify-content:space-between;align-items:center;text-align:initial}

/* Page polish */
.app-content{padding-top:24px}.panel-card{transition:border-color .16s ease,box-shadow .16s ease}.panel-card:hover{border-color:#d9e0ea}.page-heading{padding:1px 2px}.page-heading h1{font-size:1.5rem}.page-kicker{display:inline-flex;align-items:center;gap:6px}.page-kicker:before{content:"";width:16px;height:2px;border-radius:3px;background:var(--slp-primary)}
.metric-card{position:relative;overflow:hidden}.metric-card:after{content:"";position:absolute;width:75px;height:75px;border-radius:50%;background:rgba(54,89,201,.035);left:-28px;bottom:-33px}.metric-card .metric-icon{position:relative;z-index:1}.status-pill{font-weight:750}

/* Dashboard trend charts: no chart library, fast and responsive */
.dashboard-trends{display:grid;grid-template-columns:1.2fr .8fr;gap:15px}.trend-panel{min-width:0}.trend-legend{display:flex;gap:12px;align-items:center;color:var(--slp-muted);font-size:.63rem}.trend-legend span{display:flex;align-items:center;gap:5px}.trend-legend span:before{content:"";width:8px;height:8px;border-radius:3px}.trend-legend .att:before{background:#4468dd}.trend-legend .mat:before{background:#20a477}.trend-legend .dev:before{background:#e49b31}.trend-scroll{overflow-x:auto;padding:5px 2px 2px;scrollbar-width:thin}.trend-chart{height:205px;display:grid;align-items:end;gap:5px;min-width:max-content;padding:10px 4px 0;border-bottom:1px solid #e7ebf1;background:repeating-linear-gradient(to top,#f5f7fa 0,#f5f7fa 1px,transparent 1px,transparent 46px)}.trend-chart-month{grid-template-columns:repeat(31,25px)}.trend-chart-year{grid-template-columns:repeat(12,42px);min-width:100%}.trend-column{height:185px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px}.trend-bars{height:150px;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px}.trend-bars i{width:5px;min-height:0;border-radius:4px 4px 1px 1px;display:block;transition:height .25s ease}.bar-att{background:#4468dd}.bar-mat{background:#20a477}.bar-dev{background:#e49b31}.trend-column small{font-size:.55rem;color:#79859a;white-space:nowrap}

/* Reports / verification */
.report-filter-card{background:linear-gradient(145deg,#fff,#fbfcff)}.report-filter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.report-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.report-card{display:grid;grid-template-columns:45px 1fr auto;gap:12px;align-items:center;padding:15px;border:1px solid var(--slp-border);border-radius:14px;background:#fff;box-shadow:var(--slp-shadow);transition:.15s ease}.report-card:hover{transform:translateY(-1px);border-color:#ccd7eb}.report-card-icon{width:45px;height:45px;border-radius:12px;display:grid;place-items:center;background:var(--slp-primary-soft);color:var(--slp-primary);font-size:1.1rem}.report-card-body h2{margin:0 0 4px;font-size:.82rem;font-weight:850}.report-card-body p{margin:0;color:var(--slp-muted);font-size:.64rem;line-height:1.65}.verify-shell{min-height:68vh;display:grid;place-items:center}.verify-card{width:min(520px,100%);padding:25px;border:1px solid var(--slp-border);border-radius:19px;background:#fff;box-shadow:0 20px 55px rgba(23,32,51,.09)}.verify-brand{display:flex;align-items:center;gap:12px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid #edf0f4}.verify-brand>div{display:flex;flex-direction:column}.verify-brand small{margin-top:3px;color:var(--slp-muted);font-size:.68rem}.verify-form{display:grid;gap:12px}.verify-result{margin-top:18px;padding:15px;border-radius:12px;border:1px solid}.verify-result.valid{background:#f1fbf7;border-color:#bce8d6;color:#175d47}.verify-result.invalid{background:#fff7f7;border-color:#f0cccc;color:#923b45}.verify-result dl{margin:13px 0;display:grid;gap:5px}.verify-result dl div{display:grid;grid-template-columns:100px 1fr;gap:10px;border-top:1px solid rgba(0,0,0,.06);padding-top:6px}.verify-result dt{font-size:.64rem;opacity:.7}.verify-result dd{margin:0;font-size:.68rem}

/* Ticket / notification / communications */
.ticket-thread{display:grid;gap:10px}.ticket-message{max-width:84%;padding:12px 14px;border:1px solid var(--slp-border);border-radius:14px 14px 4px 14px;background:#fff}.ticket-message.reply{margin-right:auto;border-radius:14px 14px 14px 4px;background:#f4f7ff;border-color:#dfe6fa}.ticket-message strong,.ticket-message small{display:block}.ticket-message p{margin:7px 0;white-space:pre-wrap;font-size:.74rem;line-height:1.8}.ticket-message small{color:var(--slp-muted);font-size:.6rem}.log-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}.log-tabs button{border:1px solid var(--slp-border);background:#fff;border-radius:9px;padding:7px 12px;color:#5c687d;font-size:.68rem;font-weight:750}.log-tabs button.active{color:#fff;background:var(--slp-primary);border-color:var(--slp-primary)}

/* Smart attendance post-result */
.attendance-after-summary{width:100%;text-align:right}.usage-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.usage-stat{padding:11px;border:1px solid #e5eaf1;border-radius:11px;background:#fbfcfe}.usage-stat span,.usage-stat small,.usage-stat strong{display:block}.usage-stat span{color:#5f6c82;font-size:.61rem}.usage-stat strong{margin:5px 0;font-size:.91rem}.usage-stat small{color:#8a95a7;font-size:.55rem}.usage-stat.liquid{background:#f1f8ff}.usage-stat.solid{background:#fbf8f0}.usage-stat.device{background:#f5f2ff}.recent-usage-box{border-top:1px solid #edf0f4;padding-top:12px}.recent-usage-title{font-size:.68rem;font-weight:800;margin-bottom:7px}.recent-usage-list{display:grid;gap:6px}.recent-usage-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 9px;border-radius:9px;background:#f8fafc;border:1px solid #edf1f5}.recent-usage-item strong,.recent-usage-item small{display:block}.recent-usage-item strong{font-size:.68rem}.recent-usage-item small{font-size:.56rem;color:var(--slp-muted);margin-top:2px}.recent-usage-item>span{font-size:.62rem;white-space:nowrap;color:#516078}.empty-inline{padding:12px;text-align:center;color:var(--slp-muted);font-size:.64rem}

/* Improved form density and date fields */
.persian-date-input{cursor:pointer}.form-field label{display:block;margin-bottom:6px;color:#43506a;font-size:.72rem;font-weight:700}.section-card-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.section-card-title h2{margin:0;font-size:.88rem}.section-card-title small{color:var(--slp-muted);font-size:.63rem}

@media(max-width:1250px){.dashboard-trends{grid-template-columns:1fr}.report-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:992px){.sidebar-mobile-close{display:grid;place-items:center}.topbar-user{display:none}.report-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.usage-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.app-content{padding:18px 13px 28px}.page-heading{flex-direction:column}.page-actions{width:100%}.report-card-grid{grid-template-columns:1fr}.report-filter-grid{grid-template-columns:1fr}.report-filter-grid .field-span-2{grid-column:auto}.trend-chart-year{grid-template-columns:repeat(12,36px)}.usage-stat-grid{grid-template-columns:1fr 1fr}.topbar-action{display:none}.app-topbar{padding:0 13px}.panel-card{padding:14px}.metric-grid{grid-template-columns:1fr 1fr}.detail-list.two-column{grid-template-columns:1fr}}
@media(max-width:460px){.metric-grid{grid-template-columns:1fr}.usage-stat-grid{grid-template-columns:1fr}.recent-usage-item{align-items:flex-start;flex-direction:column}.ticket-message{max-width:96%}}