: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; }

/* Mixed Persian + chemical formula text ----------------------------------- */
[data-chemical-text] { unicode-bidi: plaintext; }
.chemical-token {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
    font-family: "Segoe UI", Arial, sans-serif;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: normal;
}
input[data-chemical-input] {
    unicode-bidi: plaintext;
    text-align: start;
    font-variant-numeric: lining-nums tabular-nums;
}
select[data-chemical-select] { unicode-bidi: plaintext; }

/* 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; }
.material-picker-cell{min-width:290px}.material-picker-cell .material-search{min-width:250px}.material-search-status{display:block;min-height:1.1rem;margin-top:.2rem;font-size:.68rem}
.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%}}

/* Clean operational printouts (invoice details, reports and tables). */
@media print {
    @page { margin: 12mm; }
    html, body, body.app-body { background:#fff !important; color:#111 !important; }
    .app-sidebar, .app-topbar, .app-footer, .sidebar-backdrop,
    .page-heading .btn, .page-heading button, [data-sidebar-toggle] { display:none !important; }
    .app-main { margin:0 !important; min-height:0; }
    .app-content { max-width:none; padding:0 !important; }
    .page-heading { margin-bottom:12px; }
    .panel-card, .scope-card { box-shadow:none !important; border-color:#bbb !important; break-inside:avoid; }
    .table-responsive { overflow:visible !important; }
    table { width:100% !important; }
    thead { display:table-header-group; }
    tr, img { break-inside:avoid; }
    a { color:inherit !important; text-decoration:none !important; }
}

/* AZMICO login / public identity */
.azmico-login-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);min-height:620px;max-width:1120px;margin:24px auto 44px;border:1px solid #e4e9f2;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 28px 70px rgba(28,45,82,.12)}
.azmico-login-brand-panel{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:48px;background:linear-gradient(145deg,#18244a 0%,#263a73 56%,#3358a6 100%);color:#fff;overflow:hidden}
.azmico-login-brand-panel:before,.azmico-login-brand-panel:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.azmico-login-brand-panel:before{width:420px;height:420px;left:-230px;bottom:-220px}.azmico-login-brand-panel:after{width:280px;height:280px;right:-120px;top:-110px}
.azmico-login-brand-top,.azmico-login-intro,.azmico-feature-grid{position:relative;z-index:1}.azmico-login-brand-top{display:flex;align-items:center;gap:15px;direction:ltr;text-align:left}
.azmico-logo-mark{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);font-weight:900;font-size:1.08rem;letter-spacing:.04em}
.azmico-wordmark{font-weight:900;font-size:1.4rem;letter-spacing:.12em}.azmico-expansion{max-width:370px;margin-top:3px;color:rgba(255,255,255,.68);font-size:.69rem;line-height:1.55;letter-spacing:.02em}
.azmico-login-intro{margin:62px 0 46px}.azmico-eyebrow{display:inline-flex;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.1);font-size:.76rem;color:rgba(255,255,255,.83)}
.azmico-login-intro h1{font-size:2rem;line-height:1.65;margin:18px 0 14px;font-weight:900}.azmico-login-intro p{margin:0;max-width:590px;color:rgba(255,255,255,.74);line-height:2;font-size:.9rem}
.azmico-feature-grid{display:grid;grid-template-columns:1fr;gap:10px}.azmico-feature{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:15px;background:rgba(255,255,255,.085);border:1px solid rgba(255,255,255,.09)}
.azmico-feature>span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.12)}.azmico-feature strong,.azmico-feature small{display:block}.azmico-feature strong{font-size:.82rem}.azmico-feature small{margin-top:2px;color:rgba(255,255,255,.66);font-size:.68rem}
.azmico-login-form-panel{display:flex;flex-direction:column;justify-content:center;padding:56px 54px}.azmico-login-form-head{margin-bottom:28px}.azmico-login-form-head h2{font-size:1.55rem;font-weight:900;margin-bottom:8px}.azmico-login-form-head p{color:#7b8498;margin:0;font-size:.82rem}.azmico-login-mobile-brand{display:none;font-weight:900;letter-spacing:.12em;color:#3554a5;margin-bottom:18px;direction:ltr;text-align:left}
.azmico-login-form .form-label{font-size:.78rem;font-weight:700}.azmico-login-form .form-control{border-radius:13px;border-color:#dfe5ee;font-size:.86rem;padding:.75rem .9rem}.azmico-login-form .form-control:focus{border-color:#5672c9;box-shadow:0 0 0 .2rem rgba(86,114,201,.12)}
.azmico-captcha-row{display:grid;grid-template-columns:minmax(100px,1fr) 150px 46px;gap:8px;align-items:stretch}.azmico-captcha-image-wrap{height:50px;border:1px solid #dfe5ee;border-radius:12px;overflow:hidden;background:#f8f9fa;display:grid;place-items:center}.azmico-captcha-image-wrap img{width:150px;height:48px;display:block}.azmico-captcha-refresh{border-radius:12px;font-size:1.25rem;padding:0}.azmico-login-submit{border-radius:13px;font-weight:800;padding:.78rem 1rem}
@media(max-width:991px){.azmico-login-shell{grid-template-columns:1fr;max-width:620px;min-height:0}.azmico-login-brand-panel{padding:34px}.azmico-login-intro{margin:38px 0 30px}.azmico-login-intro h1{font-size:1.55rem}.azmico-login-form-panel{padding:42px 36px}}
@media(max-width:767px){
.azmico-login-shell{margin:4px auto 28px;border-radius:20px;overflow:hidden}
.azmico-login-brand-panel{display:flex;padding:24px 20px 22px;gap:20px;justify-content:flex-start}
.azmico-login-brand-panel:before{width:260px;height:260px;left:-155px;bottom:-165px}.azmico-login-brand-panel:after{width:190px;height:190px;right:-95px;top:-90px}
.azmico-login-brand-top{gap:11px}.azmico-logo-mark{width:44px;height:44px;border-radius:13px;font-size:.92rem}.azmico-wordmark{font-size:1.15rem}.azmico-expansion{max-width:280px;font-size:.6rem;line-height:1.45}
.azmico-login-intro{margin:0}.azmico-eyebrow{font-size:.68rem;padding:6px 9px}.azmico-login-intro h1{font-size:1.2rem;line-height:1.65;margin:12px 0 7px}.azmico-login-intro p{font-size:.76rem;line-height:1.85;color:rgba(255,255,255,.78)}
.azmico-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.azmico-feature{min-width:0;display:block;text-align:center;padding:10px 6px;border-radius:12px}.azmico-feature>span{width:30px;height:30px;margin:0 auto 6px;border-radius:9px}.azmico-feature strong{font-size:.72rem}.azmico-feature small{font-size:.58rem;line-height:1.45;margin-top:3px}
.azmico-login-form-panel{padding:30px 22px 34px}.azmico-login-mobile-brand{display:none}.azmico-login-form-head{margin-bottom:24px}.azmico-captcha-row{grid-template-columns:1fr 46px}.azmico-captcha-image-wrap{grid-column:1 / -1;grid-row:2}.azmico-captcha-refresh{grid-column:2;grid-row:1}.azmico-login-form-head h2{font-size:1.35rem}
}
@media(max-width:420px){
.azmico-login-brand-panel{padding:21px 16px 19px;gap:17px}.azmico-expansion{max-width:235px;font-size:.55rem}.azmico-login-intro h1{font-size:1.08rem}.azmico-login-intro p{font-size:.72rem}.azmico-feature small{display:none}.azmico-feature{padding:9px 5px}.azmico-login-form-panel{padding:27px 17px 31px}
}

/* AZMICO brand refresh + public SEO content */
.brand-mark-image{background:#fff!important;padding:5px;overflow:hidden}
.brand-mark-image img{display:block;width:100%;height:100%;object-fit:contain}
.public-brand-logo{display:block;width:min(285px,62vw);height:auto}
.azmico-logo-mark{background:rgba(255,255,255,.98)!important;padding:5px;overflow:hidden;box-shadow:0 8px 22px rgba(4,18,45,.2)}
.azmico-logo-mark img{display:block;width:100%;height:100%;object-fit:contain}

.azmico-public-overview{max-width:1120px;margin:0 auto 42px;padding:34px;border:1px solid #e4e9f2;border-radius:26px;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);box-shadow:0 18px 55px rgba(28,45,82,.07)}
.azmico-overview-heading{max-width:820px;margin:0 auto 26px;text-align:center}
.azmico-overview-kicker{display:inline-flex;direction:ltr;padding:6px 11px;border-radius:999px;background:#eef6ff;color:#1769aa;font-size:.7rem;font-weight:800;letter-spacing:.04em}
.azmico-overview-heading h2{margin:14px 0 10px;color:#14284b;font-size:1.55rem;line-height:1.65;font-weight:900}
.azmico-overview-heading p{margin:0;color:#64748b;font-size:.84rem;line-height:2}
.azmico-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.azmico-overview-grid article{min-width:0;padding:20px 18px;border:1px solid #e7edf5;border-radius:18px;background:#fff;box-shadow:0 9px 24px rgba(32,55,95,.05)}
.azmico-overview-icon{width:40px;height:40px;display:grid;place-items:center;margin-bottom:12px;border-radius:12px;background:linear-gradient(145deg,#e9f7ff,#eaf0ff);color:#1577ba;font-size:1.05rem;font-weight:900}
.azmico-overview-grid h3{margin:0 0 8px;color:#20375d;font-size:.9rem;font-weight:900;line-height:1.7}
.azmico-overview-grid p{margin:0;color:#728096;font-size:.73rem;line-height:1.9}
.azmico-faq{display:grid;grid-template-columns:1fr;gap:9px;margin-top:22px}
.azmico-faq details{border:1px solid #e4eaf3;border-radius:14px;background:#fff;padding:0 16px}
.azmico-faq summary{cursor:pointer;list-style:none;padding:14px 0;color:#243a5d;font-size:.8rem;font-weight:800}
.azmico-faq summary::-webkit-details-marker{display:none}
.azmico-faq summary:before{content:"+";display:inline-grid;place-items:center;width:24px;height:24px;margin-left:8px;border-radius:8px;background:#edf5ff;color:#1479bd;font-size:1rem;vertical-align:middle}
.azmico-faq details[open] summary:before{content:"−"}
.azmico-faq p{margin:0;padding:0 32px 14px 0;color:#6c7a8e;font-size:.75rem;line-height:1.9}

@media(max-width:991px){
  .azmico-public-overview{max-width:620px;padding:28px 24px;border-radius:22px}
  .azmico-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .public-header .container{padding-top:10px!important;padding-bottom:10px!important}
  .public-brand-logo{width:min(245px,72vw)}
  .azmico-public-overview{margin-top:0;margin-bottom:28px;padding:22px 17px;border-radius:18px}
  .azmico-overview-heading{text-align:right;margin-bottom:19px}
  .azmico-overview-kicker{font-size:.59rem}
  .azmico-overview-heading h2{font-size:1.12rem;margin-top:11px}
  .azmico-overview-heading p{font-size:.73rem;line-height:1.85}
  .azmico-overview-grid{grid-template-columns:1fr;gap:10px}
  .azmico-overview-grid article{padding:16px;border-radius:15px}
  .azmico-overview-grid h3{font-size:.82rem}
  .azmico-overview-grid p{font-size:.69rem}
  .azmico-faq summary{font-size:.73rem;line-height:1.7}
  .azmico-faq p{padding-right:0;font-size:.69rem}
}

/* Persian AZMICO logo integration */
.azmico-login-brand-top-fa{display:block!important;direction:rtl!important;text-align:center!important}
.azmico-login-fa-logo{display:block;width:min(100%,320px);height:auto;max-height:130px;object-fit:contain;margin:0 auto;border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.14)}
.public-brand-logo-fa{width:auto!important;height:78px!important;max-width:min(310px,70vw);object-fit:contain;border-radius:14px;background:#03101b;box-shadow:0 8px 24px rgba(9,32,62,.13)}
.azmico-overview-kicker{direction:rtl;letter-spacing:0}
@media(max-width:991px){.azmico-login-fa-logo{max-height:115px}}
@media(max-width:767px){.azmico-login-fa-logo{max-height:95px;border-radius:12px}.public-brand-logo-fa{height:62px!important;max-width:62vw}}
@media(max-width:420px){.azmico-login-fa-logo{max-height:82px}.public-brand-logo-fa{height:54px!important}}

/* =========================================================
   AZMICO LOGIN — FINAL FULL-SCREEN RESPONSIVE OVERRIDES
   ========================================================= */
.public-login-main{
    width:100%;
    flex:1 0 auto;
    padding:clamp(14px,2vw,30px);
    background:
        radial-gradient(circle at 12% 8%,rgba(31,133,255,.09),transparent 27%),
        radial-gradient(circle at 88% 20%,rgba(22,188,157,.08),transparent 25%),
        #f5f8fc;
}

.public-login-main .azmico-login-shell{
    width:min(100%,1440px);
    max-width:1440px;
    min-height:calc(100svh - 118px);
    margin:0 auto 30px;
    grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
    border-radius:30px;
}

.public-login-main .azmico-login-brand-panel{
    padding:clamp(34px,4vw,62px);
    gap:26px;
}

/* White is used only behind the logo so the mark remains readable on blue. */
.public-login-main .azmico-login-brand-top-fa{
    align-self:flex-start;
    width:min(100%,390px);
    padding:8px;
    margin:0;
    background:#fff;
    border:1px solid rgba(255,255,255,.82);
    border-radius:17px;
    box-shadow:0 12px 30px rgba(3,16,35,.20);
    overflow:hidden;
}

.public-login-main .azmico-login-fa-logo{
    display:block;
    width:auto;
    max-width:100%;
    height:112px;
    max-height:112px;
    margin:0 auto;
    border-radius:11px;
    box-shadow:none;
    object-fit:contain;
}

.public-login-main .azmico-login-intro{
    margin:auto 0 18px;
}

.public-login-main .azmico-login-intro h1{
    max-width:720px;
    font-size:clamp(1.7rem,2.35vw,2.45rem);
    line-height:1.65;
}

.public-login-main .azmico-login-intro p{
    max-width:720px;
    font-size:clamp(.84rem,1vw,.98rem);
}

.public-login-main .azmico-feature-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:11px;
}

.public-login-main .azmico-feature{
    min-width:0;
    align-items:flex-start;
    padding:14px 13px;
}

.public-login-main .azmico-feature small{
    line-height:1.65;
}

.public-login-main .azmico-login-form-panel{
    padding:clamp(34px,4.5vw,72px);
    background:#fff;
}

.public-login-main .azmico-login-form-panel > *{
    width:100%;
    max-width:520px;
    margin-right:auto;
    margin-left:auto;
}

.public-login-main .azmico-login-form-head h2{
    font-size:clamp(1.45rem,1.8vw,1.85rem);
}

.public-login-main .azmico-login-form .form-control{
    min-height:52px;
}

.public-login-main .azmico-login-submit{
    min-height:52px;
}

.public-login-main .azmico-public-overview{
    width:min(100%,1440px);
    max-width:1440px;
    margin:0 auto 8px;
}

@media (max-width:991px){
    .public-login-main{
        padding:16px;
    }
    .public-login-main .azmico-login-shell{
        width:min(100%,760px);
        max-width:760px;
        grid-template-columns:1fr;
        min-height:0;
        border-radius:26px;
    }
    .public-login-main .azmico-login-brand-panel{
        padding:32px 28px 28px;
    }
    .public-login-main .azmico-login-brand-top-fa{
        width:min(100%,340px);
        margin-inline:auto;
    }
    .public-login-main .azmico-login-fa-logo{
        height:100px;
        max-height:100px;
    }
    .public-login-main .azmico-login-intro{
        margin:8px 0 4px;
    }
    .public-login-main .azmico-feature-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .public-login-main .azmico-login-form-panel{
        padding:42px 34px 46px;
    }
    .public-login-main .azmico-public-overview{
        width:min(100%,760px);
        max-width:760px;
    }
}

@media (max-width:767px){
    html,body{
        max-width:100%;
        overflow-x:hidden;
    }
    .public-login-main{
        padding:0;
        background:#fff;
    }
    .public-login-main .azmico-login-shell{
        width:100%;
        max-width:none;
        min-height:100svh;
        margin:0;
        border:0;
        border-radius:0;
        box-shadow:none;
    }
    .public-login-main .azmico-login-brand-panel{
        min-height:auto;
        padding:max(20px,env(safe-area-inset-top)) 18px 24px;
        gap:18px;
        border-radius:0;
    }
    .public-login-main .azmico-login-brand-top-fa{
        width:min(100%,300px);
        padding:7px;
        border-radius:14px;
        margin-inline:auto;
        box-shadow:0 10px 24px rgba(3,16,35,.18);
    }
    .public-login-main .azmico-login-fa-logo{
        height:88px;
        max-height:88px;
        border-radius:9px;
    }
    .public-login-main .azmico-login-intro{
        margin:0;
        text-align:right;
    }
    .public-login-main .azmico-eyebrow{
        font-size:.7rem;
    }
    .public-login-main .azmico-login-intro h1{
        margin:11px 0 8px;
        font-size:clamp(1.12rem,5vw,1.42rem);
        line-height:1.7;
    }
    .public-login-main .azmico-login-intro p{
        font-size:.78rem;
        line-height:1.9;
    }
    .public-login-main .azmico-feature-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:7px;
    }
    .public-login-main .azmico-feature{
        display:block;
        text-align:center;
        padding:10px 7px;
        border-radius:12px;
    }
    .public-login-main .azmico-feature>span{
        margin:0 auto 6px;
    }
    .public-login-main .azmico-feature strong{
        font-size:.7rem;
        line-height:1.55;
    }
    .public-login-main .azmico-feature small{
        display:block;
        font-size:.58rem;
        line-height:1.55;
    }
    .public-login-main .azmico-login-form-panel{
        min-height:48svh;
        justify-content:flex-start;
        padding:30px 18px calc(34px + env(safe-area-inset-bottom));
    }
    .public-login-main .azmico-login-form-head{
        margin-bottom:22px;
    }
    .public-login-main .azmico-login-form-head h2{
        font-size:1.35rem;
    }
    .public-login-main .azmico-captcha-row{
        grid-template-columns:minmax(0,1fr) 48px;
        gap:8px;
    }
    .public-login-main .azmico-captcha-image-wrap{
        grid-column:1 / -1;
        grid-row:2;
        width:100%;
        min-height:52px;
    }
    .public-login-main .azmico-captcha-image-wrap img{
        width:auto;
        max-width:100%;
        height:48px;
    }
    .public-login-main .azmico-captcha-refresh{
        grid-column:2;
        grid-row:1;
    }
    .public-login-main .azmico-public-overview{
        width:100%;
        max-width:none;
        margin:0;
        padding:26px 18px 34px;
        border-right:0;
        border-left:0;
        border-bottom:0;
        border-radius:0;
        box-shadow:none;
    }
}

@media (max-width:520px){
    .public-login-main .azmico-login-brand-top-fa{
        width:min(100%,280px);
    }
    .public-login-main .azmico-login-fa-logo{
        height:80px;
        max-height:80px;
    }
    .public-login-main .azmico-feature-grid{
        grid-template-columns:1fr;
        gap:7px;
    }
    .public-login-main .azmico-feature{
        display:flex;
        align-items:center;
        text-align:right;
        gap:10px;
        padding:10px 12px;
    }
    .public-login-main .azmico-feature>span{
        flex:0 0 32px;
        margin:0;
    }
    .public-login-main .azmico-feature strong{
        font-size:.74rem;
    }
    .public-login-main .azmico-feature small{
        font-size:.62rem;
    }
    .public-login-main .azmico-login-form-panel{
        padding-right:15px;
        padding-left:15px;
    }
}

@media (max-width:380px){
    .public-login-main .azmico-login-brand-top-fa{
        width:min(100%,250px);
        padding:6px;
    }
    .public-login-main .azmico-login-fa-logo{
        height:72px;
        max-height:72px;
    }
    .public-login-main .azmico-login-brand-panel{
        padding-right:14px;
        padding-left:14px;
    }
    .public-login-main .azmico-login-intro h1{
        font-size:1.05rem;
    }
    .public-login-main .azmico-login-intro p{
        font-size:.72rem;
    }
    .public-login-main .azmico-login-form-panel{
        padding-right:13px;
        padding-left:13px;
    }
    .public-login-main .azmico-login-form-head p,
    .public-login-main .azmico-login-form .form-label,
    .public-login-main .form-check-label,
    .public-login-main .text-muted{
        font-size:.7rem;
    }
}

/* Chemical materials: compact, accessible photo preview and physical properties. */
.material-thumbnail-trigger { display:inline-flex; width:54px; height:54px; padding:0; border:1px solid #d9e2eb;
    background:#fff; border-radius:11px; overflow:hidden; cursor:zoom-in; align-items:center; justify-content:center;
    transition:border-color .18s ease,box-shadow .18s ease; }
.material-thumbnail-trigger:hover,.material-thumbnail-trigger:focus-visible { border-color:#3c82bd; box-shadow:0 0 0 3px rgba(60,130,189,.13); outline:none; }
.material-table-thumbnail { width:100%; height:100%; object-fit:contain; }
.material-table-no-photo { display:inline-grid; place-items:center; width:54px; height:54px; background:#f1f4f8;
    border:1px dashed #d7dee8; border-radius:11px; color:#8792a1; }
.material-image-modal { border:0; border-radius:18px; overflow:hidden; }
.material-image-modal .modal-header { border-color:#edf0f4; }
.material-image-modal .modal-body { display:grid; place-items:center; min-height:180px; padding:20px; background:#f9fafb; }
.material-modal-photo { display:block; max-width:100%; max-height:76vh; object-fit:contain; border-radius:12px; }
.material-temperature { direction:ltr; unicode-bidi:isolate; white-space:nowrap; font-variant-numeric:tabular-nums; }
@media print { .material-thumbnail-trigger { border:0; } .material-thumbnail-trigger img { max-height:48px; } }

.material-hero-trigger { border:0; background:transparent; padding:0; border-radius:14px; cursor:zoom-in; }
.material-hero-trigger:focus-visible { outline:3px solid #5a9bd5; outline-offset:3px; }

/* Phase 19: central catalog: chemical labels + reliable photo placeholders. */
.central-materials-table { min-width:1000px; table-layout:auto; }
.central-materials-table thead th { position:sticky; top:0; z-index:1; }
.central-materials-table th.central-photo-col,
.central-materials-table td.central-photo-col { width:84px; text-align:center; }
.central-materials-table th.central-name-col,
.central-materials-table td.central-name-col { min-width:245px; width:26%; }
.central-material-name { font-size:.83rem; line-height:1.65; overflow-wrap:anywhere; unicode-bidi:plaintext; }
.central-material-cas { display:inline-block; white-space:nowrap; font-variant-numeric:tabular-nums; }
.central-materials-table .material-thumbnail-trigger,
.central-materials-table .material-table-no-photo { width:58px; height:58px; flex-shrink:0; }
.central-materials-table .material-table-thumbnail { display:block; object-fit:contain; background:#fff; }
.central-materials-table .material-table-no-photo { font-size:.62rem; text-align:center; padding:5px; }
.central-materials-table tbody td { vertical-align:middle; }
.central-materials-table td.text-nowrap { min-width:135px; }
/* Phase 19: laboratory request form – progressive order and generous search width. */
.material-request-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:17px 16px; align-items:start; }
.material-request-grid>.request-scope-field { grid-column:span 2; }
.material-request-grid>.request-material-field,
.material-request-grid>.request-description-field,
.material-request-grid>.field-span-full { grid-column:1/-1; }
.material-request-grid>.request-conversion-field,
.material-request-grid>.request-quantity-field { grid-column:span 3; }
.material-request-grid .searchable-combobox-menu { max-height:260px; }
.material-request-grid .searchable-option { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; }
.material-request-grid .searchable-option strong { direction:ltr; unicode-bidi:isolate; text-align:left; white-space:normal; overflow-wrap:anywhere; font-size:.77rem; }
.material-request-grid .searchable-option small { font-size:.7rem; }
.material-request-grid .searchable-combobox-input { min-height:46px; }
/* Phase 19: purchase invoice: searchable, bounded popover (replaces giant native dropdown). */
.material-invoice-table { min-width:1040px; }
.material-invoice-table th:first-child { min-width:340px; }
.material-invoice-table td { vertical-align:top; }
.material-invoice-table input[type=number] { min-width:100px; }
.invoice-material-picker { position:relative; width:100%; min-width:305px; }
.invoice-material-picker .material-select { display:block; margin-top:6px; direction:ltr; text-align:left; }
.invoice-material-picker .material-search { direction:auto; text-align:right; font-size:.76rem; }
.invoice-material-picker .material-search-status { display:block; margin-top:6px; }
.invoice-material-picker.enhanced .material-select { position:absolute; width:1px; height:1px; padding:0; border:0; opacity:0; pointer-events:none; }
.invoice-material-results { display:none; position:absolute; top:calc(100% + 2px); right:0; left:0; z-index:1065; max-height:265px; overflow:auto; padding:6px; border-radius:12px; background:#fff; border:1px solid #dbe4f2; box-shadow:0 12px 32px #122b4d2b; }
.invoice-material-picker.open .invoice-material-results { display:block; }
.invoice-material-option { display:flex; width:100%; align-items:center; gap:10px; padding:10px; text-align:right; border:0; border-radius:8px; background:#fff; cursor:pointer; }
.invoice-material-option:hover,.invoice-material-option:focus-visible { background:#edf3ff; outline:none; }
.invoice-material-option .invoice-material-name { direction:ltr; unicode-bidi:isolate; text-align:left; flex:1; font-size:.78rem; overflow-wrap:anywhere; }
.invoice-material-option small { direction:ltr; unicode-bidi:isolate; color:#60718c; font-size:.68rem; flex-shrink:0; }
.invoice-material-empty { padding:13px; color:#6b788f; font-size:.75rem; }
@media (max-width:900px) { .material-request-grid>.request-scope-field { grid-column:span 3; } }
@media (max-width:650px) {
  .material-request-grid>.request-scope-field,
  .material-request-grid>.request-conversion-field,
  .material-request-grid>.request-quantity-field { grid-column:1/-1; }
  .material-request-grid .searchable-option { grid-template-columns:1fr; gap:3px; }
}

/* Phase 20: invoice material picker: native fallback is simple-name-only;
   enhanced results render outside responsive-table overflow. */
.invoice-material-picker { min-width:325px; }
.invoice-material-picker .material-search { min-height:42px; direction:auto; text-align:start; font-size:.79rem; }
.invoice-material-picker.enhanced .material-select { position:absolute; width:1px; height:1px; opacity:0; clip-path:inset(50%); overflow:hidden; pointer-events:none; }
.invoice-material-results.is-portal { display:block; position:fixed; z-index:2100; direction:rtl; background:#fff; border:1px solid #d4ddeb; box-shadow:0 15px 38px #182d4b31; border-radius:12px; overflow-y:auto; padding:5px; }
.invoice-material-results.is-portal .invoice-material-option { display:flex; flex-direction:column; align-items:stretch; gap:4px; border-radius:8px; padding:10px 12px; text-align:start; }
.invoice-material-results .invoice-material-option.keyboard-active { background:#e9efff; }
.invoice-material-results .invoice-material-name { display:block; flex:none; min-width:0; width:100%; font-size:.81rem; font-weight:650; direction:auto; unicode-bidi:plaintext; text-align:start; overflow-wrap:anywhere; }
.invoice-material-results .invoice-material-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:9px; font-variant-numeric:tabular-nums; }
.invoice-material-results .invoice-material-meta small { direction:ltr; unicode-bidi:isolate; font-size:.71rem; color:#5a6880; }
.material-invoice-table .material-picker-cell { min-width:345px; }

/* Phase 21 — full-length SDS and central-catalog narrative fields (desktop + mobile). */
.azm-safety-page,.azm-material-edit{min-width:0;width:100%;}
.azm-safety-page *,.azm-material-edit *{box-sizing:border-box;}
.azm-safety-page .page-heading{display:flex;align-items:flex-start;gap:18px;justify-content:space-between;flex-wrap:wrap;}
.azm-safety-heading__text{min-width:0;flex:1 1 410px;}
.azm-safety-heading h1{font-size:clamp(1.18rem,2vw,1.65rem);line-height:1.65;overflow-wrap:anywhere;}
.azm-safety-heading h1 bdi{unicode-bidi:isolate;}
.azm-safety-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.azm-safety-tag{border:1px solid #dce5f0;background:#f8fafc;color:#465875;padding:6px 11px;border-radius:999px;font-size:.79rem;}
.azm-safety-back{white-space:normal;text-align:center;}
.azm-safety-note{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:15px 18px;margin-bottom:17px;border:1px solid #cdddf3;border-radius:16px;background:#f3f8ff;}
.azm-safety-note__symbol{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#ddeaff;color:#315ca8;font-weight:750;font-style:italic;}
.azm-safety-note>div{flex:1 1 320px;min-width:0;}
.azm-safety-note strong{font-weight:800;font-size:.88rem;color:#28476e;}
.azm-safety-note p{margin:4px 0 0;color:#51627c;line-height:1.95;font-size:.78rem;}
.azm-safety-sds-link{flex:none;max-width:100%;}
.azm-safety-editor{padding:clamp(16px,2.4vw,28px);}
.azm-safety-fieldset{min-width:0;margin:0;padding:0;border:0;}
.azm-safety-section-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:17px;}
.azm-safety-section-heading--divided{padding-top:25px;margin-top:26px;border-top:1px solid #e7ecf4;}
.azm-safety-section-heading h2{margin:4px 0 5px;font-size:1.02rem;font-weight:800;color:#253a5c;}
.azm-safety-section-heading p{margin:0;color:#708097;font-size:.76rem;line-height:1.85;}
.azm-safety-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 18px;}
.azm-safety-field{min-width:0;display:flex;flex-direction:column;gap:7px;}
.azm-safety-field--wide{grid-column:1/-1;}
.azm-safety-field>label,.azm-safety-field__heading label{margin:0;color:#394b66;font-size:.84rem;font-weight:750;line-height:1.7;}
.azm-safety-field__heading,.material-reference-field__heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px 10px;}
.material-text-count{font-size:.7rem;color:#748199;white-space:nowrap;font-variant-numeric:tabular-nums;}
.azm-safety-page .form-control,.azm-material-edit .form-control{width:100%;max-width:100%;font-size:.88rem;padding:12px 14px;border:1px solid #d7e0ee;border-radius:12px;line-height:1.95;background:#fff;color:#263852;min-width:0;}
.azm-safety-page .form-control:focus,.azm-material-edit .form-control:focus{outline:none;border-color:#668bd4;box-shadow:0 0 0 3px #4a7ace21 !important;}
.azm-grow-textarea{display:block;width:100%;max-width:100%;min-height:152px;resize:vertical;overflow:auto;overflow-wrap:anywhere;white-space:pre-wrap;line-height:2 !important;tab-size:4;}
.azm-safety-fields .azm-grow-textarea{min-height:154px;}
.material-reference-field{min-width:0;}
.material-reference-field .azm-grow-textarea{min-height:224px;}
.azm-safety-page input[type=url]{text-align:left;overflow:hidden;text-overflow:ellipsis;}
.azm-safety-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:28px;padding-top:22px;border-top:1px solid #e7ecf4;}
.azm-safety-actions span{font-size:.76rem;color:#6e7d92;line-height:1.8;}
.azm-safety-actions .btn{min-height:45px;padding:10px 24px;font-size:.86rem;}
.azm-safety-stock{margin-top:17px;min-width:0;}
.azm-safety-stock-table{margin-bottom:0;}
.azm-safety-stock-table th,.azm-safety-stock-table td{padding:11px 14px;vertical-align:middle;overflow-wrap:anywhere;}
.azm-safety-stock-state{display:inline-block;border-radius:999px;padding:6px 10px;background:#eff6ff;color:#28588b;font-size:.76rem;}
.azm-safety-stock-state.is-low{background:#fff1ef;color:#b53a33;}
.azm-material-description{white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;line-height:2.05;max-width:100%;}
#materialRules{white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;line-height:2;max-width:100%;}
@media(max-width:760px){
  .azm-safety-page .page-heading{gap:11px;}
  .azm-safety-heading__text{flex-basis:100%;}
  .azm-safety-back{width:100%;}
  .azm-safety-fields{grid-template-columns:minmax(0,1fr);gap:16px;}
  .azm-safety-field--wide{grid-column:auto;}
  .azm-safety-note{align-items:flex-start;padding:14px;}
  .azm-safety-note>div{flex:1 1 calc(100% - 46px);}
  .azm-safety-sds-link{width:100%;}
  .azm-safety-editor{padding:15px;}
  .azm-safety-section-heading--divided{padding-top:22px;margin-top:24px;}
  .azm-safety-page .form-control,.azm-material-edit .form-control{font-size:16px;min-height:46px;}
  .azm-safety-page .azm-grow-textarea{min-height:172px;}
  .material-reference-field .azm-grow-textarea{min-height:225px;}
  .azm-safety-actions{flex-direction:column;align-items:stretch;}
  .azm-safety-actions .btn{width:100%;}
  .azm-safety-stock .table-responsive{overflow:visible;}
  .azm-safety-stock-table,.azm-safety-stock-table tbody,.azm-safety-stock-table tr,.azm-safety-stock-table td{display:block;width:100%;}
  .azm-safety-stock-table thead{display:none;}
  .azm-safety-stock-table tr{margin-bottom:12px;border:1px solid #e0e8f2;border-radius:12px;padding:7px 12px;background:#fbfdff;}
  .azm-safety-stock-table td{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:9px 0 !important;border-bottom:1px dashed #e4eaf2 !important;}
  .azm-safety-stock-table td:last-child{border-bottom:0 !important;}
  .azm-safety-stock-table td:before{content:attr(data-label);color:#6a778d;flex:0 0 38%;font-size:.75rem;}
}
@media(max-width:420px){
  .azm-safety-editor{padding:12px;}
  .azm-safety-section-heading h2{font-size:.95rem;}
  .azm-safety-page .azm-safety-tag{font-size:.71rem;padding:5px 8px;}
  .azm-safety-stock-table td{flex-wrap:wrap;}
}

/* Phase 22: safety page navigation and accessible long-text scrolling. */
.azm-safety-page { min-width:0; }
.azm-safety-quicknav {
  position:sticky; top:76px; z-index:950; display:flex; align-items:center;
  gap:8px; max-width:100%; min-width:0; margin:12px 0 18px;
  overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; padding:10px; border:1px solid #dce4ef;
  border-radius:13px; background:rgba(255,255,255,.97);
  box-shadow:0 5px 18px rgba(29,49,83,.06);
}
.azm-safety-quicknav a {
  display:inline-flex; align-items:center; flex:none; padding:9px 13px;
  border-radius:10px; background:#f4f7fc; color:#344a70;
  font-size:.79rem; font-weight:700; line-height:1.4;
  text-decoration:none; white-space:nowrap;
}
.azm-safety-quicknav a:focus-visible,.azm-safety-quicknav a:hover {
  background:#e8efff; color:#214c9e; outline:2px solid #7295d5; outline-offset:1px;
}
.azm-safety-page [id^="azm-safety-"] { scroll-margin-top:160px; }
.azm-safety-page textarea.azm-grow-textarea {
  display:block; width:100%; min-width:0;
  overflow-x:hidden; overflow-y:auto;
  resize:vertical; scrollbar-gutter:stable;
  overscroll-behavior-y:auto;
  touch-action:pan-y;
}
.azm-safety-expand-button {
  align-self:flex-start; border:1px solid #d5e0f0; background:#f5f9ff;
  color:#305aa1; border-radius:9px; padding:7px 12px; min-height:35px;
  font:inherit; font-size:.77rem; font-weight:750; cursor:pointer;
  margin-bottom:3px;
}
.azm-safety-expand-button:focus-visible { outline:3px solid #8dafeb; outline-offset:2px; }
.azm-safety-expand-button[hidden] { display:none !important; }
.azm-safety-return-top {
  display:inline-flex; margin:16px 0 8px; padding:9px 14px;
  background:#edf3ff; border:1px solid #d9e5ff; border-radius:12px;
  color:#2858a1; text-decoration:none; font-size:.8rem; font-weight:750;
}
.azm-safety-page textarea.azm-grow-textarea:focus-visible { scrollbar-color:#8facdc #edf2fa; }
@media(max-width:760px) {
  .azm-safety-quicknav { top:66px; gap:6px; padding:7px; border-radius:11px; }
  .azm-safety-quicknav a { padding:9px 11px; font-size:.74rem; }
  .azm-safety-page [id^="azm-safety-"] { scroll-margin-top:132px; }
  .azm-safety-page textarea.azm-grow-textarea { min-height:160px; }
  .azm-safety-expand-button { width:100%; min-height:42px; text-align:center; }
}
@media(prefers-reduced-motion: no-preference) {
  .azm-safety-page { scroll-behavior:smooth; }
}

/* Phase 26: compact eight-column catalog; full properties live in the details page. */
.central-materials-table { width:100%; min-width:895px; table-layout:auto; }
.central-materials-table th, .central-materials-table td { white-space:nowrap; }
.central-materials-table .central-name-col { min-width:205px; width:28%; }
.central-materials-table td.central-name-col { white-space:normal; }
.central-materials-table .central-actions-col { width:142px; }
.central-materials-table tbody tr:hover { background:#f3f7fd; }
.azm-material-export-dialog { border:1px solid #e2e8f0; background:#fff; border-radius:18px; padding:24px; width:min(93vw,530px); box-shadow:0 28px 85px #0f172a40; color:#17233b; direction:rtl; }
.azm-material-export-dialog::backdrop { background:#0a1938aa; backdrop-filter:blur(3px); }
.azm-material-export-top { padding-bottom:16px; margin-bottom:14px; border-bottom:1px solid #e2e8f0; }
.azm-material-export-choice { display:flex; align-items:flex-start; gap:12px; padding:16px; border:1px solid #cbd5e1; border-radius:12px; background:#f8fafc; cursor:pointer; }
.azm-material-export-choice input { flex:0 0 auto; margin-top:5px; }
.azm-material-export-choice small { display:block; margin-top:7px; color:#64748b; line-height:1.9; }

/* Phase 30: all material detail/safety text is anchored on the right.
   Bidi isolates still keep CAS, Latin names and formula characters in order. */
.azm-material-details,
.azm-safety-page,
.azm-material-edit {
    text-align: right;
}
.azm-material-details *,
.azm-safety-page *,
.azm-material-edit * {
    text-align: right !important;
}

/* The material image caption is rendered outside the page wrapper. */
[data-material-modal-title] {
    text-align: right !important;
}

/* Phase 31: catalog headers and values use the same cell alignment.
   Latin writing direction belongs to the value, never to the table cell. */
.central-materials-table {
    direction: rtl;
}
.central-materials-table thead th,
.central-materials-table tbody td {
    text-align: right;
    vertical-align: middle;
}
.central-materials-table .central-name-col,
.central-materials-table .central-material-name,
.central-materials-table .central-material-id {
    text-align: right;
}
.central-materials-table .central-material-id {
    display: block;
    margin-top: 4px;
    unicode-bidi: isolate;
}
.central-materials-table td.material-temperature {
    direction: rtl;
}
.central-materials-table .central-material-measure,
.central-materials-table .central-material-cas {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
}
.central-materials-table .central-name-col .chemical-token {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
.central-materials-table .central-select-col {
    width: 44px;
    text-align: center;
}
.central-materials-table .central-photo-col {
    width: 84px;
    text-align: center;
}
.central-material-actions {
    display: flex;
    direction: rtl;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Phase 35: selected-material catalog workflow; preserve existing RTL table rules. */
#downloadSelectedMaterials:disabled { opacity:.55; cursor:not-allowed; }
.central-materials-table .central-select-col .form-check-input { cursor:pointer; }
#selectedMaterialCount { text-align:right; }

/* Phase 37: show the saved Persian material name directly below the primary name.
   Keep both text lines RTL-aligned; isolate Latin chemical names and material IDs. */
.central-materials-table .central-material-persian-name {
    display: block;
    direction: rtl;
    text-align: right;
    unicode-bidi: isolate;
    margin-top: 2px;
    color: #41566e;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.65;
    white-space: normal;
    overflow-wrap: anywhere;
}


/* Phase 38: accessible, RTL material image drop, paste and preview. */
.material-image-upload { max-width:100%; border:1px solid #dae3ef; border-radius:15px; padding:16px; background:#fbfcff; direction:rtl; }
.material-image-upload__input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.material-image-upload__dropzone { border:2px dashed #96acc9; border-radius:13px; min-height:180px; padding:18px;
 display:flex; align-items:center; justify-content:center; flex-direction:column; background:#f3f7fd; cursor:pointer; transition:border-color .18s, background .18s; }
.material-image-upload__dropzone:hover, .material-image-upload__dropzone:focus-visible { border-color:#315b8d; background:#ebf3fd; outline:3px solid #406fab35; outline-offset:1px; }
.material-image-upload__dropzone.is-dragover { border-color:#12786c; background:#e4f5f0; border-style:solid; }
.material-image-upload__placeholder { display:flex; align-items:center; flex-direction:column; gap:6px; color:#455d7a; max-width:100%; }
.azm-material-edit .material-image-upload__placeholder * { text-align:center !important; }
.material-image-upload__placeholder strong { font-size:1rem; color:#243c5c; }
.material-image-upload__placeholder span:last-child { font-size:.84rem; line-height:1.9; }
.material-image-upload__symbol { font-size:2.7rem; line-height:1; color:#54759f; }
.material-image-upload__preview { max-width:100%; max-height:250px; width:auto; height:auto; object-fit:contain; border-radius:9px; box-shadow:0 4px 20px #1b30571c; }
.material-image-upload__preview[hidden], .material-image-upload__placeholder[hidden],
.material-image-upload [hidden] { display:none !important; }
.material-image-upload__tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.material-image-upload__status { margin-top:8px; color:#485b73; font-size:.84rem; overflow-wrap:anywhere; }
.material-image-upload__status.is-error { color:#a52531; font-weight:600; }
@media (max-width:560px) { .material-image-upload {padding:12px;} .material-image-upload__dropzone {min-height:155px;padding:13px;} }