:root {
    --bg: #f3f6fb;
    --surface: #ffffff;
    --surface-soft: #f8fbff;
    --text: #172033;
    --muted: #697386;
    --border: #e4e9f2;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-soft: #eaf1ff;
    --secondary: #0f172a;
    --success-bg: #ecfdf3;
    --success: #047857;
    --error-bg: #fef2f2;
    --error: #b91c1c;
    --warning: #f59e0b;
    --shadow: 0 22px 70px rgba(15, 23, 42, .10);
    --soft-shadow: 0 14px 42px rgba(15, 23, 42, .07);
    --radius: 24px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Cairo', Tahoma, Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.08), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, var(--bg) 45%, #eef3fb 100%);
}

a { color: inherit; text-decoration: none; }

input, select, textarea, button {
    font: inherit;
}

button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-inline-end: 4px;
}

.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px;
    background:
        radial-gradient(circle at top right, rgba(37,99,235,.25), transparent 35%),
        radial-gradient(circle at bottom left, rgba(52,211,153,.16), transparent 35%),
        linear-gradient(135deg, #eef4ff 0%, #f7f9fc 45%, #ffffff 100%);
}

.login-shell {
    width: min(1120px, 100%);
    min-height: 650px;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    border-radius: 36px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.75);
}

.login-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #0f172a, #1d4ed8 68%, #38bdf8);
    color: white;
    padding: 56px;
    display: flex;
    align-items: center;
}

.hero-pattern {
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.32) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.32) 1px, transparent 1px);
    background-size: 46px 46px;
    transform: rotate(-5deg) scale(1.15);
}

.hero-content { position: relative; max-width: 560px; }

.brand-badge, .brand-logo {
    width: 76px;
    height: 76px;
    border-radius: 24px;
    background: rgba(255,255,255,.14);
    display: grid;
    place-items: center;
    font-weight: 900;
    letter-spacing: 1px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.25);
}

.brand-badge img, .brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.login-hero h1 {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.15;
    margin: 28px 0 18px;
}

.login-hero p {
    font-size: 18px;
    color: rgba(255,255,255,.84);
    line-height: 1.9;
    max-width: 520px;
}

.hero-features {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.hero-features span {
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.20);
    font-weight: 700;
}

.login-card {
    padding: 56px 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-card-header h2, .panel h2, .welcome-card h2 {
    margin: 0 0 8px;
    font-size: 28px;
    letter-spacing: -.5px;
}

.login-card-header p, .topbar p, .welcome-card p, .panel-header p, .config-hero p {
    margin: 0;
    color: var(--muted);
    line-height: 1.8;
}

.form-stack { display: grid; gap: 18px; margin-top: 24px; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.form-grid.two-cols { grid-template-columns: repeat(2, 1fr); }
.full-row { grid-column: 1 / -1; }

label span, .permissions-box > span, .switch-field > span {
    display: block;
    margin-bottom: 8px;
    color: #344054;
    font-weight: 800;
}

input[type="text"], input[type="password"], input[type="file"], select, textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    color: var(--text);
    padding: 14px 16px;
    outline: none;
    transition: .2s ease;
    min-height: 52px;
}

textarea { resize: vertical; }

input:focus, select:focus, textarea:focus {
    border-color: rgba(37,99,235,.62);
    box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}

.btn {
    border: 0;
    border-radius: 16px;
    padding: 13px 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 900;
    transition: .18s ease;
    white-space: nowrap;
}

.btn-primary { background: linear-gradient(135deg, var(--primary), #1d4ed8); color: #fff; box-shadow: 0 12px 26px rgba(37,99,235,.22); }
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-dark), #1e40af); transform: translateY(-1px); }
.btn-secondary { background: #eef2ff; color: #1d4ed8; border: 1px solid #dbe4ff; }
.btn-secondary:hover { background: #dbeafe; }
.btn-light { background: #fff; border: 1px solid var(--border); color: #111827; }
.btn-light:hover { background: #f8fafc; }
.btn-full { width: 100%; }
.btn-sm { padding: 9px 12px; border-radius: 12px; font-size: 14px; }

.login-note {
    margin-top: 24px;
    padding: 16px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
}

.alert {
    padding: 14px 18px;
    border-radius: 16px;
    margin: 16px 0;
    font-weight: 800;
}
.alert-success { background: var(--success-bg); color: var(--success); border: 1px solid #bbf7d0; }
.alert-error { background: var(--error-bg); color: var(--error); border: 1px solid #fecaca; }

.app-body {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 292px 1fr;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 24px;
    background:
        radial-gradient(circle at top right, rgba(59,130,246,.26), transparent 30%),
        linear-gradient(180deg, #0f172a 0%, #111c35 100%);
    color: white;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.sidebar-brand strong { display: block; line-height: 1.5; }
.sidebar-brand small, .sidebar-user small { display: block; color: rgba(255,255,255,.58); margin-top: 3px; }
.brand-logo { width: 52px; height: 52px; border-radius: 18px; background: rgba(255,255,255,.10); }

.side-nav { display: grid; gap: 10px; }
.side-nav a {
    padding: 14px 16px;
    border-radius: 16px;
    color: rgba(255,255,255,.75);
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.side-nav .nav-text { flex: 1; }
.side-nav a.active, .side-nav a:hover { background: rgba(255,255,255,.12); color: white; }
.side-nav a.disabled { opacity: .55; cursor: not-allowed; }
.side-nav a em {
    font-size: 12px;
    color: #93c5fd;
    font-style: normal;
    margin-inline-start: auto;
}

.sidebar-user {
    margin-top: auto;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255,255,255,.10);
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #60a5fa, #34d399);
    color: white;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
}
.avatar.large { width: 52px; height: 52px; }
.avatar.small { width: 36px; height: 36px; font-size: 14px; }

.main-content {
    padding: 30px;
    overflow: auto;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.topbar h1 { margin: 0 0 6px; font-size: 34px; letter-spacing: -.8px; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}

.stat-card, .panel, .welcome-card {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(226,232,240,.95);
    border-radius: var(--radius);
    box-shadow: var(--soft-shadow);
}

.stat-card { padding: 24px; }
.stat-card span { color: var(--muted); font-weight: 800; }
.stat-card strong { display: block; font-size: 42px; margin-top: 8px; }

.welcome-card {
    padding: 34px;
    min-height: 260px;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at left top, rgba(37,99,235,.16), transparent 32%),
        #fff;
}
.welcome-card p { max-width: 760px; margin: 14px 0 24px; }

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 22px;
}

.panel { padding: 24px; margin-bottom: 22px; }
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}
.clean-header { align-items: center; margin-bottom: 0; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 8px;
}

.config-hero {
    background:
        radial-gradient(circle at left top, rgba(37,99,235,.18), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.config-hero h2 { font-size: 32px; }
.hero-counter {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    min-width: 320px;
}
.hero-counter div {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px 16px;
    text-align: center;
}
.hero-counter strong { display: block; font-size: 26px; color: var(--primary); }
.hero-counter span { color: var(--muted); font-weight: 800; }

.config-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}
.config-tabs a {
    min-height: 66px;
    background: rgba(255,255,255,.82);
    border: 1px solid var(--border);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #475569;
    font-weight: 900;
    box-shadow: 0 10px 26px rgba(15,23,42,.04);
    transition: .18s ease;
}
.config-tabs a:hover { transform: translateY(-1px); border-color: #c7d2fe; background: #fff; }
.config-tabs a.active {
    background: linear-gradient(135deg, var(--primary), #1d4ed8);
    color: white;
    border-color: transparent;
    box-shadow: 0 14px 36px rgba(37,99,235,.22);
}

.soft-panel {
    background: linear-gradient(135deg, #fff, #f8fbff);
}
.form-panel {
    border-color: #dbeafe;
    background:
        linear-gradient(180deg, rgba(239,246,255,.72), rgba(255,255,255,.95));
}
.comfortable-form { gap: 20px; }

.logo-preview {
    min-height: 132px;
    display: grid;
    place-items: center;
    border: 1px dashed #bfdbfe;
    background: #f8fbff;
    border-radius: 20px;
    color: var(--muted);
    margin-bottom: 18px;
}
.logo-preview.large-preview { min-height: 260px; }
.logo-preview img { max-width: 220px; max-height: 110px; object-fit: contain; }
.large-preview img { max-width: 340px; max-height: 190px; }

.permissions-box {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #f8fafc;
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.check-card {
    padding: 14px;
    border: 1px solid var(--border);
    background: white;
    border-radius: 16px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 10px;
    align-items: start;
    cursor: pointer;
    transition: .18s ease;
}
.check-card:hover { border-color: #bfdbfe; box-shadow: 0 10px 24px rgba(37,99,235,.07); }
.check-card strong { grid-column: 2; }
.check-card small { grid-column: 2; color: var(--muted); line-height: 1.5; }

.actions-row { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td {
    text-align: right;
    padding: 15px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
th { color: #475569; font-size: 14px; background: #f8fafc; font-weight: 900; }
.modern-table table { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.modern-table tr:hover td { background: #fbfdff; }
.empty { color: var(--muted); text-align: center; padding: 30px; }

.person-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 13px;
}
.status-pill.on { background: #ecfdf3; color: #047857; }
.status-pill.off { background: #f1f5f9; color: #64748b; }

code {
    direction: ltr;
    display: inline-block;
    color: #1d4ed8;
    background: #eef2ff;
    padding: 5px 9px;
    border-radius: 10px;
}

.permission-list { display: grid; gap: 12px; }
.permission-list div {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    background: #f8fafc;
}
.pretty-list div { background: #fff; }
.permission-list strong, .permission-list small, .permission-list code { display: block; }
.permission-list small { color: var(--muted); margin: 8px 0; line-height: 1.6; }
.permission-list code { text-align: left; }

.users-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.user-card {
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 18px;
    background: #fff;
}
.user-card-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
}
.user-card h3 { margin: 0 0 4px; }
.user-card p { margin: 0; color: var(--muted); }

.switch, .toggle-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    min-height: 52px;
}
.switch span, .toggle-line strong { margin: 0; font-weight: 800; }
.switch-field { display: block; }

.meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 16px 0;
    color: var(--muted);
}
.meta-grid span {
    padding: 10px;
    border-radius: 14px;
    background: #f8fafc;
}
.meta-grid strong { color: var(--text); }

.mini-checks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.mini-checks label {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    color: #334155;
    background: #fff;
}

.users-permissions-list { display: grid; gap: 12px; }
.permission-user-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
}
.permission-user-card summary {
    cursor: pointer;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.permission-user-card[open] summary { border-bottom: 1px solid var(--border); background: #f8fafc; }
.permission-form { padding: 14px; }
.muted-text { color: var(--muted); font-weight: 700; }
.help-text { color: var(--muted); margin: 0; line-height: 1.7; }

@media (max-width: 1180px) {
    .form-grid, .check-grid { grid-template-columns: repeat(2, 1fr); }
    .config-hero { align-items: flex-start; flex-direction: column; }
    .hero-counter { width: 100%; }
}

@media (max-width: 980px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-hero { min-height: 360px; }
    .app-body { grid-template-columns: 1fr; }
    .sidebar { position: relative; height: auto; }
    .stats-grid, .grid-2, .users-list, .form-grid, .form-grid.two-cols, .check-grid, .config-tabs { grid-template-columns: 1fr; }
    .topbar { align-items: flex-start; flex-direction: column; }
    .hero-counter { grid-template-columns: 1fr; min-width: 0; }
    .panel-header, .clean-header { flex-direction: column; align-items: stretch; }
}

@media (max-width: 560px) {
    .login-body { padding: 12px; }
    .login-card, .login-hero { padding: 30px 22px; }
    .main-content { padding: 18px; }
    .meta-grid, .mini-checks { grid-template-columns: 1fr; }
    .login-note { flex-direction: column; }
    th, td { padding: 12px 10px; }
}

/* Purchase request screens */
.request-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background:
        radial-gradient(circle at left top, rgba(37,99,235,.14), transparent 34%),
        #fff;
}
.request-intro h2 { margin: 0 0 8px; font-size: 30px; }
.request-intro p { margin: 0; color: var(--muted); line-height: 1.8; max-width: 860px; }

.purchase-paper {
    background: #fff;
    border: 2px solid #d5d9e8;
    border-radius: 22px;
    box-shadow: 0 14px 44px rgba(15,23,42,.08);
    padding: 22px 18px 26px;
}
.purchase-title {
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 18px;
    letter-spacing: .5px;
}
.purchase-info-table,
.purchase-form-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff;
}
.purchase-info-table th,
.purchase-info-table td,
.purchase-form-table th,
.purchase-form-table td {
    border: 1.4px solid #111827;
    padding: 9px 8px;
    text-align: center;
    vertical-align: middle;
    color: #111827;
}
.purchase-info-table th,
.purchase-form-table th {
    background: #fbfbfc;
    font-weight: 900;
    font-size: 14px;
    line-height: 1.5;
}
.purchase-info-table td { min-height: 48px; }
.purchase-info-table input,
.purchase-form-table input,
.purchase-form-table textarea {
    border: 0;
    box-shadow: none;
    min-height: 38px;
    padding: 8px;
    border-radius: 8px;
    background: transparent;
    text-align: center;
}
.purchase-form-table textarea { text-align: right; line-height: 1.6; resize: vertical; }
.purchase-info-table input:focus,
.purchase-form-table input:focus,
.purchase-form-table textarea:focus {
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px #93c5fd;
}
.auto-number { color: #64748b; font-weight: 800; }
.request-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 22px 0 10px;
}
.request-table-toolbar strong { font-size: 17px; }
.purchase-table-wrap { overflow-x: auto; }
.purchase-form-table { min-width: 1100px; }
.purchase-form-table .row-number { font-weight: 900; color: var(--primary); }
.btn-icon {
    border: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    background: #fee2e2;
    color: #991b1b;
}
.request-notes { display: block; margin-top: 18px; }
.request-notes textarea { background: #f8fafc; }
.readonly-paper .purchase-info-table td,
.readonly-table td { background: #fff; font-weight: 700; }
.readonly-info code { margin: auto; }
.paper-topline { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.paper-notes {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    background: #f8fafc;
    line-height: 1.8;
}

.status-pill.pending { background: #eff6ff; color: #1d4ed8; }
.status-pill.warning { background: #fffbeb; color: #b45309; }
.status-pill.danger { background: #fef2f2; color: #b91c1c; }
.btn-warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.btn-warning:hover { background: #fde68a; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.compact-stat { padding: 18px 22px; }
.compact-stat strong { font-size: 32px; }
.schedule-stats { grid-template-columns: repeat(3, 1fr); }

.approvals-hero .approvals-counter { min-width: 240px; grid-template-columns: repeat(2, 1fr); }
.approval-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.approval-card, .empty-card {
    border: 1px solid var(--border);
    border-radius: 22px;
    background: #fff;
    padding: 18px;
    box-shadow: 0 12px 30px rgba(15,23,42,.05);
}
.empty-card { color: var(--muted); text-align: center; padding: 34px; grid-column: 1 / -1; }
.approval-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px;
    margin-bottom: 14px;
}
.approval-head h3 { margin: 10px 0 4px; font-size: 20px; }
.approval-head p { margin: 0; color: var(--muted); }
.approval-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.approval-meta span {
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    padding: 10px;
    color: var(--muted);
    line-height: 1.6;
}
.approval-meta strong { display: block; color: var(--text); margin-bottom: 4px; }
.approval-form { display: grid; gap: 12px; }
.approval-form textarea { background: #f8fafc; }
.approval-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.timeline { display: grid; gap: 16px; }
.timeline-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
}
.timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 6px var(--primary-soft);
    margin-top: 8px;
}
.timeline-item p { margin: 4px 0; color: var(--muted); }
.timeline-item small { display: block; color: #334155; line-height: 1.8; }

@media (max-width: 1180px) {
    .request-intro { align-items: stretch; flex-direction: column; }
    .approval-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
    .schedule-stats, .approval-meta { grid-template-columns: 1fr; }
    .purchase-info-table { min-width: 980px; }
}

/* v4 notifications, tracking and print helpers */
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.notification-box { position: relative; }
.notification-toggle { position: relative; }
.notif-badge, .nav-badge {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    margin-inline-start: 6px;
}
.nav-badge { margin-inline-start: auto; }
.notification-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: min(380px, 90vw);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(15,23,42,.18);
    padding: 10px;
    z-index: 30;
    display: none;
}
.show-notifications .notification-menu { display: block; }
.notification-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}
.notification-menu-head button {
    border: 0;
    background: var(--primary-soft);
    color: var(--primary-dark);
    padding: 7px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 800;
}
.notification-empty { padding: 18px; color: var(--muted); text-align: center; }
.notification-item {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 16px;
}
.notification-item:hover { background: #f8fafc; }
.notification-item span { color: #475569; line-height: 1.6; }
.notification-item small { color: var(--muted); direction: ltr; text-align: right; }
.login-alerts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.login-alert {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    align-items: center;
    padding: 15px 16px;
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: var(--soft-shadow);
}
.login-alert .icon { grid-row: span 2; font-size: 24px; }
.login-alert strong { color: #0f172a; }
.login-alert span { color: var(--muted); }
.approval-alert { background: #eff6ff; border-color: #bfdbfe; }
.request-alert { background: #ecfdf5; border-color: #bbf7d0; }
.highlight-stat { background: linear-gradient(135deg, #fff, #eef6ff); }
.purchase-info-table select {
    width: 100%;
    border: 0;
    background: transparent;
    min-height: 40px;
    text-align: center;
    font-weight: 800;
    color: #111827;
}
.purchase-info-table select:focus { outline: none; background: #eff6ff; box-shadow: inset 0 0 0 1px #93c5fd; border-radius: 8px; }
.manager-check { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 14px; padding: 10px 12px; }
.tracking-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.tracking-card {
    border: 1px solid var(--border);
    border-radius: 24px;
    background: #fff;
    padding: 18px;
    box-shadow: var(--soft-shadow);
}
.tracking-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px;
    margin-bottom: 14px;
}
.tracking-card-head h3 { margin: 10px 0 4px; }
.tracking-card-head p { margin: 0; color: var(--muted); }
.tracking-current {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    margin-bottom: 14px;
}
.tracking-current .icon { font-size: 26px; }
.tracking-current strong { display: block; margin-bottom: 4px; }
.tracking-current span { color: #334155; line-height: 1.7; }
.track-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.track-step {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 10px;
    text-align: center;
    color: var(--muted);
    background: #fff;
}
.track-step b {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    margin-bottom: 6px;
}
.track-step.done { background: #ecfdf5; border-color: #bbf7d0; color: #065f46; }
.track-step.done b { background: #16a34a; color: #fff; }
.track-step.current { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.track-step.current b { background: #2563eb; color: #fff; }
.print-current { margin-bottom: 18px; }
@media (max-width: 980px) {
    .login-alerts, .tracking-grid { grid-template-columns: 1fr; }
    .topbar-actions { width: 100%; justify-content: space-between; }
}
@media print {
    body { background: #fff !important; }
    .sidebar, .topbar, .login-alerts, .alert, .no-print, .panel:not(.purchase-paper), .actions-row.no-print { display: none !important; }
    .app-body { display: block; }
    .main-content { padding: 0; }
    .purchase-paper { box-shadow: none; border: 1px solid #111827; border-radius: 0; padding: 12px; }
    .purchase-form-table, .purchase-info-table { min-width: 0; table-layout: fixed; }
    .purchase-title { font-size: 24px; margin: 0 0 10px; }
    .purchase-info-table th, .purchase-info-table td, .purchase-form-table th, .purchase-form-table td { padding: 6px; font-size: 12px; }
}

/* v4.1: حقول تلقائية في نموذج طلب الشراء */
.readonly-field {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #0f172a;
    font-weight: 900;
    text-align: center;
}
.field-hint {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

.role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.role-badges span {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #eef2ff;
    color: #1d4ed8;
    border: 1px solid #dbe4ff;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 900;
}
.wide-card {
    grid-column: span 2;
}
.quotation-form {
    gap: 14px;
}
.quotation-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.quotation-rows {
    display: grid;
    gap: 10px;
}
.quotation-row {
    display: grid;
    grid-template-columns: 1.35fr .8fr .65fr .9fr 1.2fr 48px;
    gap: 8px;
    align-items: center;
}
.quotation-row input {
    min-height: 44px;
    border-radius: 12px;
    padding: 10px 12px;
}
.full-flow {
    grid-template-columns: repeat(9, minmax(92px, 1fr));
    overflow-x: auto;
    padding-bottom: 6px;
}
@media (max-width: 1100px) {
    .wide-card { grid-column: span 1; }
    .quotation-row { grid-template-columns: 1fr 1fr; }
    .quotation-row .btn-icon { width: 100%; }
    .full-flow { grid-template-columns: repeat(9, 120px); }
}

/* Approvals v6 tabs */
.approvals-counter-3 { min-width: 360px; grid-template-columns: repeat(3, 1fr) !important; }
.approval-tabs { grid-template-columns: repeat(3, 1fr); }
.approval-tabs a { position: relative; justify-content: center; flex-wrap: wrap; padding: 14px; }
.approval-tabs a b {
    min-width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: #eef2ff;
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 900;
}
.approval-tabs a.active b { background: rgba(255,255,255,.22); color: #fff; }
.approval-tab-panel { display: none; }
.approval-tab-panel.active { display: block; }
.tab-title-line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-end;
    margin: 8px 0 16px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff, #f8fbff);
}
.tab-title-line h3 { margin: 0; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.tab-title-line p { margin: 0; color: var(--muted); font-weight: 700; line-height: 1.7; }
.approval-badges { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.stage-badge {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    font-weight: 900;
    font-size: 12px;
    max-width: 340px;
    line-height: 1.5;
}
.approval-meta .meta-wide { grid-column: 1 / -1; }
.procurement-stage-guide {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.procurement-stage-guide span {
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1e40af;
    border-radius: 16px;
    padding: 12px;
    font-weight: 900;
    line-height: 1.7;
}
.specialist-tasks-panel { border-color: #fed7aa; background: linear-gradient(135deg, #fff, #fff7ed); }

@media (max-width: 900px) {
    .approvals-counter-3,
    .approval-tabs,
    .procurement-stage-guide { grid-template-columns: 1fr !important; min-width: 0; }
    .tab-title-line { align-items: flex-start; flex-direction: column; }
    .approval-badges { align-items: flex-start; }
    .stage-badge { max-width: 100%; }
}

.actions-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.edit-return-alert {
    margin-bottom: 18px;
    border-radius: 16px;
    padding: 12px 16px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

/* Approval permissions dropdown inside permissions */
.permission-dropdown-card {
    grid-column: 1 / -1;
    padding: 0;
    display: block;
    overflow: hidden;
}
.permission-dropdown-card summary {
    cursor: pointer;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    list-style: none;
}
.permission-dropdown-card summary::-webkit-details-marker { display: none; }
.permission-dropdown-card summary label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}
.permission-dropdown-card summary span,
.permission-dropdown-card summary strong,
.permission-dropdown-card summary small {
    display: block;
}
.permission-dropdown-card summary b {
    font-size: 12px;
    color: var(--primary);
    background: #eff6ff;
    padding: 7px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.permission-sub-list {
    border-top: 1px dashed var(--border);
    background: #f8fafc;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.permission-sub-list label {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: white;
    padding: 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
}
.permission-sub-list strong { display: block; color: var(--text); font-size: 14px; }
.permission-sub-list small { display: block; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.mini-permission-dropdown {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    grid-column: 1 / -1;
}
.mini-permission-check {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    color: #334155;
    background: #fff;
}
@media (max-width: 720px) {
    .permission-sub-list { grid-template-columns: 1fr; }
    .permission-dropdown-card summary { align-items: flex-start; flex-direction: column; }
}


/* v7 notification and purchase paper visual refinements */
.purchase-info-table tbody tr,
.purchase-form-table thead tr {
    background: rgba(37, 99, 235, 0.055);
}
.purchase-info-table tbody tr th,
.purchase-info-table tbody tr td,
.purchase-form-table thead th {
    background: rgba(239, 246, 255, 0.72);
}
.readonly-paper .purchase-info-table tbody tr th,
.readonly-paper .purchase-info-table tbody tr td,
.readonly-paper .purchase-form-table thead th {
    background: rgba(239, 246, 255, 0.72);
}
.notification-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.44);
    backdrop-filter: blur(5px);
}
.notification-modal-backdrop.is-hidden { display: none; }
.notification-modal-card {
    width: min(680px, 96vw);
    background: #ffffff;
    border: 1px solid rgba(191, 219, 254, 0.9);
    border-radius: 30px;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.25);
    padding: 26px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    animation: modalPop .22s ease-out;
}
.notification-modal-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    color: #1d4ed8;
    font-size: 30px;
}
.notification-modal-content h2 { margin: 0 0 8px; color: #0f172a; }
.notification-modal-content p { margin: 0 0 14px; color: #475569; line-height: 1.8; }
.notification-modal-list { display: grid; gap: 10px; max-height: 260px; overflow: auto; padding-inline-end: 4px; }
.notification-modal-list a {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.notification-modal-list a:hover { background: #eff6ff; border-color: #bfdbfe; }
.notification-modal-list strong { color: #0f172a; }
.notification-modal-list span { color: #475569; line-height: 1.7; }
.notification-modal-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 6px;
}
.notification-modal-actions form { margin: 0; }
@keyframes modalPop {
    from { transform: translateY(14px) scale(.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
@media (max-width: 640px) {
    .notification-modal-card { grid-template-columns: 1fr; text-align: center; }
    .notification-modal-icon { margin: auto; }
    .notification-modal-actions { justify-content: center; }
}
@media print {
    .purchase-info-table tbody tr th,
    .purchase-info-table tbody tr td,
    .purchase-form-table thead th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        background: rgba(239, 246, 255, 0.72) !important;
    }
}

/* v7 print movement and timeline status icons */
.print-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: #eff6ff;
    color: #1e40af;
    font-weight: 900;
    cursor: pointer;
}
.print-option input { width: 18px; height: 18px; accent-color: var(--primary); }
.timeline-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    font-size: 18px;
    margin-top: 0;
    box-shadow: none;
}
.timeline-icon.approved { background: #16a34a; box-shadow: 0 0 0 6px #dcfce7; }
.timeline-icon.rejected { background: #dc2626; box-shadow: 0 0 0 6px #fee2e2; }
.timeline-icon.returned { background: #d97706; box-shadow: 0 0 0 6px #fef3c7; }
.timeline-icon.quotation { background: #7c3aed; box-shadow: 0 0 0 6px #ede9fe; }
.timeline-icon.submitted { background: #2563eb; box-shadow: 0 0 0 6px #dbeafe; }
.timeline-icon.purchased { background: #059669; box-shadow: 0 0 0 6px #d1fae5; }
.timeline-icon.neutral { background: #64748b; box-shadow: 0 0 0 6px #e2e8f0; }
.timeline-status-line {
    margin: 2px 0 6px !important;
    font-size: 13px;
    color: #334155 !important;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 7px 10px;
    display: inline-block;
}
.print-history-section { display: none; margin-top: 22px; break-inside: avoid; }
.print-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: rgba(239, 246, 255, 0.85);
}
.print-history-header h3 { margin: 0; font-size: 18px; }
.print-history-header span { color: #1d4ed8; font-weight: 900; }
.print-history-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.print-history-table th,
.print-history-table td {
    border: 1px solid #111827;
    padding: 7px;
    font-size: 11px;
    line-height: 1.55;
    text-align: center;
    vertical-align: middle;
    color: #111827;
}
.print-history-table th { background: rgba(239, 246, 255, 0.85); font-weight: 900; }
.movement-print-icon {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    margin-inline-end: 4px;
}
.movement-print-icon.approved { background: #16a34a; }
.movement-print-icon.rejected { background: #dc2626; }
.movement-print-icon.returned { background: #d97706; }
.movement-print-icon.quotation { background: #7c3aed; }
.movement-print-icon.submitted { background: #2563eb; }
.movement-print-icon.purchased { background: #059669; }
.movement-print-icon.neutral { background: #64748b; }
body.print-with-history .print-history-section { display: block; }
@media print {
    .print-history-section { display: none !important; }
    body.print-with-history .print-history-section { display: block !important; }
    .print-history-header, .print-history-table th, .movement-print-icon {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* WhatsApp integration */
.whatsapp-qr-box{display:grid;place-items:center;min-height:360px;background:linear-gradient(135deg,rgba(37,211,102,.08),rgba(37,99,235,.08));border:1px dashed #cbd5e1;border-radius:24px;padding:24px;text-align:center}
.whatsapp-ready{gap:8px;place-items:center;color:#166534;background:#ecfdf5;border:1px solid #bbf7d0;border-radius:20px;padding:26px;width:100%}
.whatsapp-ready .big-icon{font-size:44px}
.whatsapp-help{display:grid;gap:8px;margin-top:16px}
.whatsapp-help code{direction:ltr;text-align:left;display:block;background:#0f172a;color:#e2e8f0;border-radius:12px;padding:10px 12px;font-size:13px}
.soft-divider{border:0;border-top:1px solid #e2e8f0;margin:22px 0}
.status-pill.danger{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.status-pill.warning{background:#fffbeb;color:#92400e;border-color:#fde68a}

/* Archive screen */
.archive-hero { background: linear-gradient(135deg, rgba(239,246,255,.9), rgba(255,255,255,.96)); }
.archive-counters { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 12px; }
.archive-tabs { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
.archive-tabs a b {
    min-width: 28px;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
}
.archive-tabs a.active b { background: rgba(255,255,255,.22); color: #fff; }
.archive-table strong { color: #0f172a; }
@media (max-width: 700px) {
    .archive-tabs { grid-template-columns: 1fr; }
    .archive-counters { grid-template-columns: 1fr; }
}

/* v7 plus: responsive, dark mode, cleaner UI */
:root[data-theme="dark"] {
    color-scheme: dark;
}
:root[data-theme="dark"] body,
:root[data-theme="dark"] .main-content {
    background: #0f172a !important;
    color: #e5e7eb !important;
}
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .notification-menu,
:root[data-theme="dark"] .notification-modal-card,
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .form-panel,
:root[data-theme="dark"] .purchase-paper {
    background: #111827 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] table td,
:root[data-theme="dark"] table th {
    background: #0b1220 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}
:root[data-theme="dark"] .btn-light { background:#1f2937 !important; color:#e5e7eb !important; border-color:#334155 !important; }
:root[data-theme="dark"] .side-nav a { color:#cbd5e1; }
:root[data-theme="dark"] .side-nav a.active { background:#1e40af; color:#fff; }
.topbar p,
.request-intro p,
.panel-header p,
.config-hero p,
.help-text,
.field-hint { display:none !important; }
.purchase-info-table tr:nth-child(1) th,
.purchase-info-table tr:nth-child(1) td,
.purchase-info-table tr:nth-child(2) th,
.purchase-info-table tr:nth-child(2) td,
.purchase-form-table thead th {
    background: rgba(37, 99, 235, .08) !important;
}
.wa-send-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.wa-send-form input { min-width:170px; max-width:220px; }
.filters-bar { display:flex; gap:12px; flex-wrap:wrap; align-items:end; margin-bottom:18px; }
.filters-bar label { display:flex; flex-direction:column; gap:6px; font-weight:700; color:#334155; }
.filters-bar input,.filters-bar select{ min-width:180px; }
.local-column-header,.custom-field-header { background:rgba(14,165,233,.10)!important; }
.local-column-cell input,.custom-field-cell input,.custom-field-cell textarea { min-width:120px; }
@media (max-width: 980px) {
    .app-body { display:block !important; }
    .sidebar { position:relative !important; width:auto !important; min-height:auto !important; border-radius:0 0 24px 24px; }
    .side-nav { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
    .main-content { padding:14px !important; }
    .topbar { flex-direction:column; align-items:stretch !important; gap:12px; }
    .topbar-actions,.actions-row,.filters-bar { flex-direction:column; align-items:stretch !important; }
    .btn, .topbar-actions .btn { width:100%; justify-content:center; }
    .stats-grid,.grid-2,.config-grid { grid-template-columns:1fr !important; }
    .purchase-table-wrap,.table-wrap { overflow-x:auto; }
    .purchase-info-table,.purchase-form-table,.modern-table table { min-width:850px; }
    .config-tabs { overflow-x:auto; white-space:nowrap; display:flex; }
}
@media (max-width: 520px) {
    .side-nav { grid-template-columns:1fr; }
    .sidebar-brand { justify-content:center; }
    .login-alerts { grid-template-columns:1fr !important; }
    .notification-modal-card { width:92vw; padding:18px !important; }
}
@media print {
    .wa-send-form { display:none !important; }
}
.quote-choice{background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.18);border-radius:14px;padding:10px 12px;margin-bottom:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.quote-choice small{color:var(--muted);font-weight:500}.quote-file-input{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:#334155}.quote-file-input input{min-width:170px}.danger-stat{border-color:#fecaca!important}.danger-stat strong{color:#dc2626}.warning-stat{border-color:#fde68a!important}.warning-stat strong{color:#d97706}.compact-welcome p{display:none}.actions-inline form{display:inline-flex}.backup-path-code{direction:ltr;text-align:left;display:block;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px 10px;margin-top:8px}


/* تحسين شعار شاشة الدخول بإطار متحرك وهوية هادئة */
.login-hero .brand-badge {
    width: 132px;
    height: 132px;
    border-radius: 34px;
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.07));
    box-shadow: 0 26px 70px rgba(37,99,235,.30), inset 0 0 0 1px rgba(255,255,255,.24);
    overflow: visible;
}
.login-hero .brand-badge::before {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: -1;
    border-radius: 38px;
    background: conic-gradient(from 0deg, rgba(255,255,255,.85), rgba(56,189,248,.55), rgba(37,99,235,.75), rgba(148,163,184,.45), rgba(255,255,255,.85));
    animation: royanLogoRing 5.5s linear infinite;
    filter: blur(.1px);
}
.login-hero .brand-badge::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 46px;
    border: 1px solid rgba(255,255,255,.16);
    animation: royanLogoPulse 2.8s ease-in-out infinite;
}
.login-hero .brand-badge img {
    padding: 14px;
    border-radius: 30px;
    background: rgba(255,255,255,.12);
}
@keyframes royanLogoRing { to { transform: rotate(360deg); } }
@keyframes royanLogoPulse { 0%,100% { transform: scale(.96); opacity:.45; } 50% { transform: scale(1.06); opacity:.90; } }

.advanced-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 14px;
    align-items: end;
}
.advanced-filters label { display: block; }
.advanced-filters .filter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.ai-assistant-box {
    margin-top: 14px;
    border: 1px solid rgba(37,99,235,.18);
    background: linear-gradient(135deg, rgba(239,246,255,.95), rgba(255,255,255,.98));
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 12px 34px rgba(37,99,235,.08);
}
.ai-assistant-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.ai-assistant-head strong { display:block; color:#123c69; font-size: 16px; }
.ai-assistant-head small { display:block; color: var(--muted); margin-top: 2px; }
.ai-assistant-box .ai-question { min-height: 64px; margin-bottom: 12px; }
.ai-result {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    line-height: 1.9;
    color: #172033;
    max-height: 360px;
    overflow: auto;
    white-space: normal;
}
.ai-result.loading { color: var(--primary); background: #f8fbff; }
@media (max-width: 1100px) {
    .advanced-filters { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 680px) {
    .login-hero .brand-badge { width: 104px; height: 104px; border-radius: 28px; }
    .advanced-filters { grid-template-columns: 1fr; }
    .ai-assistant-head { flex-direction: column; align-items: stretch; }
}

/* تعديل شاشة الدخول: الشعار 80% واسم النظام 20% */
.login-hero .hero-content {
    width: 100%;
    height: min(520px, calc(100vh - 170px));
    min-height: 420px;
    max-width: 100%;
    display: grid;
    grid-template-rows: 80% 20%;
    align-items: center;
    justify-items: center;
    text-align: center;
    gap: 0;
}
.login-hero .brand-badge {
    width: min(82%, 520px);
    height: min(100%, 420px);
    max-height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 44px;
    align-self: center;
}
.login-hero .brand-badge::before {
    inset: -6px;
    border-radius: 50px;
}
.login-hero .brand-badge::after {
    inset: -18px;
    border-radius: 58px;
}
.login-hero .brand-badge img {
    width: 100%;
    height: 100%;
    padding: 26px;
    object-fit: contain;
    border-radius: 40px;
}
.login-hero h1 {
    grid-row: 2;
    margin: 0;
    align-self: center;
    font-size: clamp(34px, 5.4vw, 64px);
    line-height: 1.18;
    max-width: 90%;
}
.login-hero p {
    display: none;
}
@media (max-width: 900px) {
    .login-hero .hero-content {
        height: 430px;
        min-height: 380px;
    }
    .login-hero .brand-badge {
        width: min(78vw, 360px);
        height: min(78vw, 360px);
    }
}
@media (max-width: 520px) {
    .login-hero .hero-content {
        height: 360px;
        min-height: 330px;
    }
    .login-hero .brand-badge {
        width: min(74vw, 290px) !important;
        height: min(74vw, 290px) !important;
        border-radius: 34px !important;
    }
    .login-hero .brand-badge img {
        padding: 18px;
        border-radius: 30px;
    }
    .login-hero h1 {
        font-size: clamp(28px, 8vw, 40px);
    }
}


/* ===== Mobile-first usability improvements ===== */
.mobile-menu-button,
.mobile-menu-fab,
.mobile-sidebar-close,
.mobile-sidebar-backdrop { display: none; }
.topbar-title-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-title-row h1 { overflow-wrap: anywhere; }

@media (max-width: 980px) {
    body { overflow-x: hidden; }
    .app-body { display: block !important; min-height: 100vh; }
    .main-content { padding: 14px 14px 88px !important; width: 100%; overflow: visible; }
    .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0;
        width: min(88vw, 340px) !important;
        height: 100vh !important;
        min-height: 100vh !important;
        z-index: 1200;
        transform: translateX(-105%);
        transition: transform .28s ease;
        border-radius: 0 24px 24px 0 !important;
        padding: 18px !important;
        overflow-y: auto;
        box-shadow: 0 30px 80px rgba(15,23,42,.35);
    }
    html[dir="rtl"] .sidebar {
        inset: 0 0 0 auto;
        transform: translateX(105%);
        border-radius: 24px 0 0 24px !important;
    }
    .mobile-nav-open .sidebar { transform: translateX(0) !important; }
    .mobile-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1190;
        background: rgba(15,23,42,.48);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
        backdrop-filter: blur(3px);
    }
    .mobile-nav-open .mobile-sidebar-backdrop { opacity: 1; pointer-events: auto; }
    .mobile-sidebar-close {
        display: inline-flex;
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 14px;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.14);
        color: #fff;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        margin-inline-end: 4px;
    }
    .mobile-menu-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--border);
        background: #fff;
        color: var(--text);
        border-radius: 14px;
        padding: 10px 14px;
        font-weight: 900;
        box-shadow: 0 8px 22px rgba(15,23,42,.06);
        cursor: pointer;
    }
    .mobile-menu-button span { font-size: 20px; line-height: 1; }
    .mobile-menu-fab {
        display: inline-flex;
        position: fixed;
        bottom: 18px;
        inset-inline-start: 18px;
        z-index: 1000;
        width: 54px;
        height: 54px;
        border: 0;
        border-radius: 18px;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--primary), #1d4ed8);
        color: #fff;
        font-size: 24px;
        box-shadow: 0 18px 34px rgba(37,99,235,.35);
        cursor: pointer;
    }
    .topbar {
        position: sticky;
        top: 0;
        z-index: 800;
        margin: -14px -14px 16px;
        padding: 12px 14px;
        background: rgba(248,251,255,.94);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(226,232,240,.9);
        border-radius: 0 0 20px 20px;
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
    }
    .topbar-title-row { justify-content: space-between; width: 100%; }
    .topbar h1 { font-size: clamp(21px, 5.4vw, 28px) !important; margin: 0; line-height: 1.35; }
    .topbar-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        width: 100%;
    }
    .topbar-actions .btn,
    .topbar-actions a.btn,
    .notification-toggle { width: 100%; min-height: 46px; padding: 10px 12px; font-size: 13px; }
    .notification-box { width: 100%; }
    .notification-menu {
        position: fixed !important;
        top: 76px !important;
        inset-inline: 12px !important;
        width: auto !important;
        max-height: 70vh;
        overflow: auto;
        border-radius: 18px;
        z-index: 1300;
    }
    .sidebar-brand { gap: 10px; align-items: center; }
    .sidebar-brand > div:last-child { min-width: 0; }
    .sidebar-brand strong { font-size: 15px; }
    .side-nav { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
    .side-nav a { min-height: 48px; font-size: 15px; padding: 13px 14px; }
    .sidebar-user { position: sticky; bottom: 0; backdrop-filter: blur(8px); }
    .stats-grid,
    .grid-2,
    .users-list,
    .form-grid,
    .form-grid.two-cols,
    .check-grid,
    .config-grid,
    .advanced-filters,
    .login-alerts,
    .meta-grid,
    .mini-checks { grid-template-columns: 1fr !important; }
    .panel,
    .welcome-card,
    .stat-card,
    .request-intro,
    .purchase-paper { border-radius: 18px !important; }
    .panel { padding: 16px !important; }
    .panel-header,
    .clean-header,
    .request-intro,
    .actions-row,
    .filters-bar,
    .advanced-filters .filter-actions { flex-direction: column !important; align-items: stretch !important; }
    .actions-row .btn,
    .filters-bar .btn,
    .advanced-filters .btn,
    .panel-header .btn,
    .clean-header .btn { width: 100%; }
    .btn { min-height: 46px; }
    input[type="text"], input[type="password"], input[type="file"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], select, textarea {
        min-height: 48px;
        font-size: 16px;
        border-radius: 14px;
    }
    .config-tabs {
        display: flex !important;
        overflow-x: auto;
        white-space: nowrap;
        gap: 8px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .config-tabs a { flex: 0 0 auto; scroll-snap-align: start; }
    .notification-modal-card,
    .pwa-install-card {
        width: min(94vw, 440px) !important;
        max-height: 88vh;
        overflow: auto;
        padding: 20px !important;
        border-radius: 22px !important;
    }
    .notification-modal-actions { flex-direction: column; align-items: stretch; }
    .notification-modal-actions .btn { width: 100%; }
}

@media (max-width: 760px) {
    .table-wrap,
    .purchase-table-wrap,
    .modern-table { overflow: visible !important; }
    table.responsive-table,
    table.responsive-table thead,
    table.responsive-table tbody,
    table.responsive-table tfoot,
    table.responsive-table tr,
    table.responsive-table th,
    table.responsive-table td { display: block; width: 100% !important; min-width: 0 !important; }
    table.responsive-table { border: 0 !important; background: transparent !important; }
    table.responsive-table thead { display: none !important; }
    table.responsive-table tbody tr {
        margin: 0 0 12px;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 10px 24px rgba(15,23,42,.06);
        overflow: hidden;
    }
    table.responsive-table tbody td {
        display: grid !important;
        grid-template-columns: minmax(108px, 38%) 1fr;
        align-items: center;
        gap: 10px;
        border: 0 !important;
        border-bottom: 1px dashed rgba(148,163,184,.35) !important;
        padding: 10px 6px !important;
        text-align: start !important;
        min-height: 44px;
    }
    table.responsive-table tbody td:last-child { border-bottom: 0 !important; }
    table.responsive-table tbody td::before {
        content: attr(data-label);
        font-weight: 900;
        color: #475569;
        font-size: 12px;
        line-height: 1.5;
    }
    table.responsive-table tbody td[colspan] { grid-template-columns: 1fr; }
    table.responsive-table tbody td[colspan]::before { display: none; }
    table.responsive-table td input,
    table.responsive-table td select,
    table.responsive-table td textarea,
    table.responsive-table td .btn { width: 100%; min-width: 0 !important; }
    table.responsive-table td .actions-inline,
    table.responsive-table td form { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
    .purchase-info-table tr,
    .purchase-form-table tr { margin-bottom: 14px !important; }
    .purchase-info-table td,
    .purchase-form-table td { grid-template-columns: 1fr !important; }
    .purchase-info-table td::before,
    .purchase-form-table td::before { margin-bottom: 4px; }
    .stat-card { padding: 18px; }
    .stat-card strong { font-size: 32px; }
}

@media (max-width: 520px) {
    .main-content { padding-inline: 10px !important; }
    .topbar { margin-inline: -10px; padding-inline: 10px; }
    .topbar-actions { grid-template-columns: 1fr; }
    .mobile-menu-fab { bottom: 14px; inset-inline-start: 14px; }
    .login-shell { border-radius: 24px; }
    .login-card, .login-hero { padding: 24px 18px !important; }
    .login-card-header h2, .panel h2, .welcome-card h2 { font-size: 22px; }
    .alert { padding: 12px 14px; border-radius: 14px; }
}

.pwa-install-backdrop {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    background: rgba(15,23,42,.48);
    z-index: 1600;
    padding: 18px;
    backdrop-filter: blur(4px);
}
.pwa-install-backdrop.is-visible { display: grid; }
.pwa-install-card {
    position: relative;
    width: min(520px, 96vw);
    background: #fff;
    border-radius: 26px;
    box-shadow: 0 30px 90px rgba(15,23,42,.24);
    padding: 28px;
    border: 1px solid rgba(226,232,240,.92);
}
.pwa-install-close {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: #f1f5f9;
    cursor: pointer;
    font-size: 24px;
}
.pwa-install-icon { font-size: 42px; margin-bottom: 10px; }
.pwa-install-card h2 { margin: 0 0 8px; }
.pwa-install-card p, .pwa-install-card li { color: #475569; line-height: 1.9; }
.pwa-install-card ol { padding-inline-start: 24px; }
.pwa-note { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 14px; padding: 10px 12px; }
:root[data-theme="dark"] .pwa-install-card,
:root[data-theme="dark"] table.responsive-table tbody tr { background: #111827 !important; color: #e5e7eb; border-color: #334155; }
:root[data-theme="dark"] .mobile-menu-button,
:root[data-theme="dark"] .topbar { background: rgba(15,23,42,.94) !important; color: #e5e7eb; border-color: #334155; }
:root[data-theme="dark"] table.responsive-table tbody td::before { color: #cbd5e1; }

/* =========================================================
   Adaptive UI standards v2
   هدف هذا القسم: توحيد المقاسات والتباعد حسب حجم الشاشة
   وتحسين تعبئة النماذج والتنقل على الجوال والتابلت والديسكتوب.
   ========================================================= */
:root {
    --page-max: 1480px;
    --touch-target: 46px;
    --space-1: clamp(6px, 0.7vw, 10px);
    --space-2: clamp(10px, 1vw, 14px);
    --space-3: clamp(14px, 1.4vw, 20px);
    --space-4: clamp(18px, 2vw, 28px);
    --card-radius: clamp(16px, 2vw, 26px);
    --field-radius: clamp(12px, 1.3vw, 16px);
    --font-base: clamp(14px, 0.92vw, 16px);
    --font-small: clamp(12px, 0.78vw, 14px);
    --font-title: clamp(22px, 2.2vw, 36px);
}

html {
    font-size: var(--font-base);
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    min-width: 320px;
}

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

.main-content {
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding: var(--space-4);
}

.topbar h1 {
    font-size: var(--font-title) !important;
    line-height: 1.28;
}

.panel, .welcome-card, .stat-card, .purchase-paper, .form-panel, .soft-panel {
    border-radius: var(--card-radius) !important;
}

.panel, .welcome-card, .purchase-paper, .form-panel, .soft-panel {
    padding: var(--space-4) !important;
}

.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important;
    gap: var(--space-3) !important;
}

.grid-2,
.users-list,
.config-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)) !important;
    gap: var(--space-3) !important;
}

.form-grid,
.form-grid.two-cols,
.check-grid,
.meta-grid,
.mini-checks {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)) !important;
    gap: var(--space-3) !important;
}

.advanced-filters,
.filters-bar {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)) !important;
    gap: var(--space-2) !important;
    align-items: end !important;
}

.filters-bar label,
.advanced-filters label {
    min-width: 0 !important;
}

input[type="text"], input[type="password"], input[type="file"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], select, textarea {
    min-height: var(--touch-target) !important;
    border-radius: var(--field-radius) !important;
    padding: 12px 14px !important;
    font-size: max(16px, 1rem) !important;
}

textarea {
    min-height: 104px;
    line-height: 1.8;
}

.btn, button, .side-nav a {
    min-height: 44px;
}

.btn {
    border-radius: var(--field-radius) !important;
    padding: 12px 16px !important;
    line-height: 1.45;
}

.actions-row,
.panel-header,
.clean-header,
.request-table-toolbar,
.notification-modal-actions,
.advanced-filters .filter-actions {
    gap: var(--space-2) !important;
}

/* Desktop and large tablet: stable sidebar and comfortable content width */
@media (min-width: 981px) {
    .app-body {
        grid-template-columns: clamp(250px, 19vw, 310px) minmax(0, 1fr) !important;
    }
    .sidebar {
        padding: clamp(18px, 1.6vw, 26px) !important;
        gap: clamp(18px, 1.6vw, 28px) !important;
    }
    .side-nav a {
        padding: 13px 15px !important;
    }
    .topbar {
        align-items: center !important;
        gap: var(--space-3) !important;
    }
    .topbar-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
}

/* Tablet: reduce density without losing overview */
@media (max-width: 1100px) and (min-width: 761px) {
    .main-content {
        padding: 20px !important;
    }
    .panel, .welcome-card, .purchase-paper, .form-panel, .soft-panel {
        padding: 20px !important;
    }
    .topbar-actions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        width: 100%;
    }
}

/* Phone drawer and one-hand friendly layout */
@media (max-width: 980px) {
    :root {
        --touch-target: 50px;
    }
    .main-content {
        max-width: 100% !important;
        padding: max(12px, env(safe-area-inset-top)) 12px calc(92px + env(safe-area-inset-bottom)) !important;
    }
    .topbar {
        padding: 12px !important;
        margin: -12px -12px 14px !important;
        box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
    }
    .topbar-title-row {
        display: grid !important;
        grid-template-columns: auto 1fr;
        align-items: center !important;
        gap: 10px !important;
    }
    .topbar-title-row > div {
        min-width: 0;
    }
    .topbar-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    .topbar-actions .btn,
    .topbar-actions a.btn,
    .notification-toggle {
        min-height: 48px !important;
        padding-inline: 10px !important;
        font-size: 13px !important;
        white-space: normal !important;
    }
    .mobile-menu-fab {
        width: 58px !important;
        height: 58px !important;
        border-radius: 20px !important;
        bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
    .sidebar {
        width: min(86vw, 360px) !important;
        padding: 16px !important;
    }
    .side-nav a {
        min-height: 52px !important;
        border-radius: 16px !important;
        font-size: 15px !important;
    }
    .panel-header,
    .clean-header,
    .request-table-toolbar,
    .actions-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }
    .actions-row .btn,
    .panel-header .btn,
    .clean-header .btn,
    .request-table-toolbar .btn,
    .filters-bar .btn,
    .advanced-filters .btn {
        width: 100% !important;
    }
    label span,
    .permissions-box > span,
    .switch-field > span {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }
    .config-tabs {
        margin-inline: -2px;
        padding: 2px 2px 10px !important;
    }
    .config-tabs a,
    .approval-tabs .approval-tab {
        min-height: 46px;
        border-radius: 14px;
        padding: 10px 14px;
    }
}

/* Phone: cards instead of crowded tables */
@media (max-width: 760px) {
    .table-wrap,
    .purchase-table-wrap,
    .modern-table {
        overflow: visible !important;
    }
    table.responsive-table,
    table.responsive-table thead,
    table.responsive-table tbody,
    table.responsive-table tfoot,
    table.responsive-table tr,
    table.responsive-table th,
    table.responsive-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    table.responsive-table thead {
        display: none !important;
    }
    table.responsive-table tbody tr {
        border-radius: 18px !important;
        padding: 12px !important;
        margin-bottom: 12px !important;
    }
    table.responsive-table tbody td {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        padding: 10px 4px !important;
        align-items: stretch !important;
    }
    table.responsive-table tbody td::before {
        font-size: 12px !important;
        color: #64748b !important;
    }
    table.responsive-table td .btn,
    table.responsive-table td button,
    table.responsive-table td a.btn {
        width: 100% !important;
        margin: 3px 0 !important;
    }

    /* Purchase request form: each row becomes an easy card */
    .purchase-info-table,
    .purchase-form-table {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: auto !important;
    }
    .purchase-info-table tbody tr,
    .purchase-form-table tbody tr {
        display: grid !important;
        grid-template-columns: 1fr !important;
        border: 1px solid var(--border) !important;
        border-radius: 18px !important;
        padding: 12px !important;
        margin-bottom: 12px !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 8px 22px rgba(15,23,42,.055) !important;
    }
    .purchase-info-table th,
    .purchase-info-table td,
    .purchase-form-table th,
    .purchase-form-table td {
        display: block !important;
        width: 100% !important;
        border: 0 !important;
        padding: 8px 0 !important;
        text-align: start !important;
    }
    .purchase-info-table th,
    .purchase-form-table th,
    .purchase-form-table .row-number {
        color: var(--primary) !important;
        background: transparent !important;
        font-size: 13px !important;
        font-weight: 900 !important;
    }
    .purchase-form-table thead {
        display: none !important;
    }
    .purchase-form-table input,
    .purchase-form-table textarea,
    .purchase-form-table select,
    .purchase-info-table input,
    .purchase-info-table textarea,
    .purchase-info-table select {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 520px) {
    .main-content {
        padding-inline: 10px !important;
    }
    .topbar {
        margin-inline: -10px !important;
        padding-inline: 10px !important;
    }
    .topbar-actions {
        grid-template-columns: 1fr !important;
    }
    .panel, .welcome-card, .purchase-paper, .form-panel, .soft-panel {
        padding: 14px !important;
    }
    .stat-card {
        padding: 16px !important;
    }
    .stat-card strong {
        font-size: clamp(28px, 12vw, 40px) !important;
    }
    .btn {
        width: 100%;
        white-space: normal !important;
    }
    .login-body {
        padding: 12px !important;
    }
    .login-shell {
        min-height: auto !important;
        border-radius: 22px !important;
    }
    .notification-menu {
        top: 66px !important;
        inset-inline: 8px !important;
    }
}

/* Very small screens */
@media (max-width: 380px) {
    .topbar h1 {
        font-size: 20px !important;
    }
    .mobile-menu-button {
        padding-inline: 10px !important;
    }
    .sidebar {
        width: 92vw !important;
    }
}

/* Landscape phones: make vertical space usable */
@media (max-height: 520px) and (orientation: landscape) {
    .topbar {
        position: static !important;
    }
    .sidebar {
        width: min(72vw, 340px) !important;
    }
    .mobile-menu-fab {
        width: 50px !important;
        height: 50px !important;
    }
}


/* ===== تعديلات شاشة الموقع والتجربة الجديدة ===== */
.brand-logo{width:var(--site-logo-size,72px)!important;height:var(--site-logo-size,72px)!important;min-width:var(--site-logo-size,72px)!important;min-height:var(--site-logo-size,72px)!important;}
.brand-logo img{width:100%!important;height:100%!important;object-fit:contain!important;}
.site-settings-grid{display:grid;grid-template-columns:minmax(180px,320px) 1fr;gap:24px;align-items:start;}
.logo-preview.large-preview{min-height:260px;display:flex;align-items:center;justify-content:center;border:1px dashed rgba(37,99,235,.35);border-radius:28px;background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(14,165,233,.08));}
.logo-preview.large-preview img{width:var(--preview-logo-size,130px)!important;height:var(--preview-logo-size,130px)!important;object-fit:contain;max-width:90%;max-height:90%;}
.logo-preview.large-preview span{font-size:42px;font-weight:900;color:#2563eb;}
.full-span{grid-column:1/-1;}
.question-box{display:grid;gap:10px;background:rgba(37,99,235,.07);border:1px solid rgba(37,99,235,.18);border-radius:18px;padding:14px;}
.question-box label{display:flex;align-items:center;gap:8px;margin:0;}
.approval-after-paper{border:2px solid rgba(37,99,235,.14);background:linear-gradient(135deg,rgba(37,99,235,.06),rgba(255,255,255,.96));}
.tracking-details{margin:14px 0;border:1px solid rgba(15,23,42,.10);border-radius:18px;background:rgba(248,250,252,.88);overflow:hidden;}
.tracking-details summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-weight:800;color:#0f172a;}
.tracking-details summary::-webkit-details-marker{display:none;}
.tracking-details summary b{background:#e0f2fe;color:#0369a1;padding:5px 10px;border-radius:999px;font-size:12px;white-space:nowrap;}
.tracking-details[open] summary{border-bottom:1px solid rgba(15,23,42,.08);}
.tracking-details .tracking-current,.tracking-details .track-steps{margin:14px;}
.advanced-filters{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));align-items:end;}
.advanced-filters .filter-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.settings-hero{background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(14,165,233,.08));}
.actions-row form{display:inline-flex;}
@media (max-width: 760px){
  .site-settings-grid{grid-template-columns:1fr;}
  .logo-preview.large-preview{min-height:190px;}
  .advanced-filters{grid-template-columns:1fr!important;}
  .approval-actions,.actions-row{display:grid!important;grid-template-columns:1fr;}
  .approval-actions .btn,.actions-row .btn,.actions-row form,.actions-row button{width:100%;justify-content:center;}
  .tracking-details summary{align-items:flex-start;flex-direction:column;}
  .tracking-card-head{gap:10px;}
}

/* Final custom settings: approval controls after purchase request view */
.show-approval-form {
  display: grid;
  gap: 16px;
}
.show-approval-form .full-span,
.show-approval-form textarea {
  width: 100%;
}
.show-approval-form textarea {
  border: 1px solid rgba(15, 23, 42, .14);
  border-radius: 16px;
  padding: 12px 14px;
  resize: vertical;
  min-height: 92px;
  font-family: inherit;
  background: var(--input-bg, #fff);
  color: inherit;
}
.approval-after-paper .question-box {
  margin: 0;
  padding: 16px;
  border-radius: 18px;
  background: rgba(37, 99, 235, .06);
  border: 1px solid rgba(37, 99, 235, .16);
}
.approval-after-paper .approval-actions {
  justify-content: flex-start;
}
@media (max-width: 720px) {
  .approval-after-paper .approval-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .approval-after-paper .approval-actions .btn {
    width: 100%;
    min-height: 48px;
  }
}

/* =========================================================
   FIX: استرجاع مقاسات وتوازن واجهة سطح المكتب
   السبب: في بعض المتصفحات مع dir=rtl تم وضع القائمة الجانبية في عمود 1fr
   فأصبحت بعرض الشاشة. هذا القسم يثبت القائمة يمينًا بعرض ثابت
   ويترك المحتوى يأخذ المساحة المتبقية بدون كسر استجابة الجوال.
   ========================================================= */
@media (min-width: 981px) {
    .app-body {
        --sidebar-fixed-width: clamp(260px, 18vw, 310px);
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--sidebar-fixed-width) !important;
        grid-template-rows: minmax(100vh, auto) !important;
        direction: ltr !important;
        width: 100% !important;
        min-height: 100vh !important;
        overflow-x: hidden !important;
    }
    .sidebar {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: var(--sidebar-fixed-width) !important;
        min-width: var(--sidebar-fixed-width) !important;
        max-width: var(--sidebar-fixed-width) !important;
        height: 100vh !important;
        position: sticky !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        direction: rtl !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    .main-content {
        grid-column: 1 !important;
        grid-row: 1 !important;
        direction: rtl !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 1480px !important;
        margin-inline: auto !important;
        overflow-x: hidden !important;
        background: transparent !important;
    }
    .topbar {
        width: 100% !important;
    }
    .sidebar-user,
    .side-nav a {
        width: 100% !important;
    }
}

@media (max-width: 980px) {
    .app-body {
        direction: rtl !important;
        display: block !important;
        overflow-x: hidden !important;
    }
    .sidebar {
        max-width: min(88vw, 360px) !important;
    }
    .main-content {
        direction: rtl !important;
        max-width: 100% !important;
    }
}


/* Custom final polish 2026-06-10 */
.system-loading-overlay{
  position:fixed; inset:0; z-index:99999; display:grid; place-items:center;
  background:radial-gradient(circle at 30% 20%, rgba(56,189,248,.32), transparent 30%), radial-gradient(circle at 70% 70%, rgba(37,99,235,.30), transparent 38%), linear-gradient(135deg,#eef6ff,#f8fbff 45%,#eef2ff);
  transition:opacity .55s ease, visibility .55s ease;
}
.system-loading-overlay.hide{opacity:0;visibility:hidden;pointer-events:none;}
.system-loader-card{width:min(420px,90vw); padding:34px 28px; border-radius:32px; text-align:center; background:rgba(255,255,255,.84); border:1px solid rgba(255,255,255,.88); box-shadow:0 30px 90px rgba(37,99,235,.22); backdrop-filter:blur(18px); color:#0f172a;}
.system-loader-orb{width:86px;height:86px;margin:0 auto 18px;border-radius:28px;background:linear-gradient(135deg,#1d4ed8,#38bdf8);box-shadow:0 0 35px rgba(56,189,248,.55), inset 0 0 18px rgba(255,255,255,.35);position:relative;animation:loaderPulse 1.3s ease-in-out infinite;}
.system-loader-orb:after{content:"";position:absolute;inset:18px;border-radius:18px;border:2px solid rgba(255,255,255,.8);}
.system-loader-card strong{display:block;font-size:24px;font-weight:900;margin-bottom:8px;}
.system-loader-card span{display:inline-block;font-size:34px;font-weight:900;color:#2563eb;margin-bottom:16px;}
.system-loader-bar{height:12px;background:#e0edff;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(37,99,235,.08)}
.system-loader-bar i{display:block;height:100%;width:1%;border-radius:inherit;background:linear-gradient(90deg,#1d4ed8,#38bdf8,#22c55e);box-shadow:0 0 18px rgba(56,189,248,.55);transition:width .16s ease;}
@keyframes loaderPulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.08);filter:brightness(1.18)}}

.dashboard-clickable-stats .stat-link{position:relative;overflow:hidden;color:#0f172a;transition:transform .18s ease, box-shadow .18s ease; border:1px solid rgba(255,255,255,.9)}
.dashboard-clickable-stats .stat-link:hover{transform:translateY(-4px);box-shadow:0 22px 55px rgba(15,23,42,.14)}
.dashboard-clickable-stats .stat-link:after{content:"↗";position:absolute;top:18px;left:18px;width:34px;height:34px;border-radius:14px;background:rgba(255,255,255,.62);display:grid;place-items:center;font-weight:900;color:#2563eb}
.dashboard-clickable-stats .stat-link small{display:block;margin-top:10px;color:#475569;font-weight:800}
.stat-blue{background:linear-gradient(135deg,#eaf2ff,#f8fbff)}
.stat-purple{background:linear-gradient(135deg,#f1eaff,#fbf8ff)}
.stat-cyan{background:linear-gradient(135deg,#e6fbff,#f7fdff)}
.stat-green{background:linear-gradient(135deg,#eafbf2,#f8fffb)}
.stat-red{background:linear-gradient(135deg,#fff1f2,#fffafa)}
.stat-amber{background:linear-gradient(135deg,#fff8e6,#fffefa)}
.stat-purple strong{color:#7c3aed}.stat-cyan strong{color:#0891b2}.stat-green strong{color:#059669}.stat-red strong{color:#dc2626}.stat-amber strong{color:#d97706}.stat-blue strong{color:#2563eb}

.stacked-site-settings{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;}
.site-logo-control-card{background:rgba(248,250,252,.86);border:1px solid rgba(148,163,184,.24);border-radius:24px;padding:20px;box-shadow:0 10px 32px rgba(15,23,42,.05);display:flex;flex-direction:column;gap:14px;}
.site-logo-control-card h3{margin:0;font-size:18px;color:#0f172a}.site-logo-control-card label{display:grid;gap:8px;font-weight:800;color:#334155}.login-logo-preview{min-height:220px}.login-logo-preview img{object-fit:contain}.site-name-card{justify-content:center;}
@media (max-width:1100px){.stacked-site-settings{grid-template-columns:1fr 1fr}.site-name-card{grid-column:1/-1}}
@media (max-width:720px){.stacked-site-settings{grid-template-columns:1fr}.login-logo-preview{min-height:180px}}

@media (max-width:720px){
  .filter-actions{display:grid;grid-template-columns:1fr;gap:10px;width:100%}
  .filter-actions .btn{width:100%;justify-content:center}
}

/* Final usability polish: filters, tracking cards, searchable lists, dynamic login frame */
.select-search-wrapper{display:grid;gap:6px;width:100%;}
.select-search-input{min-height:36px!important;border:1px solid #dbe6f5!important;border-radius:12px!important;background:#f8fbff!important;padding:8px 12px!important;font-size:13px!important;color:#0f172a!important;box-shadow:none!important;}
.select-search-input:focus{outline:none!important;border-color:#93c5fd!important;box-shadow:0 0 0 3px rgba(37,99,235,.10)!important;background:#fff!important;}
.users-filter-panel{background:linear-gradient(135deg,#f8fbff,#ffffff);}
.filters-bar .filter-actions{grid-column:1/-1;display:flex;justify-content:flex-start;align-items:center;gap:10px;margin-top:4px;padding-top:10px;border-top:1px dashed #dbe6f5;}
.filters-bar .filter-actions .btn-primary{min-width:160px;box-shadow:0 12px 26px rgba(37,99,235,.18);}

.tracking-card-soft{position:relative;overflow:hidden;border-color:rgba(147,197,253,.45)!important;background:linear-gradient(135deg,rgba(239,246,255,.92),rgba(255,255,255,.96))!important;}
.tracking-card-soft:nth-child(6n+2){background:linear-gradient(135deg,rgba(236,253,245,.92),rgba(255,255,255,.96))!important;border-color:rgba(134,239,172,.45)!important;}
.tracking-card-soft:nth-child(6n+3){background:linear-gradient(135deg,rgba(250,245,255,.94),rgba(255,255,255,.96))!important;border-color:rgba(216,180,254,.45)!important;}
.tracking-card-soft:nth-child(6n+4){background:linear-gradient(135deg,rgba(255,251,235,.94),rgba(255,255,255,.96))!important;border-color:rgba(252,211,77,.42)!important;}
.tracking-card-soft:nth-child(6n+5){background:linear-gradient(135deg,rgba(236,254,255,.94),rgba(255,255,255,.96))!important;border-color:rgba(103,232,249,.42)!important;}
.tracking-card-soft:before{content:"";position:absolute;inset:0 0 auto auto;width:130px;height:130px;border-radius:0 24px 0 130px;background:rgba(37,99,235,.06);pointer-events:none;}
.tracking-card-soft .tracking-card-head{border-bottom:0!important;margin-bottom:6px!important;padding-bottom:4px!important;align-items:center;}
.tracking-card-soft .tracking-card-head code{display:inline-flex;padding:7px 10px;border-radius:999px;background:rgba(37,99,235,.10);color:#1d4ed8;font-weight:900;}
.tracking-card-soft .tracking-card-head h3{margin:8px 0 3px!important;font-size:19px;color:#0f172a;}
.tracking-card-soft .tracking-card-head p{font-weight:800;color:#64748b!important;}
.tracking-card-soft .status-pill{font-size:12px;opacity:.88;}
.tracking-card-soft .tracking-details{margin-top:8px;border-top:1px dashed rgba(148,163,184,.35);padding-top:10px;}
.tracking-card-soft .tracking-details summary{cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.68);border:1px solid rgba(226,232,240,.9);}
.tracking-card-soft .tracking-details summary b{color:#2563eb;}
.tracking-card-soft .tracking-current,.tracking-card-soft .track-steps{display:none;}
.tracking-card-soft .tracking-details[open] .tracking-current{display:flex;}
.tracking-card-soft .tracking-details[open] .track-steps{display:grid;}
.tracking-card-soft .approval-actions{margin-top:12px;}

.login-hero .brand-badge{position:relative;isolation:isolate;border:0!important;background:rgba(255,255,255,.13)!important;box-shadow:0 0 0 1px rgba(255,255,255,.28),0 22px 70px rgba(15,23,42,.25)!important;}
.login-hero .brand-badge::before{content:"";position:absolute;inset:-10px!important;border-radius:inherit!important;z-index:-2;background:conic-gradient(from 0deg,#38bdf8,#2563eb,#8b5cf6,#22c55e,#38bdf8);animation:loginLogoSpin 4.5s linear infinite;filter:blur(.2px);}
.login-hero .brand-badge::after{content:"";position:absolute;inset:-3px!important;border-radius:inherit!important;z-index:-1;background:linear-gradient(145deg,rgba(15,23,42,.72),rgba(37,99,235,.55));box-shadow:0 0 34px rgba(56,189,248,.32);}
.login-hero .brand-badge img,.login-hero .brand-badge span{position:relative;z-index:1;}
@keyframes loginLogoSpin{to{transform:rotate(360deg)}}

@media (max-width:720px){
  .filters-bar .filter-actions{display:grid;grid-template-columns:1fr;gap:10px;}
  .tracking-card-soft .tracking-card-head{display:grid;grid-template-columns:1fr;}
  .tracking-card-soft .status-pill{justify-self:start;}
}

/* Compact approvals final: only request number, requester and date in list */
.approvals-clean-header{padding:18px 22px!important;}
.compact-page-title{margin:0!important;}
.approval-mini-counter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start;}
.approval-mini-counter span{display:inline-flex;align-items:center;gap:8px;background:rgba(239,246,255,.9);border:1px solid rgba(147,197,253,.38);color:#1e3a8a;padding:8px 12px;border-radius:999px;font-weight:900;font-size:13px;}
.approval-mini-counter b{background:#2563eb;color:#fff;min-width:24px;height:24px;display:inline-grid;place-items:center;border-radius:999px;font-size:12px;}
.approval-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
.approval-mini-card{border:1px solid rgba(226,232,240,.95);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(248,251,255,.96));box-shadow:0 8px 26px rgba(15,23,42,.045);overflow:hidden;}
.approval-mini-card:nth-child(4n+2){background:linear-gradient(135deg,rgba(239,246,255,.98),rgba(255,255,255,.96));}
.approval-mini-card:nth-child(4n+3){background:linear-gradient(135deg,rgba(240,253,250,.98),rgba(255,255,255,.96));}
.approval-mini-card:nth-child(4n+4){background:linear-gradient(135deg,rgba(250,245,255,.98),rgba(255,255,255,.96));}
.approval-mini-details{display:block;}
.approval-mini-summary{list-style:none;display:grid;grid-template-columns:minmax(150px,.9fr) minmax(180px,1.2fr) minmax(120px,.7fr) auto;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;min-height:58px;}
.approval-mini-summary::-webkit-details-marker{display:none;}
.approval-mini-no{display:inline-flex;align-items:center;justify-content:center;width:max-content;max-width:100%;padding:7px 12px;border-radius:999px;background:rgba(37,99,235,.10);color:#1d4ed8;font-weight:900;font-family:ui-monospace,Consolas,monospace;font-size:13px;}
.approval-mini-name{font-weight:950;color:#0f172a;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.approval-mini-date{font-weight:850;color:#64748b;font-size:13px;white-space:nowrap;}
.approval-mini-action{justify-self:end;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(37,99,235,.18);background:#fff;color:#1d4ed8;padding:8px 14px;border-radius:14px;font-weight:900;box-shadow:0 8px 18px rgba(37,99,235,.08);}
.approval-mini-details[open] .approval-mini-summary{border-bottom:1px solid rgba(226,232,240,.9);background:rgba(248,250,252,.82);}
.approval-detail-panel{padding:16px;background:#fff;}
.approval-detail-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;padding:12px 14px;border-radius:16px;background:rgba(248,250,252,.9);border:1px solid rgba(226,232,240,.86);}
.approval-detail-head strong{display:block;font-size:17px;color:#0f172a;}
.approval-detail-head span:not(.status-pill){display:block;font-size:13px;color:#64748b;font-weight:800;margin-top:3px;}
.approval-card,.wide-card{max-width:100%;}
.tab-title-line p,.approvals-hero p,.specialist-tasks-panel p,.procurement-stage-guide{display:none!important;}
.approval-tab-panel .tab-title-line{margin:14px 0 10px!important;padding:0!important;}
.approval-tab-panel .tab-title-line h3{margin:0!important;font-size:18px!important;}
.approval-tab-panel .approval-form{margin-top:10px;}
.approval-tab-panel .approval-meta{display:none!important;}
@media (max-width:760px){
  .approval-mini-summary{grid-template-columns:1fr;gap:8px;padding:14px;}
  .approval-mini-action{justify-self:stretch;justify-content:center;}
  .approval-mini-name{white-space:normal;font-size:15px;}
  .approval-detail-head{display:grid;}
  .approval-mini-counter{width:100%;}
  .approval-mini-counter span{width:100%;justify-content:space-between;}
}


/* === Compact approvals and tracking rows - final refinement === */
.approval-row-card{margin-bottom:10px!important;border-radius:16px!important;}
.approval-mini-link{text-decoration:none;color:inherit;}
.approval-mini-summary,.tracking-compact-summary{
    list-style:none!important;
    display:grid!important;
    grid-template-columns:minmax(145px,.85fr) minmax(150px,1fr) minmax(150px,.9fr) minmax(105px,.65fr) auto!important;
    align-items:center!important;
    gap:10px!important;
    padding:10px 14px!important;
    min-height:52px!important;
    cursor:pointer!important;
}
.approval-mini-summary::-webkit-details-marker,.tracking-compact-summary::-webkit-details-marker{display:none!important;}
.approval-mini-dept{
    display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;
    padding:6px 10px;border-radius:999px;background:rgba(14,165,233,.08);border:1px solid rgba(14,165,233,.18);
    color:#0369a1;font-weight:850;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.approval-mini-no{font-size:12px!important;padding:6px 10px!important;}
.approval-mini-name{font-size:15px!important;}
.approval-mini-date{font-size:12px!important;}
.approval-mini-action{font-size:13px!important;padding:7px 12px!important;}
.tracking-compact-row{padding:0!important;margin-bottom:10px!important;border-radius:16px!important;overflow:hidden!important;}
.tracking-compact-row .tracking-details{margin:0!important;border-top:0!important;padding-top:0!important;}
.tracking-compact-row .tracking-details[open] .tracking-compact-summary{border-bottom:1px solid rgba(226,232,240,.95);background:rgba(248,250,252,.82);}
.tracking-compact-row .tracking-current{margin:14px!important;display:flex!important;}
.tracking-compact-row .track-steps{margin:14px!important;display:grid!important;}
.tracking-compact-row .tracking-inside-actions{margin:0 14px 14px!important;}
.tracking-compact-row:not(:has(.tracking-details[open])) .tracking-current,
.tracking-compact-row:not(:has(.tracking-details[open])) .track-steps,
.tracking-compact-row:not(:has(.tracking-details[open])) .tracking-inside-actions{display:none!important;}
.approval-detail-panel{display:none!important;}
@media (max-width: 760px){
    .approval-mini-summary,.tracking-compact-summary{grid-template-columns:1fr!important;gap:8px!important;padding:12px!important;}
    .approval-mini-action{justify-self:stretch!important;justify-content:center!important;}
    .approval-mini-dept{width:100%;justify-content:center;}
}

/* Hide tracking details by default without relying on :has */
.tracking-compact-row .tracking-current,
.tracking-compact-row .track-steps,
.tracking-compact-row .tracking-inside-actions{display:none!important;}
.tracking-compact-row .tracking-details[open] .tracking-current{display:flex!important;}
.tracking-compact-row .tracking-details[open] .track-steps{display:grid!important;}
.tracking-compact-row .tracking-details[open] .tracking-inside-actions{display:flex!important;}


/* === Tracking final: one request per row, details only after opening === */
.tracking-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
}
.tracking-compact-row{
    width:100%!important;
    min-height:auto!important;
}
.tracking-compact-row .tracking-current,
.tracking-compact-row .track-steps,
.tracking-compact-row .tracking-inside-actions{
    display:none!important;
}
.tracking-compact-row .tracking-details[open] .tracking-current{
    display:flex!important;
}
.tracking-compact-row .tracking-details[open] .track-steps{
    display:grid!important;
}
.tracking-compact-row .tracking-details[open] .tracking-inside-actions{
    display:flex!important;
}
.tracking-compact-summary{
    grid-template-columns:minmax(150px,.9fr) minmax(170px,1.2fr) minmax(150px,1fr) minmax(120px,.7fr) auto!important;
    min-height:54px!important;
}
.tracking-compact-summary .approval-mini-action{
    justify-self:end!important;
}
@media (max-width:760px){
    .tracking-grid{grid-template-columns:1fr!important;}
    .tracking-compact-summary{
        grid-template-columns:1fr!important;
        gap:8px!important;
        padding:12px!important;
    }
    .tracking-compact-summary .approval-mini-action{
        justify-self:stretch!important;
        justify-content:center!important;
    }
}

/* Live sync + permissions polish + inline searchable selects */
.live-sync-toast{
  position:fixed;z-index:99998;left:24px;bottom:24px;
  background:linear-gradient(135deg,#2563eb,#38bdf8);color:#fff;
  padding:13px 18px;border-radius:18px;font-weight:900;
  box-shadow:0 18px 45px rgba(37,99,235,.24);animation:liveToastIn .28s ease both;
}
@keyframes liveToastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.combo-select-wrapper{position:relative;width:100%;}
.combo-hidden-select{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;inset:auto!important;}
.combo-select-input{width:100%!important;min-height:46px!important;border:1px solid #dbe6f5!important;border-radius:16px!important;background:#fff!important;padding:10px 14px!important;font-family:inherit!important;font-weight:800!important;color:#0f172a!important;box-shadow:0 6px 18px rgba(15,23,42,.035)!important;}
.combo-select-input:focus{outline:none!important;border-color:#93c5fd!important;box-shadow:0 0 0 4px rgba(37,99,235,.10)!important;}
.combo-select-menu{position:absolute;z-index:80;top:calc(100% + 6px);left:0;right:0;max-height:240px;overflow:auto;background:#fff;border:1px solid #dbe6f5;border-radius:16px;box-shadow:0 18px 48px rgba(15,23,42,.12);padding:6px;display:none;}
.combo-select-wrapper.open .combo-select-menu{display:block;}
.combo-select-option{width:100%;border:0;background:transparent;text-align:right;padding:10px 12px;border-radius:12px;font-family:inherit;font-weight:800;color:#334155;cursor:pointer;}
.combo-select-option:hover,.combo-select-option.active{background:#eff6ff;color:#1d4ed8;}
.combo-select-empty{padding:12px;color:#64748b;font-weight:800;text-align:center;}
.select-search-wrapper,.select-search-input{display:none!important;}
.compact-welcome,.screen-help,.instruction-card,.help-card,.intro-help{display:none!important;}
.dashboard-request-stats{margin-top:18px!important;}
@media (max-width:720px){.live-sync-toast{left:12px;right:12px;bottom:16px;text-align:center}}

/* Dark mode polish + refresh/live sync improvements */
.refresh-data-button { position: relative; }
.refresh-data-button .icon { transition: transform .25s ease; }
.refresh-data-button:hover .icon { transform: rotate(90deg); }

:root[data-theme="dark"] {
    --bg: #09111f;
    --surface: rgba(15, 23, 42, .92);
    --surface-soft: rgba(22, 33, 54, .88);
    --text: #f4f8ff;
    --muted: #a9b8cf;
    --border: rgba(148, 163, 184, .22);
    --primary: #60a5fa;
    --primary-dark: #3b82f6;
    --primary-soft: rgba(96, 165, 250, .14);
    --shadow: 0 24px 80px rgba(0, 0, 0, .34);
    --soft-shadow: 0 18px 50px rgba(0, 0, 0, .24);
}

:root[data-theme="dark"] body {
    background:
        radial-gradient(circle at 88% 8%, rgba(59, 130, 246, .22), transparent 28%),
        radial-gradient(circle at 8% 92%, rgba(45, 212, 191, .12), transparent 26%),
        linear-gradient(145deg, #07101d 0%, #0b1324 44%, #0f172a 100%) !important;
    color: var(--text) !important;
}

:root[data-theme="dark"] .main-content {
    background:
        radial-gradient(circle at 65% 8%, rgba(37, 99, 235, .10), transparent 24%),
        linear-gradient(180deg, rgba(15, 23, 42, .34), rgba(2, 6, 23, .04)) !important;
}

:root[data-theme="dark"] .sidebar {
    background:
        radial-gradient(circle at 82% 6%, rgba(96, 165, 250, .28), transparent 30%),
        linear-gradient(180deg, #08111f 0%, #0d1830 58%, #07101d 100%) !important;
    border-inline-start: 1px solid rgba(148, 163, 184, .16);
    box-shadow: -20px 0 70px rgba(0,0,0,.20);
}

:root[data-theme="dark"] .sidebar-brand,
:root[data-theme="dark"] .sidebar-user {
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.095) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

:root[data-theme="dark"] .sidebar-brand { padding: 14px; border-radius: 22px; }
:root[data-theme="dark"] .side-nav a { color: #c9d7ee !important; }
:root[data-theme="dark"] .side-nav a:hover {
    background: rgba(96,165,250,.12) !important;
    color: #fff !important;
}
:root[data-theme="dark"] .side-nav a.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, .92), rgba(29, 78, 216, .82)) !important;
    color: #fff !important;
    box-shadow: 0 14px 35px rgba(37,99,235,.22);
}

:root[data-theme="dark"] .topbar {
    background: rgba(8, 17, 32, .72) !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 24px;
    padding: 14px 16px;
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 48px rgba(0,0,0,.16);
}

:root[data-theme="dark"] .topbar h1,
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] .panel h2,
:root[data-theme="dark"] .approval-mini-name,
:root[data-theme="dark"] .tracking-card-head h3 {
    color: #f8fbff !important;
}

:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .welcome-card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .form-panel,
:root[data-theme="dark"] .purchase-paper,
:root[data-theme="dark"] .approval-mini-card,
:root[data-theme="dark"] .approval-detail-panel,
:root[data-theme="dark"] .tracking-card-soft,
:root[data-theme="dark"] .tracking-compact-row,
:root[data-theme="dark"] .notification-menu,
:root[data-theme="dark"] .notification-modal-card,
:root[data-theme="dark"] .archive-hero,
:root[data-theme="dark"] .config-hero,
:root[data-theme="dark"] .soft-panel,
:root[data-theme="dark"] .ai-assistant-box,
:root[data-theme="dark"] .user-card,
:root[data-theme="dark"] .permission-user-card,
:root[data-theme="dark"] .permissions-box,
:root[data-theme="dark"] .check-card,
:root[data-theme="dark"] .switch,
:root[data-theme="dark"] .toggle-line,
:root[data-theme="dark"] .meta-grid span,
:root[data-theme="dark"] .permission-list div,
:root[data-theme="dark"] .pwa-install-card {
    background: linear-gradient(145deg, rgba(15,23,42,.94), rgba(20,32,53,.88)) !important;
    border-color: rgba(148,163,184,.20) !important;
    color: #eaf1fb !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.26) !important;
}

:root[data-theme="dark"] .stat-card:nth-child(5n+1) { background: linear-gradient(145deg, rgba(29,78,216,.20), rgba(15,23,42,.92)) !important; }
:root[data-theme="dark"] .stat-card:nth-child(5n+2) { background: linear-gradient(145deg, rgba(5,150,105,.18), rgba(15,23,42,.92)) !important; }
:root[data-theme="dark"] .stat-card:nth-child(5n+3) { background: linear-gradient(145deg, rgba(124,58,237,.18), rgba(15,23,42,.92)) !important; }
:root[data-theme="dark"] .stat-card:nth-child(5n+4) { background: linear-gradient(145deg, rgba(234,88,12,.15), rgba(15,23,42,.92)) !important; }

:root[data-theme="dark"] .login-alert,
:root[data-theme="dark"] .request-alert,
:root[data-theme="dark"] .approval-alert {
    background: linear-gradient(135deg, rgba(13, 148, 136, .18), rgba(37, 99, 235, .16)) !important;
    border-color: rgba(125, 211, 252, .22) !important;
    color: #eaf7ff !important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .combo-select-input {
    background: rgba(2, 6, 23, .62) !important;
    color: #f8fbff !important;
    border-color: rgba(148, 163, 184, .24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #70829d !important; }
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] .combo-select-input:focus {
    border-color: rgba(96,165,250,.70) !important;
    box-shadow: 0 0 0 4px rgba(96,165,250,.13) !important;
}

:root[data-theme="dark"] .combo-select-menu {
    background: #0b1324 !important;
    border-color: rgba(148,163,184,.24) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.42) !important;
}
:root[data-theme="dark"] .combo-select-option { color: #dbeafe !important; }
:root[data-theme="dark"] .combo-select-option:hover,
:root[data-theme="dark"] .combo-select-option.active {
    background: rgba(96,165,250,.15) !important;
    color: #93c5fd !important;
}

:root[data-theme="dark"] .btn-light,
:root[data-theme="dark"] a.btn-light {
    background: rgba(15, 23, 42, .72) !important;
    color: #eaf1fb !important;
    border-color: rgba(148, 163, 184, .22) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
}
:root[data-theme="dark"] .btn-light:hover,
:root[data-theme="dark"] a.btn-light:hover {
    background: rgba(30, 41, 59, .92) !important;
    border-color: rgba(96,165,250,.34) !important;
}
:root[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: #fff !important;
    box-shadow: 0 16px 36px rgba(37,99,235,.32) !important;
}

:root[data-theme="dark"] th,
:root[data-theme="dark"] td,
:root[data-theme="dark"] table td,
:root[data-theme="dark"] table th {
    background: rgba(7, 16, 31, .78) !important;
    color: #eaf1fb !important;
    border-color: rgba(148,163,184,.18) !important;
}
:root[data-theme="dark"] .purchase-info-table tr:nth-child(1) th,
:root[data-theme="dark"] .purchase-info-table tr:nth-child(1) td,
:root[data-theme="dark"] .purchase-info-table tr:nth-child(2) th,
:root[data-theme="dark"] .purchase-info-table tr:nth-child(2) td,
:root[data-theme="dark"] .purchase-form-table thead th {
    background: rgba(37,99,235,.18) !important;
}

:root[data-theme="dark"] .status-pill,
:root[data-theme="dark"] .approval-mini-no,
:root[data-theme="dark"] .approval-mini-dept,
:root[data-theme="dark"] code,
:root[data-theme="dark"] .config-tabs a,
:root[data-theme="dark"] .approval-tabs .approval-tab,
:root[data-theme="dark"] .approval-mini-counter span {
    background: rgba(96,165,250,.13) !important;
    border-color: rgba(96,165,250,.22) !important;
    color: #bfdbfe !important;
}
:root[data-theme="dark"] .config-tabs a.active,
:root[data-theme="dark"] .approval-tabs .approval-tab.active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #fff !important;
}

:root[data-theme="dark"] .approval-mini-summary,
:root[data-theme="dark"] .tracking-compact-summary,
:root[data-theme="dark"] .tracking-details summary,
:root[data-theme="dark"] .approval-detail-head {
    background: rgba(2, 6, 23, .34) !important;
    border-color: rgba(148,163,184,.18) !important;
    color: #f8fbff !important;
}
:root[data-theme="dark"] .approval-mini-date,
:root[data-theme="dark"] .approval-detail-head span:not(.status-pill),
:root[data-theme="dark"] .tracking-card-head p,
:root[data-theme="dark"] .panel-header p,
:root[data-theme="dark"] .topbar p,
:root[data-theme="dark"] .muted {
    color: #a9b8cf !important;
}

:root[data-theme="dark"] .notification-menu:before {
    border-bottom-color: rgba(15,23,42,.94) !important;
}
:root[data-theme="dark"] .notification-item {
    background: rgba(2,6,23,.38) !important;
    border-color: rgba(148,163,184,.16) !important;
}
:root[data-theme="dark"] .notification-empty { color: #94a3b8 !important; }

:root[data-theme="dark"] .live-sync-toast {
    background: linear-gradient(135deg, #14b8a6, #2563eb) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.16);
}
.live-sync-toast.hide { animation: liveToastOut .34s ease both; }
@keyframes liveToastOut { to { opacity: 0; transform: translateY(14px); } }
.live-sync-toast span { margin-inline-end: 8px; }

@media (max-width: 980px) {
    .refresh-data-button { order: -1; }
}

/* Fast mode: remove manual refresh button and show success check overlay */
.success-check-overlay{
  position:fixed;inset:0;z-index:99999;display:grid;place-items:center;
  background:rgba(15,23,42,.18);backdrop-filter:blur(4px);
  animation:successOverlayIn .18s ease both;
}
.success-check-card{
  width:min(320px, calc(100vw - 48px));min-height:220px;border-radius:34px;
  background:linear-gradient(145deg,#ffffff,#f0fdf4);
  border:1px solid rgba(34,197,94,.22);
  box-shadow:0 30px 90px rgba(21,128,61,.28);
  display:grid;place-items:center;gap:18px;padding:34px;text-align:center;color:#0f172a;
}
.success-check-circle{
  width:118px;height:118px;border-radius:999px;display:grid;place-items:center;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;font-size:76px;font-weight:900;line-height:1;
  box-shadow:0 18px 46px rgba(34,197,94,.38), inset 0 0 0 10px rgba(255,255,255,.18);
  animation:successCheckPop .42s cubic-bezier(.2,1.35,.45,1) both;
}
.success-check-card strong{font-size:24px;font-weight:900;color:#14532d;}
.success-check-overlay.is-hiding{animation:successOverlayOut .32s ease both;}
@keyframes successOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes successOverlayOut{to{opacity:0;transform:scale(.98)}}
@keyframes successCheckPop{0%{opacity:0;transform:scale(.55) rotate(-12deg)}70%{opacity:1;transform:scale(1.08) rotate(0)}100%{transform:scale(1)}}
:root[data-theme="dark"] .success-check-overlay{background:rgba(2,6,23,.42);}
:root[data-theme="dark"] .success-check-card{background:linear-gradient(145deg,#0f172a,#052e16);border-color:rgba(34,197,94,.28);}
:root[data-theme="dark"] .success-check-card strong{color:#bbf7d0;}

/* === UX polish: compact actions, notifications opening, unified filters === */
.notification-menu-head small{color:var(--muted);font-weight:800;font-size:12px}
.notification-open-item{display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;gap:12px!important;text-decoration:none!important}
.notification-open-item .notification-text{display:grid;gap:4px;min-width:0}
.notification-open-button,.notification-modal-list b{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:999px;background:linear-gradient(135deg,#2563eb,#38bdf8);color:#fff;font-weight:900;font-size:12px;box-shadow:0 10px 22px rgba(37,99,235,.18)}
.notification-modal-list a{display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;gap:12px!important;text-decoration:none!important}
.notification-modal-actions{display:flex!important;gap:10px!important;justify-content:flex-end!important;flex-wrap:wrap!important}

.request-show-intro{display:grid!important;grid-template-columns:minmax(220px,.8fr) minmax(320px,1.7fr)!important;align-items:center!important;gap:18px!important;padding:22px 26px!important}
.request-show-intro h2{font-size:clamp(22px,2.2vw,34px)!important;letter-spacing:.5px!important;margin:4px 0 0!important;word-break:break-word!important}
.request-show-intro .eyebrow{margin-bottom:4px!important}
.request-show-actions{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))!important;gap:10px!important;align-items:stretch!important;justify-content:stretch!important;width:100%!important}
.request-show-actions .btn,.request-show-actions button{width:100%!important;min-height:48px!important;border-radius:16px!important;justify-content:center!important;font-weight:950!important}
.request-show-actions form{display:flex!important;margin:0!important;min-width:0!important}
.request-show-actions .wa-send-form{grid-column:span 2;display:grid!important;grid-template-columns:minmax(160px,1fr) auto!important;gap:8px!important;align-items:center!important}
.request-show-actions .wa-send-form input{height:48px!important;border-radius:16px!important;min-width:0!important;width:100%!important}
.print-option{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:48px!important;border-radius:16px!important;background:rgba(248,250,252,.96)!important;border:1px solid rgba(219,230,245,.95)!important;padding:8px 12px!important;font-weight:900!important}

.filters-bar.advanced-filters,.advanced-filters{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;gap:12px!important;align-items:end!important}
.filters-bar label,.advanced-filters label{min-width:0!important;margin:0!important;color:var(--muted)!important;font-weight:900!important}
.filters-bar input,.filters-bar select,.advanced-filters input,.advanced-filters select,.combo-select-input{height:46px!important;border-radius:16px!important}
.filters-bar .filter-actions,.advanced-filters .filter-actions{grid-column:1/-1!important;display:flex!important;justify-content:flex-start!important;align-items:center!important;gap:10px!important;margin-top:2px!important;padding-top:10px!important;border-top:1px dashed rgba(148,163,184,.28)!important}
.filters-bar .filter-actions .btn,.advanced-filters .filter-actions .btn{min-height:44px!important;border-radius:14px!important;padding-inline:18px!important}

:root[data-theme="dark"] .request-show-intro,
:root[data-theme="dark"] .purchase-paper,
:root[data-theme="dark"] .approval-after-paper{background:linear-gradient(135deg,rgba(15,23,42,.94),rgba(17,28,48,.9))!important;border-color:rgba(148,163,184,.22)!important;box-shadow:0 20px 55px rgba(0,0,0,.24)!important}
:root[data-theme="dark"] .request-show-actions .btn-light,
:root[data-theme="dark"] .print-option{background:rgba(15,23,42,.9)!important;color:#eaf2ff!important;border-color:rgba(148,163,184,.26)!important}
:root[data-theme="dark"] .wa-send-form input,
:root[data-theme="dark"] .filters-bar input,
:root[data-theme="dark"] .advanced-filters input,
:root[data-theme="dark"] .combo-select-input{background:rgba(2,6,23,.46)!important;color:#eef6ff!important;border-color:rgba(148,163,184,.24)!important}
:root[data-theme="dark"] .notification-menu,
:root[data-theme="dark"] .notification-modal-card{background:rgba(15,23,42,.98)!important;border-color:rgba(148,163,184,.24)!important;color:#eef6ff!important}
:root[data-theme="dark"] .notification-menu-head,
:root[data-theme="dark"] .notification-modal-list a{border-color:rgba(148,163,184,.18)!important}

@media(max-width:920px){
  .request-show-intro{grid-template-columns:1fr!important;padding:18px!important}
  .request-show-actions{grid-template-columns:1fr 1fr!important}
  .request-show-actions .wa-send-form{grid-column:1/-1!important;grid-template-columns:1fr!important}
}
@media(max-width:620px){
  .request-show-actions{grid-template-columns:1fr!important}
  .filters-bar .filter-actions,.advanced-filters .filter-actions{display:grid!important;grid-template-columns:1fr!important}
}

/* === Auto filters and quick notifications === */
.advanced-filters .filter-actions .visually-hidden-apply,
.filters-bar .filter-actions .visually-hidden-apply{
  display:none!important;
}
.advanced-filters .filter-actions,
.filters-bar .filter-actions{
  justify-content:flex-start!important;
}
.notification-modal-card{
  animation: notificationSoftIn .22s ease both;
}
.notification-modal-card:after{
  content:'سيختفي التنبيه تلقائيًا';
  display:block;
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.notification-modal-list div,
.notification-modal-list a{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  align-items:center!important;
  gap:12px!important;
  text-decoration:none!important;
  color:inherit!important;
  padding:10px 0!important;
  border-bottom:1px solid rgba(148,163,184,.16)!important;
}
.notification-open-button,
.notification-modal-list b{
  pointer-events:none;
}
@keyframes notificationSoftIn{
  from{opacity:0;transform:translateY(12px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.user-reports-panel .status-pill.info{
  background:rgba(37,99,235,.10);
  color:#1d4ed8;
  border:1px solid rgba(37,99,235,.18);
}
:root[data-theme="dark"] .user-reports-panel .status-pill.info{
  background:rgba(59,130,246,.14)!important;
  color:#bfdbfe!important;
  border-color:rgba(59,130,246,.22)!important;
}

/* === Approval filters polish === */
.approval-filter-panel{
  background:linear-gradient(135deg,rgba(239,246,255,.92),rgba(255,255,255,.96))!important;
  border-color:rgba(147,197,253,.36)!important;
}
.approval-filter-panel .advanced-filters{margin-top:4px!important}
.approval-filter-panel .panel-header{margin-bottom:10px!important}
:root[data-theme="dark"] .approval-filter-panel{
  background:linear-gradient(135deg,rgba(15,23,42,.92),rgba(17,24,39,.94))!important;
  border-color:rgba(96,165,250,.20)!important;
}

/* === Mobile dashboard/statistics cleanup and size tuning === */
@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden !important; }
  body.page-dashboard .topbar {
    position: static !important;
    margin: 0 0 12px !important;
    padding: 10px 0 4px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  body.page-dashboard .topbar-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  body.page-dashboard .topbar h1 {
    font-size: 28px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }
  body.page-dashboard .topbar-actions,
  body.page-dashboard .login-alerts,
  body.page-dashboard .mobile-menu-fab,
  body.page-dashboard .notification-modal-backdrop,
  body.page-dashboard .live-sync-toast {
    display: none !important;
  }
  body.page-dashboard .main-content {
    padding: 12px 12px 26px !important;
  }
  body.page-dashboard .dashboard-request-stats {
    margin: 8px 0 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  body.page-dashboard .stat-card {
    width: 100% !important;
    min-height: 118px !important;
    padding: 18px 20px !important;
    border-radius: 24px !important;
    display: grid !important;
    align-content: center !important;
    gap: 8px !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.07) !important;
  }
  body.page-dashboard .stat-card span {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }
  body.page-dashboard .stat-card strong {
    font-size: 46px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  body.page-dashboard .stat-card small {
    margin: 0 !important;
    font-size: 14px !important;
  }
  body.page-dashboard .dashboard-clickable-stats .stat-link:after {
    width: 42px !important;
    height: 42px !important;
    border-radius: 16px !important;
    top: 16px !important;
    inset-inline-start: 16px !important;
    left: auto !important;
  }

  /* General mobile sizing across the system */
  .main-content {
    padding: 12px 12px 82px !important;
  }
  .topbar {
    position: static !important;
    margin: -12px -12px 14px !important;
    padding: 12px !important;
    border-radius: 0 0 18px 18px !important;
  }
  .topbar-actions {
    gap: 7px !important;
  }
  .topbar-actions .btn,
  .topbar-actions a.btn,
  .notification-toggle {
    min-height: 42px !important;
    font-size: 13px !important;
    border-radius: 14px !important;
    padding: 8px 10px !important;
  }
  .mobile-menu-button {
    min-height: 46px !important;
    padding: 10px 14px !important;
    border-radius: 18px !important;
    font-size: 18px !important;
  }
  .mobile-menu-fab {
    width: 50px !important;
    height: 50px !important;
    border-radius: 17px !important;
  }
  .panel,
  .welcome-card,
  .purchase-paper,
  .form-panel,
  .soft-panel,
  .approval-filter-panel,
  .request-show-intro,
  .approval-after-paper {
    padding: 14px !important;
    border-radius: 20px !important;
  }
  .panel h2,
  .clean-header h2,
  .request-show-intro h2,
  .purchase-paper h2 {
    font-size: 22px !important;
    line-height: 1.35 !important;
  }
  .btn,
  a.btn,
  button.btn {
    min-height: 42px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    padding: 9px 12px !important;
  }
  input,
  select,
  textarea,
  .combo-select-input {
    min-height: 44px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }
  .advanced-filters,
  .filters-bar {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .filter-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .config-tabs,
  .approval-tabs {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch;
  }
  .config-tabs a,
  .approval-tabs a,
  .approval-tabs .approval-tab {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
  }
  .notification-menu {
    position: fixed !important;
    top: 66px !important;
    inset-inline: 10px !important;
    width: auto !important;
    max-height: 58vh !important;
    overflow: auto !important;
    border-radius: 18px !important;
  }
  .notification-modal-backdrop {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 76px 10px 10px !important;
    background: transparent !important;
    pointer-events: none !important;
  }
  .notification-modal-card {
    width: 100% !important;
    max-width: 420px !important;
    border-radius: 20px !important;
    padding: 14px !important;
    box-shadow: 0 18px 42px rgba(15,23,42,.18) !important;
    pointer-events: auto !important;
  }
  .notification-modal-icon { font-size: 26px !important; }
  .notification-modal-content h2 { font-size: 18px !important; margin: 0 0 4px !important; }
  .notification-modal-content p { font-size: 13px !important; margin: 0 0 8px !important; }
  .notification-modal-list { max-height: 160px !important; overflow: auto !important; }
  .request-show-actions {
    grid-template-columns: 1fr !important;
  }
  .request-show-actions .wa-send-form {
    grid-template-columns: 1fr !important;
  }
  .approval-mini-summary,
  .tracking-compact-summary {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .approval-mini-action {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 430px) {
  body.page-dashboard .main-content { padding: 10px 10px 22px !important; }
  body.page-dashboard .topbar h1 { font-size: 25px !important; }
  body.page-dashboard .stat-card {
    min-height: 104px !important;
    padding: 16px !important;
    border-radius: 22px !important;
  }
  body.page-dashboard .stat-card span { font-size: 16px !important; }
  body.page-dashboard .stat-card strong { font-size: 42px !important; }
  body.page-dashboard .stat-card small { font-size: 13px !important; }
  .panel,
  .welcome-card,
  .purchase-paper,
  .form-panel,
  .soft-panel,
  .approval-filter-panel,
  .request-show-intro,
  .approval-after-paper { padding: 12px !important; }
  .table-wrap,
  .scroll-x,
  .purchase-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  table.responsive-table tbody tr { padding: 10px !important; border-radius: 16px !important; }
  table.responsive-table tbody td { padding: 8px 6px !important; }
}

/* === 2026-06-11: Compact mobile responsive overhaul ===
   هدف هذا الجزء: نسخة هاتف أصغر، أوضح، وأسهل باللمس بدون تحويل كل شيء إلى متاهة طويلة. */
@media (max-width: 980px) {
  :root {
    --radius: 18px;
    --mobile-gap: 10px;
    --mobile-pad: 12px;
    --mobile-control: 40px;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body {
    font-size: 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f5f9 100%);
  }

  .app-body {
    display: block !important;
    min-height: 100vh;
  }

  .main-content {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 10px 10px calc(22px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;
    margin: -10px -10px 10px !important;
    padding: calc(8px + env(safe-area-inset-top)) 10px 8px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    border-radius: 0 0 16px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, .92) !important;
    background: rgba(248, 251, 255, .96) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .07) !important;
    backdrop-filter: blur(14px);
  }

  .topbar-title-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .topbar h1 {
    margin: 0 !important;
    font-size: clamp(18px, 4.8vw, 24px) !important;
    line-height: 1.28 !important;
    letter-spacing: -.2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: start !important;
  }

  .mobile-menu-button {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: var(--mobile-control) !important;
    padding: 7px 10px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  .mobile-menu-button span {
    font-size: 17px !important;
  }

  .mobile-menu-fab {
    display: none !important;
  }

  .topbar-actions {
    display: flex !important;
    width: 100% !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 1px 0 4px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .topbar-actions::-webkit-scrollbar,
  .config-tabs::-webkit-scrollbar,
  .approval-tabs::-webkit-scrollbar,
  .mobile-chip-scroll::-webkit-scrollbar {
    display: none;
  }

  .topbar-actions .btn,
  .topbar-actions a.btn,
  .notification-toggle {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 36px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  .notification-box {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  .notification-menu {
    position: fixed !important;
    top: calc(82px + env(safe-area-inset-top)) !important;
    inset-inline: 10px !important;
    width: auto !important;
    max-height: min(68vh, 520px) !important;
    overflow: auto !important;
    border-radius: 16px !important;
    padding: 8px !important;
    z-index: 1400 !important;
  }

  .notification-menu-head {
    padding: 6px 8px 9px !important;
    gap: 8px !important;
  }

  .notification-item {
    padding: 9px !important;
    border-radius: 13px !important;
  }

  .sidebar {
    width: min(84vw, 320px) !important;
    padding: 14px !important;
    gap: 14px !important;
  }

  .sidebar-brand {
    gap: 9px !important;
  }

  .brand-logo {
    --site-logo-size: min(var(--site-logo-size, 56px), 56px) !important;
    border-radius: 16px !important;
  }

  .sidebar-brand strong {
    font-size: 14px !important;
  }

  .sidebar-brand small,
  .sidebar-user small {
    font-size: 11px !important;
  }

  .side-nav {
    gap: 6px !important;
  }

  .side-nav a {
    min-height: 42px !important;
    padding: 9px 11px !important;
    border-radius: 13px !important;
    font-size: 13.5px !important;
  }

  .sidebar-user {
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }

  .panel,
  .welcome-card,
  .stat-card,
  .request-intro,
  .purchase-paper,
  .form-panel,
  .soft-panel,
  .approval-filter-panel,
  .request-show-intro,
  .approval-after-paper,
  .tracking-card,
  .approval-card,
  .empty-card {
    border-radius: 16px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .055) !important;
  }

  .panel,
  .welcome-card,
  .purchase-paper,
  .form-panel,
  .soft-panel,
  .approval-filter-panel,
  .request-show-intro,
  .approval-after-paper {
    padding: var(--mobile-pad) !important;
    margin-bottom: 10px !important;
  }

  .panel-header,
  .clean-header,
  .request-intro,
  .request-table-toolbar,
  .tab-title-line,
  .actions-row,
  .filters-bar,
  .advanced-filters .filter-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    align-items: stretch !important;
  }

  .panel-header,
  .clean-header {
    margin-bottom: 10px !important;
  }

  .panel h2,
  .welcome-card h2,
  .request-intro h2,
  .config-hero h2,
  .request-show-intro h2 {
    font-size: clamp(19px, 5vw, 22px) !important;
    line-height: 1.35 !important;
    margin-bottom: 4px !important;
  }

  .eyebrow {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  .panel-header p,
  .request-intro p,
  .config-hero p,
  .welcome-card p,
  .topbar p {
    font-size: 12.5px !important;
    line-height: 1.65 !important;
  }

  .stats-grid,
  .grid-2,
  .users-list,
  .form-grid,
  .form-grid.two-cols,
  .check-grid,
  .config-grid,
  .advanced-filters,
  .filters-bar,
  .login-alerts,
  .meta-grid,
  .mini-checks,
  .approval-grid,
  .tracking-grid,
  .approval-meta,
  .schedule-stats,
  .hero-counter,
  .archive-counters,
  .request-show-actions,
  .approval-mini-summary,
  .tracking-compact-summary {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .stat-card {
    min-height: auto !important;
    padding: 12px !important;
  }

  .stat-card span {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }

  .stat-card strong {
    font-size: clamp(28px, 9vw, 38px) !important;
    line-height: 1 !important;
    margin-top: 2px !important;
  }

  .stat-card small {
    font-size: 12px !important;
  }

  .hero-counter div,
  .approval-meta span,
  .meta-grid span,
  .mini-checks label,
  .check-card,
  .permission-sub-list label,
  .toggle-line,
  .switch {
    padding: 9px 10px !important;
    border-radius: 13px !important;
  }

  .hero-counter strong {
    font-size: 22px !important;
  }

  label span,
  .permissions-box > span,
  .switch-field > span {
    font-size: 12.5px !important;
    margin-bottom: 5px !important;
  }

  input[type="text"],
  input[type="password"],
  input[type="file"],
  input[type="number"],
  input[type="date"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  select,
  textarea,
  .combo-select-input {
    min-height: var(--mobile-control) !important;
    border-radius: 12px !important;
    padding: 8px 10px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  textarea {
    min-height: 76px !important;
  }

  .btn,
  a.btn,
  button.btn,
  .btn-sm {
    min-height: var(--mobile-control) !important;
    padding: 8px 11px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  .actions-row .btn,
  .filters-bar .btn,
  .advanced-filters .btn,
  .panel-header .btn,
  .clean-header .btn,
  .request-table-toolbar .btn,
  .approval-actions .btn,
  .request-show-actions .btn {
    width: 100% !important;
  }

  .config-tabs,
  .approval-tabs,
  .archive-tabs {
    display: flex !important;
    overflow-x: auto !important;
    gap: 7px !important;
    padding: 1px 1px 8px !important;
    margin-bottom: 10px !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .config-tabs a,
  .approval-tabs a,
  .approval-tabs .approval-tab,
  .archive-tabs a {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 8px 11px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    gap: 6px !important;
    scroll-snap-align: start;
  }

  .status-pill {
    padding: 5px 9px !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  code {
    padding: 4px 7px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }

  .alert,
  .login-alert {
    padding: 10px 11px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 760px) {
  /* الجداول العامة: بطاقات قصيرة مقروءة بدل تمرير أفقي طويل */
  .table-wrap,
  .modern-table {
    overflow: visible !important;
  }

  table.responsive-table:not(.purchase-info-table):not(.purchase-form-table),
  table.responsive-table:not(.purchase-info-table):not(.purchase-form-table) thead,
  table.responsive-table:not(.purchase-info-table):not(.purchase-form-table) tbody,
  table.responsive-table:not(.purchase-info-table):not(.purchase-form-table) tfoot,
  table.responsive-table:not(.purchase-info-table):not(.purchase-form-table) tr,
  table.responsive-table:not(.purchase-info-table):not(.purchase-form-table) th,
  table.responsive-table:not(.purchase-info-table):not(.purchase-form-table) td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  table.responsive-table:not(.purchase-info-table):not(.purchase-form-table) {
    border: 0 !important;
    background: transparent !important;
  }

  table.responsive-table:not(.purchase-info-table):not(.purchase-form-table) thead {
    display: none !important;
  }

  table.responsive-table:not(.purchase-info-table):not(.purchase-form-table) tbody tr {
    margin: 0 0 9px !important;
    padding: 9px !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .045) !important;
  }

  table.responsive-table:not(.purchase-info-table):not(.purchase-form-table) tbody td {
    display: grid !important;
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 32px !important;
    padding: 6px 2px !important;
    border: 0 !important;
    border-bottom: 1px dashed rgba(148, 163, 184, .28) !important;
    text-align: start !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  table.responsive-table:not(.purchase-info-table):not(.purchase-form-table) tbody td:last-child {
    border-bottom: 0 !important;
  }

  table.responsive-table:not(.purchase-info-table):not(.purchase-form-table) tbody td::before {
    content: attr(data-label);
    display: block !important;
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
  }

  table.responsive-table td[colspan] {
    grid-template-columns: 1fr !important;
  }

  table.responsive-table td[colspan]::before {
    display: none !important;
  }

  table.responsive-table td .actions-inline,
  table.responsive-table td form {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
  }

  table.responsive-table td .actions-inline .btn,
  table.responsive-table td form .btn {
    width: auto !important;
    flex: 1 1 120px !important;
    min-height: 36px !important;
  }

  /* نموذج طلب الشراء: يبقى مصغرًا ومنظمًا، لا يتحول إلى متاهة طويلة */
  .purchase-title {
    font-size: 21px !important;
    margin: 0 0 10px !important;
  }

  .purchase-paper {
    border-width: 1px !important;
  }

  .purchase-info-table,
  .purchase-info-table tbody,
  .purchase-info-table tr,
  .purchase-info-table th,
  .purchase-info-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .purchase-info-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
  }

  .purchase-info-table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr) !important;
    gap: 0 !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 9px !important;
    background: #fff !important;
  }

  .purchase-info-table th,
  .purchase-info-table td {
    border: 0 !important;
    border-bottom: 1px solid #edf2f7 !important;
    min-height: 40px !important;
    padding: 8px 9px !important;
    text-align: start !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  .purchase-info-table th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 11.5px !important;
    display: flex !important;
    align-items: center !important;
  }

  .purchase-info-table td {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .purchase-info-table tbody tr > :nth-last-child(-n+2) {
    border-bottom: 0 !important;
  }

  .purchase-info-table input,
  .purchase-info-table select,
  .purchase-info-table textarea,
  .purchase-info-table .combo-select-wrapper {
    width: 100% !important;
  }

  .field-hint {
    display: none !important;
  }

  .purchase-table-wrap {
    overflow: visible !important;
  }

  .purchase-form-table,
  .purchase-form-table thead,
  .purchase-form-table tbody,
  .purchase-form-table tr,
  .purchase-form-table th,
  .purchase-form-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .purchase-form-table {
    border: 0 !important;
    background: transparent !important;
    table-layout: auto !important;
  }

  .purchase-form-table thead {
    display: none !important;
  }

  .purchase-form-table tbody tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding: 10px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .045) !important;
  }

  .purchase-form-table td {
    border: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    text-align: start !important;
  }

  .purchase-form-table td::before {
    content: attr(data-label);
    display: block !important;
    margin: 0 0 4px !important;
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
  }

  .purchase-form-table .row-number {
    grid-column: 1 / -1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: start !important;
    width: auto !important;
    min-width: 38px !important;
    min-height: 30px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  .purchase-form-table .row-number::before {
    content: 'الصنف رقم ' !important;
    margin-inline-end: 3px !important;
    color: inherit !important;
    font-size: 12px !important;
  }

  .purchase-form-table td:last-child {
    grid-column: 1 / -1 !important;
  }

  .purchase-form-table td:last-child::before {
    display: none !important;
  }

  .purchase-form-table input,
  .purchase-form-table select,
  .purchase-form-table textarea,
  .purchase-form-table .combo-select-wrapper {
    width: 100% !important;
    min-width: 0 !important;
  }

  .purchase-form-table textarea {
    min-height: 64px !important;
  }

  .btn-icon,
  .remove-row {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 12px !important;
  }

  .request-table-toolbar {
    margin: 12px 0 8px !important;
  }

  .request-table-toolbar strong {
    font-size: 14px !important;
  }

  .request-table-toolbar .btn {
    min-height: 36px !important;
  }

  .approval-card,
  .tracking-card {
    padding: 12px !important;
  }

  .approval-head,
  .tracking-card-head {
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
  }

  .approval-head h3,
  .tracking-card-head h3 {
    font-size: 17px !important;
    margin: 6px 0 2px !important;
  }

  .track-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .track-step {
    padding: 8px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
  }

  .timeline-item {
    padding: 10px !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 520px) {
  .main-content {
    padding-inline: 8px !important;
  }

  .topbar {
    margin-inline: -8px !important;
    padding-inline: 8px !important;
  }

  .topbar-actions .btn,
  .topbar-actions a.btn,
  .notification-toggle {
    min-height: 34px !important;
    padding: 6px 9px !important;
    font-size: 12px !important;
  }

  .panel,
  .welcome-card,
  .purchase-paper,
  .form-panel,
  .soft-panel,
  .approval-filter-panel,
  .request-show-intro,
  .approval-after-paper {
    padding: 10px !important;
  }

  .purchase-info-table tbody tr {
    grid-template-columns: minmax(82px, 36%) minmax(0, 1fr) !important;
  }

  .purchase-info-table th,
  .purchase-info-table td {
    padding: 7px 8px !important;
  }

  .purchase-form-table tbody tr {
    gap: 7px !important;
    padding: 9px !important;
  }

  table.responsive-table:not(.purchase-info-table):not(.purchase-form-table) tbody td {
    grid-template-columns: minmax(82px, 36%) minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  .notification-menu {
    top: calc(76px + env(safe-area-inset-top)) !important;
    inset-inline: 8px !important;
  }
}

@media (max-width: 430px) {
  .topbar h1 {
    font-size: 18px !important;
  }

  .mobile-menu-button {
    min-height: 36px !important;
    padding: 6px 9px !important;
    font-size: 12px !important;
  }

  .purchase-form-table tbody tr {
    grid-template-columns: 1fr !important;
  }

  .purchase-info-table tbody tr,
  table.responsive-table:not(.purchase-info-table):not(.purchase-form-table) tbody td {
    grid-template-columns: minmax(76px, 38%) minmax(0, 1fr) !important;
  }

  input[type="text"],
  input[type="password"],
  input[type="file"],
  input[type="number"],
  input[type="date"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  select,
  textarea,
  .combo-select-input {
    min-height: 38px !important;
    padding-block: 7px !important;
  }

  .btn,
  a.btn,
  button.btn,
  .btn-sm {
    min-height: 38px !important;
  }
}

@media (max-width: 760px) {
  :root[data-theme="dark"] .topbar {
    background: rgba(15, 23, 42, .96) !important;
    border-bottom-color: rgba(148, 163, 184, .20) !important;
  }

  :root[data-theme="dark"] table.responsive-table:not(.purchase-info-table):not(.purchase-form-table) tbody tr,
  :root[data-theme="dark"] .purchase-form-table tbody tr,
  :root[data-theme="dark"] .purchase-info-table tbody tr {
    background: rgba(15, 23, 42, .96) !important;
    border-color: rgba(148, 163, 184, .22) !important;
  }

  :root[data-theme="dark"] .purchase-info-table th {
    background: rgba(30, 41, 59, .72) !important;
    color: #cbd5e1 !important;
  }

  :root[data-theme="dark"] .purchase-info-table td,
  :root[data-theme="dark"] table.responsive-table:not(.purchase-info-table):not(.purchase-form-table) tbody td {
    border-bottom-color: rgba(148, 163, 184, .18) !important;
  }
}

/* Specific overrides for dashboard rules that were previously more specific than the global mobile rules. */
@media (max-width: 760px) {
  body.page-dashboard .topbar {
    position: sticky !important;
    top: 0 !important;
    margin: -10px -10px 10px !important;
    padding: calc(8px + env(safe-area-inset-top)) 10px 8px !important;
    display: grid !important;
    gap: 7px !important;
    background: rgba(248, 251, 255, .96) !important;
    border-bottom: 1px solid rgba(226, 232, 240, .92) !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .07) !important;
  }

  body.page-dashboard .topbar-title-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    justify-content: stretch !important;
  }

  body.page-dashboard .topbar h1 {
    font-size: clamp(18px, 4.8vw, 24px) !important;
    text-align: start !important;
  }

  body.page-dashboard .topbar-actions {
    display: flex !important;
  }

  body.page-dashboard .login-alerts {
    display: grid !important;
  }

  body.page-dashboard .main-content {
    padding: 10px 10px calc(22px + env(safe-area-inset-bottom)) !important;
  }

  body.page-dashboard .dashboard-request-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin: 0 0 10px !important;
  }

  body.page-dashboard .stat-card {
    min-height: auto !important;
    padding: 12px !important;
    border-radius: 16px !important;
    gap: 4px !important;
  }

  body.page-dashboard .stat-card span {
    font-size: 12.5px !important;
  }

  body.page-dashboard .stat-card strong {
    font-size: clamp(28px, 9vw, 38px) !important;
  }

  body.page-dashboard .stat-card small {
    font-size: 11.5px !important;
  }

  body.page-dashboard .dashboard-clickable-stats .stat-link:after {
    display: none !important;
  }

  .sidebar .brand-logo {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }
}

@media (max-width: 430px) {
  body.page-dashboard .dashboard-request-stats {
    grid-template-columns: 1fr !important;
  }
}

/* === 2026-06-11: Mobile dark app menu polish ===
   - Mobile opens in night mode by default.
   - Notifications, install, night mode, and logout live beside the user in the drawer.
   - Bottom floating menu button replaces the top menu button on phones.
   - Drawer spacing is tighter for one-hand use. */
.mobile-user-actions { display: none; }
.sidebar-user-info { min-width: 0; }
.sidebar-user-info strong,
.sidebar-user-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 980px) {
  .topbar > .desktop-topbar-actions {
    display: none !important;
  }

  .topbar {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    min-height: 46px !important;
  }

  .topbar-title-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .mobile-menu-button {
    display: none !important;
  }

  .mobile-menu-fab {
    display: inline-flex !important;
    position: fixed !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    right: auto !important;
    inset-inline-start: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    min-width: 116px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    gap: 8px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    box-shadow: 0 18px 38px rgba(37, 99, 235, .38) !important;
  }

  .mobile-menu-fab span { font-size: 20px !important; line-height: 1 !important; }
  .mobile-menu-fab b { display: inline !important; font: inherit !important; }
  .mobile-nav-open .mobile-menu-fab { opacity: .25; pointer-events: none; }

  .sidebar {
    width: min(80vw, 306px) !important;
    padding: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
    border-radius: 18px 0 0 18px !important;
  }

  html[dir="rtl"] .sidebar {
    border-radius: 18px 0 0 18px !important;
  }

  .sidebar-brand {
    min-height: auto !important;
    padding: 0 0 7px !important;
    gap: 7px !important;
  }

  .mobile-sidebar-close {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 12px !important;
    font-size: 23px !important;
    margin: 0 !important;
  }

  .sidebar .brand-logo {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 13px !important;
  }

  .sidebar .brand-logo img {
    padding: 5px !important;
  }

  .sidebar-brand strong {
    font-size: 12.8px !important;
    line-height: 1.35 !important;
    max-height: 36px !important;
    overflow: hidden !important;
  }

  .sidebar-brand small {
    font-size: 10px !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
  }

  .side-nav {
    gap: 3px !important;
  }

  .side-nav a {
    min-height: 36px !important;
    padding: 7px 9px !important;
    border-radius: 11px !important;
    font-size: 12.8px !important;
    line-height: 1.2 !important;
    gap: 7px !important;
  }

  .side-nav a .icon {
    width: 22px !important;
    min-width: 22px !important;
    margin: 0 !important;
    font-size: 15px !important;
  }

  .nav-badge {
    min-width: 19px !important;
    height: 19px !important;
    padding: 0 5px !important;
    font-size: 10.5px !important;
  }

  .sidebar-user {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 14px !important;
    margin-top: auto !important;
    bottom: 0 !important;
  }

  .sidebar-user .avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 12px !important;
  }

  .sidebar-user-info strong {
    display: block !important;
    font-size: 12.6px !important;
    line-height: 1.25 !important;
  }

  .sidebar-user-info small {
    display: block !important;
    font-size: 10.5px !important;
    margin-top: 2px !important;
    line-height: 1.2 !important;
  }

  .mobile-user-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    max-width: 108px !important;
  }

  .mobile-user-action {
    position: relative !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 10px !important;
    display: inline-grid !important;
    place-items: center !important;
    background: rgba(255, 255, 255, .10) !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  .mobile-user-action .icon {
    margin: 0 !important;
    font-size: 14px !important;
  }

  .mobile-user-action:active {
    transform: scale(.96);
  }

  .mobile-user-action .notif-badge {
    position: absolute !important;
    top: -7px !important;
    inset-inline-start: -7px !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
    margin: 0 !important;
    box-shadow: 0 5px 12px rgba(239, 68, 68, .28) !important;
  }

  .mobile-notification-box {
    position: static !important;
    width: auto !important;
  }

  .mobile-user-actions .notification-menu {
    position: fixed !important;
    top: auto !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    inset-inline: 10px !important;
    width: auto !important;
    max-height: min(52vh, 430px) !important;
    overflow: auto !important;
    border-radius: 16px !important;
    padding: 8px !important;
    z-index: 1500 !important;
  }

  .mobile-user-actions .notification-menu-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    padding: 6px 7px 8px !important;
  }

  .mobile-user-actions .notification-item {
    padding: 8px !important;
    border-radius: 12px !important;
  }

  .show-notifications .mobile-user-actions .notification-menu {
    display: block !important;
  }

  .main-content {
    padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 430px) {
  .sidebar {
    width: min(82vw, 286px) !important;
    padding-inline: 9px !important;
  }

  .side-nav a {
    min-height: 34px !important;
    padding: 6px 8px !important;
    font-size: 12.2px !important;
  }

  .sidebar-user {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  .sidebar-user .avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  .mobile-user-actions {
    max-width: 98px !important;
    gap: 3px !important;
  }

  .mobile-user-action {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 9px !important;
  }

  .mobile-menu-fab {
    height: 44px !important;
    min-height: 44px !important;
    min-width: 108px !important;
    padding-inline: 15px !important;
    font-size: 14px !important;
  }
}

@media (max-height: 620px) and (max-width: 980px) {
  .sidebar {
    gap: 5px !important;
  }

  .side-nav a {
    min-height: 31px !important;
    padding-block: 5px !important;
  }

  .sidebar-brand {
    padding-bottom: 5px !important;
  }

  .sidebar-user {
    padding: 6px !important;
  }
}

/* === 2026-06-11 v3: طلب المستخدم - درج موبايل ليلي مضغوط وليس ملء الشاشة === */
@media (max-width: 980px) {
  html[data-theme="dark"],
  :root[data-theme="dark"] {
    color-scheme: dark;
  }

  /* تبقى أزرار الجوال داخل المنيو بجانب اسم المستخدم فقط */
  .topbar > .desktop-topbar-actions,
  .topbar-actions.desktop-topbar-actions {
    display: none !important;
  }

  /* تقليص الهيدر العلوي في صفحات الموبايل */
  .main-content {
    padding-top: calc(8px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }
  .topbar {
    min-height: 42px !important;
    margin: -8px -10px 9px !important;
    padding: 8px 10px !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08) !important;
  }
  .topbar h1 {
    font-size: clamp(17px, 4.7vw, 23px) !important;
    line-height: 1.22 !important;
  }

  /* زر المنيو العائم أسفل الشاشة، مناسب للاستخدام بيد واحدة */
  .mobile-menu-button {
    display: none !important;
  }
  .mobile-menu-fab {
    display: inline-flex !important;
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    inset-inline-start: auto !important;
    bottom: calc(11px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    min-width: 104px !important;
    height: 43px !important;
    min-height: 43px !important;
    padding: 0 15px !important;
    border-radius: 999px !important;
    gap: 7px !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    z-index: 1180 !important;
  }
  .mobile-menu-fab span {
    font-size: 18px !important;
  }
  .mobile-menu-fab b {
    display: inline !important;
  }

  /* درج المنيو لا يملأ الشاشة: تقليص مناسب من الأعلى والأسفل */
  .sidebar {
    top: calc(10px + env(safe-area-inset-top)) !important;
    bottom: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    width: min(78vw, 292px) !important;
    max-width: min(78vw, 292px) !important;
    padding: 9px !important;
    gap: 5px !important;
    border-radius: 18px 0 0 18px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  @supports not (height: 100dvh) {
    .sidebar {
      max-height: calc(100vh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    }
  }
  html[dir="rtl"] .sidebar {
    border-radius: 18px 0 0 18px !important;
  }

  .mobile-sidebar-close {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    border-radius: 10px !important;
    font-size: 21px !important;
  }
  .sidebar-brand {
    padding: 0 0 5px !important;
    gap: 6px !important;
  }
  .sidebar .brand-logo {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
    border-radius: 11px !important;
  }
  .sidebar .brand-logo img {
    padding: 4px !important;
  }
  .sidebar-brand strong {
    font-size: 11.8px !important;
    line-height: 1.25 !important;
    max-height: 32px !important;
  }
  .sidebar-brand small {
    font-size: 9.3px !important;
    line-height: 1.15 !important;
  }

  /* تصغير المسافات بين عناصر القائمة */
  .side-nav {
    gap: 2px !important;
  }
  .side-nav a {
    min-height: 31px !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
    font-size: 11.9px !important;
    line-height: 1.15 !important;
    gap: 6px !important;
  }
  .side-nav a .icon {
    width: 19px !important;
    min-width: 19px !important;
    font-size: 13.5px !important;
    margin: 0 !important;
  }
  .nav-badge {
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    font-size: 9.5px !important;
  }

  /* الإجراءات جنب اسم المستخدم: إشعارات، ليلي، تثبيت، خروج */
  .sidebar-user {
    position: static !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 12px !important;
    margin-top: 6px !important;
  }
  .sidebar-user .avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 11px !important;
  }
  .sidebar-user-info strong {
    font-size: 11.6px !important;
    line-height: 1.18 !important;
  }
  .sidebar-user-info small {
    font-size: 9.8px !important;
    margin-top: 1px !important;
  }
  .mobile-user-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    max-width: 118px !important;
  }
  .mobile-user-action {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
  }
  .mobile-user-action .icon {
    font-size: 13px !important;
    margin: 0 !important;
  }
  .mobile-user-action .notif-badge {
    top: -6px !important;
    inset-inline-start: -6px !important;
    min-width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
  }

  /* قائمة الإشعارات في الموبايل تفتح فوق زر المنيو ولا تخرج من الشاشة */
  .mobile-user-actions .notification-menu,
  .notification-menu {
    position: fixed !important;
    top: auto !important;
    bottom: calc(62px + env(safe-area-inset-bottom)) !important;
    inset-inline: 10px !important;
    width: auto !important;
    max-height: min(48vh, 360px) !important;
    overflow: auto !important;
    border-radius: 15px !important;
    padding: 8px !important;
    z-index: 1500 !important;
  }

  /* تقليل فراغات البطاقات والنماذج العامة على الموبايل */
  .panel,
  .welcome-card,
  .stat-card,
  .request-intro,
  .purchase-paper,
  .form-panel,
  .soft-panel {
    padding: 12px !important;
    border-radius: 15px !important;
    margin-bottom: 10px !important;
  }
  .stats-grid,
  .grid-2,
  .form-stack,
  .advanced-filters,
  .login-alerts {
    gap: 8px !important;
  }
  .btn {
    min-height: 40px !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }
  input[type="text"], input[type="password"], input[type="file"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], select, textarea,
  .combo-select-input {
    min-height: 41px !important;
    padding: 9px 11px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
  }
  label span,
  .permissions-box > span,
  .switch-field > span {
    margin-bottom: 4px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 430px) {
  .sidebar {
    width: min(80vw, 276px) !important;
    max-width: min(80vw, 276px) !important;
    padding: 8px !important;
  }
  .side-nav a {
    min-height: 30px !important;
    padding: 4px 7px !important;
    font-size: 11.4px !important;
  }
  .mobile-user-actions {
    max-width: 116px !important;
  }
  .mobile-user-action {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }
}

@media (max-height: 620px) and (max-width: 980px) {
  .sidebar {
    top: calc(6px + env(safe-area-inset-top)) !important;
    max-height: calc(100dvh - 58px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    padding-block: 7px !important;
  }
  .side-nav a {
    min-height: 28px !important;
    padding-block: 4px !important;
  }
  .sidebar-brand {
    padding-bottom: 4px !important;
  }
  .sidebar-user {
    margin-top: 4px !important;
  }
}

/* === 2026-06-11 v4: Mobile light default, hidden filters, compact controls === */
.filter-toggle-button { display: none; }
.refresh-data-button.is-refreshing .icon { animation: mobileRefreshSpin .75s linear infinite; }
@keyframes mobileRefreshSpin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  /* لا تفتح نسخة الموبايل بالوضع الليلي افتراضياً، وتبقى أزرار الأعلى مخفية */
  .topbar > .desktop-topbar-actions,
  .topbar-actions.desktop-topbar-actions {
    display: none !important;
  }

  .topbar {
    min-height: 36px !important;
    margin: -6px -8px 7px !important;
    padding: 6px 8px !important;
    border-radius: 0 0 12px 12px !important;
  }
  .topbar h1 {
    font-size: clamp(15px, 4.2vw, 20px) !important;
    line-height: 1.16 !important;
  }
  .main-content {
    padding-top: calc(6px + env(safe-area-inset-top)) !important;
    padding-inline: 8px !important;
    padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
  }

  /* زر التصفية مخفي المحتوى افتراضياً ويظهر عند النقر */
  .filter-toggle-button {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 0 7px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(37, 99, 235, .18) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(255,255,255,.96)) !important;
    color: #1e3a8a !important;
    font-weight: 900 !important;
    font-size: 12.5px !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.045) !important;
  }
  .filter-toggle-button b {
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: rgba(37, 99, 235, .12) !important;
    color: #1d4ed8 !important;
    font-size: 11px !important;
  }
  .filter-toggle-button.is-open b {
    background: rgba(239, 68, 68, .10) !important;
    color: #b91c1c !important;
  }
  .advanced-filters.mobile-collapsed-filter:not(.filter-open),
  .filters-bar.mobile-collapsed-filter:not(.filter-open) {
    display: none !important;
  }
  .advanced-filters.filter-open,
  .filters-bar.filter-open {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 10px !important;
    margin-bottom: 9px !important;
    border: 1px solid rgba(37,99,235,.14) !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.86) !important;
  }

  /* منيو الموبايل: أزرار صغيرة وخفيفة بجانب المستخدم مع الإشعارات فقط بارزة */
  .mobile-user-actions {
    max-width: 142px !important;
    gap: 2px !important;
  }
  .mobile-user-action {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.12) !important;
  }
  .mobile-user-action .icon { font-size: 12px !important; }
  .mobile-notification-box .mobile-user-action.notification-toggle {
    background: rgba(255,255,255,.92) !important;
    color: #0f172a !important;
    border-color: rgba(255,255,255,.30) !important;
  }
  .mobile-user-action .notif-badge {
    top: -6px !important;
    inset-inline-start: -6px !important;
    min-width: 15px !important;
    height: 15px !important;
    font-size: 8.5px !important;
  }
  .sidebar-user {
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    padding: 5px !important;
    gap: 5px !important;
  }
  .sidebar-user .avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }

  /* إخفاء مقدمة طلب الشراء والعنوان الذي يزحم الموبايل */
  body.page-purchase_requests .request-intro,
  body.page-purchase_requests .purchase-title {
    display: none !important;
  }
  body.page-purchase_requests .purchase-paper {
    padding: 9px !important;
  }
  body.page-purchase_requests .request-table-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin: 8px 0 !important;
  }
  body.page-purchase_requests .request-table-toolbar strong {
    grid-column: 1 / -1 !important;
    font-size: 12.5px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    background: rgba(37,99,235,.07) !important;
    color: #1e40af !important;
  }
  body.page-purchase_requests .request-table-toolbar .btn {
    min-height: 34px !important;
    padding: 7px 8px !important;
    font-size: 11.5px !important;
  }

  /* ليبلات واضحة للجداول في الموبايل */
  .purchase-info-table tbody th {
    display: none !important;
  }
  .purchase-info-table tbody td,
  .purchase-form-table tbody td,
  table.responsive-table tbody td {
    position: relative !important;
  }
  .purchase-info-table tbody td::before,
  .purchase-form-table tbody td::before,
  table.responsive-table tbody td::before {
    display: inline-flex !important;
    align-items: center !important;
    width: max-content !important;
    max-width: 100% !important;
    padding: 3px 8px !important;
    margin-bottom: 4px !important;
    border-radius: 999px !important;
    background: rgba(37,99,235,.09) !important;
    color: #1e40af !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
  .purchase-info-table tbody tr,
  .purchase-form-table tbody tr {
    padding: 8px !important;
    border-radius: 13px !important;
    margin-bottom: 8px !important;
  }
  .purchase-info-table td,
  .purchase-form-table td {
    padding: 5px 0 !important;
    min-height: 0 !important;
  }
  .purchase-info-table input,
  .purchase-info-table select,
  .purchase-form-table input,
  .purchase-form-table textarea,
  .purchase-form-table select {
    min-height: 36px !important;
    padding: 7px 9px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }
  .purchase-form-table textarea {
    min-height: 56px !important;
    line-height: 1.45 !important;
  }
  .request-notes {
    margin-top: 8px !important;
  }
  .request-notes textarea {
    min-height: 62px !important;
  }

  /* تصغير عام للعناصر والفراغات على الموبايل */
  .panel,
  .welcome-card,
  .stat-card,
  .form-panel,
  .soft-panel {
    padding: 10px !important;
    border-radius: 13px !important;
    margin-bottom: 8px !important;
  }
  .stats-grid,
  .grid-2,
  .form-stack,
  .form-grid,
  .check-grid,
  .login-alerts {
    gap: 7px !important;
  }
  .btn {
    min-height: 36px !important;
    padding: 7px 10px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
  }
  input[type="text"], input[type="password"], input[type="file"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], select, textarea,
  .combo-select-input {
    min-height: 38px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }
  label span,
  .permissions-box > span,
  .switch-field > span {
    font-size: 11.5px !important;
    margin-bottom: 3px !important;
  }
  .mobile-menu-fab {
    min-width: 96px !important;
    height: 39px !important;
    min-height: 39px !important;
    bottom: calc(9px + env(safe-area-inset-bottom)) !important;
    font-size: 12.5px !important;
    padding-inline: 13px !important;
  }
}

@media (max-width: 430px) {
  .mobile-user-actions { max-width: 136px !important; }
  .mobile-user-action {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
  }
  .sidebar-user-info strong { font-size: 10.8px !important; }
  .sidebar-user-info small { font-size: 9px !important; }
}

:root[data-theme="dark"] .filter-toggle-button {
  background: linear-gradient(135deg, rgba(96,165,250,.16), rgba(15,23,42,.92)) !important;
  color: #dbeafe !important;
  border-color: rgba(96,165,250,.24) !important;
}
:root[data-theme="dark"] .filter-toggle-button b,
:root[data-theme="dark"] .purchase-info-table tbody td::before,
:root[data-theme="dark"] .purchase-form-table tbody td::before,
:root[data-theme="dark"] table.responsive-table tbody td::before {
  background: rgba(96,165,250,.16) !important;
  color: #bfdbfe !important;
}

/* === 2026-06-11 v5: Mobile drawer right-bottom button, full-height menu, wait overlay, compact login === */
.page-busy-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(15, 23, 42, .20);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: opacity .16s ease, visibility .16s ease;
}
.page-busy-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.page-busy-card {
  min-width: 150px;
  max-width: min(82vw, 260px);
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  color: #0f172a;
  border: 1px solid rgba(255,255,255,.70);
  box-shadow: 0 18px 50px rgba(15,23,42,.20);
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}
.page-busy-card strong { font-size: 15px; line-height: 1.2; }
.page-busy-card span { color: #64748b; font-weight: 800; font-size: 12px; }
.page-busy-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(37,99,235,.16);
  border-top-color: #2563eb;
  animation: pageBusySpin .72s linear infinite;
}
@keyframes pageBusySpin { to { transform: rotate(360deg); } }
:root[data-theme="dark"] .page-busy-card {
  background: rgba(15,23,42,.94);
  color: #f8fafc;
  border-color: rgba(148,163,184,.22);
}
:root[data-theme="dark"] .page-busy-card span { color: #cbd5e1; }

@media (max-width: 980px) {
  /* زر المنيو العائم في أسفل الشاشة يمين بدل المنتصف */
  .mobile-menu-fab {
    left: auto !important;
    right: calc(12px + env(safe-area-inset-right)) !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    min-width: 82px !important;
    width: auto !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    gap: 6px !important;
    z-index: 1180 !important;
  }
  .mobile-menu-fab span { font-size: 17px !important; }
  .mobile-menu-fab b { display: inline !important; }

  /* المنيو بطول الشاشة، مع نفس العرض المضبوط */
  .sidebar {
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    width: min(80vw, 292px) !important;
    max-width: min(80vw, 292px) !important;
    padding: calc(9px + env(safe-area-inset-top)) 9px calc(9px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px 0 0 18px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  @supports not (height: 100dvh) {
    .sidebar {
      height: 100vh !important;
      min-height: 100vh !important;
      max-height: 100vh !important;
    }
  }
  html[dir="rtl"] .sidebar { border-radius: 18px 0 0 18px !important; }

  .sidebar-brand { padding-bottom: 6px !important; }
  .side-nav { gap: 3px !important; }
  .side-nav a {
    min-height: 32px !important;
    padding: 5px 8px !important;
    font-size: 11.8px !important;
    border-radius: 10px !important;
  }
  .sidebar-user {
    margin-top: auto !important;
    position: sticky !important;
    bottom: 0 !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 12px !important;
  }

  /* في المنيو: فقط الإشعارات وتسجيل الخروج */
  .mobile-user-actions {
    display: flex !important;
    max-width: 64px !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
  }
  .mobile-user-actions .refresh-data-button,
  .mobile-user-actions .dark-mode-toggle,
  .mobile-user-actions .install-app-trigger {
    display: none !important;
  }
  .mobile-user-action {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
  }
  .mobile-notification-box .mobile-user-action.notification-toggle {
    background: rgba(255,255,255,.92) !important;
    color: #0f172a !important;
  }

  /* لا تظهر أزرار الليل والتثبيت في شريط الموبايل نهائياً */
  .desktop-topbar-actions .dark-mode-toggle,
  .desktop-topbar-actions .install-app-trigger {
    display: none !important;
  }

  .main-content {
    padding-bottom: calc(58px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 430px) {
  .mobile-menu-fab {
    right: calc(10px + env(safe-area-inset-right)) !important;
    min-width: 76px !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 11.5px !important;
    padding-inline: 11px !important;
  }
  .sidebar {
    width: min(80vw, 276px) !important;
    max-width: min(80vw, 276px) !important;
  }
}

@media (max-width:720px){
  body.login-body {
    padding: 8px !important;
    place-items: center !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }
  .login-shell {
    width: min(92vw, 340px) !important;
    max-width: 340px !important;
    min-height: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 30px rgba(15,23,42,.10) !important;
  }
  .login-hero { padding: 10px 10px 8px !important; }
  .login-hero .hero-content { gap: 5px !important; }
  .login-hero .brand-badge {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    border-radius: 18px !important;
  }
  .login-hero h1 { font-size: 15.5px !important; line-height: 1.18 !important; }
  .login-card { padding: 10px 11px 12px !important; }
  .login-card-header h2 { font-size: 16px !important; margin-bottom: 0 !important; }
  .login-card .form-stack { gap: 7px !important; margin-top: 9px !important; }
  .login-card label span { font-size: 10.8px !important; margin-bottom: 2px !important; }
  .login-card input {
    min-height: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
    padding: 5px 8px !important;
    border-radius: 9px !important;
  }
  .login-card .btn {
    min-height: 33px !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    border-radius: 9px !important;
  }
}

/* === 2026-06-11 v6: progress refresh, full dark polish, filters, tracking, approvals === */
.page-refresh-progress{
  position:fixed!important;
  top:0!important;
  inset-inline-start:0!important;
  width:100%!important;
  height:5px!important;
  z-index:100000!important;
  background:rgba(15,23,42,.08)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
.page-refresh-progress.is-visible{opacity:1!important;visibility:visible!important;}
.page-refresh-progress i{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  inset-inline-start:0!important;
  width:0%;
  border-radius:0 999px 999px 0!important;
  background:linear-gradient(90deg,#38bdf8,#2563eb,#22c55e)!important;
  box-shadow:0 0 18px rgba(37,99,235,.42)!important;
  transition:width .12s linear!important;
}
.page-refresh-progress span{
  position:fixed!important;
  top:8px!important;
  inset-inline-end:10px!important;
  min-width:48px!important;
  height:24px!important;
  display:inline-grid!important;
  place-items:center!important;
  border-radius:999px!important;
  background:rgba(15,23,42,.86)!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:950!important;
  box-shadow:0 10px 28px rgba(15,23,42,.24)!important;
}
.page-busy-percent{
  display:inline-grid!important;
  place-items:center!important;
  min-width:46px!important;
  height:24px!important;
  border-radius:999px!important;
  background:rgba(37,99,235,.10)!important;
  color:#1d4ed8!important;
  font-weight:950!important;
  font-size:12px!important;
}
.page-busy-track{
  width:100%!important;
  height:7px!important;
  overflow:hidden!important;
  border-radius:999px!important;
  background:rgba(37,99,235,.10)!important;
  margin-top:3px!important;
}
.page-busy-track i{
  display:block!important;
  width:0%;
  height:100%!important;
  border-radius:inherit!important;
  background:linear-gradient(90deg,#38bdf8,#2563eb,#22c55e)!important;
  transition:width .12s linear!important;
}
:root[data-theme="dark"] .page-refresh-progress{background:rgba(148,163,184,.14)!important;}
:root[data-theme="dark"] .page-refresh-progress span{background:rgba(2,6,23,.92)!important;color:#eaf6ff!important;border:1px solid rgba(148,163,184,.22)!important;}
:root[data-theme="dark"] .page-busy-percent{background:rgba(96,165,250,.16)!important;color:#bfdbfe!important;}
:root[data-theme="dark"] .page-busy-track{background:rgba(96,165,250,.16)!important;}

.mobile-top-refresh-button{display:none;}
@media (max-width:980px){
  .topbar-title-row{
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:7px!important;
  }
  .mobile-top-refresh-button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    min-width:0!important;
    height:30px!important;
    min-height:30px!important;
    padding:0 8px!important;
    border:1px solid rgba(37,99,235,.14)!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.86)!important;
    color:#1d4ed8!important;
    font-size:11px!important;
    font-weight:950!important;
    box-shadow:0 8px 18px rgba(37,99,235,.08)!important;
  }
  .mobile-top-refresh-button .icon{margin:0!important;font-size:13px!important;}
  .mobile-top-refresh-button.is-refreshing .icon{animation:mobileRefreshSpin .72s linear infinite!important;}
  body.page-dashboard .mobile-menu-fab,
  .mobile-menu-fab{
    display:inline-flex!important;
    position:fixed!important;
    right:calc(12px + env(safe-area-inset-right))!important;
    left:auto!important;
    bottom:calc(12px + env(safe-area-inset-bottom))!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  body.mobile-nav-open .mobile-menu-fab{opacity:.25!important;pointer-events:none!important;}
  body.page-dashboard .main-content{padding-bottom:calc(64px + env(safe-area-inset-bottom))!important;}
  .sidebar{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    top:0!important;
    bottom:0!important;
  }
}

/* Smaller blue logo container on mobile login only; fields remain unchanged. */
@media (max-width:720px){
  body.login-body .login-shell{width:min(90vw,320px)!important;max-width:320px!important;}
  body.login-body .login-hero{
    min-height:0!important;
    padding:6px 8px 5px!important;
    border-radius:0!important;
  }
  body.login-body .login-hero .hero-content{gap:4px!important;}
  body.login-body .login-hero .brand-badge{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    max-width:46px!important;
    max-height:46px!important;
    border-radius:13px!important;
    box-shadow:0 0 0 1px rgba(255,255,255,.22),0 10px 22px rgba(15,23,42,.18)!important;
  }
  body.login-body .login-hero .brand-badge::before{inset:-4px!important;}
  body.login-body .login-hero .brand-badge::after{inset:-1px!important;}
  body.login-body .login-hero .brand-badge img{padding:1px!important;border-radius:11px!important;}
  body.login-body .login-hero h1{font-size:12.5px!important;line-height:1.12!important;margin:0!important;}
}

/* Unified filter layout in every screen and every settings filter. */
.filters-bar.advanced-filters,
.advanced-filters,
form.filters-bar{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(175px,1fr))!important;
  gap:10px!important;
  align-items:end!important;
}
.filters-bar.advanced-filters label,
.advanced-filters label,
form.filters-bar label{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:5px!important;
  min-width:0!important;
  margin:0!important;
  font-weight:900!important;
  color:#334155!important;
}
.filters-bar.advanced-filters input,
.filters-bar.advanced-filters select,
.advanced-filters input,
.advanced-filters select,
form.filters-bar input,
form.filters-bar select,
.filters-bar .combo-select-input,
.advanced-filters .combo-select-input{
  width:100%!important;
  height:42px!important;
  min-height:42px!important;
  border-radius:13px!important;
  padding:8px 11px!important;
  font-size:14px!important;
  font-weight:800!important;
}
.filters-bar .filter-actions,
.advanced-filters .filter-actions,
form.filters-bar .filter-actions{
  grid-column:1/-1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  padding-top:8px!important;
  border-top:1px dashed rgba(148,163,184,.26)!important;
}
.filters-bar .filter-actions .btn,
.advanced-filters .filter-actions .btn,
form.filters-bar .filter-actions .btn{
  min-height:38px!important;
  border-radius:12px!important;
  padding:8px 13px!important;
}
@media (max-width:760px){
  .filters-bar.advanced-filters,
  .advanced-filters,
  form.filters-bar{
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  .advanced-filters.filter-open,
  .filters-bar.filter-open{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    padding:9px!important;
    border-radius:12px!important;
  }
  .filters-bar.advanced-filters input,
  .filters-bar.advanced-filters select,
  .advanced-filters input,
  .advanced-filters select,
  form.filters-bar input,
  form.filters-bar select,
  .filters-bar .combo-select-input,
  .advanced-filters .combo-select-input{
    height:38px!important;
    min-height:38px!important;
    border-radius:10px!important;
    font-size:14px!important;
  }
  .filters-bar .filter-actions,
  .advanced-filters .filter-actions,
  form.filters-bar .filter-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    padding-top:7px!important;
  }
}

/* Approvals: keep only the approval type chooser visible at first; cards open after choosing a type. */
body.page-approvals .approval-tab-panel:not(.active){display:none!important;}
body.page-approvals .approval-tabs{margin-bottom:0!important;}
body.page-approvals .approval-tab-link:not(.active){background:rgba(248,250,252,.96)!important;color:#334155!important;border-color:rgba(226,232,240,.92)!important;}
body.page-approvals .approval-tab-link.active{background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;color:#fff!important;}

/* Tracking: pressing the row opens only the path; all inner content stays hidden until opening. */
.tracking-compact-row{cursor:pointer!important;}
.tracking-compact-row .tracking-current,
.tracking-compact-row .track-steps,
.tracking-compact-row .tracking-inside-actions{display:none!important;}
.tracking-compact-row .tracking-details[open] .tracking-current{display:flex!important;}
.tracking-compact-row .tracking-details[open] .track-steps{display:grid!important;}
.tracking-compact-row .tracking-details[open] .tracking-inside-actions{display:flex!important;}
.tracking-compact-row .tracking-details[open] .tracking-compact-summary{border-bottom:1px solid rgba(226,232,240,.92)!important;}
@media(max-width:760px){
  .tracking-compact-row .track-steps{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* Strong final dark-mode correction across the whole system. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .app-body,
:root[data-theme="dark"] .main-content{
  background:
    radial-gradient(circle at 85% 8%,rgba(59,130,246,.20),transparent 28%),
    radial-gradient(circle at 10% 92%,rgba(20,184,166,.10),transparent 26%),
    linear-gradient(145deg,#07101d 0%,#0b1324 48%,#0f172a 100%)!important;
  color:#eef6ff!important;
}
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .welcome-card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .form-panel,
:root[data-theme="dark"] .soft-panel,
:root[data-theme="dark"] .request-intro,
:root[data-theme="dark"] .purchase-paper,
:root[data-theme="dark"] .approval-filter-panel,
:root[data-theme="dark"] .approval-card,
:root[data-theme="dark"] .approval-mini-card,
:root[data-theme="dark"] .empty-card,
:root[data-theme="dark"] .tracking-card,
:root[data-theme="dark"] .tracking-card-soft,
:root[data-theme="dark"] .tracking-compact-row,
:root[data-theme="dark"] .archive-hero,
:root[data-theme="dark"] .config-hero,
:root[data-theme="dark"] .user-card,
:root[data-theme="dark"] .permission-user-card,
:root[data-theme="dark"] .permissions-box,
:root[data-theme="dark"] .check-card,
:root[data-theme="dark"] .switch,
:root[data-theme="dark"] .toggle-line,
:root[data-theme="dark"] .meta-grid span,
:root[data-theme="dark"] .permission-list div,
:root[data-theme="dark"] .pwa-install-card,
:root[data-theme="dark"] .approval-detail-panel,
:root[data-theme="dark"] .approval-after-paper,
:root[data-theme="dark"] .request-show-intro{
  background:linear-gradient(145deg,rgba(15,23,42,.96),rgba(19,32,53,.92))!important;
  color:#eef6ff!important;
  border-color:rgba(148,163,184,.24)!important;
  box-shadow:0 18px 54px rgba(0,0,0,.25)!important;
}
:root[data-theme="dark"] .topbar{
  background:rgba(8,17,32,.86)!important;
  color:#eef6ff!important;
  border-color:rgba(148,163,184,.22)!important;
  box-shadow:0 16px 44px rgba(0,0,0,.22)!important;
}
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] .topbar h1,
:root[data-theme="dark"] .panel h2,
:root[data-theme="dark"] .welcome-card h2,
:root[data-theme="dark"] .stat-card strong,
:root[data-theme="dark"] .approval-mini-name,
:root[data-theme="dark"] .tracking-card-head h3,
:root[data-theme="dark"] .sidebar-user strong,
:root[data-theme="dark"] .sidebar-brand strong,
:root[data-theme="dark"] .tab-title-line h3,
:root[data-theme="dark"] .approval-detail-head strong,
:root[data-theme="dark"] .notification-menu strong{
  color:#f8fbff!important;
  text-shadow:0 1px 0 rgba(0,0,0,.12)!important;
}
:root[data-theme="dark"] p,
:root[data-theme="dark"] small,
:root[data-theme="dark"] span,
:root[data-theme="dark"] label,
:root[data-theme="dark"] label span,
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .panel-header p,
:root[data-theme="dark"] .topbar p,
:root[data-theme="dark"] .field-hint,
:root[data-theme="dark"] .approval-mini-date,
:root[data-theme="dark"] .tracking-current span,
:root[data-theme="dark"] .tracking-card-head p,
:root[data-theme="dark"] .notification-text span,
:root[data-theme="dark"] .notification-text small{
  color:#cbd9ee!important;
}
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .combo-select-input{
  background:rgba(2,6,23,.68)!important;
  color:#f8fbff!important;
  border-color:rgba(148,163,184,.30)!important;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{color:#8fa3bf!important;}
:root[data-theme="dark"] table,
:root[data-theme="dark"] thead,
:root[data-theme="dark"] tbody,
:root[data-theme="dark"] tfoot,
:root[data-theme="dark"] tr,
:root[data-theme="dark"] th,
:root[data-theme="dark"] td,
:root[data-theme="dark"] table.responsive-table tbody tr,
:root[data-theme="dark"] .purchase-info-table tbody tr,
:root[data-theme="dark"] .purchase-form-table tbody tr{
  background:rgba(10,18,33,.88)!important;
  color:#eef6ff!important;
  border-color:rgba(148,163,184,.22)!important;
}
:root[data-theme="dark"] th,
:root[data-theme="dark"] table.responsive-table tbody td::before,
:root[data-theme="dark"] .purchase-info-table tbody td::before,
:root[data-theme="dark"] .purchase-form-table tbody td::before{
  color:#bfdbfe!important;
  background:rgba(96,165,250,.16)!important;
}
:root[data-theme="dark"] .btn-light,
:root[data-theme="dark"] a.btn-light,
:root[data-theme="dark"] .mobile-top-refresh-button,
:root[data-theme="dark"] .filter-toggle-button,
:root[data-theme="dark"] .approval-tab-link:not(.active),
:root[data-theme="dark"] .config-tabs a:not(.active){
  background:rgba(15,23,42,.82)!important;
  color:#eaf6ff!important;
  border-color:rgba(148,163,184,.27)!important;
}
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .approval-mini-action,
:root[data-theme="dark"] .status-pill,
:root[data-theme="dark"] .approval-mini-no,
:root[data-theme="dark"] .approval-mini-dept,
:root[data-theme="dark"] .approval-mini-counter span,
:root[data-theme="dark"] code{
  background:rgba(96,165,250,.15)!important;
  border-color:rgba(96,165,250,.25)!important;
  color:#bfdbfe!important;
}
:root[data-theme="dark"] .notification-menu,
:root[data-theme="dark"] .notification-modal-card,
:root[data-theme="dark"] .combo-select-menu{
  background:rgba(10,18,33,.98)!important;
  color:#eef6ff!important;
  border-color:rgba(148,163,184,.25)!important;
}
:root[data-theme="dark"] .notification-item,
:root[data-theme="dark"] .combo-select-option,
:root[data-theme="dark"] .tracking-details summary,
:root[data-theme="dark"] .tracking-compact-summary,
:root[data-theme="dark"] .approval-mini-summary,
:root[data-theme="dark"] .approval-detail-head{
  background:rgba(2,6,23,.42)!important;
  color:#eef6ff!important;
  border-color:rgba(148,163,184,.20)!important;
}
:root[data-theme="dark"] .combo-select-option:hover,
:root[data-theme="dark"] .combo-select-option.active{
  background:rgba(96,165,250,.18)!important;
  color:#dbeafe!important;
}
:root[data-theme="dark"] .alert-success{background:rgba(22,101,52,.18)!important;color:#bbf7d0!important;border-color:rgba(34,197,94,.28)!important;}
:root[data-theme="dark"] .alert-error{background:rgba(127,29,29,.25)!important;color:#fecaca!important;border-color:rgba(248,113,113,.30)!important;}
:root[data-theme="dark"] .login-alert{background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(20,184,166,.14))!important;color:#eef6ff!important;border-color:rgba(96,165,250,.25)!important;}
:root[data-theme="dark"] .login-alert strong{color:#f8fbff!important;}
:root[data-theme="dark"] .login-alert span{color:#cbd9ee!important;}
:root[data-theme="dark"] .filter-toggle-button b{background:rgba(96,165,250,.16)!important;color:#bfdbfe!important;}
:root[data-theme="dark"] .advanced-filters.filter-open,
:root[data-theme="dark"] .filters-bar.filter-open{
  background:rgba(15,23,42,.90)!important;
  border-color:rgba(96,165,250,.22)!important;
}


/* === 2026-06-11 v7: login sizing, dashboard FAB fix, refresh slow-net warning, drawer logout placement === */
.page-busy-network-warning{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:26px!important;
  padding:5px 10px!important;
  border-radius:999px!important;
  background:rgba(245,158,11,.14)!important;
  color:#92400e!important;
  border:1px solid rgba(245,158,11,.28)!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.2!important;
}
.page-busy-network-warning[hidden]{display:none!important;}
:root[data-theme="dark"] .page-busy-network-warning{
  background:rgba(245,158,11,.18)!important;
  color:#fde68a!important;
  border-color:rgba(245,158,11,.30)!important;
}
.mobile-nav-logout{display:none!important;}
@media (min-width:981px){.mobile-nav-logout{display:none!important;}}
@media (max-width:980px){
  html body .mobile-menu-fab,
  html body.page-dashboard .mobile-menu-fab{
    display:inline-flex!important;
    position:fixed!important;
    right:calc(12px + env(safe-area-inset-right))!important;
    left:auto!important;
    inset-inline-start:auto!important;
    inset-inline-end:auto!important;
    bottom:calc(12px + env(safe-area-inset-bottom))!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    z-index:5000!important;
    width:auto!important;
    min-width:82px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 12px!important;
    border-radius:999px!important;
    gap:6px!important;
    font-size:12.5px!important;
    font-weight:950!important;
  }
  html body.mobile-nav-open .mobile-menu-fab,
  html body.page-dashboard.mobile-nav-open .mobile-menu-fab{
    opacity:.25!important;
    pointer-events:none!important;
  }
  .side-nav{
    gap:5px!important;
  }
  .side-nav a,
  .side-nav .mobile-nav-logout{
    min-height:36px!important;
    padding:6px 9px!important;
    border-radius:11px!important;
    font-size:13.2px!important;
    line-height:1.15!important;
  }
  .side-nav a .icon{font-size:15px!important;}
  .side-nav .nav-text{font-size:13.2px!important;font-weight:900!important;}
  .side-nav .mobile-nav-logout{
    display:flex!important;
    margin-top:2px!important;
    background:rgba(239,68,68,.10)!important;
    color:#b91c1c!important;
    border:1px solid rgba(239,68,68,.18)!important;
  }
  .side-nav .mobile-nav-logout .icon,
  .side-nav .mobile-nav-logout .nav-text{color:inherit!important;}
  :root[data-theme="dark"] .side-nav .mobile-nav-logout{
    background:rgba(248,113,113,.16)!important;
    color:#fecaca!important;
    border-color:rgba(248,113,113,.24)!important;
  }
  .mobile-user-actions{
    max-width:34px!important;
    justify-content:flex-end!important;
  }
  .mobile-user-actions .mobile-user-action[href*="logout.php"]{display:none!important;}
  .sidebar-user{
    grid-template-columns:30px minmax(0,1fr) auto!important;
  }
}
@media (max-width:430px){
  html body .mobile-menu-fab,
  html body.page-dashboard .mobile-menu-fab{
    right:calc(10px + env(safe-area-inset-right))!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    min-width:78px!important;
    height:36px!important;
    min-height:36px!important;
    font-size:12px!important;
    padding-inline:11px!important;
  }
  .side-nav a,
  .side-nav .mobile-nav-logout{
    min-height:35px!important;
    font-size:13px!important;
    padding:6px 8px!important;
  }
  .side-nav .nav-text{font-size:13px!important;}
}
@media (max-width:720px){
  body.login-body{
    padding:10px!important;
    min-height:100dvh!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
  }
  body.login-body .login-shell{
    width:min(86vw,302px)!important;
    max-width:302px!important;
    min-height:0!important;
    grid-template-columns:1fr!important;
    border-radius:18px!important;
    margin:auto!important;
    overflow:hidden!important;
  }
  body.login-body .login-hero{
    min-height:94px!important;
    padding:8px 10px 7px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  body.login-body .login-hero .hero-content{
    height:auto!important;
    min-height:0!important;
    gap:5px!important;
    display:grid!important;
    place-items:center!important;
  }
  body.login-body .login-hero .brand-badge{
    width:72px!important;
    height:72px!important;
    min-width:72px!important;
    min-height:72px!important;
    max-width:72px!important;
    max-height:72px!important;
    border-radius:20px!important;
  }
  body.login-body .login-hero .brand-badge::before{inset:-5px!important;}
  body.login-body .login-hero .brand-badge::after{inset:-1px!important;}
  body.login-body .login-hero .brand-badge img{padding:2px!important;border-radius:17px!important;}
  body.login-body .login-hero h1{font-size:13.5px!important;line-height:1.15!important;margin:0!important;}
  body.login-body .login-card{padding:10px 10px 12px!important;display:block!important;}
  body.login-body .login-card-header h2{font-size:16.5px!important;margin:0!important;text-align:center!important;}
  body.login-body .login-card .form-stack{width:min(100%,250px)!important;margin:9px auto 0!important;gap:7px!important;}
  body.login-body .login-card label span{font-size:11.3px!important;margin-bottom:3px!important;}
  body.login-body .login-card input{
    width:100%!important;
    min-height:38px!important;
    height:38px!important;
    font-size:13.4px!important;
    padding:7px 10px!important;
    border-radius:10px!important;
  }
  body.login-body .login-card .btn{
    width:100%!important;
    min-height:39px!important;
    height:39px!important;
    font-size:12.8px!important;
    padding:7px 10px!important;
    border-radius:10px!important;
  }
}


/* === 2026-06-11 v8: final login logo, rights text, slow-network 5s warning, drawer spacing === */
.login-rights{
  margin-top:10px!important;
  text-align:center!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.5!important;
  text-shadow:0 1px 0 rgba(255,255,255,.45)!important;
}
:root[data-theme="dark"] .login-rights{color:#cbd9ee!important;text-shadow:none!important;}
.page-busy-network-warning{
  max-width:min(86vw,360px)!important;
  white-space:normal!important;
  text-align:center!important;
  line-height:1.45!important;
  font-size:11.6px!important;
  padding:6px 10px!important;
}
@media (max-width:980px){
  html body .mobile-menu-fab,
  html body.page-dashboard .mobile-menu-fab{
    bottom:calc(24px + env(safe-area-inset-bottom))!important;
    right:calc(12px + env(safe-area-inset-right))!important;
    z-index:4500!important;
  }
  html body.mobile-nav-open .mobile-menu-fab,
  html body.page-dashboard.mobile-nav-open .mobile-menu-fab{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  .sidebar-brand{
    margin-bottom:10px!important;
    padding-bottom:12px!important;
  }
  .side-nav{
    margin-top:8px!important;
    gap:7px!important;
  }
  .side-nav a,
  .side-nav .mobile-nav-logout{
    min-height:38px!important;
    padding:7px 10px!important;
  }
  .side-nav .nav-text{font-size:13.7px!important;}
}
@media (max-width:430px){
  html body .mobile-menu-fab,
  html body.page-dashboard .mobile-menu-fab{
    bottom:calc(22px + env(safe-area-inset-bottom))!important;
    right:calc(10px + env(safe-area-inset-right))!important;
  }
}
@media (max-width:720px){
  body.login-body{
    padding:9px 10px 8px!important;
    place-items:center!important;
  }
  body.login-body .login-shell{
    width:min(86vw,304px)!important;
    max-width:304px!important;
    border-radius:18px!important;
  }
  body.login-body .login-hero{
    min-height:112px!important;
    padding:10px 11px 8px!important;
  }
  body.login-body .login-hero .hero-content{gap:6px!important;}
  body.login-body .login-hero .brand-badge{
    width:84px!important;
    height:84px!important;
    min-width:84px!important;
    min-height:84px!important;
    max-width:84px!important;
    max-height:84px!important;
    border-radius:22px!important;
  }
  body.login-body .login-hero .brand-badge::before{inset:-6px!important;}
  body.login-body .login-hero .brand-badge::after{inset:-2px!important;}
  body.login-body .login-hero .brand-badge img{padding:2px!important;border-radius:18px!important;}
  body.login-body .login-hero h1{font-size:14px!important;line-height:1.16!important;}
  body.login-body .login-card{padding:10px 10px 11px!important;}
  body.login-body .login-card .form-stack{width:min(100%,248px)!important;margin-top:8px!important;}
  body.login-body .login-card input{min-height:38px!important;height:38px!important;}
  body.login-body .login-card .btn{min-height:39px!important;height:39px!important;}
  .login-rights{
    margin-top:8px!important;
    max-width:304px!important;
    font-size:10.8px!important;
    color:#475569!important;
  }
}

/* === 2026-06-11 v9: mobile purchase request entry focus and post-save invoice view === */
.purchase-saved-panel{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  border:1px solid rgba(34,197,94,.22)!important;
  background:linear-gradient(135deg,rgba(240,253,244,.96),rgba(239,246,255,.96))!important;
}
.purchase-saved-panel h2{margin:4px 0!important;font-size:20px!important;color:#14532d!important;}
.purchase-saved-panel p{margin:0!important;color:#475569!important;font-weight:800!important;line-height:1.7!important;}
.purchase-saved-actions{justify-content:flex-end!important;}
.purchase-info-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
:root[data-theme="dark"] .purchase-saved-panel{
  background:linear-gradient(135deg,rgba(20,83,45,.30),rgba(15,23,42,.94))!important;
  border-color:rgba(74,222,128,.28)!important;
}
:root[data-theme="dark"] .purchase-saved-panel h2{color:#bbf7d0!important;}
:root[data-theme="dark"] .purchase-saved-panel p{color:#dbeafe!important;}

@media (max-width:760px){
  /* في نموذج الإدخال على الموبايل، أظهر بيانات الأصناف فقط وأخفِ ترويسة الطلب والحقول العلوية. */
  body.page-purchase_requests .purchase-entry-intro,
  body.page-purchase_requests .purchase-entry-title,
  body.page-purchase_requests .purchase-entry-meta,
  body.page-purchase_requests .purchase-entry-notes{
    display:none!important;
  }
  body.page-purchase_requests .purchase-paper{
    padding-top:10px!important;
  }
  body.page-purchase_requests .request-table-toolbar{
    margin-top:0!important;
    padding:8px!important;
    border:1px solid rgba(37,99,235,.13)!important;
    border-radius:14px!important;
    background:rgba(239,246,255,.78)!important;
  }
  body.page-purchase_requests .request-table-toolbar strong{
    flex:1 1 100%!important;
    width:100%!important;
    font-size:14.5px!important;
    color:#1e3a8a!important;
  }
  body.page-purchase_requests #addItemRow{
    flex:1 1 100%!important;
    width:100%!important;
    min-height:40px!important;
    font-size:13px!important;
    font-weight:950!important;
  }
  body.page-purchase_requests #addCustomColumn{
    flex:1 1 120px!important;
    font-size:12px!important;
  }
  :root[data-theme="dark"] body.page-purchase_requests .request-table-toolbar{
    background:rgba(30,41,59,.76)!important;
    border-color:rgba(96,165,250,.18)!important;
  }
  :root[data-theme="dark"] body.page-purchase_requests .request-table-toolbar strong{color:#dbeafe!important;}

  /* شاشة العرض بعد الحفظ: اجعل النموذج مثل فاتورة/جدول الكمبيوتر مع تمرير أفقي منظم. */
  .purchase-saved-panel{
    display:grid!important;
    gap:10px!important;
    padding:11px!important;
    border-radius:17px!important;
  }
  .purchase-saved-panel h2{font-size:16px!important;line-height:1.35!important;}
  .purchase-saved-panel p{font-size:12px!important;line-height:1.6!important;}
  .purchase-saved-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    width:100%!important;
  }
  .purchase-saved-actions .btn{width:100%!important;min-height:38px!important;}
  .readonly-paper .purchase-info-wrap,
  .readonly-paper .purchase-table-wrap{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:12px!important;
  }
  .readonly-paper .purchase-info-table,
  .readonly-paper .purchase-info-table tbody,
  .readonly-paper .purchase-info-table tr,
  .readonly-paper .purchase-info-table th,
  .readonly-paper .purchase-info-table td,
  .readonly-paper .purchase-form-table,
  .readonly-paper .purchase-form-table thead,
  .readonly-paper .purchase-form-table tbody,
  .readonly-paper .purchase-form-table tr,
  .readonly-paper .purchase-form-table th,
  .readonly-paper .purchase-form-table td{
    display:revert!important;
    width:auto!important;
    min-width:0!important;
  }
  .readonly-paper .purchase-info-table,
  .readonly-paper .purchase-form-table{
    display:table!important;
    min-width:760px!important;
    width:100%!important;
    table-layout:auto!important;
    border-collapse:collapse!important;
    background:#fff!important;
  }
  .readonly-paper .purchase-info-table tbody,
  .readonly-paper .purchase-form-table tbody{display:table-row-group!important;}
  .readonly-paper .purchase-form-table thead{display:table-header-group!important;}
  .readonly-paper .purchase-info-table tr,
  .readonly-paper .purchase-form-table tr{
    display:table-row!important;
    margin:0!important;
    padding:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
  }
  .readonly-paper .purchase-info-table th,
  .readonly-paper .purchase-info-table td,
  .readonly-paper .purchase-form-table th,
  .readonly-paper .purchase-form-table td{
    display:table-cell!important;
    border:1px solid #dbe3ef!important;
    padding:6px 7px!important;
    min-height:0!important;
    text-align:center!important;
    vertical-align:middle!important;
    font-size:11.5px!important;
    line-height:1.45!important;
    white-space:normal!important;
  }
  .readonly-paper .purchase-info-table th,
  .readonly-paper .purchase-form-table th{
    background:#eff6ff!important;
    color:#1e3a8a!important;
    font-weight:950!important;
  }
  .readonly-paper .purchase-info-table td::before,
  .readonly-paper .purchase-form-table td::before,
  .readonly-paper .purchase-form-table .row-number::before{
    display:none!important;
    content:none!important;
  }
  .readonly-paper .purchase-form-table .row-number{
    width:auto!important;
    min-width:0!important;
    padding:6px 7px!important;
    border-radius:0!important;
    background:transparent!important;
    color:#1e3a8a!important;
  }
  .readonly-paper .purchase-title{
    font-size:20px!important;
    margin-bottom:8px!important;
  }
  .readonly-paper .tracking-current,
  .readonly-paper .paper-topline{
    margin-bottom:8px!important;
  }
  :root[data-theme="dark"] .readonly-paper .purchase-info-table,
  :root[data-theme="dark"] .readonly-paper .purchase-form-table{
    background:#0f172a!important;
  }
  :root[data-theme="dark"] .readonly-paper .purchase-info-table th,
  :root[data-theme="dark"] .readonly-paper .purchase-form-table th{
    background:#1e293b!important;
    color:#dbeafe!important;
  }
  :root[data-theme="dark"] .readonly-paper .purchase-info-table td,
  :root[data-theme="dark"] .readonly-paper .purchase-form-table td{
    color:#f8fafc!important;
    border-color:rgba(148,163,184,.24)!important;
  }
}

/* === 2026-06-11 v10: invoice action menu, dashboard compact buttons, login dark toggle === */
.purchase-invoice-image{
  position:relative!important;
  max-width:1120px!important;
  margin-inline:auto!important;
  background:#fff!important;
  border:1px solid rgba(148,163,184,.32)!important;
  box-shadow:0 22px 70px rgba(15,23,42,.13)!important;
  overflow:hidden!important;
}
.purchase-invoice-image::after{
  content:"";
  position:absolute;
  inset:10px;
  pointer-events:none;
  border:1px solid rgba(15,23,42,.04);
  border-radius:18px;
}
.invoice-action-bar{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
}
.invoice-back-btn,
.invoice-action-toggle{
  min-height:38px!important;
  padding:8px 14px!important;
  border-radius:999px!important;
  font-weight:950!important;
}
.invoice-action-menu{position:relative!important;display:inline-flex!important;}
.invoice-action-list{
  position:absolute!important;
  top:calc(100% + 8px)!important;
  inset-inline-end:0!important;
  width:min(420px,92vw)!important;
  display:none!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
  padding:10px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.98)!important;
  border:1px solid rgba(226,232,240,.95)!important;
  box-shadow:0 24px 70px rgba(15,23,42,.18)!important;
  z-index:80!important;
}
.invoice-action-menu.is-open .invoice-action-list{display:grid!important;}
.invoice-action-list .btn,
.invoice-action-list a.btn,
.invoice-action-list button.btn{
  width:100%!important;
  min-height:36px!important;
  padding:7px 10px!important;
  border-radius:11px!important;
  font-size:12.5px!important;
  justify-content:center!important;
}
.invoice-action-list form{display:contents!important;}
.invoice-action-list .wa-send-form{
  display:grid!important;
  grid-column:1/-1!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:6px!important;
  align-items:center!important;
}
.invoice-action-list .wa-send-form input{
  min-height:36px!important;
  height:36px!important;
  border-radius:11px!important;
  font-size:12px!important;
  padding:6px 9px!important;
}
.invoice-action-list .wa-send-form .btn{width:auto!important;min-width:86px!important;}
.invoice-action-list .print-option{
  min-height:36px!important;
  padding:7px 10px!important;
  border-radius:11px!important;
  background:rgba(241,245,249,.9)!important;
  border:1px solid rgba(203,213,225,.9)!important;
  font-size:12px!important;
  font-weight:900!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
}
:root[data-theme="dark"] .purchase-invoice-image{
  background:#0f172a!important;
  border-color:rgba(96,165,250,.18)!important;
  box-shadow:0 24px 70px rgba(2,6,23,.50)!important;
}
:root[data-theme="dark"] .invoice-action-list{
  background:rgba(15,23,42,.98)!important;
  border-color:rgba(96,165,250,.22)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.45)!important;
}
:root[data-theme="dark"] .invoice-action-list .print-option{
  background:rgba(30,41,59,.86)!important;
  border-color:rgba(148,163,184,.20)!important;
  color:#eaf6ff!important;
}

.topbar-actions .topbar-notify-btn{
  min-height:42px!important;
  padding:10px 16px!important;
  border-radius:14px!important;
  font-size:14px!important;
  font-weight:950!important;
}
.topbar-actions .topbar-dark-btn,
.topbar-actions .topbar-logout-btn{
  min-height:36px!important;
  padding:8px 11px!important;
  border-radius:12px!important;
  font-size:12.8px!important;
  font-weight:900!important;
}
.mobile-user-logout,.mobile-dark-action{display:none!important;}
.login-theme-toggle{
  position:fixed!important;
  top:calc(12px + env(safe-area-inset-top))!important;
  inset-inline-start:calc(12px + env(safe-area-inset-left))!important;
  z-index:20!important;
  min-height:34px!important;
  padding:7px 12px!important;
  border:1px solid rgba(37,99,235,.16)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.86)!important;
  color:#1e3a8a!important;
  box-shadow:0 12px 32px rgba(15,23,42,.11)!important;
  font-size:12px!important;
  font-weight:950!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  backdrop-filter:blur(10px)!important;
}
:root[data-theme="dark"] body.login-body{
  background:radial-gradient(circle at top right,rgba(59,130,246,.22),transparent 36%),linear-gradient(135deg,#020617 0%,#0f172a 48%,#111827 100%)!important;
}
:root[data-theme="dark"] .login-shell{
  background:rgba(15,23,42,.92)!important;
  border-color:rgba(96,165,250,.20)!important;
  box-shadow:0 24px 74px rgba(0,0,0,.45)!important;
}
:root[data-theme="dark"] .login-card{background:rgba(15,23,42,.72)!important;color:#f8fafc!important;}
:root[data-theme="dark"] .login-card h2,
:root[data-theme="dark"] .login-card label span{color:#f8fafc!important;}
:root[data-theme="dark"] .login-card input{background:rgba(2,6,23,.72)!important;color:#f8fafc!important;border-color:rgba(148,163,184,.24)!important;}
:root[data-theme="dark"] .login-card input::placeholder{color:#94a3b8!important;}
:root[data-theme="dark"] .login-theme-toggle{background:rgba(15,23,42,.86)!important;color:#dbeafe!important;border-color:rgba(96,165,250,.24)!important;}

@media (max-width:980px){
  body.page-dashboard .topbar > .desktop-topbar-actions,
  body.page-dashboard .topbar-actions.desktop-topbar-actions{
    display:flex!important;
    width:100%!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    padding:2px 0 1px!important;
    margin-top:5px!important;
  }
  body.page-dashboard .desktop-topbar-actions .refresh-data-button,
  body.page-dashboard .desktop-topbar-actions .install-app-trigger{display:none!important;}
  body.page-dashboard .topbar-actions .notification-box{flex:0 0 auto!important;}
  body.page-dashboard .topbar-actions .topbar-notify-btn{
    width:auto!important;
    min-height:34px!important;
    height:34px!important;
    padding:0 12px!important;
    border-radius:999px!important;
    font-size:12.8px!important;
    white-space:nowrap!important;
  }
  body.page-dashboard .topbar-actions .topbar-dark-btn,
  body.page-dashboard .topbar-actions .topbar-logout-btn{
    display:inline-flex!important;
    width:auto!important;
    min-height:31px!important;
    height:31px!important;
    padding:0 9px!important;
    border-radius:999px!important;
    font-size:11.7px!important;
    white-space:nowrap!important;
  }
  body.page-dashboard .topbar-actions .notif-badge{min-width:18px!important;height:18px!important;font-size:10px!important;margin-inline-start:4px!important;}
  .mobile-user-actions{
    max-width:108px!important;
    width:auto!important;
    gap:4px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
  }
  .mobile-user-logout,.mobile-dark-action{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .mobile-user-action{
    width:29px!important;
    height:29px!important;
    min-width:29px!important;
    min-height:29px!important;
    border-radius:10px!important;
  }
  .mobile-user-action .icon{font-size:13px!important;margin:0!important;}
  .mobile-user-logout{background:rgba(239,68,68,.10)!important;color:#b91c1c!important;border:1px solid rgba(239,68,68,.18)!important;}
  .mobile-dark-action{background:rgba(37,99,235,.10)!important;color:#1d4ed8!important;border:1px solid rgba(37,99,235,.16)!important;}
  .side-nav .mobile-nav-logout{display:none!important;}
  :root[data-theme="dark"] .mobile-user-logout{background:rgba(248,113,113,.16)!important;color:#fecaca!important;border-color:rgba(248,113,113,.24)!important;}
  :root[data-theme="dark"] .mobile-dark-action{background:rgba(96,165,250,.18)!important;color:#dbeafe!important;border-color:rgba(96,165,250,.24)!important;}

  .invoice-action-bar{
    width:100%!important;
    justify-content:flex-start!important;
    flex-direction:row-reverse!important;
    gap:6px!important;
  }
  .invoice-back-btn,.invoice-action-toggle{
    min-height:32px!important;
    height:32px!important;
    padding:0 10px!important;
    border-radius:999px!important;
    font-size:11.8px!important;
  }
  .invoice-action-menu{flex:0 0 auto!important;}
  .invoice-action-list{
    inset-inline-start:0!important;
    inset-inline-end:auto!important;
    width:min(92vw,330px)!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    padding:8px!important;
    border-radius:16px!important;
  }
  .invoice-action-list .btn,
  .invoice-action-list a.btn,
  .invoice-action-list button.btn{
    min-height:32px!important;
    height:32px!important;
    padding:0 8px!important;
    border-radius:10px!important;
    font-size:11.3px!important;
  }
  .invoice-action-list .wa-send-form{grid-template-columns:1fr!important;}
  .invoice-action-list .wa-send-form input,
  .invoice-action-list .wa-send-form .btn{width:100%!important;min-height:32px!important;height:32px!important;}
  .invoice-action-list .print-option{min-height:32px!important;font-size:11px!important;padding:5px 8px!important;}
  .purchase-invoice-image{
    border-radius:18px!important;
    padding:11px!important;
    box-shadow:0 16px 42px rgba(15,23,42,.16)!important;
  }
}
@media (max-width:720px){
  body.login-body .login-hero{
    min-height:126px!important;
    padding:13px 12px 10px!important;
  }
  body.login-body .login-hero .brand-badge{
    width:96px!important;
    height:96px!important;
    min-width:96px!important;
    min-height:96px!important;
    max-width:96px!important;
    max-height:96px!important;
    border-radius:24px!important;
  }
  body.login-body .login-hero .brand-badge img{border-radius:20px!important;}
  .login-theme-toggle{
    top:calc(8px + env(safe-area-inset-top))!important;
    inset-inline-start:calc(8px + env(safe-area-inset-left))!important;
    min-height:30px!important;
    padding:5px 9px!important;
    font-size:10.8px!important;
  }
}

@media (max-width:980px){
  .mobile-user-actions .mobile-dark-action,
  .mobile-user-actions .mobile-user-logout{
    display:inline-flex!important;
  }
}

/* === 2026-06-11 v11: single WhatsApp image, bottom invoice actions, clean dashboard alerts === */
body:not(.page-dashboard) .login-alerts{
  display:none!important;
}
.request-show-intro{
  margin-bottom:10px!important;
}
.purchase-invoice-image{
  border-radius:22px!important;
  outline:8px solid rgba(255,255,255,.72)!important;
  background:#fff!important;
}
.purchase-invoice-image .purchase-title{
  letter-spacing:.2px!important;
}
.invoice-bottom-actions{
  max-width:1120px!important;
  margin:10px auto 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  position:relative!important;
  z-index:20!important;
}
.invoice-bottom-actions .invoice-action-menu{
  position:relative!important;
  display:inline-flex!important;
}
.invoice-bottom-actions .invoice-action-list{
  top:auto!important;
  bottom:calc(100% + 8px)!important;
  inset-inline-end:0!important;
  inset-inline-start:auto!important;
}
.invoice-bottom-actions .invoice-back-btn,
.invoice-bottom-actions .invoice-action-toggle{
  min-height:34px!important;
  height:34px!important;
  padding:0 13px!important;
  border-radius:999px!important;
  font-size:12.5px!important;
}
:root[data-theme="dark"] .purchase-invoice-image{
  outline-color:rgba(15,23,42,.72)!important;
}
:root[data-theme="dark"] .invoice-bottom-actions .invoice-back-btn{
  background:#17233a!important;
  color:#eaf6ff!important;
  border-color:rgba(148,163,184,.22)!important;
}

@media (max-width:980px){
  body.page-dashboard .topbar{
    gap:8px!important;
  }
  body.page-dashboard .topbar > .desktop-topbar-actions,
  body.page-dashboard .topbar-actions.desktop-topbar-actions{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    width:100%!important;
    overflow-x:auto!important;
    padding:2px 0 4px!important;
  }
  body.page-dashboard .topbar-actions.desktop-topbar-actions > *,
  body.page-dashboard .topbar-actions.desktop-topbar-actions .notification-box{
    flex:0 0 auto!important;
    width:auto!important;
  }
  body.page-dashboard .topbar-actions.desktop-topbar-actions .btn,
  body.page-dashboard .topbar-actions.desktop-topbar-actions a.btn,
  body.page-dashboard .topbar-actions.desktop-topbar-actions button.btn{
    width:auto!important;
    min-width:0!important;
    flex:0 0 auto!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:nowrap!important;
  }
  body.page-dashboard .topbar-actions .topbar-notify-btn,
  body.page-dashboard .topbar-actions .topbar-dark-btn,
  body.page-dashboard .topbar-actions .topbar-logout-btn{
    height:32px!important;
    min-height:32px!important;
    padding:0 10px!important;
    border-radius:999px!important;
    font-size:11.7px!important;
    gap:4px!important;
  }
  body.page-dashboard .topbar-actions .topbar-notify-btn{
    font-size:12px!important;
    padding-inline:11px!important;
  }
  .invoice-bottom-actions{
    width:calc(100% - 20px)!important;
    margin:8px auto 16px!important;
    justify-content:center!important;
    gap:7px!important;
  }
  .invoice-bottom-actions .invoice-back-btn,
  .invoice-bottom-actions .invoice-action-toggle{
    height:31px!important;
    min-height:31px!important;
    padding:0 10px!important;
    font-size:11.4px!important;
  }
  .invoice-bottom-actions .invoice-action-list{
    bottom:calc(100% + 7px)!important;
    inset-inline-start:50%!important;
    inset-inline-end:auto!important;
    transform:translateX(-50%)!important;
    width:min(92vw,330px)!important;
  }
  .purchase-invoice-image{
    margin-top:6px!important;
    border-radius:18px!important;
    outline:4px solid rgba(255,255,255,.72)!important;
  }
}

/* === v12: mobile dashboard cleanup, glass menu, A4 invoice, form header, approvals default visible === */
@media (max-width:980px){
  /* في الجوال: لا يظهر زر التحديث أو التثبيت أو الوضع الليلي في أعلى لوحة التحكم */
  .mobile-top-refresh-button,
  body.page-dashboard .desktop-topbar-actions .refresh-data-button,
  body.page-dashboard .desktop-topbar-actions .topbar-dark-btn,
  body.page-dashboard .desktop-topbar-actions .install-app-trigger,
  .desktop-topbar-actions .install-app-trigger{
    display:none!important;
  }
  body.page-dashboard .topbar-actions.desktop-topbar-actions{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:7px!important;
    width:100%!important;
    margin-top:4px!important;
    overflow-x:auto!important;
    padding:2px 0 3px!important;
  }
  body.page-dashboard .topbar-actions.desktop-topbar-actions .notification-box,
  body.page-dashboard .topbar-actions.desktop-topbar-actions .topbar-logout-btn{
    display:inline-flex!important;
    flex:0 0 auto!important;
  }
  body.page-dashboard .topbar-actions .topbar-notify-btn,
  body.page-dashboard .topbar-actions .topbar-logout-btn{
    height:32px!important;
    min-height:32px!important;
    padding:0 11px!important;
    border-radius:999px!important;
    font-size:11.8px!important;
    font-weight:950!important;
    gap:4px!important;
    white-space:nowrap!important;
  }
  body.page-dashboard .topbar-actions .topbar-notify-btn{font-size:12.3px!important;}

  /* الوضع الليلي داخل المنيو فقط مع الإشعارات والخروج */
  .mobile-user-actions{
    display:flex!important;
    max-width:116px!important;
    width:auto!important;
    gap:5px!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
  }
  .mobile-user-actions .mobile-dark-action,
  .mobile-user-actions .mobile-user-logout,
  .mobile-user-actions .notification-toggle{
    display:inline-flex!important;
  }
  .mobile-user-actions .install-app-trigger,
  .mobile-user-actions .refresh-data-button{display:none!important;}
  .mobile-user-action{
    width:30px!important;
    min-width:30px!important;
    height:30px!important;
    min-height:30px!important;
    border-radius:11px!important;
  }
  .mobile-user-action .icon{font-size:14px!important;margin:0!important;}
  .side-nav .mobile-nav-logout{display:none!important;}

  /* أسماء الشاشات داخل المنيو بإطار زجاجي خفيف */
  .side-nav{gap:8px!important;padding-top:3px!important;}
  .side-nav a,
  .side-nav .mobile-nav-logout{
    min-height:39px!important;
    padding:7px 10px!important;
    border-radius:15px!important;
    background:rgba(255,255,255,.52)!important;
    border:1px solid rgba(226,232,240,.72)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 8px 22px rgba(15,23,42,.06)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
  }
  .side-nav a.active{
    background:linear-gradient(135deg,rgba(37,99,235,.94),rgba(14,165,233,.82))!important;
    border-color:rgba(96,165,250,.75)!important;
    color:#fff!important;
  }
  .side-nav .nav-text{font-size:14px!important;font-weight:950!important;}
  .sidebar-brand{margin-bottom:15px!important;padding-bottom:14px!important;}
  :root[data-theme="dark"] .side-nav a,
  :root[data-theme="dark"] .side-nav .mobile-nav-logout{
    background:rgba(15,23,42,.50)!important;
    border-color:rgba(96,165,250,.22)!important;
    color:#eaf6ff!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px rgba(0,0,0,.20)!important;
  }
  :root[data-theme="dark"] .side-nav a.active{background:linear-gradient(135deg,#2563eb,#0891b2)!important;color:#fff!important;}
}

/* شاشة الدخول بتأثيرات أخف وشكل أجمل */
body.login-body .login-shell{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.55)!important;}
body.login-body .login-card input:focus{box-shadow:0 0 0 4px rgba(37,99,235,.12)!important;border-color:rgba(37,99,235,.55)!important;transform:translateY(-1px);}
body.login-body .login-card .btn{box-shadow:0 12px 28px rgba(37,99,235,.22)!important;}
@media (max-width:720px){
  body.login-body .login-shell{width:min(88vw,316px)!important;max-width:316px!important;border-radius:20px!important;}
  body.login-body .login-hero{min-height:142px!important;padding:15px 12px 12px!important;}
  body.login-body .login-hero .brand-badge{width:108px!important;height:108px!important;min-width:108px!important;min-height:108px!important;max-width:108px!important;max-height:108px!important;border-radius:26px!important;}
  body.login-body .login-card .form-stack{width:min(100%,244px)!important;}
}

/* عرض الطلب كصفحة A4 واضحة، مع رأس النموذج */
.form-header-image{width:100%;margin:0 0 12px;border:1px solid rgba(148,163,184,.28);border-radius:12px;overflow:hidden;background:#fff;}
.form-header-image img{display:block;width:100%;height:auto;object-fit:cover;}
.purchase-invoice-image.a4-invoice-paper{
  width:min(100%,794px)!important;
  max-width:794px!important;
  min-height:min(1123px, calc(100vw * 1.414))!important;
  margin-inline:auto!important;
  padding:18px!important;
  border-radius:16px!important;
  background:#fff!important;
  border:1px solid rgba(148,163,184,.45)!important;
  box-shadow:0 22px 80px rgba(15,23,42,.16)!important;
  overflow:visible!important;
}
.purchase-invoice-image.a4-invoice-paper .purchase-title{font-size:22px!important;margin:10px 0!important;}
.purchase-invoice-image.a4-invoice-paper .purchase-info-table th,
.purchase-invoice-image.a4-invoice-paper .purchase-info-table td,
.purchase-invoice-image.a4-invoice-paper .purchase-form-table th,
.purchase-invoice-image.a4-invoice-paper .purchase-form-table td,
.purchase-invoice-image.a4-invoice-paper .print-history-table th,
.purchase-invoice-image.a4-invoice-paper .print-history-table td{
  font-size:11px!important;
  padding:6px 5px!important;
  line-height:1.35!important;
}
.purchase-invoice-image.a4-invoice-paper .purchase-table-wrap,
.purchase-invoice-image.a4-invoice-paper .purchase-info-wrap{overflow-x:auto!important;}
.invoice-bottom-actions{z-index:100!important;}
.invoice-bottom-actions .invoice-action-list{
  z-index:9998!important;
  max-height:min(70vh,480px)!important;
  overflow:auto!important;
}
.invoice-action-menu.is-open .invoice-action-list{display:grid!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;}
@media (max-width:980px){
  .purchase-invoice-image.a4-invoice-paper{
    width:calc(100% - 18px)!important;
    padding:9px!important;
    border-radius:13px!important;
    min-height:calc((100vw - 18px) * 1.414)!important;
  }
  .purchase-invoice-image.a4-invoice-paper .purchase-info-table th,
  .purchase-invoice-image.a4-invoice-paper .purchase-info-table td,
  .purchase-invoice-image.a4-invoice-paper .purchase-form-table th,
  .purchase-invoice-image.a4-invoice-paper .purchase-form-table td,
  .purchase-invoice-image.a4-invoice-paper .print-history-table th,
  .purchase-invoice-image.a4-invoice-paper .print-history-table td{
    font-size:9.2px!important;
    padding:4px 3px!important;
  }
  .invoice-bottom-actions{
    width:calc(100% - 18px)!important;
    justify-content:center!important;
    margin:9px auto 18px!important;
  }
  .invoice-bottom-actions .invoice-action-list{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(78px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:min(92vw,340px)!important;
  }
}

.form-header-designer-panel .form-header-preview{border:1px dashed rgba(37,99,235,.35);border-radius:16px;padding:10px;background:#f8fbff;}
.form-header-designer-panel .form-header-preview img{display:block;max-width:100%;border-radius:12px;}
:root[data-theme="dark"] .form-header-designer-panel .form-header-preview{background:rgba(15,23,42,.55);border-color:rgba(96,165,250,.28);}
:root[data-theme="dark"] .purchase-invoice-image.a4-invoice-paper{background:#f8fafc!important;color:#0f172a!important;}
:root[data-theme="dark"] .purchase-invoice-image.a4-invoice-paper th{color:#0f3768!important;}
:root[data-theme="dark"] .purchase-invoice-image.a4-invoice-paper td{color:#0f172a!important;}

/* الاعتمادات: إظهار أول تبويب مباشرة وتلوين العدد */
.approval-tab-panel.active{display:block!important;}
.approval-tabs .approval-tab-link b,
.approval-mini-counter b{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:24px!important;
  height:24px!important;
  padding:0 7px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#f97316,#ef4444)!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(239,68,68,.25)!important;
}
.approval-tabs .approval-tab-link.active b{background:linear-gradient(135deg,#22c55e,#0ea5e9)!important;}
@media print{
  @page{size:A4 portrait;margin:8mm;}
  body{background:#fff!important;}
  .purchase-invoice-image.a4-invoice-paper{width:194mm!important;max-width:194mm!important;min-height:auto!important;box-shadow:none!important;border:1px solid #94a3b8!important;outline:0!important;padding:8mm!important;margin:0 auto!important;}
  .invoice-bottom-actions,.request-show-intro,.purchase-saved-panel,.topbar,.sidebar,.mobile-menu-fab,.mobile-sidebar-backdrop{display:none!important;}
}
@media (max-width:980px){
  .mobile-user-actions .mobile-user-action.mobile-user-logout[href*="logout.php"],
  .mobile-user-actions .mobile-user-action.mobile-dark-action.dark-mode-toggle{
    display:inline-flex!important;
  }
}

/* === v13: keep only the top refresh on mobile, move extra controls to settings === */
@media (max-width:980px){
  /* زر التحديث المطلوب: يظهر أعلى كل شاشة داخل صف العنوان */
  html body .topbar-title-row .mobile-top-refresh-button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    position:relative!important;
    z-index:6!important;
  }

  /* إزالة زر التحديث السفلي/المكرر من شريط الإجراءات في نسخة الجوال فقط */
  html body .topbar-actions.desktop-topbar-actions .refresh-data-button,
  html body.page-dashboard .topbar-actions.desktop-topbar-actions .refresh-data-button,
  html body.page-dashboard .desktop-topbar-actions .refresh-data-button{
    display:none!important;
  }

  /* في لوحة التحكم للجوال: تظهر الإشعارات وتسجيل الخروج فقط بجانب بعض */
  html body.page-dashboard .topbar-actions.desktop-topbar-actions{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:7px!important;
    width:100%!important;
    overflow-x:auto!important;
    padding:2px 0 3px!important;
    margin-top:4px!important;
  }
  html body.page-dashboard .topbar-actions.desktop-topbar-actions .topbar-dark-btn,
  html body.page-dashboard .topbar-actions.desktop-topbar-actions .install-app-trigger{
    display:none!important;
  }
  html body.page-dashboard .topbar-actions.desktop-topbar-actions .notification-box,
  html body.page-dashboard .topbar-actions.desktop-topbar-actions .topbar-logout-btn{
    display:inline-flex!important;
    flex:0 0 auto!important;
    width:auto!important;
  }
  html body.page-dashboard .topbar-actions.desktop-topbar-actions .topbar-notify-btn,
  html body.page-dashboard .topbar-actions.desktop-topbar-actions .topbar-logout-btn{
    width:auto!important;
    min-width:0!important;
    height:32px!important;
    min-height:32px!important;
    padding:0 11px!important;
    border-radius:999px!important;
    font-size:11.8px!important;
    font-weight:950!important;
    white-space:nowrap!important;
  }

  /* داخل منيو الجوال: الإشعارات وتسجيل الخروج فقط، وبقية الخيارات أصبحت في الإعدادات */
  html body .mobile-user-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
    max-width:72px!important;
  }
  html body .mobile-user-actions .mobile-dark-action,
  html body .mobile-user-actions .install-app-trigger,
  html body .mobile-user-actions .refresh-data-button{
    display:none!important;
  }
  html body .mobile-user-actions .mobile-user-logout,
  html body .mobile-user-actions .notification-toggle{
    display:inline-flex!important;
  }
}

.settings-quick-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.settings-quick-actions .btn{
  min-height:40px;
  border-radius:14px;
  font-weight:900;
}
@media (max-width:720px){
  .app-display-settings-panel .panel-header{align-items:flex-start!important;}
  .app-display-settings-panel .panel-header p{font-size:12px!important;line-height:1.7!important;margin-top:4px!important;}
  .settings-quick-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:8px!important;
  }
  .settings-quick-actions .btn{
    width:100%!important;
    min-height:34px!important;
    height:34px!important;
    padding:0 8px!important;
    border-radius:12px!important;
    font-size:11.7px!important;
    justify-content:center!important;
  }
}

/* === v14: required fields, invoice view cleanup, stronger dark polish === */
.required-star,
label .required-star,
th .required-star{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-inline-start:3px!important;
  color:#ef4444!important;
  font-weight:1000!important;
  font-size:1.05em!important;
  line-height:1!important;
  vertical-align:middle!important;
  text-shadow:0 1px 0 rgba(255,255,255,.55)!important;
}
:root[data-theme="dark"] .required-star{color:#f87171!important;text-shadow:none!important;}

/* لا تعرض بطاقة "تم عرض الطلب على شكل نموذج فاتورة" بعد حفظ الطلب. */
.purchase-saved-panel{display:none!important;}

/* عرض نموذج الطلب كفاتورة A4 واضحة مثل صورة النموذج المرجعي. */
.purchase-invoice-image.a4-invoice-paper{
  background:#fff!important;
  color:#111827!important;
  border:1.5px solid #94a3b8!important;
  box-shadow:0 28px 90px rgba(15,23,42,.20)!important;
  outline:1px solid rgba(30,64,175,.10)!important;
}
.purchase-invoice-image.a4-invoice-paper::after{border-color:rgba(15,23,42,.10)!important;border-radius:12px!important;}
.purchase-invoice-image.a4-invoice-paper .form-header-image{
  border:0!important;
  border-radius:0!important;
  margin:0 0 8px!important;
  background:#fff!important;
}
.purchase-invoice-image.a4-invoice-paper .paper-topline{
  display:flex!important;
  justify-content:flex-end!important;
  margin:0 0 6px!important;
}
.purchase-invoice-image.a4-invoice-paper .tracking-current{
  border:1px solid #cbd5e1!important;
  background:#f8fafc!important;
  color:#0f172a!important;
  border-radius:8px!important;
  padding:7px 9px!important;
  margin:0 0 8px!important;
}
.purchase-invoice-image.a4-invoice-paper .tracking-current strong{color:#0f3768!important;}
.purchase-invoice-image.a4-invoice-paper .tracking-current span{color:#334155!important;}
.purchase-invoice-image.a4-invoice-paper .purchase-title{
  color:#0f172a!important;
  font-weight:1000!important;
  text-align:center!important;
  border-bottom:1px solid #94a3b8!important;
  padding-bottom:6px!important;
}
.purchase-invoice-image.a4-invoice-paper table{
  border-collapse:collapse!important;
  background:#fff!important;
  color:#111827!important;
}
.purchase-invoice-image.a4-invoice-paper .purchase-info-table th,
.purchase-invoice-image.a4-invoice-paper .purchase-info-table td,
.purchase-invoice-image.a4-invoice-paper .purchase-form-table th,
.purchase-invoice-image.a4-invoice-paper .purchase-form-table td,
.purchase-invoice-image.a4-invoice-paper .print-history-table th,
.purchase-invoice-image.a4-invoice-paper .print-history-table td{
  border:1px solid #111827!important;
  color:#111827!important;
  background:#fff!important;
  font-weight:800!important;
}
.purchase-invoice-image.a4-invoice-paper .purchase-info-table th,
.purchase-invoice-image.a4-invoice-paper .purchase-form-table th,
.purchase-invoice-image.a4-invoice-paper .print-history-table th{
  background:#f1f5f9!important;
  color:#0f172a!important;
  font-weight:1000!important;
}
.purchase-invoice-image.a4-invoice-paper code{
  background:transparent!important;
  color:#0f172a!important;
  border:0!important;
  padding:0!important;
}
.purchase-signature-row{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  margin:16px 0 10px!important;
  color:#111827!important;
  text-align:center!important;
  font-weight:950!important;
  font-size:12px!important;
}
.purchase-signature-row div{
  min-height:44px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  border-top:1px dotted #111827!important;
  padding-top:10px!important;
}
.purchase-paper-footer{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  border:1px solid #94a3b8!important;
  border-radius:8px!important;
  padding:7px 10px!important;
  margin-top:8px!important;
  color:#475569!important;
  background:#f8fafc!important;
  font-size:11px!important;
  font-weight:800!important;
}
.print-history-section{display:none!important;}
body.print-with-history .print-history-section{display:block!important;}

/* تنظيم أزرار إجراء أسفل النموذج بحيث تظهر بوضوح عند الضغط. */
.invoice-bottom-actions{
  position:relative!important;
  z-index:220!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
.invoice-bottom-actions .invoice-action-menu{position:relative!important;z-index:230!important;}
.invoice-bottom-actions .invoice-action-list{
  display:none!important;
  position:absolute!important;
  inset-inline-end:0!important;
  top:calc(100% + 8px)!important;
  bottom:auto!important;
  width:min(420px,92vw)!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  padding:10px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.98)!important;
  border:1px solid rgba(148,163,184,.35)!important;
  box-shadow:0 24px 70px rgba(15,23,42,.23)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.invoice-action-menu.is-open .invoice-action-list{display:grid!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;}
.invoice-action-list .btn,
.invoice-action-list a.btn,
.invoice-action-list button.btn{
  width:100%!important;
  min-height:34px!important;
  height:34px!important;
  border-radius:11px!important;
  padding:0 9px!important;
  font-size:11.8px!important;
  font-weight:950!important;
  justify-content:center!important;
}
.invoice-action-list .wa-send-form{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:7px!important;
  grid-column:1/-1!important;
  align-items:center!important;
  padding:7px!important;
  border:1px solid rgba(37,99,235,.14)!important;
  border-radius:13px!important;
  background:rgba(239,246,255,.72)!important;
}
.invoice-action-list .wa-send-form input{
  width:100%!important;
  min-height:34px!important;
  height:34px!important;
  border-radius:10px!important;
  font-size:12px!important;
  padding:0 9px!important;
}
.invoice-action-list .print-option{
  grid-column:1/-1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  min-height:32px!important;
  padding:6px 8px!important;
  border-radius:11px!important;
  font-size:11.5px!important;
  font-weight:900!important;
}

/* تحسين الوضع الليلي حول نموذج العرض: تبقى الفاتورة بيضاء للقراءة والطباعة، وتتحسن الخلفية والأزرار. */
:root[data-theme="dark"] .purchase-invoice-image.a4-invoice-paper{
  background:#ffffff!important;
  color:#111827!important;
  border-color:#64748b!important;
  box-shadow:0 30px 95px rgba(0,0,0,.45)!important;
}
:root[data-theme="dark"] .purchase-invoice-image.a4-invoice-paper *,
:root[data-theme="dark"] .purchase-invoice-image.a4-invoice-paper th,
:root[data-theme="dark"] .purchase-invoice-image.a4-invoice-paper td,
:root[data-theme="dark"] .purchase-invoice-image.a4-invoice-paper strong,
:root[data-theme="dark"] .purchase-invoice-image.a4-invoice-paper span{
  color:#111827!important;
}
:root[data-theme="dark"] .purchase-invoice-image.a4-invoice-paper th{
  background:#e2e8f0!important;
  color:#0f172a!important;
}
:root[data-theme="dark"] .purchase-invoice-image.a4-invoice-paper td,
:root[data-theme="dark"] .purchase-invoice-image.a4-invoice-paper table,
:root[data-theme="dark"] .purchase-invoice-image.a4-invoice-paper tr{
  background:#fff!important;
}
:root[data-theme="dark"] .purchase-invoice-image.a4-invoice-paper .tracking-current,
:root[data-theme="dark"] .purchase-invoice-image.a4-invoice-paper .purchase-paper-footer{
  background:#f8fafc!important;
  border-color:#94a3b8!important;
}
:root[data-theme="dark"] .invoice-bottom-actions .invoice-action-list{
  background:rgba(15,23,42,.98)!important;
  color:#eef6ff!important;
  border-color:rgba(148,163,184,.26)!important;
}
:root[data-theme="dark"] .invoice-action-list .wa-send-form,
:root[data-theme="dark"] .invoice-action-list .print-option{
  background:rgba(2,6,23,.38)!important;
  color:#eaf6ff!important;
  border-color:rgba(96,165,250,.22)!important;
}

/* مراجعة عامة للوضع الليلي: تفتيح النصوص وإزالة أي نص غامق غير واضح. */
:root[data-theme="dark"] .panel *,
:root[data-theme="dark"] .topbar *,
:root[data-theme="dark"] .sidebar *,
:root[data-theme="dark"] .form-panel *,
:root[data-theme="dark"] .approval-filter-panel *,
:root[data-theme="dark"] .tracking-card *,
:root[data-theme="dark"] .archive-hero *,
:root[data-theme="dark"] .config-hero *,
:root[data-theme="dark"] .settings-quick-actions *{
  border-color:rgba(148,163,184,.24);
}
:root[data-theme="dark"] .panel p,
:root[data-theme="dark"] .panel small,
:root[data-theme="dark"] .panel .muted,
:root[data-theme="dark"] .topbar p,
:root[data-theme="dark"] .field-hint{
  color:#d8e6fa!important;
}
:root[data-theme="dark"] .empty-card,
:root[data-theme="dark"] .timeline-item,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .modern-table,
:root[data-theme="dark"] .request-table-toolbar{
  background:rgba(15,23,42,.90)!important;
  color:#eef6ff!important;
  border-color:rgba(148,163,184,.24)!important;
}

@media (max-width:980px){
  .purchase-invoice-image.a4-invoice-paper{
    width:calc(100% - 18px)!important;
    max-width:calc(100% - 18px)!important;
    min-height:calc((100vw - 18px) * 1.414)!important;
    padding:8px!important;
    border-radius:12px!important;
  }
  .purchase-invoice-image.a4-invoice-paper .purchase-title{font-size:16px!important;margin:6px 0!important;}
  .purchase-invoice-image.a4-invoice-paper .tracking-current{font-size:10.5px!important;padding:5px 6px!important;}
  .purchase-invoice-image.a4-invoice-paper .purchase-info-table,
  .purchase-invoice-image.a4-invoice-paper .purchase-form-table,
  .purchase-invoice-image.a4-invoice-paper .print-history-table{
    min-width:720px!important;
  }
  .purchase-signature-row{gap:8px!important;font-size:10px!important;margin-top:12px!important;}
  .purchase-paper-footer{font-size:9.2px!important;padding:5px 6px!important;}
  .invoice-bottom-actions{width:calc(100% - 18px)!important;margin:10px auto 18px!important;}
  .invoice-bottom-actions .invoice-action-list{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:calc(74px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:min(94vw,360px)!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    max-height:min(65dvh,460px)!important;
    overflow:auto!important;
  }
  .invoice-action-list .btn,
  .invoice-action-list a.btn,
  .invoice-action-list button.btn{height:32px!important;min-height:32px!important;font-size:11px!important;}
  .invoice-action-list .wa-send-form{grid-template-columns:1fr!important;}
  .invoice-action-list .wa-send-form input,
  .invoice-action-list .wa-send-form .btn{width:100%!important;height:32px!important;min-height:32px!important;}
}

@media print{
  .purchase-signature-row{page-break-inside:avoid!important;}
  .purchase-paper-footer{page-break-inside:avoid!important;}
  .purchase-invoice-image.a4-invoice-paper .tracking-current{display:none!important;}
}


/* === v15: smaller synchronized invoice tables and real approval history === */
.purchase-invoice-image.a4-invoice-paper{
  width:min(760px,92vw)!important;
  max-width:92vw!important;
  padding:14px!important;
  margin-inline:auto!important;
}
.purchase-invoice-image.a4-invoice-paper .purchase-info-wrap,
.purchase-invoice-image.a4-invoice-paper .purchase-table-wrap{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:thin!important;
}
.purchase-invoice-image.a4-invoice-paper .purchase-info-table,
.purchase-invoice-image.a4-invoice-paper .purchase-form-table{
  width:100%!important;
  min-width:680px!important;
  table-layout:fixed!important;
}
.purchase-invoice-image.a4-invoice-paper .purchase-info-table th,
.purchase-invoice-image.a4-invoice-paper .purchase-info-table td{
  padding:4px 3px!important;
  font-size:9.2px!important;
  line-height:1.25!important;
  white-space:normal!important;
  word-break:break-word!important;
}
.purchase-invoice-image.a4-invoice-paper .purchase-form-table th,
.purchase-invoice-image.a4-invoice-paper .purchase-form-table td{
  padding:3px 2px!important;
  font-size:8.5px!important;
  line-height:1.25!important;
  white-space:normal!important;
  word-break:break-word!important;
}
.purchase-invoice-image.a4-invoice-paper .purchase-form-table td:first-child,
.purchase-invoice-image.a4-invoice-paper .purchase-form-table th:first-child{
  width:34px!important;
}
.purchase-invoice-image.a4-invoice-paper .purchase-title{
  font-size:17px!important;
  margin:6px 0!important;
  padding-bottom:4px!important;
}
.purchase-invoice-image.a4-invoice-paper .tracking-current{
  padding:5px 7px!important;
  margin-bottom:6px!important;
  font-size:10px!important;
}
.purchase-invoice-image.a4-invoice-paper .paper-topline{margin-bottom:4px!important;}
.purchase-invoice-image.a4-invoice-paper .form-header-image{margin-bottom:5px!important;}
.purchase-signature-row{display:none!important;}
.purchase-real-approvals{
  margin:10px 0 8px!important;
  padding:8px!important;
  border:1px solid #94a3b8!important;
  border-radius:9px!important;
  background:#fbfdff!important;
  color:#111827!important;
}
.real-approvals-title{
  margin:0 0 7px!important;
  font-size:11.5px!important;
  font-weight:1000!important;
  color:#0f3768!important;
  text-align:right!important;
}
.real-approval-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
}
.real-approval-card{
  min-height:58px!important;
  padding:6px 5px!important;
  border:1px solid #cbd5e1!important;
  border-radius:9px!important;
  background:#fff!important;
  text-align:center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
}
.real-approval-card strong{font-size:9.5px!important;line-height:1.25!important;color:#111827!important;}
.real-approval-card small{font-size:8.5px!important;line-height:1.25!important;color:#334155!important;}
.real-approval-card em{font-style:normal!important;font-size:8px!important;line-height:1.2!important;color:#64748b!important;}
.real-approval-empty{
  padding:8px!important;
  border:1px dashed #cbd5e1!important;
  border-radius:8px!important;
  color:#64748b!important;
  font-size:10px!important;
  text-align:center!important;
}
:root[data-theme="dark"] .purchase-real-approvals,
:root[data-theme="dark"] .real-approval-card{
  background:#ffffff!important;
  color:#111827!important;
  border-color:#94a3b8!important;
}
:root[data-theme="dark"] .real-approvals-title{color:#0f3768!important;}
:root[data-theme="dark"] .real-approval-card strong{color:#111827!important;}
:root[data-theme="dark"] .real-approval-card small{color:#334155!important;}
:root[data-theme="dark"] .real-approval-card em,
:root[data-theme="dark"] .real-approval-empty{color:#64748b!important;}
.invoice-bottom-actions .invoice-action-list{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  width:min(520px,94vw)!important;
}
.invoice-action-list .btn,
.invoice-action-list a.btn,
.invoice-action-list button.btn{
  min-height:32px!important;
  height:32px!important;
  font-size:11px!important;
}
@media (max-width:980px){
  .purchase-invoice-image.a4-invoice-paper{
    width:92vw!important;
    max-width:92vw!important;
    padding:6px!important;
    border-radius:10px!important;
  }
  .purchase-invoice-image.a4-invoice-paper .purchase-info-table,
  .purchase-invoice-image.a4-invoice-paper .purchase-form-table,
  .purchase-invoice-image.a4-invoice-paper .print-history-table{
    min-width:640px!important;
  }
  .purchase-invoice-image.a4-invoice-paper .purchase-info-table th,
  .purchase-invoice-image.a4-invoice-paper .purchase-info-table td{font-size:8px!important;padding:3px 2px!important;}
  .purchase-invoice-image.a4-invoice-paper .purchase-form-table th,
  .purchase-invoice-image.a4-invoice-paper .purchase-form-table td{font-size:7.4px!important;padding:2.5px 2px!important;}
  .real-approval-grid{grid-template-columns:1fr!important;gap:5px!important;}
  .real-approval-card{min-height:46px!important;padding:5px!important;}
  .invoice-bottom-actions .invoice-action-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:min(92vw,360px)!important;
  }
}
@media print{
  .purchase-invoice-image.a4-invoice-paper{
    width:760px!important;
    max-width:760px!important;
    box-shadow:none!important;
    padding:14px!important;
  }
  .purchase-invoice-image.a4-invoice-paper .purchase-info-wrap,
  .purchase-invoice-image.a4-invoice-paper .purchase-table-wrap{overflow:visible!important;}
  .purchase-invoice-image.a4-invoice-paper .purchase-info-table,
  .purchase-invoice-image.a4-invoice-paper .purchase-form-table{min-width:0!important;width:100%!important;}
}


/* === v16: tracking shows movement first, invoice appears after Show More === */
.tracking-history-first{
    margin:10px 0 12px!important;
    padding:10px!important;
    border:1px solid rgba(37,99,235,.16)!important;
    border-radius:16px!important;
    background:linear-gradient(135deg, rgba(37,99,235,.06), rgba(14,165,233,.04))!important;
}
.tracking-history-title{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    font-weight:900!important;
    color:#1e3a8a!important;
    margin-bottom:8px!important;
    font-size:14px!important;
}
.tracking-history-list{
    display:grid!important;
    gap:7px!important;
}
.tracking-history-row{
    display:grid!important;
    grid-template-columns:auto auto 1fr!important;
    gap:8px!important;
    align-items:flex-start!important;
    padding:8px!important;
    border:1px solid rgba(148,163,184,.24)!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.82)!important;
    box-shadow:0 8px 18px rgba(15,23,42,.05)!important;
}
.tracking-history-no{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:24px!important;
    height:24px!important;
    border-radius:999px!important;
    background:#eff6ff!important;
    color:#1d4ed8!important;
    font-size:11px!important;
    font-weight:900!important;
}
.tracking-history-row .timeline-icon{
    width:24px!important;
    height:24px!important;
    font-size:12px!important;
    flex:0 0 24px!important;
}
.tracking-history-row strong,
.tracking-history-row small,
.tracking-history-row em,
.tracking-history-row p{
    display:block!important;
}
.tracking-history-row strong{
    color:#0f172a!important;
    font-size:12.5px!important;
    font-weight:900!important;
    line-height:1.45!important;
}
.tracking-history-row small{
    color:#475569!important;
    font-size:11px!important;
    line-height:1.5!important;
}
.tracking-history-row em{
    color:#64748b!important;
    font-style:normal!important;
    font-size:10.5px!important;
    line-height:1.5!important;
}
.tracking-history-row p{
    margin:4px 0 0!important;
    color:#334155!important;
    font-size:11px!important;
    line-height:1.55!important;
}
.tracking-more-invoice{
    margin:12px 0 8px!important;
}
.tracking-more-invoice > summary{
    list-style:none!important;
    cursor:pointer!important;
    width:max-content!important;
    max-width:100%!important;
}
.tracking-more-invoice > summary::-webkit-details-marker{display:none!important;}
.tracking-more-summary{
    min-height:34px!important;
    padding:7px 12px!important;
    border-radius:12px!important;
    font-size:12px!important;
}
.tracking-model-preview-btn{
    min-height:42px!important;
    padding:10px 18px!important;
    border-radius:16px!important;
    font-size:13.5px!important;
    font-weight:900!important;
    color:#fff!important;
    background:linear-gradient(135deg,#2563eb,#7c3aed)!important;
    border:1px solid rgba(255,255,255,.28)!important;
    box-shadow:0 12px 28px rgba(37,99,235,.32), inset 0 1px 0 rgba(255,255,255,.22)!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    letter-spacing:.01em!important;
}
.tracking-model-preview-btn:hover,
.tracking-model-preview-btn:focus{
    transform:translateY(-1px)!important;
    box-shadow:0 16px 34px rgba(124,58,237,.34), inset 0 1px 0 rgba(255,255,255,.26)!important;
    filter:saturate(1.08)!important;
}
.tracking-model-preview-btn .icon{
    font-size:17px!important;
}
.tracking-invoice-frame-wrap{
    margin-top:10px!important;
    border:1px solid rgba(148,163,184,.28)!important;
    border-radius:18px!important;
    overflow:hidden!important;
    background:#f8fafc!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 12px 30px rgba(15,23,42,.08)!important;
}
.tracking-invoice-frame{
    display:block!important;
    width:100%!important;
    min-height:680px!important;
    border:0!important;
    background:#f8fafc!important;
}
.tracking-invoice-embed-body{
    margin:0!important;
    padding:10px!important;
    background:#f8fafc!important;
    min-height:100vh!important;
    overflow-x:hidden!important;
}
.tracking-invoice-embed-body .purchase-invoice-image.a4-invoice-paper{
    margin:0 auto!important;
    max-width:760px!important;
    box-shadow:0 10px 30px rgba(15,23,42,.10)!important;
}
.tracking-invoice-embed-body .purchase-invoice-image.a4-invoice-paper::after{display:none!important;}
:root[data-theme="dark"] .tracking-history-first{
    background:linear-gradient(135deg, rgba(59,130,246,.14), rgba(14,165,233,.08))!important;
    border-color:rgba(96,165,250,.24)!important;
}
:root[data-theme="dark"] .tracking-history-title{color:#bfdbfe!important;}
:root[data-theme="dark"] .tracking-history-row{
    background:rgba(15,23,42,.82)!important;
    border-color:rgba(148,163,184,.24)!important;
}
:root[data-theme="dark"] .tracking-history-row strong{color:#f8fafc!important;}
:root[data-theme="dark"] .tracking-history-row small,
:root[data-theme="dark"] .tracking-history-row em,
:root[data-theme="dark"] .tracking-history-row p{color:#cbd5e1!important;}
:root[data-theme="dark"] .tracking-invoice-frame-wrap{background:#0f172a!important;border-color:rgba(148,163,184,.22)!important;}
@media (max-width: 720px){
    .tracking-history-first{padding:8px!important;border-radius:14px!important;margin:8px 0 10px!important;}
    .tracking-history-title{font-size:13px!important;margin-bottom:7px!important;}
    .tracking-history-row{grid-template-columns:auto auto 1fr!important;gap:6px!important;padding:7px!important;border-radius:12px!important;}
    .tracking-history-no,.tracking-history-row .timeline-icon{min-width:22px!important;width:22px!important;height:22px!important;font-size:10.5px!important;}
    .tracking-history-row strong{font-size:11.5px!important;}
    .tracking-history-row small,.tracking-history-row em,.tracking-history-row p{font-size:10px!important;}
    .tracking-more-summary{width:100%!important;justify-content:center!important;font-size:11px!important;min-height:32px!important;}
    .tracking-model-preview-btn{font-size:12.5px!important;min-height:40px!important;padding:9px 14px!important;}
    .tracking-invoice-frame{min-height:620px!important;}
    .tracking-invoice-embed-body{padding:7px!important;}
    .tracking-invoice-embed-body .purchase-invoice-image.a4-invoice-paper{width:100%!important;min-width:0!important;transform:none!important;}
}

/* v17: عرض الاعتماد يبدأ بحركة الطلب، وزر اعتماد سريع داخل قائمة إجراء. */
.approval-history-first-panel{
  border:1px solid rgba(37,99,235,.18)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,246,255,.9))!important;
  box-shadow:0 18px 45px rgba(15,23,42,.08)!important;
}
.approval-history-first-panel .panel-header{
  align-items:center!important;
  gap:10px!important;
}
.approval-current-holder{
  margin:10px 0 12px!important;
}
.approval-first-timeline{
  margin-top:8px!important;
}
.invoice-action-list .approval-quick-form{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:7px!important;
  grid-column:1/-1!important;
  align-items:center!important;
  padding:8px!important;
  border:1px solid rgba(22,163,74,.22)!important;
  border-radius:14px!important;
  background:rgba(240,253,244,.9)!important;
}
.invoice-action-list .approval-quick-form .btn{
  min-width:96px!important;
  background:linear-gradient(135deg,#16a34a,#22c55e)!important;
  border-color:transparent!important;
  color:#fff!important;
}
.quick-choice-label{
  display:grid!important;
  gap:3px!important;
  font-size:11px!important;
  font-weight:950!important;
  color:#14532d!important;
}
.quick-choice-label select{
  width:100%!important;
  min-height:32px!important;
  height:32px!important;
  border-radius:10px!important;
  border:1px solid rgba(22,163,74,.24)!important;
  background:#fff!important;
  color:#0f172a!important;
  font-size:11.5px!important;
  font-weight:800!important;
  padding:0 8px!important;
}
:root[data-theme="dark"] .approval-history-first-panel{
  background:linear-gradient(135deg,#0f1b32,#142442)!important;
  border-color:rgba(96,165,250,.22)!important;
  color:#e5eefc!important;
}
:root[data-theme="dark"] .approval-history-first-panel .timeline-item{
  background:rgba(15,23,42,.66)!important;
  border-color:rgba(148,163,184,.22)!important;
}
:root[data-theme="dark"] .approval-history-first-panel .timeline-item strong,
:root[data-theme="dark"] .approval-history-first-panel .timeline-status-line,
:root[data-theme="dark"] .approval-history-first-panel small{
  color:#e5eefc!important;
}
:root[data-theme="dark"] .invoice-action-list .approval-quick-form{
  background:rgba(20,83,45,.28)!important;
  border-color:rgba(74,222,128,.28)!important;
}
:root[data-theme="dark"] .quick-choice-label{color:#bbf7d0!important;}
@media (max-width:980px){
  .approval-history-first-panel{padding:10px!important;border-radius:16px!important;margin-bottom:10px!important;}
  .approval-history-first-panel .panel-header h2{font-size:15px!important;}
  .approval-first-timeline .timeline-item{padding:8px!important;border-radius:13px!important;}
  .invoice-action-list .approval-quick-form{grid-template-columns:1fr!important;gap:6px!important;padding:7px!important;}
  .invoice-action-list .approval-quick-form .btn{width:100%!important;height:32px!important;min-height:32px!important;font-size:11px!important;}
}

/* v18: تذييل النموذج وإخفاء بيانات الوثيقة الثابتة */
.form-footer-image{
  width:100%;
  margin:12px 0 0;
  border:1px solid rgba(148,163,184,.28);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.form-footer-image img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.purchase-invoice-image.a4-invoice-paper .form-footer-image{
  border:0!important;
  border-radius:0!important;
  margin:10px 0 0!important;
  background:#fff!important;
  page-break-inside:avoid!important;
}
.form-footer-designer-panel .form-footer-preview{
  border:1px dashed rgba(37,99,235,.35);
  border-radius:16px;
  padding:10px;
  background:#f8fbff;
}
.form-footer-designer-panel .form-footer-preview img{
  display:block;
  max-width:100%;
  border-radius:12px;
}
:root[data-theme="dark"] .form-footer-designer-panel .form-footer-preview{
  background:rgba(15,23,42,.55);
  border-color:rgba(96,165,250,.28);
}
.purchase-paper-footer{display:none!important;}
@media print{
  .form-footer-image{border:0!important;border-radius:0!important;margin-top:10px!important;}
}
@media (max-width:720px){
  .purchase-invoice-image.a4-invoice-paper .form-footer-image{margin-top:7px!important;}
}


/* V19 - desktop approval direct actions and redirect workflow */
.desktop-approval-actions{border:1px solid rgba(37,99,235,.14);background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,246,255,.92));box-shadow:0 16px 36px rgba(15,23,42,.08)}
.desktop-approval-action-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.desktop-approval-action-row form{display:flex;align-items:center;gap:8px;margin:0}
.desktop-approval-action-row .btn{min-height:38px;padding:8px 14px;border-radius:12px;font-size:14px;font-weight:800}
.desktop-approval-action-row select{height:38px;border-radius:12px;border:1px solid rgba(148,163,184,.5);background:#fff;padding:0 10px;min-width:150px;font-weight:800;color:#0f172a}
.desktop-redirect-form{padding-inline-start:10px;border-inline-start:1px solid rgba(148,163,184,.35)}
body.dark .desktop-approval-actions{background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(30,41,59,.94));border-color:rgba(96,165,250,.28)}
body.dark .desktop-approval-action-row select{background:#111827;color:#e5e7eb;border-color:rgba(148,163,184,.45)}
.invoice-action-list form select{width:100%;min-height:36px;border-radius:10px;border:1px solid rgba(148,163,184,.45);padding:0 8px;background:#fff;color:#0f172a;font-size:12px}
body.dark .invoice-action-list form select{background:#111827;color:#e5e7eb;border-color:rgba(148,163,184,.45)}
@media (min-width: 769px){.approval-mobile-only-actions{display:none!important}.desktop-approval-actions{display:block}.desktop-approval-actions + .purchase-paper{margin-top:14px}}
@media (max-width: 768px){.desktop-approval-actions{display:none!important}.invoice-action-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.invoice-action-list form{min-width:0}.invoice-action-list .btn{width:100%;justify-content:center}}

/* V20 - restore procurement specialist quotations without removing existing workflow */
.quotation-entry-panel {
    border: 1px solid rgba(37,99,235,.18);
    box-shadow: 0 18px 48px rgba(15,23,42,.08);
}
.quotation-entry-panel .muted {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
}
.quotation-form.form-grid {
    display: grid;
    gap: 14px;
}
.quotation-row {
    grid-template-columns: 1.25fr .75fr .58fr .8fr 1.05fr 1fr 48px;
}
.quotation-row label {
    display: grid;
    gap: 5px;
    font-size: 12px;
    font-weight: 900;
    color: var(--text);
}
.quotation-row input[type="file"] {
    padding: 8px;
    font-size: 12px;
}
.quotation-submit-actions {
    justify-content: flex-start;
}
:root[data-theme="dark"] .quotation-toolbar,
:root[data-theme="dark"] .quotation-entry-panel {
    background: rgba(15,23,42,.88);
    border-color: rgba(148,163,184,.24);
}
:root[data-theme="dark"] .quotation-row label,
:root[data-theme="dark"] .quotation-entry-panel .muted,
:root[data-theme="dark"] .ai-assistant-head strong,
:root[data-theme="dark"] .ai-assistant-head small {
    color: #e5e7eb;
}
@media (max-width: 1100px) {
    .quotation-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quotation-row .btn-icon { min-height: 42px; }
}
@media (max-width: 680px) {
    .quotation-entry-panel .panel-header { align-items: stretch; }
    .quotation-row { grid-template-columns: 1fr; }
    .quotation-submit-actions .btn { width: 100%; }
}

/* V21 - quotations inside invoice, tracking buttons above model, and print loader fix */
.purchase-quotations-invoice{
  margin:10px 0 8px!important;
  border:1px solid #9eb5d3!important;
  background:#fbfdff!important;
  border-radius:8px!important;
  padding:8px!important;
}
.purchase-quotations-invoice .invoice-section-title{
  margin:0 0 7px!important;
  padding:5px 8px!important;
  border-radius:6px!important;
  background:rgba(37,99,235,.10)!important;
  color:#0f3768!important;
  font-size:12px!important;
  font-weight:950!important;
  text-align:center!important;
}
.purchase-quotation-wrap{overflow-x:auto!important;max-width:100%!important;}
.purchase-quotation-table{
  width:100%!important;
  min-width:720px!important;
  border-collapse:collapse!important;
  table-layout:fixed!important;
}
.purchase-quotation-table th,
.purchase-quotation-table td{
  border:1px solid #9eb5d3!important;
  padding:4px 3px!important;
  font-size:9px!important;
  line-height:1.35!important;
  text-align:center!important;
  vertical-align:middle!important;
  word-break:break-word!important;
}
.purchase-quotation-table th{
  background:rgba(37,99,235,.10)!important;
  color:#0f3768!important;
  font-weight:950!important;
}
.purchase-quotation-table strong{font-size:9.5px!important;}
.invoice-attachment-link{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:22px!important;
  padding:2px 6px!important;
  border-radius:7px!important;
  background:#eff6ff!important;
  border:1px solid #bfdbfe!important;
  color:#1d4ed8!important;
  text-decoration:none!important;
  font-weight:900!important;
  font-size:8.5px!important;
}
.quotation-row-classic{
  grid-template-columns:1.2fr .72fr .58fr .82fr 1.05fr 1fr 44px!important;
  align-items:center!important;
}
.quotation-row-classic input,
.quotation-row-classic .quote-file-input{
  min-height:42px!important;
  height:42px!important;
  border-radius:12px!important;
}
.quote-file-input{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  padding:6px 8px!important;
  border:1px dashed rgba(37,99,235,.38)!important;
  background:rgba(239,246,255,.75)!important;
  color:#1d4ed8!important;
  font-size:12px!important;
  font-weight:900!important;
  overflow:hidden!important;
}
.quote-file-input input{max-width:105px!important;font-size:10px!important;min-height:auto!important;height:auto!important;padding:0!important;border:0!important;background:transparent!important;}
.tracking-top-actions{
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:8px!important;
  margin:12px 14px 8px!important;
  padding:8px!important;
  border:1px solid rgba(37,99,235,.16)!important;
  border-radius:14px!important;
  background:rgba(239,246,255,.68)!important;
}
.tracking-top-actions .btn{min-height:32px!important;height:32px!important;font-size:11.5px!important;border-radius:10px!important;padding:0 10px!important;}
:root[data-theme="dark"] .purchase-quotations-invoice{background:#fff!important;border-color:#9eb5d3!important;color:#0f172a!important;}
:root[data-theme="dark"] .purchase-quotation-table th{background:rgba(37,99,235,.12)!important;color:#0f3768!important;}
:root[data-theme="dark"] .purchase-quotation-table td{background:#fff!important;color:#0f172a!important;}
:root[data-theme="dark"] .tracking-top-actions{background:rgba(30,41,59,.78)!important;border-color:rgba(96,165,250,.22)!important;}
@media (max-width:1100px){
  .quotation-row-classic{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .quote-file-input{justify-content:flex-start!important;}
  .quotation-row-classic .btn-icon{width:100%!important;}
}
@media (max-width:680px){
  .quotation-row-classic{grid-template-columns:1fr!important;}
  .purchase-quotations-invoice{padding:6px!important;}
  .purchase-quotation-table{min-width:650px!important;}
  .tracking-top-actions{margin:10px 10px 8px!important;gap:6px!important;flex-wrap:wrap!important;}
}
@media print{
  .page-busy-overlay,
  .system-loading-overlay,
  .success-check-overlay,
  .notification-modal-overlay,
  .print-hidden-overlay{display:none!important;opacity:0!important;visibility:hidden!important;}
  .purchase-quotations-invoice{break-inside:avoid!important;page-break-inside:avoid!important;box-shadow:none!important;}
  .purchase-quotation-wrap{overflow:visible!important;}
  .purchase-quotation-table{min-width:0!important;width:100%!important;table-layout:fixed!important;}
  .purchase-quotation-table th,
  .purchase-quotation-table td{font-size:8px!important;padding:3px 2px!important;}
  .invoice-attachment-link{background:transparent!important;border:0!important;color:#111827!important;padding:0!important;}
}


/* V22 - redirected approval tab and mandatory action notes */
.approval-note-input{
  min-width:160px!important;
  max-width:240px!important;
  height:36px!important;
  min-height:36px!important;
  padding:0 12px!important;
  border-radius:12px!important;
  border:1px solid rgba(148,163,184,.45)!important;
  background:rgba(255,255,255,.94)!important;
  color:#0f172a!important;
  font-size:12px!important;
  font-weight:800!important;
}
.approval-note-input::placeholder{color:#64748b!important;font-weight:700!important;}
.desktop-approval-action-row form,
.invoice-action-list form{gap:8px!important;align-items:center!important;}
:root[data-theme="dark"] .approval-note-input{
  background:rgba(15,23,42,.92)!important;
  color:#e5eefb!important;
  border-color:rgba(96,165,250,.35)!important;
}
:root[data-theme="dark"] .approval-note-input::placeholder{color:#93a4bd!important;}
@media (max-width:680px){
  .approval-note-input{width:100%!important;max-width:100%!important;min-width:0!important;height:38px!important;}
  .invoice-action-list form{width:100%!important;display:grid!important;grid-template-columns:1fr!important;}
}

/* V23 - single shared approval note and print exactly invoice only */
.shared-approval-note-wrap,
.shared-approval-note-box{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:8px 10px!important;
  border-radius:14px!important;
  background:rgba(239,246,255,.72)!important;
  border:1px solid rgba(147,197,253,.55)!important;
}
.shared-approval-note-wrap label,
.shared-approval-note-box label{
  white-space:nowrap!important;
  font-size:12px!important;
  font-weight:900!important;
  color:#1e3a8a!important;
}
.shared-approval-note-input{
  min-width:260px!important;
  max-width:360px!important;
}
.note-required-shake{
  border-color:#ef4444!important;
  box-shadow:0 0 0 4px rgba(239,68,68,.16)!important;
  animation:noteShake .32s linear 0s 2;
}
@keyframes noteShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(4px)}
  75%{transform:translateX(-4px)}
}
:root[data-theme="dark"] .shared-approval-note-wrap,
:root[data-theme="dark"] .shared-approval-note-box{
  background:rgba(15,23,42,.92)!important;
  border-color:rgba(96,165,250,.34)!important;
}
:root[data-theme="dark"] .shared-approval-note-wrap label,
:root[data-theme="dark"] .shared-approval-note-box label{color:#bfdbfe!important;}
@media (max-width:680px){
  .shared-approval-note-box{grid-column:1/-1!important;display:grid!important;grid-template-columns:1fr!important;width:100%!important;}
  .shared-approval-note-box label{font-size:11px!important;}
  .shared-approval-note-input{width:100%!important;min-width:0!important;max-width:100%!important;}
}
@media print{
  @page{size:A4 portrait;margin:5mm;}
  html.purchase-printing-root,
  html.purchase-printing-root body{
    background:#fff!important;
    width:210mm!important;
    min-height:0!important;
    overflow:visible!important;
  }
  body.purchase-printing *{visibility:hidden!important;}
  body.purchase-printing .purchase-paper,
  body.purchase-printing .purchase-paper *{visibility:visible!important;}
  body.purchase-printing .sidebar,
  body.purchase-printing .topbar,
  body.purchase-printing .mobile-menu-fab,
  body.purchase-printing .page-refresh-progress,
  body.purchase-printing .no-print,
  body.purchase-printing .page-busy-overlay,
  body.purchase-printing .system-loading-overlay,
  body.purchase-printing .success-check-overlay,
  body.purchase-printing .notification-modal-overlay,
  body.purchase-printing .print-hidden-overlay{display:none!important;visibility:hidden!important;opacity:0!important;}
  body.purchase-printing .app-body,
  body.purchase-printing .main-content,
  body.purchase-printing .content-shell,
  body.purchase-printing main{
    display:block!important;
    width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    background:#fff!important;
  }
  body.purchase-printing .purchase-paper.purchase-invoice-image.a4-invoice-paper{
    position:absolute!important;
    top:0!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%) scale(.84)!important;
    transform-origin:top center!important;
    width:198mm!important;
    max-width:198mm!important;
    min-height:auto!important;
    margin:0!important;
    padding:5mm!important;
    box-sizing:border-box!important;
    border:1px solid #111827!important;
    border-radius:8px!important;
    box-shadow:none!important;
    background:#fff!important;
    color:#111827!important;
    overflow:visible!important;
    break-after:avoid!important;
    page-break-after:avoid!important;
  }
  body.purchase-printing .purchase-paper .form-header-image img,
  body.purchase-printing .purchase-paper .form-footer-image img{
    max-width:100%!important;
    height:auto!important;
    max-height:30mm!important;
    object-fit:contain!important;
  }
  body.purchase-printing .purchase-paper .purchase-title{
    font-size:13px!important;
    margin:2px 0 4px!important;
  }
  body.purchase-printing .purchase-paper .paper-topline,
  body.purchase-printing .purchase-paper .tracking-current.print-current{
    margin:0 0 3px!important;
    padding:3px 5px!important;
    font-size:7px!important;
    min-height:0!important;
  }
  body.purchase-printing .purchase-paper .purchase-info-wrap,
  body.purchase-printing .purchase-paper .purchase-table-wrap,
  body.purchase-printing .purchase-paper .purchase-quotation-wrap{
    overflow:visible!important;
    width:100%!important;
  }
  body.purchase-printing .purchase-paper table{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
    border-collapse:collapse!important;
  }
  body.purchase-printing .purchase-paper th,
  body.purchase-printing .purchase-paper td{
    padding:2px 2px!important;
    font-size:6.4px!important;
    line-height:1.22!important;
    border:1px solid #111827!important;
    color:#111827!important;
    background:#fff!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
  body.purchase-printing .purchase-paper th{
    background:#eef2ff!important;
    font-weight:900!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
  body.purchase-printing .purchase-paper .paper-notes,
  body.purchase-printing .purchase-paper .purchase-quotations-invoice,
  body.purchase-printing .purchase-paper .purchase-real-approvals{
    margin-top:4px!important;
    padding:4px!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
    box-shadow:none!important;
  }
  body.purchase-printing .purchase-paper .invoice-section-title,
  body.purchase-printing .purchase-paper .real-approvals-title{
    font-size:8px!important;
    margin-bottom:3px!important;
  }
  body.purchase-printing .purchase-paper .real-approval-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:3px!important;
  }
  body.purchase-printing .purchase-paper .real-approval-card{
    padding:3px!important;
    min-height:0!important;
    border-radius:4px!important;
    box-shadow:none!important;
  }
  body.purchase-printing .purchase-paper .real-approval-card strong,
  body.purchase-printing .purchase-paper .real-approval-card small,
  body.purchase-printing .purchase-paper .real-approval-card em{
    font-size:6px!important;
    line-height:1.15!important;
  }
  body.purchase-printing .purchase-paper .print-history-section{display:none!important;}
  body.purchase-printing.print-with-history .purchase-paper .print-history-section{display:block!important;}
}

/* V24 - print invoice as full A4 page, not a small thumbnail */
@media print{
  @page{size:A4 portrait;margin:0!important;}
  html.purchase-printing-root,
  html.purchase-printing-root body,
  body.purchase-printing{
    width:210mm!important;
    height:297mm!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
    overflow:hidden!important;
  }
  body.purchase-printing *{visibility:hidden!important;}
  body.purchase-printing .purchase-paper,
  body.purchase-printing .purchase-paper *{visibility:visible!important;}
  body.purchase-printing .sidebar,
  body.purchase-printing .topbar,
  body.purchase-printing .mobile-menu-fab,
  body.purchase-printing .page-refresh-progress,
  body.purchase-printing .no-print,
  body.purchase-printing .page-busy-overlay,
  body.purchase-printing .system-loading-overlay,
  body.purchase-printing .success-check-overlay,
  body.purchase-printing .notification-modal-overlay,
  body.purchase-printing .print-hidden-overlay,
  body.purchase-printing .invoice-bottom-actions,
  body.purchase-printing .desktop-approval-actions,
  body.purchase-printing .approval-history-first-panel,
  body.purchase-printing .quotation-entry-panel,
  body.purchase-printing .tracking-top-actions{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
  }
  body.purchase-printing .app-body,
  body.purchase-printing .main-content,
  body.purchase-printing .content-shell,
  body.purchase-printing main,
  body.purchase-printing .layout-content,
  body.purchase-printing .page-content{
    display:block!important;
    width:210mm!important;
    height:297mm!important;
    min-height:0!important;
    max-height:297mm!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
    overflow:visible!important;
  }
  body.purchase-printing .purchase-paper.purchase-invoice-image.a4-invoice-paper,
  body.purchase-printing section.purchase-paper.purchase-invoice-image.a4-invoice-paper{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:auto!important;
    bottom:auto!important;
    inset:0 auto auto 0!important;
    transform:none!important;
    width:210mm!important;
    min-width:210mm!important;
    max-width:210mm!important;
    height:297mm!important;
    min-height:297mm!important;
    max-height:297mm!important;
    margin:0!important;
    padding:5mm!important;
    box-sizing:border-box!important;
    border:0!important;
    border-radius:0!important;
    outline:0!important;
    box-shadow:none!important;
    background:#fff!important;
    color:#111827!important;
    overflow:hidden!important;
    page-break-before:avoid!important;
    page-break-after:avoid!important;
    break-before:avoid!important;
    break-after:avoid!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
  body.purchase-printing .purchase-paper.purchase-invoice-image.a4-invoice-paper::after{display:none!important;}
  body.purchase-printing .purchase-paper .form-header-image,
  body.purchase-printing .purchase-paper .form-footer-image{
    width:100%!important;
    margin:0 0 2mm!important;
    padding:0!important;
    border:0!important;
    background:#fff!important;
    overflow:hidden!important;
  }
  body.purchase-printing .purchase-paper .form-footer-image{margin:2mm 0 0!important;}
  body.purchase-printing .purchase-paper .form-header-image img,
  body.purchase-printing .purchase-paper .form-footer-image img{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:26mm!important;
    object-fit:contain!important;
    margin:0!important;
  }
  body.purchase-printing .purchase-paper .paper-topline{margin:0 0 1mm!important;padding:0!important;}
  body.purchase-printing .purchase-paper .status-pill{font-size:6.5px!important;padding:2px 5px!important;border-radius:4px!important;}
  body.purchase-printing .purchase-paper .tracking-current.print-current{
    display:flex!important;
    margin:0 0 1.5mm!important;
    padding:2mm!important;
    border-radius:3px!important;
    font-size:7px!important;
    line-height:1.2!important;
    min-height:0!important;
  }
  body.purchase-printing .purchase-paper .purchase-title{
    font-size:12px!important;
    line-height:1.1!important;
    margin:0 0 2mm!important;
    padding:0 0 1mm!important;
  }
  body.purchase-printing .purchase-paper .purchase-info-wrap,
  body.purchase-printing .purchase-paper .purchase-table-wrap,
  body.purchase-printing .purchase-paper .purchase-quotation-wrap{
    overflow:visible!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  body.purchase-printing .purchase-paper table{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
    border-collapse:collapse!important;
    margin:0!important;
    background:#fff!important;
  }
  body.purchase-printing .purchase-paper th,
  body.purchase-printing .purchase-paper td{
    padding:1.2mm .7mm!important;
    font-size:6.2px!important;
    line-height:1.12!important;
    border:1px solid #111827!important;
    color:#111827!important;
    background:#fff!important;
    font-weight:700!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
    vertical-align:middle!important;
  }
  body.purchase-printing .purchase-paper th{
    background:#eef2ff!important;
    font-weight:900!important;
  }
  body.purchase-printing .purchase-paper .purchase-info-table th,
  body.purchase-printing .purchase-paper .purchase-info-table td{
    font-size:6.4px!important;
    padding:1.3mm .8mm!important;
  }
  body.purchase-printing .purchase-paper .purchase-form-table th,
  body.purchase-printing .purchase-paper .purchase-form-table td{
    font-size:5.9px!important;
    padding:1.05mm .55mm!important;
  }
  body.purchase-printing .purchase-paper .paper-notes,
  body.purchase-printing .purchase-paper .purchase-quotations-invoice,
  body.purchase-printing .purchase-paper .purchase-real-approvals{
    margin-top:2mm!important;
    padding:1.5mm!important;
    border:1px solid #111827!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  body.purchase-printing .purchase-paper .invoice-section-title,
  body.purchase-printing .purchase-paper .real-approvals-title{
    font-size:7px!important;
    margin:0 0 1mm!important;
    padding:0!important;
    line-height:1.15!important;
  }
  body.purchase-printing .purchase-paper .purchase-quotation-table th,
  body.purchase-printing .purchase-paper .purchase-quotation-table td{
    font-size:5.7px!important;
    padding:.9mm .5mm!important;
  }
  body.purchase-printing .purchase-paper .real-approval-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:1mm!important;
  }
  body.purchase-printing .purchase-paper .real-approval-card{
    min-height:0!important;
    padding:1mm!important;
    border-radius:0!important;
    box-shadow:none!important;
    border:1px solid #111827!important;
  }
  body.purchase-printing .purchase-paper .movement-print-icon{
    width:14px!important;
    height:14px!important;
    font-size:7px!important;
    margin:0 auto .5mm!important;
  }
  body.purchase-printing .purchase-paper .real-approval-card strong,
  body.purchase-printing .purchase-paper .real-approval-card small,
  body.purchase-printing .purchase-paper .real-approval-card em{
    font-size:5.8px!important;
    line-height:1.12!important;
  }
  body.purchase-printing .purchase-paper .print-history-section{display:none!important;}
  body.purchase-printing.print-with-history .purchase-paper .print-history-section{display:block!important;}
}


/* V25 - print user details next to form footer */
.print-user-meta{
  display:none;
}
@media print{
  body.purchase-printing .purchase-paper .print-user-meta{
    display:flex!important;
    visibility:visible!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:3mm!important;
    margin:1.2mm 0 0!important;
    padding:.8mm 1mm!important;
    border-top:1px dashed #94a3b8!important;
    color:#475569!important;
    background:#fff!important;
    font-size:6.2px!important;
    line-height:1.2!important;
    font-weight:700!important;
    direction:rtl!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
  body.purchase-printing .purchase-paper .print-user-meta *{
    visibility:visible!important;
    color:#475569!important;
    font-size:6.2px!important;
    line-height:1.2!important;
  }
}

/* V26 - print model section permissions and organized request movement */
.purchase-movement-invoice{
  margin-top:10px!important;
  padding:10px!important;
  border:1px solid rgba(37,99,235,.22)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.98))!important;
  box-shadow:0 10px 26px rgba(15,23,42,.06)!important;
  break-inside:avoid!important;
}
.purchase-movement-invoice .movement-title{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;color:#0f3768!important;font-weight:900!important;}
.purchase-movement-invoice .movement-title::before{content:"🧭";font-size:14px;}
.movement-duration-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px;padding:6px 8px;border-radius:10px;background:rgba(37,99,235,.08);color:#1e3a8a;font-size:12px;font-weight:800;}
.purchase-movement-wrap{width:100%;overflow-x:auto;}
.invoice-movement-table{width:100%;min-width:760px;border-collapse:collapse;table-layout:fixed;}
.invoice-movement-table th,.invoice-movement-table td{font-size:11px;line-height:1.35;padding:7px 6px;vertical-align:middle;}
.invoice-movement-table th:first-child,.invoice-movement-table td:first-child{width:34px!important;}
.invoice-movement-table th:nth-child(2),.invoice-movement-table td:nth-child(2){width:145px!important;}
.invoice-movement-table th:nth-child(5),.invoice-movement-table td:nth-child(5){width:105px!important;}
.invoice-movement-table th:nth-child(6),.invoice-movement-table td:nth-child(6){width:105px!important;}
.invoice-movement-table th:nth-child(7),.invoice-movement-table td:nth-child(7){width:150px!important;}
:root[data-theme="dark"] .purchase-movement-invoice{background:#fff!important;color:#0f172a!important;border-color:#94a3b8!important;}
:root[data-theme="dark"] .purchase-movement-invoice *{color:#0f172a!important;}
:root[data-theme="dark"] .movement-duration-line{background:#eef2ff!important;color:#1e3a8a!important;}
.print-permission-dropdown summary > span{display:grid;gap:4px;}
.print-permission-dropdown summary > span small{display:block;color:var(--muted);font-weight:700;line-height:1.45;}
.print-permission-sub-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
@media print{
  body.purchase-printing .purchase-paper .purchase-movement-invoice{
    margin-top:2mm!important;
    padding:1.5mm!important;
    border:1px solid #111827!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  body.purchase-printing .purchase-paper .movement-duration-line{
    margin:0 0 1mm!important;
    padding:.8mm 1mm!important;
    border:1px solid #9ca3af!important;
    border-radius:0!important;
    background:#f8fafc!important;
    color:#111827!important;
    font-size:6.3px!important;
    line-height:1.12!important;
  }
  body.purchase-printing .purchase-paper .purchase-movement-wrap{
    overflow:visible!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  body.purchase-printing .purchase-paper .invoice-movement-table{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:fixed!important;
  }
  body.purchase-printing .purchase-paper .invoice-movement-table th,
  body.purchase-printing .purchase-paper .invoice-movement-table td{
    font-size:5.35px!important;
    line-height:1.08!important;
    padding:.8mm .45mm!important;
    word-break:break-word!important;
    overflow-wrap:anywhere!important;
  }
  body.purchase-printing .purchase-paper .invoice-movement-table th:first-child,
  body.purchase-printing .purchase-paper .invoice-movement-table td:first-child{width:5mm!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table th:nth-child(2),
  body.purchase-printing .purchase-paper .invoice-movement-table td:nth-child(2){width:25mm!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table th:nth-child(3),
  body.purchase-printing .purchase-paper .invoice-movement-table td:nth-child(3){width:27mm!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table th:nth-child(4),
  body.purchase-printing .purchase-paper .invoice-movement-table td:nth-child(4){width:27mm!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table th:nth-child(5),
  body.purchase-printing .purchase-paper .invoice-movement-table td:nth-child(5){width:19mm!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table th:nth-child(6),
  body.purchase-printing .purchase-paper .invoice-movement-table td:nth-child(6){width:20mm!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table th:nth-child(7),
  body.purchase-printing .purchase-paper .invoice-movement-table td:nth-child(7){width:auto!important;}
  body.purchase-printing .purchase-paper .purchase-real-approvals{display:none!important;}
  body.purchase-printing .purchase-paper .print-history-section{display:none!important;}
}

/* V27 - fix A4 print movement table width and prevent vertical letters */
@media print{
  body.purchase-printing .purchase-paper.purchase-invoice-image.a4-invoice-paper{
    overflow:hidden!important;
  }
  body.purchase-printing .purchase-paper .purchase-movement-invoice{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:2mm 0 0!important;
    padding:1.4mm!important;
    box-sizing:border-box!important;
    clear:both!important;
    float:none!important;
    direction:rtl!important;
  }
  body.purchase-printing .purchase-paper .purchase-movement-wrap{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    box-sizing:border-box!important;
    direction:rtl!important;
  }
  body.purchase-printing .purchase-paper .invoice-movement-table,
  body.purchase-printing .purchase-paper table.invoice-movement-table.print-history-table{
    display:table!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
    table-layout:fixed!important;
    border-collapse:collapse!important;
    direction:rtl!important;
  }
  body.purchase-printing .purchase-paper .invoice-movement-table col.movement-col-no{width:4.5%!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table col.movement-col-action{width:17%!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table col.movement-col-from{width:16%!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table col.movement-col-to{width:16%!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table col.movement-col-user{width:13%!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table col.movement-col-time{width:16%!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table col.movement-col-comment{width:17.5%!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table th,
  body.purchase-printing .purchase-paper .invoice-movement-table td{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    hyphens:none!important;
    text-align:center!important;
    vertical-align:middle!important;
    font-size:6.1px!important;
    line-height:1.35!important;
    padding:.8mm .55mm!important;
  }
  body.purchase-printing .purchase-paper .invoice-movement-table th:first-child,
  body.purchase-printing .purchase-paper .invoice-movement-table td:first-child,
  body.purchase-printing .purchase-paper .invoice-movement-table th:nth-child(2),
  body.purchase-printing .purchase-paper .invoice-movement-table td:nth-child(2),
  body.purchase-printing .purchase-paper .invoice-movement-table th:nth-child(3),
  body.purchase-printing .purchase-paper .invoice-movement-table td:nth-child(3),
  body.purchase-printing .purchase-paper .invoice-movement-table th:nth-child(4),
  body.purchase-printing .purchase-paper .invoice-movement-table td:nth-child(4),
  body.purchase-printing .purchase-paper .invoice-movement-table th:nth-child(5),
  body.purchase-printing .purchase-paper .invoice-movement-table td:nth-child(5),
  body.purchase-printing .purchase-paper .invoice-movement-table th:nth-child(6),
  body.purchase-printing .purchase-paper .invoice-movement-table td:nth-child(6),
  body.purchase-printing .purchase-paper .invoice-movement-table th:nth-child(7),
  body.purchase-printing .purchase-paper .invoice-movement-table td:nth-child(7){
    width:auto!important;
  }
  body.purchase-printing .purchase-paper .invoice-movement-table .movement-print-icon{
    display:inline-flex!important;
    vertical-align:middle!important;
    align-items:center!important;
    justify-content:center!important;
    width:3.6mm!important;
    height:3.6mm!important;
    min-width:3.6mm!important;
    margin:0 0 0 .7mm!important;
    font-size:6px!important;
    line-height:1!important;
  }
  body.purchase-printing .purchase-paper .movement-duration-line{
    width:100%!important;
    box-sizing:border-box!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    font-size:6.4px!important;
    line-height:1.25!important;
  }
}

/* V28 - final print movement fix, remove from/to status columns, and pin footer to A4 bottom */
.invoice-movement-table{min-width:560px!important;}
.invoice-movement-table col.movement-col-no{width:7%!important;}
.invoice-movement-table col.movement-col-action{width:25%!important;}
.invoice-movement-table col.movement-col-user{width:18%!important;}
.invoice-movement-table col.movement-col-time{width:20%!important;}
.invoice-movement-table col.movement-col-comment{width:30%!important;}
@media print{
  @page{size:A4 portrait;margin:0!important;}
  html.purchase-printing-root,
  html.purchase-printing-root body,
  body.purchase-printing{
    width:210mm!important;
    height:297mm!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  body.purchase-printing .purchase-paper.purchase-invoice-image.a4-invoice-paper,
  body.purchase-printing section.purchase-paper.purchase-invoice-image.a4-invoice-paper{
    position:fixed!important;
    inset:0!important;
    transform:none!important;
    width:210mm!important;
    min-width:210mm!important;
    max-width:210mm!important;
    height:297mm!important;
    min-height:297mm!important;
    max-height:297mm!important;
    margin:0!important;
    padding:5mm 5mm 34mm!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    background:#fff!important;
    color:#111827!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    outline:0!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
  body.purchase-printing .purchase-paper .purchase-movement-invoice{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:2mm 0 0!important;
    padding:1.2mm!important;
    box-sizing:border-box!important;
    border:1px solid #111827!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    direction:rtl!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  body.purchase-printing .purchase-paper .purchase-movement-wrap{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
    direction:rtl!important;
  }
  body.purchase-printing .purchase-paper table.invoice-movement-table,
  body.purchase-printing .purchase-paper .invoice-movement-table.print-history-table{
    display:table!important;
    table-layout:fixed!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    border-collapse:collapse!important;
    direction:rtl!important;
  }
  body.purchase-printing .purchase-paper .invoice-movement-table col.movement-col-no{width:7%!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table col.movement-col-action{width:25%!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table col.movement-col-user{width:18%!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table col.movement-col-time{width:20%!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table col.movement-col-comment{width:30%!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table th,
  body.purchase-printing .purchase-paper .invoice-movement-table td{
    display:table-cell!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    padding:.75mm .55mm!important;
    font-size:6.2px!important;
    line-height:1.25!important;
    text-align:center!important;
    vertical-align:middle!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    hyphens:none!important;
    border:1px solid #111827!important;
    color:#111827!important;
    background:#fff!important;
  }
  body.purchase-printing .purchase-paper .invoice-movement-table th{
    background:#eef2ff!important;
    font-weight:900!important;
  }
  body.purchase-printing .purchase-paper .invoice-movement-table th:first-child,
  body.purchase-printing .purchase-paper .invoice-movement-table td:first-child{
    white-space:nowrap!important;
  }
  body.purchase-printing .purchase-paper .invoice-movement-table th:nth-child(2),
  body.purchase-printing .purchase-paper .invoice-movement-table td:nth-child(2),
  body.purchase-printing .purchase-paper .invoice-movement-table th:nth-child(3),
  body.purchase-printing .purchase-paper .invoice-movement-table td:nth-child(3),
  body.purchase-printing .purchase-paper .invoice-movement-table th:nth-child(4),
  body.purchase-printing .purchase-paper .invoice-movement-table td:nth-child(4){
    white-space:normal!important;
  }
  body.purchase-printing .purchase-paper .invoice-movement-table .movement-print-icon{
    display:inline-flex!important;
    vertical-align:middle!important;
    align-items:center!important;
    justify-content:center!important;
    width:3.4mm!important;
    height:3.4mm!important;
    min-width:3.4mm!important;
    margin:0 0 0 .55mm!important;
    font-size:5.6px!important;
    line-height:1!important;
  }
  body.purchase-printing .purchase-paper .movement-duration-line{
    display:block!important;
    width:100%!important;
    box-sizing:border-box!important;
    margin:0 0 1mm!important;
    padding:.8mm 1mm!important;
    border:1px solid #9ca3af!important;
    border-radius:0!important;
    background:#f8fafc!important;
    color:#111827!important;
    font-size:6.4px!important;
    line-height:1.25!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }
  body.purchase-printing .purchase-paper .form-footer-image.show-print-footer,
  body.purchase-printing .purchase-paper .form-footer-image{
    position:absolute!important;
    left:5mm!important;
    right:5mm!important;
    bottom:9mm!important;
    width:200mm!important;
    max-width:200mm!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:#fff!important;
    z-index:2!important;
    overflow:hidden!important;
  }
  body.purchase-printing .purchase-paper .form-footer-image img{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:22mm!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    margin:0!important;
  }
  body.purchase-printing .purchase-paper .print-user-meta{
    position:absolute!important;
    left:5mm!important;
    right:5mm!important;
    bottom:3mm!important;
    width:200mm!important;
    margin:0!important;
    padding:.7mm 1mm!important;
    box-sizing:border-box!important;
    border-top:1px dashed #94a3b8!important;
    background:#fff!important;
    z-index:3!important;
  }
}

/* V29 - clean print movement, PDF button, and tracking action layout */
.purchase-print-movement-only{
  display:none!important;
}
@media print{
  body.purchase-printing .purchase-paper .screen-movement-invoice{
    display:none!important;
    visibility:hidden!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:hidden!important;
  }
  body.purchase-printing .purchase-paper .purchase-print-movement-only{
    display:block!important;
    visibility:visible!important;
    width:100%!important;
    max-width:100%!important;
    margin:2mm 0 0!important;
    padding:1.2mm!important;
    box-sizing:border-box!important;
    border:1px solid #111827!important;
    border-radius:0!important;
    background:#fff!important;
    color:#111827!important;
    direction:rtl!important;
    overflow:visible!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  body.purchase-printing .purchase-paper .purchase-print-movement-only,
  body.purchase-printing .purchase-paper .purchase-print-movement-only *{
    visibility:visible!important;
    writing-mode:horizontal-tb!important;
    text-orientation:mixed!important;
    transform:none!important;
  }
  body.purchase-printing .purchase-paper .print-clean-section-title{
    display:block!important;
    width:100%!important;
    margin:0 0 1mm!important;
    padding:.8mm 1mm!important;
    box-sizing:border-box!important;
    background:#eef2ff!important;
    border:1px solid #111827!important;
    color:#0f172a!important;
    font-size:7.4px!important;
    line-height:1.2!important;
    font-weight:900!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
  body.purchase-printing .purchase-paper table.purchase-print-movement-table{
    display:table!important;
    table-layout:fixed!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    border-collapse:collapse!important;
    border-spacing:0!important;
    direction:rtl!important;
    background:#fff!important;
  }
  body.purchase-printing .purchase-paper .purchase-print-movement-table thead{
    display:table-header-group!important;
    width:auto!important;
    height:auto!important;
  }
  body.purchase-printing .purchase-paper .purchase-print-movement-table tbody{
    display:table-row-group!important;
    width:auto!important;
    height:auto!important;
  }
  body.purchase-printing .purchase-paper .purchase-print-movement-table tr{
    display:table-row!important;
    width:auto!important;
    height:auto!important;
  }
  body.purchase-printing .purchase-paper .purchase-print-movement-table th,
  body.purchase-printing .purchase-paper .purchase-print-movement-table td{
    display:table-cell!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    padding:.8mm .7mm!important;
    border:1px solid #111827!important;
    background:#fff!important;
    color:#111827!important;
    font-size:6.8px!important;
    line-height:1.22!important;
    font-weight:700!important;
    text-align:center!important;
    vertical-align:middle!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    hyphens:none!important;
  }
  body.purchase-printing .purchase-paper .purchase-print-movement-table th{
    background:#eef2ff!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }
  body.purchase-printing .purchase-paper .purchase-print-movement-table th:nth-child(1),
  body.purchase-printing .purchase-paper .purchase-print-movement-table td:nth-child(1){
    width:7%!important;
    white-space:nowrap!important;
  }
  body.purchase-printing .purchase-paper .purchase-print-movement-table th:nth-child(2),
  body.purchase-printing .purchase-paper .purchase-print-movement-table td:nth-child(2){width:27%!important;}
  body.purchase-printing .purchase-paper .purchase-print-movement-table th:nth-child(3),
  body.purchase-printing .purchase-paper .purchase-print-movement-table td:nth-child(3){width:21%!important;}
  body.purchase-printing .purchase-paper .purchase-print-movement-table th:nth-child(4),
  body.purchase-printing .purchase-paper .purchase-print-movement-table td:nth-child(4){width:22%!important;direction:ltr!important;unicode-bidi:plaintext!important;}
  body.purchase-printing .purchase-paper .purchase-print-movement-table th:nth-child(5),
  body.purchase-printing .purchase-paper .purchase-print-movement-table td:nth-child(5){width:23%!important;text-align:right!important;}
}
.tracking-compact-row .tracking-top-actions{
  margin:16px 18px 14px!important;
  padding:12px!important;
  border:1px solid rgba(37,99,235,.16)!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,246,255,.90))!important;
  box-shadow:0 12px 28px rgba(15,23,42,.08)!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:10px!important;
}
.tracking-compact-row .tracking-top-actions .btn{
  min-width:132px!important;
  height:36px!important;
  border-radius:12px!important;
  font-weight:900!important;
}
:root[data-theme="dark"] .tracking-compact-row .tracking-top-actions{
  background:linear-gradient(135deg,rgba(15,23,42,.95),rgba(30,41,59,.92))!important;
  border-color:rgba(96,165,250,.28)!important;
}
@media(max-width:680px){
  .tracking-compact-row .tracking-top-actions{
    margin:12px 10px!important;
    padding:10px!important;
    gap:8px!important;
  }
  .tracking-compact-row .tracking-top-actions .btn{
    min-width:0!important;
    flex:1 1 130px!important;
    height:34px!important;
    font-size:11.5px!important;
  }
}

/* V31 - readable print font sizes for direct browser print */
@media print{
  body.purchase-printing .purchase-paper.purchase-invoice-image.a4-invoice-paper,
  body.purchase-printing section.purchase-paper.purchase-invoice-image.a4-invoice-paper{padding:6mm!important;}
  body.purchase-printing .purchase-paper .form-header-image img{max-height:32mm!important;}
  body.purchase-printing .purchase-paper .status-pill{font-size:8px!important;padding:1.2mm 2.2mm!important;}
  body.purchase-printing .purchase-paper .tracking-current.print-current{font-size:8px!important;padding:1.8mm!important;}
  body.purchase-printing .purchase-paper .purchase-title{font-size:15px!important;margin-bottom:2.1mm!important;padding-bottom:1.2mm!important;}
  body.purchase-printing .purchase-paper th,
  body.purchase-printing .purchase-paper td{font-size:7.4px!important;line-height:1.28!important;padding:1.05mm .72mm!important;}
  body.purchase-printing .purchase-paper .purchase-info-table th,
  body.purchase-printing .purchase-paper .purchase-info-table td{font-size:7.6px!important;line-height:1.28!important;padding:1.05mm .75mm!important;}
  body.purchase-printing .purchase-paper .purchase-form-table th,
  body.purchase-printing .purchase-paper .purchase-form-table td{font-size:7.15px!important;line-height:1.25!important;padding:.95mm .55mm!important;}
  body.purchase-printing .purchase-paper .purchase-quotation-table th,
  body.purchase-printing .purchase-paper .purchase-quotation-table td{font-size:7px!important;line-height:1.24!important;padding:.9mm .55mm!important;}
  body.purchase-printing .purchase-paper .invoice-section-title,
  body.purchase-printing .purchase-paper .movement-title,
  body.purchase-printing .purchase-paper .real-approvals-title{font-size:9px!important;line-height:1.25!important;padding:1mm!important;}
  body.purchase-printing .purchase-paper .movement-duration-line{font-size:7.2px!important;line-height:1.28!important;padding:1mm 1.2mm!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table th,
  body.purchase-printing .purchase-paper .invoice-movement-table td{font-size:7.05px!important;line-height:1.32!important;padding:1mm .65mm!important;}
  body.purchase-printing .purchase-paper .invoice-movement-table td:nth-child(4){font-size:6.5px!important;}
  body.purchase-printing .purchase-paper .movement-print-icon{width:13px!important;height:13px!important;font-size:7px!important;}
  body.purchase-printing .purchase-paper .print-user-meta,
  body.purchase-printing .purchase-paper .print-user-meta *{font-size:6.7px!important;line-height:1.25!important;}
  body.purchase-printing .purchase-paper .form-footer-image img{max-height:28mm!important;}
}

/* V37 - grouped permissions, copy permissions, and select-all parents */
.permission-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    width: 100%;
}
.permission-groups-grid .permission-group-card {
    grid-column: auto;
    border: 1px solid rgba(148, 163, 184, .42);
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}
.permission-groups-grid .permission-group-card summary {
    min-height: 72px;
    background: linear-gradient(135deg, rgba(248, 250, 252, .98), rgba(239, 246, 255, .75));
}
.permission-group-selectall input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--primary);
}
.permission-copy-bar {
    display: grid;
    gap: 7px;
    margin: 10px 0 14px;
    padding: 12px;
    border: 1px dashed rgba(37, 99, 235, .35);
    border-radius: 16px;
    background: rgba(239, 246, 255, .55);
}
.permission-copy-bar label {
    margin: 0;
    display: grid;
    gap: 7px;
}
.permission-copy-bar select {
    min-height: 40px;
    border-radius: 12px;
}
.permission-copy-bar small {
    color: var(--muted);
    line-height: 1.6;
}
.mini-permission-groups {
    grid-template-columns: 1fr;
}
.mini-permission-groups .permission-group-card summary {
    min-height: auto;
    padding: 11px 12px;
}
.mini-permission-groups .permission-sub-list {
    grid-template-columns: 1fr;
    padding: 10px;
}
:root[data-theme="dark"] .permission-copy-bar {
    background: rgba(30, 41, 59, .72);
    border-color: rgba(96, 165, 250, .38);
}
:root[data-theme="dark"] .permission-groups-grid .permission-group-card {
    background: rgba(15, 23, 42, .82);
    border-color: rgba(148, 163, 184, .24);
}
:root[data-theme="dark"] .permission-groups-grid .permission-group-card summary {
    background: linear-gradient(135deg, rgba(15, 23, 42, .95), rgba(30, 64, 175, .25));
}
@media (max-width: 720px) {
    .permission-groups-grid { grid-template-columns: 1fr; }
    .permission-copy-bar { padding: 10px; }
}


/* V39 - organized independent quotation offer cards */
.quotation-entry-panel .quotation-form{
  grid-template-columns:1fr!important;
  gap:16px!important;
}
.quotation-entry-panel .quotation-toolbar{
  grid-column:1/-1!important;
  background:linear-gradient(135deg,rgba(239,246,255,.96),rgba(255,255,255,.96))!important;
  border:1px solid rgba(37,99,235,.18)!important;
  box-shadow:0 10px 25px rgba(15,23,42,.06)!important;
}
.quotation-offer-cards{
  grid-column:1/-1!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:14px!important;
}
.quotation-offer-card,
.quotation-row-classic.quotation-offer-card{
  display:grid!important;
  grid-template-columns:1.35fr .65fr .5fr .75fr!important;
  gap:12px!important;
  align-items:end!important;
  padding:14px!important;
  border:1px solid rgba(37,99,235,.18)!important;
  border-radius:20px!important;
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%)!important;
  box-shadow:0 16px 34px rgba(15,23,42,.07)!important;
}
.quotation-offer-head{
  grid-column:1/-1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:0 0 10px!important;
  border-bottom:1px dashed rgba(37,99,235,.22)!important;
}
.quotation-offer-title{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  color:#0f3768!important;
  font-size:15px!important;
  font-weight:1000!important;
}
.quotation-offer-title::before{content:'💰';font-size:16px!important;}
.quotation-field{
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  margin:0!important;
  color:#0f172a!important;
  font-size:12px!important;
  font-weight:900!important;
}
.quotation-field.required-field::after{content:' *';color:#ef4444!important;margin-inline-start:3px!important;}
.quotation-field input[type="text"],
.quotation-field input[type="number"]{
  width:100%!important;
  min-height:44px!important;
  height:44px!important;
  border-radius:13px!important;
  border:1px solid rgba(148,163,184,.42)!important;
  background:#fff!important;
  padding:9px 12px!important;
  font-size:13px!important;
  font-weight:800!important;
  color:#0f172a!important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.04)!important;
}
.quotation-field input:focus{
  border-color:#2563eb!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.11)!important;
  outline:none!important;
}
.quotation-note-field{grid-column:1/3!important;}
.quotation-file-field{grid-column:3/5!important;}
.quotation-file-field .quote-file-input{
  width:100%!important;
  min-height:44px!important;
  height:auto!important;
  justify-content:space-between!important;
  border-radius:13px!important;
  padding:8px 10px!important;
  background:rgba(239,246,255,.92)!important;
}
.quotation-file-field .quote-file-input input{
  max-width:180px!important;
  font-size:11px!important;
}
.quotation-offer-head .remove-quotation-row{
  width:34px!important;
  height:34px!important;
  min-height:34px!important;
  border-radius:11px!important;
  padding:0!important;
}
.quotation-entry-panel .wide-card,
.quotation-entry-panel .ai-assistant-box,
.quotation-entry-panel .quotation-submit-actions{
  grid-column:1/-1!important;
}
:root[data-theme="dark"] .quotation-entry-panel .quotation-toolbar,
:root[data-theme="dark"] .quotation-offer-card,
:root[data-theme="dark"] .quotation-row-classic.quotation-offer-card{
  background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(30,41,59,.95))!important;
  border-color:rgba(96,165,250,.22)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.28)!important;
}
:root[data-theme="dark"] .quotation-offer-title,
:root[data-theme="dark"] .quotation-field{color:#eaf2ff!important;}
:root[data-theme="dark"] .quotation-field input[type="text"],
:root[data-theme="dark"] .quotation-field input[type="number"]{
  background:#0b1220!important;
  border-color:rgba(148,163,184,.32)!important;
  color:#f8fafc!important;
}
:root[data-theme="dark"] .quotation-file-field .quote-file-input{
  background:rgba(15,23,42,.9)!important;
  color:#bfdbfe!important;
  border-color:rgba(96,165,250,.3)!important;
}
@media (max-width:1100px){
  .quotation-offer-card,
  .quotation-row-classic.quotation-offer-card{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:12px!important;}
  .quotation-note-field,
  .quotation-file-field{grid-column:1/-1!important;}
}
@media (max-width:680px){
  .quotation-entry-panel{padding:12px!important;}
  .quotation-offer-card,
  .quotation-row-classic.quotation-offer-card{grid-template-columns:1fr!important;border-radius:16px!important;gap:10px!important;}
  .quotation-offer-title{font-size:14px!important;}
  .quotation-field input[type="text"],
  .quotation-field input[type="number"]{min-height:42px!important;height:42px!important;font-size:12.5px!important;}
  .quotation-file-field .quote-file-input{align-items:flex-start!important;flex-direction:column!important;gap:5px!important;}
  .quotation-file-field .quote-file-input input{max-width:100%!important;}
}

/* V40 - aligned quotation rows in one section + WhatsApp workflow fix UI */
.quotation-entry-panel .quotation-grid-head,
.quotation-entry-panel .quotation-line-row{
  grid-template-columns:42px minmax(220px,1.35fr) minmax(120px,.62fr) minmax(95px,.48fr) minmax(140px,.72fr) minmax(220px,1.15fr) minmax(220px,1.05fr)!important;
  align-items:stretch!important;
}
.quotation-entry-panel .quotation-grid-head{
  grid-column:1/-1!important;
  display:grid!important;
  gap:8px!important;
  padding:9px 12px!important;
  border:1px solid rgba(37,99,235,.18)!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,rgba(239,246,255,.92),rgba(248,250,252,.98))!important;
  color:#1e3a8a!important;
  font-size:12px!important;
  font-weight:1000!important;
  text-align:center!important;
}
.quotation-entry-panel .quotation-single-section{
  gap:8px!important;
  padding:0!important;
}
.quotation-entry-panel .quotation-line-row,
.quotation-entry-panel .quotation-row-classic.quotation-line-row{
  display:grid!important;
  gap:8px!important;
  padding:10px 12px!important;
  border-radius:16px!important;
  box-shadow:0 8px 18px rgba(15,23,42,.055)!important;
  background:#fff!important;
}
.quotation-entry-panel .quotation-line-row .quotation-offer-head,
.quotation-entry-panel .quotation-line-row .quotation-line-no{
  grid-column:auto!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  align-content:end!important;
  justify-items:center!important;
  gap:6px!important;
  padding:0!important;
  border:0!important;
  order:1!important;
}
.quotation-entry-panel .quotation-line-row .quotation-offer-title{
  display:flex!important;
  width:32px!important;
  height:32px!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:#eff6ff!important;
  border:1px solid #bfdbfe!important;
  color:#1d4ed8!important;
  font-size:12px!important;
}
.quotation-entry-panel .quotation-line-row .quotation-offer-title::before{content:''!important;display:none!important;}
.quotation-entry-panel .quotation-line-row .supplier-field{order:2!important;}
.quotation-entry-panel .quotation-line-row .amount-field{order:3!important;}
.quotation-entry-panel .quotation-line-row .currency-field{order:4!important;}
.quotation-entry-panel .quotation-line-row .delivery-field{order:5!important;}
.quotation-entry-panel .quotation-line-row .quotation-note-field{order:6!important;grid-column:auto!important;}
.quotation-entry-panel .quotation-line-row .quotation-file-field{order:7!important;grid-column:auto!important;}
.quotation-entry-panel .quotation-line-row .quotation-offer-head .remove-quotation-row{order:8!important;}
.quotation-entry-panel .quotation-line-row .quotation-field{
  min-height:72px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  text-align:center!important;
  gap:7px!important;
  font-size:12px!important;
  line-height:1.2!important;
}
.quotation-entry-panel .quotation-line-row .quotation-field input[type="text"],
.quotation-entry-panel .quotation-line-row .quotation-field input[type="number"],
.quotation-entry-panel .quotation-line-row .quote-file-input{
  height:42px!important;
  min-height:42px!important;
  margin:0!important;
}
.quotation-entry-panel .quotation-line-row .quote-file-input{justify-content:center!important;text-align:center!important;}
:root[data-theme="dark"] .quotation-entry-panel .quotation-grid-head{
  background:linear-gradient(135deg,rgba(15,23,42,.95),rgba(30,64,175,.25))!important;
  border-color:rgba(96,165,250,.25)!important;
  color:#bfdbfe!important;
}
:root[data-theme="dark"] .quotation-entry-panel .quotation-line-row,
:root[data-theme="dark"] .quotation-entry-panel .quotation-row-classic.quotation-line-row{
  background:#0f172a!important;
}
@media (max-width:1100px){
  .quotation-entry-panel .quotation-desktop-head{display:none!important;}
  .quotation-entry-panel .quotation-line-row,
  .quotation-entry-panel .quotation-row-classic.quotation-line-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .quotation-entry-panel .quotation-line-row .quotation-offer-head{grid-column:1/-1!important;display:flex!important;align-items:center!important;justify-content:space-between!important;}
  .quotation-entry-panel .quotation-line-row .quotation-note-field,
  .quotation-entry-panel .quotation-line-row .quotation-file-field{grid-column:1/-1!important;}
  .quotation-entry-panel .quotation-line-row .quotation-field{text-align:start!important;min-height:auto!important;}
}
@media (max-width:680px){
  .quotation-entry-panel .quotation-line-row,
  .quotation-entry-panel .quotation-row-classic.quotation-line-row{grid-template-columns:1fr!important;}
  .quotation-entry-panel .quotation-line-row .quotation-field input[type="text"],
  .quotation-entry-panel .quotation-line-row .quotation-field input[type="number"],
  .quotation-entry-panel .quotation-line-row .quote-file-input{height:auto!important;min-height:42px!important;}
}

/* V42 - UI text management */
.ui-texts-panel .info-list {
  display: grid;
  gap: 12px;
}
.ui-texts-panel .info-list > div,
.ui-texts-list .ui-text-row {
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(255,255,255,0.78);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.06);
}
.ui-texts-panel .info-list strong,
.ui-texts-panel .info-list small {
  display: block;
}
.ui-texts-panel .info-list small {
  color: var(--muted, #64748b);
  margin-top: 4px;
}
.ui-texts-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.ui-texts-list .ui-text-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.25fr) minmax(150px, .7fr) auto auto;
  gap: 10px;
  align-items: end;
}
.ui-texts-list .ui-text-row label span {
  font-weight: 800;
  font-size: 12px;
  color: var(--muted, #64748b);
}
.ui-text-active {
  min-width: 82px;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(239,246,255,.75);
}
.ui-text-delete-proxy {
  min-height: 42px;
}
[data-theme="dark"] .ui-texts-panel .info-list > div,
[data-theme="dark"] .ui-texts-list .ui-text-row {
  background: rgba(15,23,42,.76);
  border-color: rgba(148,163,184,.22);
}
[data-theme="dark"] .ui-text-active {
  background: rgba(30,41,59,.82);
  border-color: rgba(96,165,250,.22);
}
@media (max-width: 800px) {
  .ui-texts-list .ui-text-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ui-text-active {
    justify-content: flex-start;
  }
}

/* === v43: cleaner notes, dropdown units, clearer required stars === */
.required-star,
label .required-star,
th .required-star,
.required-field::after {
  color: #dc2626 !important;
  font-weight: 1000 !important;
  font-size: 1.25em !important;
  line-height: 1 !important;
  text-shadow: 0 0 0 rgba(0,0,0,0) !important;
}
:root[data-theme="dark"] .required-star,
:root[data-theme="dark"] .required-field::after {
  color: #fb7185 !important;
}
.purchase-form-table select,
.form-design-options textarea[name="field_options"],
table textarea[name="field_options"] {
  min-height: 38px !important;
  border-radius: 12px !important;
}
.purchase-form-table select {
  width: 100% !important;
  min-width: 95px !important;
  padding: 7px 10px !important;
  background: var(--surface, #fff) !important;
  color: var(--text, #0f172a) !important;
}
:root[data-theme="dark"] .purchase-form-table select {
  background: rgba(15,23,42,.9) !important;
  color: #e5e7eb !important;
  border-color: rgba(148,163,184,.28) !important;
}

/* V45 - Tracking invoice direct actions */
.tracking-model-actions{
    margin:12px 0 14px!important;
    padding:10px!important;
    border:1px solid rgba(148,163,184,.28)!important;
    border-radius:16px!important;
    background:rgba(248,250,252,.92)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    flex-wrap:wrap!important;
}
.tracking-model-actions form{display:flex!important;align-items:center!important;gap:8px!important;margin:0!important;flex-wrap:wrap!important;}
.tracking-model-actions .btn{min-height:34px!important;padding:7px 12px!important;border-radius:999px!important;font-size:12px!important;font-weight:900!important;}
.tracking-model-actions select{height:34px!important;min-width:150px!important;border-radius:10px!important;border:1px solid rgba(148,163,184,.42)!important;padding:0 10px!important;font-size:12px!important;}
.tracking-shared-note-box{flex:1 1 100%!important;margin:0 0 2px!important;}
.tracking-shared-note-box input{height:36px!important;}
:root[data-theme="dark"] .tracking-model-actions{
    background:rgba(15,23,42,.92)!important;
    border-color:rgba(96,165,250,.26)!important;
}
@media (max-width: 768px){
  .tracking-model-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;padding:8px!important;}
  .tracking-model-actions .btn,
  .tracking-model-actions form,
  .tracking-model-actions a{width:100%!important;justify-content:center!important;}
  .tracking-model-actions form{display:grid!important;grid-template-columns:1fr!important;}
  .tracking-model-actions select{width:100%!important;min-width:0!important;}
  .tracking-shared-note-box{grid-column:1/-1!important;}
}

/* V50 - keep form footer at the bottom of every displayed/printed/WhatsApp purchase form */
.purchase-paper.purchase-invoice-image.a4-invoice-paper,
.purchase-invoice-image.a4-invoice-paper,
.readonly-paper.purchase-invoice-image{
  display:flex!important;
  flex-direction:column!important;
}
.purchase-paper-bottom{
  margin-top:auto!important;
  width:100%!important;
  padding-top:10px!important;
}
.purchase-paper-bottom .form-footer-image{
  margin-top:0!important;
  margin-bottom:4px!important;
}
.purchase-paper-bottom .form-footer-image img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  object-fit:contain!important;
}
.tracking-invoice-embed-body .purchase-paper-bottom{
  margin-top:auto!important;
}
@media print{
  body.purchase-printing .purchase-paper-bottom{
    margin-top:auto!important;
    padding-top:2mm!important;
    width:100%!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  body.purchase-printing .purchase-paper-bottom .form-footer-image{
    margin:0 0 1mm!important;
  }
}

/* V54 - show purchase request model actions directly, like tracking screen, without the إجراء dropdown */
.invoice-direct-actions{
  max-width:min(980px,95vw)!important;
  margin:14px auto 18px!important;
  padding:0!important;
  align-items:stretch!important;
  justify-content:center!important;
}
.invoice-direct-actions .invoice-back-btn{
  min-height:42px!important;
  border-radius:999px!important;
  align-self:flex-start!important;
}
.purchase-show-direct-actions{
  flex:1 1 560px!important;
  margin:0!important;
  box-shadow:0 16px 40px rgba(15,23,42,.08)!important;
}
.purchase-show-direct-actions .wa-send-form{
  flex:1 1 320px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:0!important;
  padding:7px!important;
  border:1px solid rgba(37,99,235,.14)!important;
  border-radius:14px!important;
  background:rgba(239,246,255,.72)!important;
}
.purchase-show-direct-actions .wa-send-form input{
  min-height:34px!important;
  height:34px!important;
  border-radius:10px!important;
  font-size:12px!important;
  padding:0 10px!important;
  min-width:160px!important;
}
.purchase-show-direct-actions .btn{
  min-width:92px!important;
}
:root[data-theme="dark"] .purchase-show-direct-actions .wa-send-form{
  background:rgba(2,6,23,.38)!important;
  border-color:rgba(96,165,250,.22)!important;
}
@media (max-width:768px){
  .invoice-direct-actions{
    width:calc(100% - 18px)!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .invoice-direct-actions .invoice-back-btn{
    width:100%!important;
    justify-content:center!important;
  }
  .purchase-show-direct-actions{
    flex:none!important;
    width:100%!important;
  }
  .purchase-show-direct-actions .wa-send-form{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .purchase-show-direct-actions .wa-send-form input,
  .purchase-show-direct-actions .wa-send-form .btn{
    width:100%!important;
    min-width:0!important;
  }
}

/* V55 - move purchase request model actions above the request form */
.invoice-top-actions{
  margin:10px auto 14px!important;
  align-items:center!important;
}
.invoice-top-actions + .purchase-paper{
  margin-top:8px!important;
}
@media (max-width:768px){
  .invoice-top-actions{
    margin:8px auto 12px!important;
  }
}


/* v57: إعدادات ألوان خلفية شاشة الدخول */
.login-bg-control-card input[type="color"]{
  width:100%;
  min-height:46px;
  padding:5px;
  border-radius:14px;
  cursor:pointer;
}
.login-bg-preview{
  min-height:88px;
  border-radius:20px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  box-shadow:0 16px 34px rgba(15,23,42,.14);
  overflow:hidden;
}
.login-bg-preview span{
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.35);
  padding:9px 14px;
  border-radius:999px;
  backdrop-filter:blur(8px);
}


/* V57 no-counter lightweight navigation: hide all loading/count overlays completely */
.system-loading-overlay,
.page-refresh-progress,
.page-busy-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* V71 - quotations approval choice modal */
.quotation-choice-overlay{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(15,23,42,.42);
}
.quotation-choice-overlay.is-hiding{opacity:0;transition:opacity .14s ease}
.quotation-choice-modal{
    width:min(440px,100%);
    border-radius:24px;
    background:#fff;
    color:#0f172a;
    box-shadow:0 28px 80px rgba(15,23,42,.28);
    padding:22px;
    position:relative;
    border:1px solid rgba(148,163,184,.25);
}
.quotation-choice-close{
    position:absolute;
    top:12px;
    inset-inline-start:12px;
    width:34px;
    height:34px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.35);
    background:#f8fafc;
    cursor:pointer;
    font-size:22px;
    line-height:1;
}
.quotation-choice-icon{
    width:54px;
    height:54px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    background:linear-gradient(135deg,#dbeafe,#eef2ff);
    margin-bottom:12px;
}
.quotation-choice-modal h3{margin:0 0 6px;font-size:22px;font-weight:900;color:#0f3768}
.quotation-choice-modal p{margin:0 0 15px;color:#64748b;font-weight:700}
.quotation-choice-option{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px;
    margin:10px 0;
    border:1px solid rgba(148,163,184,.32);
    border-radius:18px;
    cursor:pointer;
    background:#f8fafc;
    transition:.16s ease;
}
.quotation-choice-option:hover{border-color:#2563eb;background:#eff6ff;transform:translateY(-1px)}
.quotation-choice-option input{width:20px;height:20px;margin-top:2px;accent-color:#2563eb}
.quotation-choice-option strong{display:block;font-size:15px;color:#0f172a;margin-bottom:3px}
.quotation-choice-option small{display:block;font-size:12px;color:#64748b;line-height:1.55}
.quotation-choice-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;flex-wrap:wrap}
:root[data-theme="dark"] .quotation-choice-modal,
body.dark .quotation-choice-modal{background:#0f172a;color:#e5e7eb;border-color:rgba(148,163,184,.25)}
:root[data-theme="dark"] .quotation-choice-close,
body.dark .quotation-choice-close{background:#111827;color:#e5e7eb;border-color:rgba(148,163,184,.35)}
:root[data-theme="dark"] .quotation-choice-option,
body.dark .quotation-choice-option{background:#111827;border-color:rgba(148,163,184,.24)}
:root[data-theme="dark"] .quotation-choice-option strong,
body.dark .quotation-choice-option strong{color:#f8fafc}
:root[data-theme="dark"] .quotation-choice-modal h3,
body.dark .quotation-choice-modal h3{color:#bfdbfe}
@media (max-width:560px){
    .quotation-choice-modal{padding:18px;border-radius:20px}
    .quotation-choice-modal h3{font-size:19px}
    .quotation-choice-actions .btn{width:100%;justify-content:center}
}

/* === V71: Mobile menu names without gray background ===
   Removes the gray/glass blocks under mobile menu item names while keeping a clear blue active item. */
@media (max-width: 980px) {
  .side-nav {
    gap: 5px !important;
  }

  .side-nav a,
  .side-nav .mobile-nav-logout {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .side-nav a:hover,
  .side-nav a:focus,
  .side-nav .mobile-nav-logout:hover,
  .side-nav .mobile-nav-logout:focus {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .10) !important;
    box-shadow: none !important;
  }

  .side-nav a.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, .90), rgba(14, 165, 233, .68)) !important;
    border-color: rgba(96, 165, 250, .45) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .18) !important;
  }

  :root[data-theme="dark"] .side-nav a,
  :root[data-theme="dark"] .side-nav .mobile-nav-logout {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  :root[data-theme="dark"] .side-nav a:hover,
  :root[data-theme="dark"] .side-nav a:focus,
  :root[data-theme="dark"] .side-nav .mobile-nav-logout:hover,
  :root[data-theme="dark"] .side-nav .mobile-nav-logout:focus {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .10) !important;
  }

  :root[data-theme="dark"] .side-nav a.active {
    background: linear-gradient(135deg, #2563eb, #0891b2) !important;
    border-color: rgba(96, 165, 250, .45) !important;
    color: #fff !important;
  }
}


/* v78: live pending request indicator without page refresh */
.live-pending-alert{
  margin:0 0 16px;
}
.live-pending-alert-link{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 12px;
  align-items:center;
  padding:14px 16px;
  border:1px solid rgba(37,99,235,.24);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(239,246,255,.96),rgba(236,253,245,.92));
  box-shadow:0 14px 35px rgba(15,23,42,.08);
  color:#0f172a;
  text-decoration:none;
}
.live-pending-alert-link .icon{
  grid-row:span 2;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#2563eb;
  color:#fff;
  font-size:18px;
}
.live-pending-alert-link strong{
  font-size:15px;
  font-weight:900;
}
.live-pending-alert-link span{
  color:#64748b;
  font-size:13px;
}
.live-pending-alert-link:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 44px rgba(37,99,235,.13);
}
.live-sync-toast{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:min(420px,calc(100vw - 28px));
}
.live-sync-toast strong{
  line-height:1.5;
}
@media (max-width: 720px){
  .live-pending-alert{margin:0 0 12px;}
  .live-pending-alert-link{
    padding:12px 13px;
    border-radius:16px;
    gap:5px 10px;
  }
  .live-pending-alert-link .icon{
    width:34px;
    height:34px;
    border-radius:12px;
    font-size:16px;
  }
  .live-pending-alert-link strong{font-size:13px;}
  .live-pending-alert-link span{font-size:11.5px;}
  .live-sync-toast{
    left:12px;
    right:12px;
    bottom:16px;
    width:auto;
    justify-content:center;
    border-radius:16px;
    padding:12px 14px;
    font-size:13px;
  }
}
:root[data-theme="dark"] .live-pending-alert-link{
  background:linear-gradient(135deg,rgba(30,41,59,.92),rgba(15,23,42,.92));
  border-color:rgba(96,165,250,.28);
  color:#e5eefb;
}
:root[data-theme="dark"] .live-pending-alert-link span{color:#9fb0c7;}


/* === V80: mobile image-like purchase model + stronger dark mode contrast === */
.purchase-paper-image-viewer{
  width:100%;
  max-width:100%;
  margin-inline:auto;
}
@media (max-width:768px){
  .purchase-paper-image-viewer{
    overflow:hidden!important;
    position:relative!important;
    border-radius:14px!important;
    margin:0 auto 14px!important;
    background:transparent!important;
  }
  .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper{
    width:760px!important;
    max-width:760px!important;
    min-width:760px!important;
    transform:scale(var(--paper-scale,1))!important;
    transform-origin:top right!important;
    margin:0 0 0 auto!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper .purchase-info-wrap,
  .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper .purchase-table-wrap,
  .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper .purchase-quotation-wrap,
  .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper .purchase-movement-wrap{
    overflow:visible!important;
    max-width:none!important;
  }
  .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper .purchase-info-table,
  .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper .purchase-form-table,
  .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper .purchase-quotation-table,
  .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper .print-history-table{
    width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
  }
  .tracking-invoice-frame-wrap{
    overflow:hidden!important;
    background:#f8fafc!important;
  }
  .tracking-invoice-frame{
    width:100%!important;
    min-height:360px!important;
    height:680px;
    overflow:hidden!important;
  }
  .tracking-invoice-embed-body{
    overflow:hidden!important;
    background:#f8fafc!important;
  }
}

/* Keep the request model white like the WhatsApp image, even when the system is dark. */
:root[data-theme="dark"] .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper,
:root[data-theme="dark"] .tracking-invoice-embed-body .purchase-invoice-image.a4-invoice-paper{
  background:#ffffff!important;
  color:#0f172a!important;
  border-color:#94a3b8!important;
}
:root[data-theme="dark"] .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper *,
:root[data-theme="dark"] .tracking-invoice-embed-body .purchase-invoice-image.a4-invoice-paper *{
  color:#0f172a!important;
  border-color:#cbd5e1!important;
}
:root[data-theme="dark"] .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper th,
:root[data-theme="dark"] .tracking-invoice-embed-body .purchase-invoice-image.a4-invoice-paper th{
  background:#eaf2ff!important;
  color:#0f3768!important;
}
:root[data-theme="dark"] .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper td,
:root[data-theme="dark"] .tracking-invoice-embed-body .purchase-invoice-image.a4-invoice-paper td{
  background:#ffffff!important;
  color:#0f172a!important;
}

/* Strong dark-mode cleanup for normal system screens: remove remaining white tabs/columns. */
:root[data-theme="dark"] .config-tabs a:not(.active),
:root[data-theme="dark"] .approval-tabs a:not(.active),
:root[data-theme="dark"] .archive-tabs a:not(.active),
:root[data-theme="dark"] .tab-title-line,
:root[data-theme="dark"] .stage-badge,
:root[data-theme="dark"] .filters-bar,
:root[data-theme="dark"] .advanced-filters,
:root[data-theme="dark"] .request-table-toolbar,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .modern-table,
:root[data-theme="dark"] .responsive-table,
:root[data-theme="dark"] .timeline-item,
:root[data-theme="dark"] .tracking-details summary,
:root[data-theme="dark"] details summary,
:root[data-theme="dark"] .tracking-card,
:root[data-theme="dark"] .tracking-card-soft,
:root[data-theme="dark"] .approval-mini-card,
:root[data-theme="dark"] .approval-detail-panel,
:root[data-theme="dark"] .approval-history-first-panel,
:root[data-theme="dark"] .desktop-approval-actions,
:root[data-theme="dark"] .quotation-entry-panel,
:root[data-theme="dark"] .quotation-row,
:root[data-theme="dark"] .quotation-offer-card,
:root[data-theme="dark"] .quotation-grid-head,
:root[data-theme="dark"] .field-card,
:root[data-theme="dark"] .check-card,
:root[data-theme="dark"] .logo-preview,
:root[data-theme="dark"] .form-header-preview,
:root[data-theme="dark"] .form-footer-preview{
  background:linear-gradient(145deg,rgba(15,23,42,.96),rgba(20,32,53,.92))!important;
  color:#f1f7ff!important;
  border-color:rgba(148,163,184,.26)!important;
}
:root[data-theme="dark"] .config-tabs a:not(.active) *,
:root[data-theme="dark"] .approval-tabs a:not(.active) *,
:root[data-theme="dark"] .archive-tabs a:not(.active) *,
:root[data-theme="dark"] .tab-title-line *,
:root[data-theme="dark"] .stage-badge *,
:root[data-theme="dark"] .tracking-card *,
:root[data-theme="dark"] .tracking-card-soft *,
:root[data-theme="dark"] .timeline-item *,
:root[data-theme="dark"] .approval-mini-card *,
:root[data-theme="dark"] .approval-detail-panel *,
:root[data-theme="dark"] .quotation-entry-panel *{
  color:#f1f7ff!important;
}
:root[data-theme="dark"] body:not(.tracking-invoice-embed-body) table:not(.purchase-info-table):not(.purchase-form-table):not(.purchase-quotation-table):not(.print-history-table) th,
:root[data-theme="dark"] body:not(.tracking-invoice-embed-body) table:not(.purchase-info-table):not(.purchase-form-table):not(.purchase-quotation-table):not(.print-history-table) td{
  background:rgba(7,16,31,.88)!important;
  color:#eef6ff!important;
  border-color:rgba(148,163,184,.24)!important;
}
:root[data-theme="dark"] body:not(.tracking-invoice-embed-body) table:not(.purchase-info-table):not(.purchase-form-table):not(.purchase-quotation-table):not(.print-history-table) thead th{
  background:rgba(37,99,235,.24)!important;
  color:#dbeafe!important;
}
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .combo-select-input{
  background:#07101f!important;
  color:#f8fbff!important;
  border-color:rgba(148,163,184,.32)!important;
}
:root[data-theme="dark"] label span,
:root[data-theme="dark"] .permissions-box > span,
:root[data-theme="dark"] .switch-field > span,
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .field-hint,
:root[data-theme="dark"] small{
  color:#d6e4f7!important;
}
:root[data-theme="dark"] .status-pill:not(.success):not(.danger):not(.warning),
:root[data-theme="dark"] code{
  background:rgba(96,165,250,.16)!important;
  color:#dbeafe!important;
  border-color:rgba(96,165,250,.28)!important;
}


/* === V81: A4-safe mobile preview + compact movement + dark status containers === */
/* Keep the request model at real A4 screen width, then scale it on small screens.
   This prevents the model from showing half/scrolling while preserving the desktop layout. */
.purchase-invoice-image.a4-invoice-paper{
  width:min(100%,794px)!important;
  max-width:794px!important;
  min-height:1123px!important;
  box-sizing:border-box!important;
}
.tracking-invoice-embed-body .purchase-invoice-image.a4-invoice-paper{
  width:min(100%,794px)!important;
  max-width:794px!important;
}
.purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper{
  width:min(100%,794px)!important;
  max-width:794px!important;
}

/* Make the movement section compact inside the A4 model so it does not dominate the form. */
.purchase-invoice-image.a4-invoice-paper .purchase-movement-invoice{
  margin:7px 0 6px!important;
  padding:6px!important;
  border-radius:8px!important;
}
.purchase-invoice-image.a4-invoice-paper .movement-title,
.purchase-invoice-image.a4-invoice-paper .purchase-movement-invoice .invoice-section-title{
  margin:0 0 5px!important;
  padding:4px 7px!important;
  font-size:10.2px!important;
  line-height:1.25!important;
  border-radius:6px!important;
}
.purchase-invoice-image.a4-invoice-paper .movement-duration-line{
  margin:0 0 5px!important;
  padding:4px 7px!important;
  font-size:8.8px!important;
  line-height:1.3!important;
  border-radius:6px!important;
}
.purchase-invoice-image.a4-invoice-paper .invoice-movement-table.print-history-table th,
.purchase-invoice-image.a4-invoice-paper .invoice-movement-table.print-history-table td{
  font-size:8.2px!important;
  padding:3px 2px!important;
  line-height:1.25!important;
}
.purchase-invoice-image.a4-invoice-paper .movement-print-icon{
  width:14px!important;
  height:14px!important;
  font-size:8px!important;
  margin-inline-end:2px!important;
}

/* Mobile: show the same A4 model as desktop, scaled to the phone width without horizontal drag. */
@media (max-width:768px){
  .purchase-paper-image-viewer{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    background:transparent!important;
  }
  .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper{
    width:794px!important;
    max-width:794px!important;
    min-width:794px!important;
    min-height:1123px!important;
    transform:scale(var(--paper-scale,1))!important;
    transform-origin:top right!important;
    margin:0 0 0 auto!important;
    padding:14px!important;
    border-radius:14px!important;
  }
  .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper .purchase-info-wrap,
  .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper .purchase-table-wrap,
  .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper .purchase-quotation-wrap,
  .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper .purchase-movement-wrap{
    overflow:visible!important;
    max-width:none!important;
  }
  .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper .purchase-info-table,
  .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper .purchase-form-table,
  .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper .purchase-quotation-table,
  .purchase-paper-image-viewer .purchase-invoice-image.a4-invoice-paper .print-history-table{
    width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
  }
  .tracking-invoice-embed-body .purchase-invoice-image.a4-invoice-paper{
    width:794px!important;
    max-width:794px!important;
    min-width:794px!important;
  }
}

/* Dark mode: fix white containers in the workflow/action log and related panels. */
:root[data-theme="dark"] .timeline-status-line,
body.dark .timeline-status-line{
  background:rgba(7,16,31,.94)!important;
  color:#dbeafe!important;
  border-color:rgba(96,165,250,.32)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
:root[data-theme="dark"] .timeline-status-line *,
body.dark .timeline-status-line *{
  color:#dbeafe!important;
}
:root[data-theme="dark"] .timeline-item,
:root[data-theme="dark"] .timeline-item > div,
body.dark .timeline-item,
body.dark .timeline-item > div{
  background:linear-gradient(145deg,rgba(15,23,42,.96),rgba(20,32,53,.92))!important;
  color:#eef6ff!important;
  border-color:rgba(148,163,184,.26)!important;
}
:root[data-theme="dark"] .timeline-item strong,
:root[data-theme="dark"] .timeline-item p,
:root[data-theme="dark"] .timeline-item small,
body.dark .timeline-item strong,
body.dark .timeline-item p,
body.dark .timeline-item small{
  color:#eef6ff!important;
}
:root[data-theme="dark"] .print-option,
:root[data-theme="dark"] .print-history-header,
:root[data-theme="dark"] .notification-modal-list a,
:root[data-theme="dark"] .empty-card,
:root[data-theme="dark"] .compact-empty,
:root[data-theme="dark"] .mobile-card,
:root[data-theme="dark"] .info-box,
:root[data-theme="dark"] .stats-card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .form-panel,
:root[data-theme="dark"] .list-panel,
body.dark .print-option,
body.dark .print-history-header,
body.dark .notification-modal-list a,
body.dark .empty-card,
body.dark .compact-empty,
body.dark .mobile-card,
body.dark .info-box,
body.dark .stats-card,
body.dark .panel,
body.dark .form-panel,
body.dark .list-panel{
  background:linear-gradient(145deg,rgba(15,23,42,.96),rgba(20,32,53,.92))!important;
  color:#eef6ff!important;
  border-color:rgba(148,163,184,.26)!important;
}
:root[data-theme="dark"] .print-option *,
:root[data-theme="dark"] .print-history-header *,
:root[data-theme="dark"] .notification-modal-list a *,
:root[data-theme="dark"] .empty-card *,
:root[data-theme="dark"] .compact-empty *,
:root[data-theme="dark"] .mobile-card *,
:root[data-theme="dark"] .info-box *,
:root[data-theme="dark"] .stats-card *,
:root[data-theme="dark"] .panel *,
:root[data-theme="dark"] .form-panel *,
:root[data-theme="dark"] .list-panel *,
body.dark .print-option *,
body.dark .print-history-header *,
body.dark .notification-modal-list a *,
body.dark .empty-card *,
body.dark .compact-empty *,
body.dark .mobile-card *,
body.dark .info-box *,
body.dark .stats-card *,
body.dark .panel *,
body.dark .form-panel *,
body.dark .list-panel *{
  color:inherit;
}
:root[data-theme="dark"] .panel .muted,
:root[data-theme="dark"] .timeline-item .muted,
:root[data-theme="dark"] .mobile-card .muted,
body.dark .panel .muted,
body.dark .timeline-item .muted,
body.dark .mobile-card .muted{
  color:#cbd5e1!important;
}

/* The printable/A4 request itself intentionally stays white in dark mode for readability and printing. */
:root[data-theme="dark"] .purchase-invoice-image.a4-invoice-paper,
:root[data-theme="dark"] .purchase-invoice-image.a4-invoice-paper *,
body.dark .purchase-invoice-image.a4-invoice-paper,
body.dark .purchase-invoice-image.a4-invoice-paper *{
  color:#0f172a!important;
}


/* === V82: tracking dark-mode final polish + mobile dashboard statistic tiles === */
/* Tracking page: keep the opened "Show tracking" block dark and organized in dark mode. */
:root[data-theme="dark"] body.page-tracking .tracking-card-soft,
:root[data-theme="dark"] body.page-tracking .tracking-compact-row,
:root[data-theme="dark"] body.page-tracking .tracking-details,
:root[data-theme="dark"] body.page-tracking .tracking-details[open],
:root[data-theme="dark"] body.page-tracking .tracking-card-soft .tracking-details,
:root[data-theme="dark"] body.page-tracking .tracking-card-soft .tracking-details[open]{
  background:linear-gradient(145deg,rgba(15,23,42,.98),rgba(20,32,53,.95))!important;
  color:#eef6ff!important;
  border-color:rgba(148,163,184,.28)!important;
  box-shadow:0 16px 44px rgba(0,0,0,.24)!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-card-soft:before{background:rgba(96,165,250,.06)!important;}
:root[data-theme="dark"] body.page-tracking .tracking-compact-row .tracking-details[open] .tracking-compact-summary,
:root[data-theme="dark"] body.page-tracking .tracking-compact-summary,
:root[data-theme="dark"] body.page-tracking .tracking-details summary,
:root[data-theme="dark"] body.page-tracking .tracking-card-soft .tracking-details summary{
  background:linear-gradient(135deg,rgba(2,6,23,.92),rgba(15,23,42,.88))!important;
  color:#f8fbff!important;
  border-color:rgba(96,165,250,.26)!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-compact-summary > span,
:root[data-theme="dark"] body.page-tracking .tracking-compact-summary .approval-mini-name,
:root[data-theme="dark"] body.page-tracking .tracking-compact-summary .approval-mini-date,
:root[data-theme="dark"] body.page-tracking .tracking-compact-summary .approval-mini-dept,
:root[data-theme="dark"] body.page-tracking .tracking-current,
:root[data-theme="dark"] body.page-tracking .tracking-current *,
:root[data-theme="dark"] body.page-tracking .track-step,
:root[data-theme="dark"] body.page-tracking .track-step span{
  color:#eaf2ff!important;
}
:root[data-theme="dark"] body.page-tracking .approval-mini-no,
:root[data-theme="dark"] body.page-tracking .tracking-compact-summary .approval-mini-action,
:root[data-theme="dark"] body.page-tracking .tracking-details summary b{
  background:rgba(37,99,235,.24)!important;
  color:#dbeafe!important;
  border:1px solid rgba(96,165,250,.30)!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-history-first{
  background:linear-gradient(135deg,rgba(15,23,42,.94),rgba(10,26,48,.90))!important;
  border-color:rgba(96,165,250,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-history-row,
:root[data-theme="dark"] body.page-tracking .tracking-history-row > div{
  background:linear-gradient(145deg,rgba(7,16,31,.96),rgba(15,23,42,.92))!important;
  border-color:rgba(148,163,184,.28)!important;
  color:#eef6ff!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-history-no{
  background:rgba(96,165,250,.18)!important;
  color:#bfdbfe!important;
}
:root[data-theme="dark"] body.page-tracking .track-step{
  background:rgba(2,6,23,.42)!important;
  border-color:rgba(148,163,184,.22)!important;
}
:root[data-theme="dark"] body.page-tracking .track-step.done{
  background:rgba(22,101,52,.22)!important;
  border-color:rgba(34,197,94,.26)!important;
}
:root[data-theme="dark"] body.page-tracking .track-step.current{
  background:rgba(37,99,235,.22)!important;
  border-color:rgba(96,165,250,.38)!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-inside-actions{
  background:transparent!important;
}

/* Mobile dashboard: show statistic tabs side-by-side as colored square tiles. */
@media (max-width:768px){
  body.page-dashboard .dashboard-request-stats,
  body.page-dashboard .stats-grid.dashboard-request-stats{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    margin-top:12px!important;
  }
  body.page-dashboard .dashboard-request-stats .stat-card,
  body.page-dashboard .dashboard-clickable-stats .stat-link{
    min-height:118px!important;
    padding:12px 10px!important;
    border-radius:18px!important;
    text-align:center!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
  }
  body.page-dashboard .dashboard-clickable-stats .stat-link:after{display:none!important;}
  body.page-dashboard .dashboard-request-stats .stat-card span{
    font-size:11.5px!important;
    line-height:1.35!important;
    font-weight:850!important;
  }
  body.page-dashboard .dashboard-request-stats .stat-card strong{
    width:44px!important;
    height:44px!important;
    border-radius:16px!important;
    display:grid!important;
    place-items:center!important;
    margin:2px auto!important;
    font-size:24px!important;
    line-height:1!important;
    background:rgba(255,255,255,.76)!important;
    box-shadow:0 10px 24px rgba(15,23,42,.08)!important;
  }
  body.page-dashboard .dashboard-request-stats .stat-card small{
    margin:0!important;
    font-size:10.5px!important;
    line-height:1.35!important;
    font-weight:800!important;
  }
  body.page-dashboard .dashboard-request-stats .stat-blue strong{color:#2563eb!important;background:#eff6ff!important;}
  body.page-dashboard .dashboard-request-stats .stat-purple strong{color:#7c3aed!important;background:#f5f3ff!important;}
  body.page-dashboard .dashboard-request-stats .stat-cyan strong{color:#0891b2!important;background:#ecfeff!important;}
  body.page-dashboard .dashboard-request-stats .stat-green strong{color:#059669!important;background:#ecfdf5!important;}
  body.page-dashboard .dashboard-request-stats .stat-red strong{color:#dc2626!important;background:#fff1f2!important;}
  body.page-dashboard .dashboard-request-stats .stat-amber strong{color:#d97706!important;background:#fffbeb!important;}
}
@media (max-width:360px){
  body.page-dashboard .dashboard-request-stats,
  body.page-dashboard .stats-grid.dashboard-request-stats{gap:8px!important;}
  body.page-dashboard .dashboard-request-stats .stat-card{min-height:108px!important;padding:10px 8px!important;border-radius:16px!important;}
  body.page-dashboard .dashboard-request-stats .stat-card strong{width:40px!important;height:40px!important;font-size:22px!important;}
}
:root[data-theme="dark"] body.page-dashboard .dashboard-request-stats .stat-card{
  border-color:rgba(148,163,184,.25)!important;
  color:#eef6ff!important;
}
:root[data-theme="dark"] body.page-dashboard .dashboard-request-stats .stat-card span,
:root[data-theme="dark"] body.page-dashboard .dashboard-request-stats .stat-card small{
  color:#dbeafe!important;
}

/* === V84: approval workflow like tracking + dark current-location fix === */
.approval-history-first-panel .tracking-current.approval-current-holder{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  padding:16px 18px!important;
  border-radius:20px!important;
  background:linear-gradient(135deg,#f8fafc,#eef6ff)!important;
  border:1px solid rgba(37,99,235,.18)!important;
  box-shadow:0 12px 28px rgba(15,23,42,.06)!important;
  margin:12px 0 16px!important;
}
.approval-history-first-panel .approval-current-holder .icon{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:16px!important;
  background:#2563eb!important;
  color:#fff!important;
  font-size:21px!important;
  box-shadow:0 10px 24px rgba(37,99,235,.24)!important;
}
.approval-history-first-panel .approval-current-holder strong{
  font-size:14px!important;
  color:#0f3768!important;
  font-weight:950!important;
  margin-bottom:5px!important;
}
.approval-history-first-panel .approval-current-holder span{
  font-size:15px!important;
  color:#1e293b!important;
  font-weight:850!important;
  line-height:1.75!important;
}
.approval-history-first-panel .approval-first-history{
  margin-top:10px!important;
  padding:14px!important;
  border-radius:22px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(239,246,255,.94))!important;
  border:1px solid rgba(37,99,235,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
}
.approval-history-first-panel .approval-first-history .tracking-history-title{
  font-size:16px!important;
  font-weight:950!important;
  color:#0f3768!important;
  margin-bottom:12px!important;
}
.approval-history-first-panel .approval-first-history .tracking-history-list{
  display:grid!important;
  gap:12px!important;
}
.approval-history-first-panel .approval-first-history .tracking-history-row{
  display:grid!important;
  grid-template-columns:auto auto minmax(0,1fr)!important;
  align-items:start!important;
  gap:12px!important;
  padding:14px 15px!important;
  border-radius:18px!important;
  background:#fff!important;
  border:1px solid rgba(226,232,240,.95)!important;
  box-shadow:0 12px 30px rgba(15,23,42,.06)!important;
}
.approval-history-first-panel .approval-first-history .tracking-history-no{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:12px!important;
  background:#eff6ff!important;
  color:#1d4ed8!important;
  font-weight:950!important;
  font-size:13px!important;
}
.approval-history-first-panel .approval-first-history .timeline-icon{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  font-size:15px!important;
  box-shadow:none!important;
  margin:0!important;
}
.approval-history-first-panel .approval-first-history .tracking-history-row strong{
  display:block!important;
  font-size:14px!important;
  font-weight:950!important;
  color:#0f172a!important;
  margin-bottom:3px!important;
}
.approval-history-first-panel .approval-first-history .tracking-history-row small{
  display:block!important;
  color:#475569!important;
  font-size:12.5px!important;
  line-height:1.65!important;
  margin-bottom:6px!important;
}
.approval-history-first-panel .approval-first-history .tracking-history-row em,
.approval-history-first-panel .approval-first-history .tracking-history-row p{
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  padding:7px 10px!important;
  border-radius:12px!important;
  background:#f8fafc!important;
  border:1px solid #e2e8f0!important;
  color:#334155!important;
  font-style:normal!important;
  font-size:12.8px!important;
  line-height:1.65!important;
  margin:5px 0 0!important;
}

/* Fix any white current-location / request-location tabs in dark mode across tracking and approvals. */
:root[data-theme="dark"] .tracking-current,
:root[data-theme="dark"] .approval-current-holder,
:root[data-theme="dark"] .print-current,
:root[data-theme="dark"] .approval-history-first-panel .tracking-current.approval-current-holder,
body.dark .tracking-current,
body.dark .approval-current-holder,
body.dark .print-current,
body.dark .approval-history-first-panel .tracking-current.approval-current-holder{
  background:linear-gradient(135deg,rgba(2,6,23,.96),rgba(15,23,42,.94))!important;
  border-color:rgba(96,165,250,.30)!important;
  color:#eef6ff!important;
  box-shadow:0 14px 36px rgba(0,0,0,.26)!important;
}
:root[data-theme="dark"] .tracking-current > div,
:root[data-theme="dark"] .approval-current-holder > div,
:root[data-theme="dark"] .print-current > div,
body.dark .tracking-current > div,
body.dark .approval-current-holder > div,
body.dark .print-current > div{
  background:transparent!important;
  color:#eef6ff!important;
}
:root[data-theme="dark"] .tracking-current .icon,
:root[data-theme="dark"] .approval-current-holder .icon,
body.dark .tracking-current .icon,
body.dark .approval-current-holder .icon{
  background:rgba(37,99,235,.34)!important;
  color:#dbeafe!important;
  box-shadow:0 0 0 1px rgba(96,165,250,.22),0 10px 22px rgba(0,0,0,.22)!important;
}
:root[data-theme="dark"] .tracking-current strong,
:root[data-theme="dark"] .tracking-current span,
:root[data-theme="dark"] .approval-current-holder strong,
:root[data-theme="dark"] .approval-current-holder span,
:root[data-theme="dark"] .print-current strong,
:root[data-theme="dark"] .print-current span,
body.dark .tracking-current strong,
body.dark .tracking-current span,
body.dark .approval-current-holder strong,
body.dark .approval-current-holder span,
body.dark .print-current strong,
body.dark .print-current span{
  color:#eef6ff!important;
}
:root[data-theme="dark"] .approval-history-first-panel .approval-first-history,
body.dark .approval-history-first-panel .approval-first-history{
  background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(10,26,48,.92))!important;
  border-color:rgba(96,165,250,.26)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
:root[data-theme="dark"] .approval-history-first-panel .approval-first-history .tracking-history-title,
body.dark .approval-history-first-panel .approval-first-history .tracking-history-title{
  color:#eaf2ff!important;
}
:root[data-theme="dark"] .approval-history-first-panel .approval-first-history .tracking-history-row,
:root[data-theme="dark"] .approval-history-first-panel .approval-first-history .tracking-history-row > div,
body.dark .approval-history-first-panel .approval-first-history .tracking-history-row,
body.dark .approval-history-first-panel .approval-first-history .tracking-history-row > div{
  background:linear-gradient(145deg,rgba(7,16,31,.96),rgba(15,23,42,.92))!important;
  border-color:rgba(148,163,184,.28)!important;
  color:#eef6ff!important;
}
:root[data-theme="dark"] .approval-history-first-panel .approval-first-history .tracking-history-row strong,
:root[data-theme="dark"] .approval-history-first-panel .approval-first-history .tracking-history-row small,
:root[data-theme="dark"] .approval-history-first-panel .approval-first-history .tracking-history-row em,
:root[data-theme="dark"] .approval-history-first-panel .approval-first-history .tracking-history-row p,
body.dark .approval-history-first-panel .approval-first-history .tracking-history-row strong,
body.dark .approval-history-first-panel .approval-first-history .tracking-history-row small,
body.dark .approval-history-first-panel .approval-first-history .tracking-history-row em,
body.dark .approval-history-first-panel .approval-first-history .tracking-history-row p{
  color:#eef6ff!important;
}
:root[data-theme="dark"] .approval-history-first-panel .approval-first-history .tracking-history-row em,
:root[data-theme="dark"] .approval-history-first-panel .approval-first-history .tracking-history-row p,
body.dark .approval-history-first-panel .approval-first-history .tracking-history-row em,
body.dark .approval-history-first-panel .approval-first-history .tracking-history-row p{
  background:rgba(2,6,23,.62)!important;
  border-color:rgba(96,165,250,.24)!important;
}
:root[data-theme="dark"] .approval-history-first-panel .approval-first-history .tracking-history-no,
body.dark .approval-history-first-panel .approval-first-history .tracking-history-no{
  background:rgba(37,99,235,.24)!important;
  color:#dbeafe!important;
  border:1px solid rgba(96,165,250,.30)!important;
}

@media (max-width:768px){
  .approval-history-first-panel .tracking-current.approval-current-holder{padding:13px 14px!important;border-radius:18px!important;}
  .approval-history-first-panel .approval-current-holder .icon{width:38px!important;height:38px!important;min-width:38px!important;font-size:19px!important;}
  .approval-history-first-panel .approval-current-holder strong{font-size:13px!important;}
  .approval-history-first-panel .approval-current-holder span{font-size:13.5px!important;}
  .approval-history-first-panel .approval-first-history{padding:12px!important;border-radius:19px!important;}
  .approval-history-first-panel .approval-first-history .tracking-history-title{font-size:15px!important;}
  .approval-history-first-panel .approval-first-history .tracking-history-row{grid-template-columns:auto auto minmax(0,1fr)!important;padding:12px!important;gap:10px!important;border-radius:16px!important;}
  .approval-history-first-panel .approval-first-history .tracking-history-no{width:28px!important;height:28px!important;min-width:28px!important;font-size:12px!important;}
  .approval-history-first-panel .approval-first-history .timeline-icon{width:30px!important;height:30px!important;min-width:30px!important;font-size:14px!important;}
  .approval-history-first-panel .approval-first-history .tracking-history-row strong{font-size:13px!important;}
  .approval-history-first-panel .approval-first-history .tracking-history-row small{font-size:11.8px!important;}
  .approval-history-first-panel .approval-first-history .tracking-history-row em,
  .approval-history-first-panel .approval-first-history .tracking-history-row p{width:100%!important;font-size:11.8px!important;}
}

/* === V85: complete dark cleanup for tracking hero/count boxes and filter tab === */
:root[data-theme="dark"] body.page-tracking .tracking-hero,
:root[data-theme="dark"] .tracking-hero,
body.dark body.page-tracking .tracking-hero,
body.dark .tracking-hero{
  background:
    radial-gradient(circle at 85% 10%,rgba(59,130,246,.20),transparent 28%),
    radial-gradient(circle at 10% 90%,rgba(20,184,166,.10),transparent 26%),
    linear-gradient(145deg,rgba(15,23,42,.98),rgba(18,32,55,.94))!important;
  color:#f1f7ff!important;
  border-color:rgba(96,165,250,.26)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.22)!important;
}
:root[data-theme="dark"] .tracking-hero .hero-counter div,
:root[data-theme="dark"] .request-intro .hero-counter div,
body.dark .tracking-hero .hero-counter div,
body.dark .request-intro .hero-counter div{
  background:linear-gradient(145deg,rgba(2,6,23,.82),rgba(15,23,42,.74))!important;
  border-color:rgba(96,165,250,.26)!important;
  color:#eef6ff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.18)!important;
}
:root[data-theme="dark"] .tracking-hero .hero-counter strong,
:root[data-theme="dark"] .request-intro .hero-counter strong,
body.dark .tracking-hero .hero-counter strong,
body.dark .request-intro .hero-counter strong{
  color:#93c5fd!important;
}
:root[data-theme="dark"] .tracking-hero .hero-counter span,
:root[data-theme="dark"] .request-intro .hero-counter span,
body.dark .tracking-hero .hero-counter span,
body.dark .request-intro .hero-counter span{
  color:#dbeafe!important;
}
:root[data-theme="dark"] body.page-tracking .filter-panel,
:root[data-theme="dark"] body.page-tracking .panel.filter-panel,
:root[data-theme="dark"] .filter-panel,
body.dark body.page-tracking .filter-panel,
body.dark .filter-panel{
  background:linear-gradient(145deg,rgba(15,23,42,.97),rgba(17,30,52,.93))!important;
  border-color:rgba(148,163,184,.26)!important;
  color:#eef6ff!important;
  box-shadow:0 16px 42px rgba(0,0,0,.20)!important;
}
:root[data-theme="dark"] body.page-tracking .filter-panel .filters-bar,
:root[data-theme="dark"] body.page-tracking .filter-panel .advanced-filters,
:root[data-theme="dark"] .filter-panel .filters-bar,
:root[data-theme="dark"] .filter-panel .advanced-filters,
body.dark body.page-tracking .filter-panel .filters-bar,
body.dark body.page-tracking .filter-panel .advanced-filters,
body.dark .filter-panel .filters-bar,
body.dark .filter-panel .advanced-filters{
  background:rgba(2,6,23,.28)!important;
  border:1px solid rgba(96,165,250,.18)!important;
  border-radius:18px!important;
  padding:14px!important;
  color:#eef6ff!important;
}
:root[data-theme="dark"] .filter-panel .filters-bar label,
:root[data-theme="dark"] .filter-panel .advanced-filters label,
body.dark .filter-panel .filters-bar label,
body.dark .filter-panel .advanced-filters label{
  color:#dbeafe!important;
}
:root[data-theme="dark"] .filter-panel .filter-actions,
body.dark .filter-panel .filter-actions{
  border-top-color:rgba(96,165,250,.22)!important;
  background:transparent!important;
}

/* Tracking list/details: make the opened tracking tab and all nested rows dark, not white. */
:root[data-theme="dark"] body.page-tracking .tracking-card-soft,
:root[data-theme="dark"] body.page-tracking .tracking-compact-row,
:root[data-theme="dark"] body.page-tracking .tracking-details,
body.dark body.page-tracking .tracking-card-soft,
body.dark body.page-tracking .tracking-compact-row,
body.dark body.page-tracking .tracking-details{
  background:linear-gradient(145deg,rgba(15,23,42,.97),rgba(19,32,53,.93))!important;
  border-color:rgba(148,163,184,.26)!important;
  color:#eef6ff!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-details[open],
body.dark body.page-tracking .tracking-details[open]{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-compact-summary,
:root[data-theme="dark"] body.page-tracking .tracking-card-soft .tracking-details summary,
:root[data-theme="dark"] body.page-tracking .tracking-details[open] .tracking-compact-summary,
body.dark body.page-tracking .tracking-compact-summary,
body.dark body.page-tracking .tracking-card-soft .tracking-details summary,
body.dark body.page-tracking .tracking-details[open] .tracking-compact-summary{
  background:linear-gradient(145deg,rgba(2,6,23,.72),rgba(15,23,42,.66))!important;
  border-color:rgba(96,165,250,.24)!important;
  color:#eef6ff!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-compact-summary *,
:root[data-theme="dark"] body.page-tracking .tracking-details summary *,
body.dark body.page-tracking .tracking-compact-summary *,
body.dark body.page-tracking .tracking-details summary *{
  color:#eef6ff!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-compact-summary .approval-mini-action,
body.dark body.page-tracking .tracking-compact-summary .approval-mini-action{
  background:rgba(37,99,235,.24)!important;
  border:1px solid rgba(96,165,250,.30)!important;
  color:#dbeafe!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-history-first,
:root[data-theme="dark"] body.page-tracking .tracking-history-list,
body.dark body.page-tracking .tracking-history-first,
body.dark body.page-tracking .tracking-history-list{
  background:transparent!important;
  color:#eef6ff!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-history-title,
body.dark body.page-tracking .tracking-history-title{
  color:#eaf2ff!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-history-row,
:root[data-theme="dark"] body.page-tracking .tracking-history-row > div,
body.dark body.page-tracking .tracking-history-row,
body.dark body.page-tracking .tracking-history-row > div{
  background:linear-gradient(145deg,rgba(7,16,31,.96),rgba(15,23,42,.90))!important;
  border-color:rgba(148,163,184,.28)!important;
  color:#eef6ff!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-history-row strong,
:root[data-theme="dark"] body.page-tracking .tracking-history-row small,
:root[data-theme="dark"] body.page-tracking .tracking-history-row em,
:root[data-theme="dark"] body.page-tracking .tracking-history-row p,
body.dark body.page-tracking .tracking-history-row strong,
body.dark body.page-tracking .tracking-history-row small,
body.dark body.page-tracking .tracking-history-row em,
body.dark body.page-tracking .tracking-history-row p{
  color:#eef6ff!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-history-row em,
:root[data-theme="dark"] body.page-tracking .tracking-history-row p,
body.dark body.page-tracking .tracking-history-row em,
body.dark body.page-tracking .tracking-history-row p{
  background:rgba(2,6,23,.62)!important;
  border-color:rgba(96,165,250,.24)!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-history-no,
body.dark body.page-tracking .tracking-history-no{
  background:rgba(37,99,235,.24)!important;
  color:#dbeafe!important;
  border:1px solid rgba(96,165,250,.30)!important;
}
:root[data-theme="dark"] body.page-tracking .track-steps,
body.dark body.page-tracking .track-steps{
  background:transparent!important;
}
:root[data-theme="dark"] body.page-tracking .track-step,
body.dark body.page-tracking .track-step{
  background:rgba(2,6,23,.56)!important;
  color:#dbeafe!important;
  border-color:rgba(148,163,184,.24)!important;
}
:root[data-theme="dark"] body.page-tracking .track-step.done,
body.dark body.page-tracking .track-step.done{
  background:rgba(22,101,52,.20)!important;
  color:#bbf7d0!important;
  border-color:rgba(34,197,94,.28)!important;
}
:root[data-theme="dark"] body.page-tracking .track-step.current,
body.dark body.page-tracking .track-step.current{
  background:rgba(37,99,235,.24)!important;
  color:#dbeafe!important;
  border-color:rgba(96,165,250,.34)!important;
}


/* v86: compact tracking top tab + row workflow steps */
body.page-tracking #livePendingAlert{display:none!important;}
body.page-tracking .tracking-status-tab{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:10px 14px!important;
  margin-bottom:12px!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,rgba(239,246,255,.94),rgba(255,255,255,.98))!important;
  border:1px solid rgba(191,219,254,.8)!important;
  box-shadow:0 10px 26px rgba(15,23,42,.06)!important;
}
body.page-tracking .tracking-status-main{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
}
body.page-tracking .tracking-status-main strong{
  display:block!important;
  font-size:14px!important;
  color:#0f172a!important;
  line-height:1.35!important;
}
body.page-tracking .tracking-status-icon{
  width:34px!important;
  height:34px!important;
  border-radius:12px!important;
  display:inline-grid!important;
  place-items:center!important;
  background:rgba(37,99,235,.10)!important;
  color:#1d4ed8!important;
  flex:0 0 auto!important;
}
body.page-tracking .tracking-status-metrics{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
}
body.page-tracking .tracking-status-metrics span{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  min-height:30px!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.82)!important;
  border:1px solid rgba(226,232,240,.95)!important;
  color:#475569!important;
  font-size:12px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
body.page-tracking .tracking-status-metrics b{
  color:#1d4ed8!important;
  font-size:15px!important;
}
body.page-tracking .tracking-card-completed{
  background:linear-gradient(135deg,rgba(236,253,245,.96),rgba(240,253,244,.98))!important;
  border-color:rgba(134,239,172,.9)!important;
  box-shadow:0 12px 34px rgba(22,163,74,.10)!important;
}
body.page-tracking .tracking-card-completed .tracking-compact-summary{
  background:rgba(236,253,245,.88)!important;
  border-color:rgba(134,239,172,.9)!important;
}
body.page-tracking .tracking-card-completed .approval-mini-no,
body.page-tracking .tracking-card-completed .approval-mini-action{
  color:#047857!important;
}
body.page-tracking .tracking-card-completed .tracking-current{
  background:rgba(220,252,231,.78)!important;
  border-color:rgba(134,239,172,.75)!important;
  color:#065f46!important;
}
body.page-tracking .track-steps.full-flow{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:6px!important;
  margin:10px 14px!important;
  padding:8px!important;
  border-radius:14px!important;
  background:rgba(248,250,252,.82)!important;
  border:1px solid rgba(226,232,240,.9)!important;
}
body.page-tracking .track-steps.full-flow .track-step{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  min-height:34px!important;
  padding:6px 9px!important;
  border-radius:10px!important;
  font-size:12px!important;
  text-align:right!important;
  box-shadow:none!important;
}
body.page-tracking .track-steps.full-flow .track-step b{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  display:inline-grid!important;
  place-items:center!important;
  border-radius:8px!important;
  font-size:11px!important;
  margin:0!important;
}
body.page-tracking .track-steps.full-flow .track-step span{
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.25!important;
}
body.page-tracking .track-steps.full-flow .track-step.done{
  background:rgba(236,253,245,.74)!important;
  border-color:rgba(134,239,172,.72)!important;
  color:#047857!important;
}
body.page-tracking .track-steps.full-flow .track-step.current{
  background:rgba(239,246,255,.86)!important;
  border-color:rgba(147,197,253,.82)!important;
  color:#1d4ed8!important;
}
body.page-tracking .tracking-card-completed .track-steps.full-flow .track-step.done,
body.page-tracking .tracking-card-completed .track-steps.full-flow .track-step.current{
  background:rgba(220,252,231,.82)!important;
  border-color:rgba(134,239,172,.78)!important;
  color:#047857!important;
}
@media (max-width:720px){
  body.page-tracking .tracking-status-tab{
    align-items:stretch!important;
    flex-direction:column!important;
    padding:9px 10px!important;
    gap:8px!important;
    border-radius:14px!important;
  }
  body.page-tracking .tracking-status-main strong{font-size:13px!important;}
  body.page-tracking .tracking-status-metrics{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    justify-content:stretch!important;
  }
  body.page-tracking .tracking-status-metrics span{
    justify-content:center!important;
    padding:5px 6px!important;
    font-size:11px!important;
  }
  body.page-tracking .tracking-status-metrics b{font-size:14px!important;}
  body.page-tracking .track-steps.full-flow{margin:8px 10px!important;padding:7px!important;gap:5px!important;}
  body.page-tracking .track-steps.full-flow .track-step{min-height:31px!important;padding:5px 7px!important;gap:7px!important;}
  body.page-tracking .track-steps.full-flow .track-step span{font-size:11px!important;}
  body.page-tracking .track-steps.full-flow .track-step b{width:20px!important;height:20px!important;min-width:20px!important;font-size:10px!important;}
}
:root[data-theme="dark"] body.page-tracking .tracking-status-tab,
body.dark body.page-tracking .tracking-status-tab{
  background:linear-gradient(135deg,#0f1b2f,#111827)!important;
  border-color:rgba(96,165,250,.28)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.24)!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-status-main strong,
body.dark body.page-tracking .tracking-status-main strong{color:#e5edf8!important;}
:root[data-theme="dark"] body.page-tracking .tracking-status-icon,
body.dark body.page-tracking .tracking-status-icon{background:rgba(96,165,250,.16)!important;color:#93c5fd!important;}
:root[data-theme="dark"] body.page-tracking .tracking-status-metrics span,
body.dark body.page-tracking .tracking-status-metrics span{
  background:rgba(15,23,42,.82)!important;
  border-color:rgba(71,85,105,.8)!important;
  color:#cbd5e1!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-status-metrics b,
body.dark body.page-tracking .tracking-status-metrics b{color:#93c5fd!important;}
:root[data-theme="dark"] body.page-tracking .tracking-card-completed,
body.dark body.page-tracking .tracking-card-completed{
  background:linear-gradient(135deg,rgba(6,78,59,.46),rgba(15,23,42,.96))!important;
  border-color:rgba(52,211,153,.38)!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-card-completed .tracking-compact-summary,
body.dark body.page-tracking .tracking-card-completed .tracking-compact-summary{
  background:rgba(6,78,59,.34)!important;
  border-color:rgba(52,211,153,.34)!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-card-completed .approval-mini-no,
:root[data-theme="dark"] body.page-tracking .tracking-card-completed .approval-mini-action,
body.dark body.page-tracking .tracking-card-completed .approval-mini-no,
body.dark body.page-tracking .tracking-card-completed .approval-mini-action{color:#86efac!important;}
:root[data-theme="dark"] body.page-tracking .track-steps.full-flow,
body.dark body.page-tracking .track-steps.full-flow{
  background:rgba(15,23,42,.72)!important;
  border-color:rgba(51,65,85,.85)!important;
}
:root[data-theme="dark"] body.page-tracking .track-steps.full-flow .track-step,
body.dark body.page-tracking .track-steps.full-flow .track-step{
  background:rgba(15,23,42,.92)!important;
  border-color:rgba(51,65,85,.9)!important;
  color:#dbeafe!important;
}
:root[data-theme="dark"] body.page-tracking .track-steps.full-flow .track-step.done,
body.dark body.page-tracking .track-steps.full-flow .track-step.done{
  background:rgba(6,78,59,.28)!important;
  border-color:rgba(52,211,153,.34)!important;
  color:#bbf7d0!important;
}
:root[data-theme="dark"] body.page-tracking .track-steps.full-flow .track-step.current,
body.dark body.page-tracking .track-steps.full-flow .track-step.current{
  background:rgba(30,64,175,.22)!important;
  border-color:rgba(96,165,250,.38)!important;
  color:#bfdbfe!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-card-completed .track-steps.full-flow .track-step.done,
:root[data-theme="dark"] body.page-tracking .tracking-card-completed .track-steps.full-flow .track-step.current,
body.dark body.page-tracking .tracking-card-completed .track-steps.full-flow .track-step.done,
body.dark body.page-tracking .tracking-card-completed .track-steps.full-flow .track-step.current{
  background:rgba(6,78,59,.36)!important;
  border-color:rgba(52,211,153,.40)!important;
  color:#bbf7d0!important;
}


/* === V87: clean tracking top notices and compact route rows === */
body.page-tracking .tracking-status-tab,
body.page-tracking .login-alerts,
body.page-tracking #livePendingAlert{
  display:none!important;
}

body.page-tracking .tracking-grid{
  gap:8px!important;
}
body.page-tracking .tracking-compact-row{
  margin-bottom:8px!important;
  border-radius:14px!important;
}
body.page-tracking .tracking-compact-summary{
  min-height:44px!important;
  padding:8px 12px!important;
  gap:8px!important;
  grid-template-columns:minmax(125px,.8fr) minmax(120px,.9fr) minmax(130px,.9fr) minmax(92px,.55fr) auto!important;
}
body.page-tracking .tracking-compact-summary .approval-mini-no,
body.page-tracking .tracking-compact-summary .approval-mini-name,
body.page-tracking .tracking-compact-summary .approval-mini-dept,
body.page-tracking .tracking-compact-summary .approval-mini-date,
body.page-tracking .tracking-compact-summary .approval-mini-action{
  font-size:11.5px!important;
}
body.page-tracking .tracking-compact-summary .approval-mini-action{
  padding:6px 10px!important;
  border-radius:11px!important;
}
body.page-tracking .tracking-current{
  padding:9px 10px!important;
  border-radius:13px!important;
  gap:8px!important;
  margin:9px!important;
}
body.page-tracking .tracking-current .icon{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  font-size:14px!important;
}
body.page-tracking .tracking-current strong,
body.page-tracking .tracking-current span{
  font-size:12px!important;
}
body.page-tracking .tracking-compact-row .track-steps.full-flow{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:5px!important;
  margin:9px!important;
}
body.page-tracking .tracking-compact-row .track-step{
  min-height:0!important;
  padding:6px 8px!important;
  border-radius:12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  text-align:right!important;
  font-size:11.5px!important;
}
body.page-tracking .tracking-compact-row .track-step b{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  font-size:10px!important;
  margin:0!important;
}
body.page-tracking .tracking-compact-row .track-step span{
  font-size:11.5px!important;
  font-weight:850!important;
}
body.page-tracking .tracking-compact-row.tracking-card-completed,
body.page-tracking .tracking-compact-row.tracking-card-completed .tracking-compact-summary,
body.page-tracking .tracking-card-completed{
  background:linear-gradient(135deg,rgba(236,253,245,.98),rgba(240,253,244,.94))!important;
  border-color:rgba(34,197,94,.34)!important;
}
body.page-tracking .tracking-card-completed .approval-mini-no{
  background:rgba(22,163,74,.12)!important;
  color:#15803d!important;
}
body.page-tracking .tracking-card-completed .approval-mini-action{
  background:rgba(22,163,74,.10)!important;
  border-color:rgba(22,163,74,.28)!important;
  color:#15803d!important;
}

/* Make approvals page visually consistent with tracking list without changing approval logic. */
body.page-approvals .approvals-clean-header,
body.page-approvals .approval-filter-panel,
body.page-approvals .approval-tracking-like-panel{
  border-radius:18px!important;
}
body.page-approvals .approval-tracking-like-header{
  margin-bottom:10px!important;
}
body.page-approvals .approval-tabs{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin-bottom:12px!important;
}
body.page-approvals .approval-tabs a{
  flex:0 1 auto!important;
  min-height:34px!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  font-size:12px!important;
  gap:6px!important;
}
body.page-approvals .approval-tabs a b{
  width:22px!important;
  min-width:22px!important;
  height:22px!important;
  font-size:11px!important;
}
body.page-approvals .tab-title-line{
  display:none!important;
}
body.page-approvals .approval-grid{
  gap:8px!important;
}
body.page-approvals .approval-mini-card,
body.page-approvals .approval-row-card{
  margin-bottom:8px!important;
  border-radius:14px!important;
}
body.page-approvals .approval-mini-summary{
  min-height:44px!important;
  padding:8px 12px!important;
  gap:8px!important;
  grid-template-columns:minmax(125px,.8fr) minmax(120px,.9fr) minmax(130px,.9fr) minmax(92px,.55fr) auto!important;
}
body.page-approvals .approval-mini-no,
body.page-approvals .approval-mini-name,
body.page-approvals .approval-mini-dept,
body.page-approvals .approval-mini-date,
body.page-approvals .approval-mini-action{
  font-size:11.5px!important;
}
body.page-approvals .approval-mini-action{
  padding:6px 10px!important;
  border-radius:11px!important;
}
body.page-approvals .approval-mini-counter span{
  padding:6px 10px!important;
  font-size:12px!important;
}
body.page-approvals .approval-mini-counter b{
  min-width:22px!important;
  height:22px!important;
  font-size:11px!important;
}

:root[data-theme="dark"] body.page-tracking .tracking-compact-row.tracking-card-completed,
:root[data-theme="dark"] body.page-tracking .tracking-compact-row.tracking-card-completed .tracking-compact-summary,
body.dark body.page-tracking .tracking-compact-row.tracking-card-completed,
body.dark body.page-tracking .tracking-compact-row.tracking-card-completed .tracking-compact-summary{
  background:linear-gradient(135deg,rgba(6,78,59,.38),rgba(15,23,42,.96))!important;
  border-color:rgba(74,222,128,.38)!important;
}
:root[data-theme="dark"] body.page-tracking .tracking-card-completed .approval-mini-no,
:root[data-theme="dark"] body.page-tracking .tracking-card-completed .approval-mini-action,
body.dark body.page-tracking .tracking-card-completed .approval-mini-no,
body.dark body.page-tracking .tracking-card-completed .approval-mini-action{
  background:rgba(34,197,94,.18)!important;
  border-color:rgba(74,222,128,.30)!important;
  color:#bbf7d0!important;
}
:root[data-theme="dark"] body.page-approvals .approval-tabs a:not(.active),
body.dark body.page-approvals .approval-tabs a:not(.active){
  background:rgba(15,23,42,.92)!important;
  border-color:rgba(96,165,250,.22)!important;
  color:#e5eefc!important;
}

@media (max-width:760px){
  body.page-tracking .tracking-compact-summary,
  body.page-approvals .approval-mini-summary{
    grid-template-columns:1fr 1fr!important;
    align-items:stretch!important;
  }
  body.page-tracking .tracking-compact-summary .approval-mini-action,
  body.page-approvals .approval-mini-action{
    grid-column:1/-1!important;
    justify-content:center!important;
  }
  body.page-tracking .tracking-compact-row .track-steps.full-flow{
    grid-template-columns:1fr!important;
  }
  body.page-approvals .approval-tabs{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.page-approvals .approval-tabs a{
    justify-content:center!important;
    min-width:0!important;
  }
}


/* v90 realtime-light: تحديث المحتوى بدون إعادة تحميل الصفحة */
.live-page-content {
    transition: opacity .18s ease, filter .18s ease;
}
.live-page-refreshing .live-page-content {
    opacity: .72;
    filter: saturate(.9);
}
.live-page-refreshing .live-page-content::before {
    content: 'جاري تحديث البيانات...';
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 9999;
    background: rgba(15, 23, 42, .92);
    color: #fff;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .22);
}