:root {
    --zakah-900: #173e29;
    --zakah-800: #245c39;
    --zakah-700: #347a4b;
    --zakah-500: #56a56d;
    --olive-500: #93a92d;
    --gold-500: #c9a84d;
    --ink-900: #17231b;
    --ink-600: #5d6b62;
    --surface: #ffffff;
    --surface-soft: #f4f7f3;
    --line: #dfe7df;
    --shadow: 0 18px 45px rgba(31, 64, 43, 0.09);
}

html, body {
    min-height: 100%;
    margin: 0;
    background: #edf3ed;
    color: var(--ink-900);
    font-family: Tahoma, "Segoe UI", Arial, sans-serif;
}

body {
    background-image: linear-gradient(rgba(244, 248, 244, .94), rgba(238, 244, 239, .97)), url("images/islamic2.jpg");
    background-size: auto, 420px 370px;
}

*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(1.8rem, 3vw, 2.75rem); font-weight: 800; }
.page-heading h1:focus, .hero-panel h1:focus, .login-brand h1:focus { outline: 2px solid rgba(86,165,109,.28); outline-offset: 5px; border-radius: 8px; }

.readonly-banner { display:flex; align-items:center; gap:.75rem; border-color:#bdd7c4; background:#f1f8f3; color:#285b38; }
.readonly-banner strong { flex:0 0 auto; padding:.28rem .55rem; border-radius:999px; background:#dcefe1; }
.case-lock-banner { display:grid; grid-template-columns:minmax(260px,1fr) minmax(320px,.9fr); align-items:end; gap:1rem; border:1px solid #e5c48a; background:#fff9ed; color:#6f4b15; box-shadow:0 10px 26px rgba(111,75,21,.07); }
.case-lock-copy { display:grid; gap:.3rem; }.case-lock-copy strong{font-size:1.02rem}.case-lock-copy span,.case-lock-banner small{line-height:1.7}
.case-unlock-controls { display:grid; grid-template-columns:minmax(220px,1fr) auto; align-items:end; gap:.65rem; }.case-unlock-controls label{display:grid;gap:.32rem;font-size:.78rem;font-weight:800}.case-unlock-controls input{width:100%;min-height:44px;padding:.65rem;border:1px solid #dfcda9;border-radius:10px;background:#fff;font-family:inherit}.case-unlock-controls .danger-button:disabled{opacity:.5;cursor:not-allowed}.case-lock-error{grid-column:1/-1;color:#922e35;font-weight:700}
.permission-fieldset { min-width:0; margin:0; padding:0; border:0; }
.permission-fieldset:disabled { opacity:.86; }
.admin-search { display:block; margin-bottom:.8rem; }
.admin-search input { width:100%; }
.draft-banner { display:flex; align-items:center; justify-content:space-between; gap:1rem; border-color:#c7dba2; background:#f8fbea; }
.draft-banner span { display:flex; flex-direction:column; gap:.15rem; }
.draft-banner small { color:var(--ink-600); }
.case-workspace-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; padding:.45rem; border:1px solid var(--line); border-radius:14px; background:white; }
.case-workspace-tabs button,.case-workspace-tabs a { min-height:42px; padding:.65rem .85rem; border:0; border-radius:10px; background:transparent; color:var(--ink-700); font-family:inherit; font-weight:800; text-decoration:none; cursor:pointer; }
.case-workspace-tabs button:hover,.case-workspace-tabs a:hover,.case-workspace-tabs button.active,.case-workspace-tabs a.active { background:#e9f3eb; color:var(--zakah-800); }
.compact-loading { min-height: 92px; margin-bottom: 1rem; }
.workspace-panel { min-height:var(--case-workspace-stable-height,0); }
.workspace-panel[hidden] { display:none !important; }
h2 { font-size: 1.3rem; font-weight: 800; }

.content {
    width: min(1440px, 100%);
    margin-inline: auto;
    padding: 2rem clamp(1rem, 3vw, 3rem) 3rem;
}

.hero-panel {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 230px;
    padding: clamp(1.5rem, 4vw, 3.2rem);
    border-radius: 28px;
    color: white;
    background: linear-gradient(125deg, rgba(23, 62, 41, .98), rgba(52, 122, 75, .92)), url("images/islamic.jpg") center/cover;
    box-shadow: var(--shadow);
}

.hero-panel::after {
    content: "";
    position: absolute;
    inset-inline-end: -80px;
    bottom: -130px;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    box-shadow: 0 0 0 45px rgba(255,255,255,.04), 0 0 0 90px rgba(255,255,255,.03);
}

.hero-panel > * { position: relative; z-index: 1; }
.hero-panel h1 { margin-block: .55rem .75rem; }
.hero-panel p { max-width: 720px; margin-bottom: 0; color: rgba(255,255,255,.82); font-size: 1.05rem; line-height: 1.9; }
.eyebrow { display: block; color: var(--olive-500); font-size: .82rem; font-weight: 800; letter-spacing: .04em; }
.hero-panel .eyebrow { color: #dce99f; }

.primary-action, .secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .8rem 1.35rem;
    border-radius: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.primary-action { background: var(--olive-500); color: #132015; box-shadow: 0 12px 24px rgba(9, 30, 16, .25); white-space: nowrap; }
.secondary-action { border: 1px solid var(--zakah-700); color: var(--zakah-800); }
.primary-action:hover, .secondary-action:hover { transform: translateY(-2px); }

.status-banner {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-block: 1.25rem;
    padding: 1rem 1.2rem;
    border: 1px solid #dfe8c1;
    border-radius: 16px;
    background: rgba(250, 252, 243, .96);
}

.status-banner p { margin: .15rem 0 0; color: var(--ink-600); font-size: .9rem; }
.status-banner > div { flex: 1; }
.status-action { min-height: 40px; padding: .55rem 1rem; white-space: nowrap; }
.status-indicator, .status-dot { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #d39b35; box-shadow: 0 0 0 5px rgba(211, 155, 53, .14); }
.status-banner.is-ready .status-indicator, .status-dot { background: #48a868; box-shadow: 0 0 0 5px rgba(72, 168, 104, .13); }

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-block: 1.25rem;
}

.period-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; margin:0 0 1.25rem; }
.period-metrics article { display:grid; gap:.15rem; padding:.9rem 1rem; border:1px solid var(--border-color); border-radius:14px; background:color-mix(in srgb,var(--surface) 92%,var(--brand-soft)); }
.period-metrics span,.period-metrics small { color:var(--muted); }
.period-metrics strong { font-size:1.35rem; color:var(--brand-dark); }
@media (max-width: 900px) { .period-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 520px) { .period-metrics { grid-template-columns:1fr; } }

.metric-card {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 30px rgba(36, 92, 57, .06);
}

.metric-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: var(--accent); }
.metric-card span, .metric-card small { display: block; color: var(--ink-600); }
.metric-card strong { display: block; margin-block: .4rem; font-size: 2.1rem; color: var(--accent); }
.accent-green { --accent: #3d9360; }
.accent-gold { --accent: #bd9133; }
.accent-blue { --accent: #3d7893; }
.accent-slate { --accent: #6a776d; }

.content-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.25rem; }
.content-card { min-width: 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.97); box-shadow: var(--shadow); }
.section-heading { display: flex; justify-content: space-between; align-items: start; margin-bottom: 1rem; }
.section-heading h2, .migration-card h2 { margin-block: .4rem 0; }
.quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.quick-actions a { display: flex; flex-direction: column; gap: .25rem; min-height: 100px; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.quick-actions a:hover { transform: translateY(-2px); border-color: var(--zakah-500); }
.quick-actions span { color: var(--zakah-700); font-size: .78rem; }
.clean-list { margin: 1.2rem 0 0; padding: 0; list-style: none; }
.clean-list li { position: relative; padding: .55rem 1.8rem .55rem 0; color: var(--ink-600); }
.clean-list li::before { content: "○"; position: absolute; inset-inline-start: 0; color: #9aa59d; }
.clean-list li.done::before { content: "✓"; color: var(--zakah-700); font-weight: 900; }

.page-heading { margin-bottom: 1.25rem; padding-block: .75rem; }
.page-heading h1 { margin-block: .5rem; }
.page-heading p { color: var(--ink-600); font-size: 1.05rem; }
.empty-state { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-state p { max-width: 620px; color: var(--ink-600); line-height: 1.8; }
.empty-icon { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 1rem; border-radius: 50%; background: #edf5ee; color: var(--zakah-700); font-size: 2.2rem; }

.login-page { display: grid; place-items: center; min-height: calc(100vh - 140px); padding: 1rem; }
.login-panel { width: min(470px, 100%); overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.98); box-shadow: 0 25px 70px rgba(23,62,41,.18); }
.login-brand { padding: 2rem 2rem 1.35rem; text-align: center; background: linear-gradient(145deg, rgba(239,247,240,.95), white); }
.login-brand h1 { margin-block: .45rem .55rem; font-size: 2rem; }
.login-brand p { margin: 0; color: var(--ink-600); line-height: 1.75; }
.login-logo { position: relative; width: 96px; height: 96px; margin: 0 auto 1rem; overflow: hidden; border-radius: 50%; background: white; box-shadow: 0 12px 30px rgba(36,92,57,.15); }
.login-logo img { position: absolute; top: 50%; left: 50%; display: block; width: 145px; max-width: none; height: auto; transform: translate(-50%, -50%); }
.login-panel form { padding: 1.5rem 2rem 2rem; }
.field-group { margin-bottom: 1rem; }
.field-group label { display: block; margin-bottom: .4rem; color: var(--ink-900); font-weight: 700; }
.field-group .form-control { min-height: 50px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); text-align: right; }
.field-group .form-control:focus { border-color: var(--zakah-500); box-shadow: 0 0 0 .2rem rgba(86,165,109,.14); }
.validation-message { display: block; margin-top: .3rem; color: #a62f35; font-size: .82rem; }
.login-error { margin-bottom: 1rem; padding: .8rem 1rem; border: 1px solid #edc7ca; border-radius: 12px; background: #fff1f2; color: #902b31; }
.login-button { width: 100%; min-height: 50px; border: 0; border-radius: 13px; background: linear-gradient(135deg, var(--zakah-700), var(--zakah-800)); color: white; font-size: 1rem; font-weight: 800; box-shadow: 0 12px 25px rgba(36,92,57,.2); }
.login-button:disabled { opacity: .65; }

#blazor-error-ui { display: none; position: fixed; inset-inline: 1rem; bottom: 1rem; z-index: 1000; padding: 1rem; border-radius: 12px; background: #fff3cd; box-shadow: var(--shadow); }
#blazor-error-ui .dismiss { position: absolute; inset-inline-end: 1rem; cursor: pointer; }

@media (max-width: 1050px) {
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .content { padding: 1rem; }
    .hero-panel { align-items: flex-start; flex-direction: column; border-radius: 20px; }
    .metric-grid, .quick-actions { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .dashboard .hero-panel { min-height: 0; padding: 1rem; gap: .75rem; border-radius: 16px; }
    .dashboard .hero-panel h1 { margin-block: .3rem .5rem; font-size: 1.25rem; line-height: 1.5; }
    .dashboard .hero-panel p { font-size: .9375rem; line-height: 1.7; }
    .dashboard .hero-panel .primary-action { min-height: 44px; padding: .6rem .9rem; font-size: .875rem; border-radius: 10px; }
    .dashboard .metric-grid, .dashboard .period-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; margin-block: .75rem; }
    .dashboard .metric-card { min-height: 116px; padding: .8rem; border-radius: 14px; }
    .dashboard .metric-card span { font-size: .8125rem; line-height: 1.6; }
    .dashboard .metric-card strong { margin-block: .25rem; font-size: 1.6rem; line-height: 1.3; }
    .dashboard .metric-card small { font-size: .75rem; line-height: 1.6; }
    .dashboard .period-metrics article { padding: .75rem; border: 1px solid var(--line); background: var(--surface); }
    .dashboard .period-metrics span { font-size: .8125rem; line-height: 1.6; }
    .dashboard .period-metrics small { font-size: .75rem; line-height: 1.6; color: var(--ink-600); }
    .dashboard .period-metrics strong { font-size: 1.125rem; color: var(--zakah-800); }
    .dashboard .analytics-grid { gap: .75rem; margin-block: .75rem; }
    .dashboard .content-grid { gap: .75rem; }
    .dashboard .content-card { padding: 1rem; border-radius: 16px; }
    .dashboard .chart-card { min-height: 0; }
    .dashboard .bar-chart { gap: .5rem; margin-top: .65rem; }
    .dashboard .bar-row > span { white-space: normal; overflow-wrap: anywhere; font-size: .8125rem; line-height: 1.5; }
    .dashboard .section-heading { margin-bottom: .65rem; }
    .dashboard h2 { font-size: 1.05rem; line-height: 1.5; }
    .dashboard .quick-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
    .dashboard .quick-actions a { min-height: 80px; padding: .75rem; font-size: .875rem; line-height: 1.6; }
    .dashboard .worker-preview a { padding: .65rem; gap: .3rem; }
}

.split-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.toolbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.search-input { flex: 1; min-height: 46px; border-radius: 12px; border-color: var(--line); text-align: right; }
.result-count { color: var(--ink-600); white-space: nowrap; }
.primary-button, .secondary-button, .pagination-bar button, .row-actions button { border: 0; border-radius: 11px; padding: .7rem 1rem; font-family: inherit; font-weight: 800; cursor: pointer; }
.primary-button { color: white; background: linear-gradient(135deg,var(--zakah-700),var(--zakah-800)); }
.secondary-button, .pagination-bar button, .row-actions button { color: var(--zakah-800); background: #edf5ee; }
button:disabled { cursor: not-allowed; opacity: .55; }
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.data-table th { padding: .8rem; border-bottom: 2px solid var(--line); color: var(--ink-600); font-size: .82rem; text-align: right; }
.data-table td { padding: .85rem .8rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table tbody tr:hover { background: #f8fbf8; }
.status-chip { display: inline-flex; padding: .35rem .65rem; border-radius: 999px; background: #eef2ee; color: #667268; font-size: .78rem; font-weight: 800; }
.status-chip.success { background: #e4f5e9; color: #267344; }
.status-chip.expense { background: #fff0e8; color: #a24f28; }
.status-chip.rating { background: #f2f1dc; color: #6c6e1f; }
.row-actions { display: flex; align-items: center; gap: .35rem; }
.row-actions a { padding: .38rem .55rem; border-radius: 8px; background: #edf5ee; color: var(--zakah-800); font-size: .76rem; font-weight: 800; text-decoration: none; }
.row-actions button { padding: .4rem .65rem; font-size: .76rem; }
.row-actions .danger-link { color: #a12f35; background: #fff0f1; }
.pagination-bar { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.loading-state, .empty-inline { padding: 2rem; color: var(--ink-600); text-align: center; }
.alert-panel { margin-bottom: 1rem; padding: .9rem 1rem; border-radius: 13px; }
.alert-panel.error { border: 1px solid #efc6ca; background: #fff1f2; color: #922e35; }
.alert-panel.success { border: 1px solid #c9e5d1; background: #edf9f0; color: #267344; }
.form-card input:not([type=checkbox]):not([type=radio]), .form-card select, .form-grid input:not([type=checkbox]):not([type=radio]), .form-grid select, .form-grid textarea, .inline-editor input, .inline-editor select, .admin-search input, .form-actions select { min-width: 0; max-width: 100%; width: 100%; min-height: 46px; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); color: var(--ink-900); font-family: inherit; }
.form-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.form-grid.compact { grid-template-columns: repeat(2,minmax(0,1fr)); }
.form-grid.single-column { grid-template-columns: 1fr; }
.form-grid label > span { display: block; margin-bottom: .4rem; font-weight: 800; }
.choice-panel { margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; }
.choice-panel legend { width: auto; padding-inline: .5rem; font-size: 1rem; font-weight: 800; }
.choice-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .6rem; }
.check-card { display: flex; align-items: center; gap: .5rem; padding: .7rem; border-radius: 10px; background: var(--surface-soft); }
.check-card input { width: 18px; min-height: 18px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; }
.workspace-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(330px,.85fr); gap: 1.25rem; align-items: start; }
.sticky-card { position: sticky; top: 1rem; }
.record-list { display: grid; grid-template-columns: minmax(0,1fr); gap: .65rem; min-width: 0; }
.record-row { display: flex; align-items: center; gap: .8rem; padding: .85rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); min-width: 0; }
.record-avatar { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; background: var(--zakah-800); color: white; font-weight: 900; }
.record-main { display: flex; flex: 1; flex-direction: column; gap: .2rem; min-width: 0; }
.record-main span { overflow: hidden; color: var(--ink-600); font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; }
.compact-metrics .metric-card { min-height: 125px; }
.compact-metrics .metric-card strong { font-size: 1.75rem; }
.metric-card .rating-name { font-size: 1.35rem; }
.settings-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 1.25rem; align-items: start; }
.settings-nav { display: grid; gap: .35rem; }
.settings-nav .eyebrow { margin-bottom: .5rem; }
.settings-nav button { display: flex; justify-content: space-between; width: 100%; padding: .75rem; border: 0; border-radius: 10px; background: transparent; color: var(--ink-900); font-family: inherit; text-align: right; cursor: pointer; }
.settings-nav button:hover, .settings-nav button.active { background: #e9f3eb; color: var(--zakah-800); font-weight: 800; }
.settings-nav small { color: var(--ink-600); }
.inline-editor { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: .6rem; margin-bottom: 1rem; }
.lookup-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
.lookup-list article { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.lookup-list article > span:first-child { display: flex; flex-direction: column; }
.lookup-list small { color: var(--ink-600); }
.user-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.logout-button { padding: .35rem .65rem; border: 0; border-radius: 9px; background: #edf5ee; color: var(--zakah-800); font-family: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.deep-workflow { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.workflow-actions { display: flex; justify-content: flex-end; }
.inline-form.stacked { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; margin-top: 1rem; }
.inline-form input, .inline-form select, .authorization-controls input { min-width: 0; max-width: 100%; min-height: 44px; padding: .65rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); font-family: inherit; }
.attachment-list { margin-top: 1rem; }
.authorization-card { margin-top: 0; }
.authorization-controls { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: .6rem; }
.danger-button { border: 0; border-radius: 11px; padding: .7rem 1rem; background: #a8373d; color: white; font-family: inherit; font-weight: 800; cursor: pointer; }
.history-list { display: grid; gap: .5rem; margin-top: 1rem; }
.history-list article { display: grid; grid-template-columns: auto auto auto minmax(0,1fr); align-items: center; gap: .6rem; padding: .7rem; border-bottom: 1px solid var(--line); }
.history-list p { margin: 0; color: var(--ink-600); }
.admin-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.admin-tabs button { padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--ink-900); font-family: inherit; font-weight: 800; cursor: pointer; }
.admin-tabs button.active { border-color: var(--zakah-700); background: var(--zakah-800); color: white; }
.admin-columns { display: grid; grid-template-columns: minmax(280px,.75fr) minmax(0,1.25fr); gap: 1rem; align-items: start; }
.admin-columns.role-area { margin-top: 1rem; }
.admin-list { display: grid; max-height: 620px; overflow-y: auto; gap: .35rem; }
.admin-list button { display: flex; flex-direction: column; padding: .7rem; border: 1px solid transparent; border-radius: 10px; background: var(--surface-soft); font-family: inherit; text-align: right; cursor: pointer; }
.admin-list button.active { border-color: var(--zakah-500); background: #e8f4ea; }
.admin-list span { color: var(--ink-600); font-size: .8rem; }
.permission-grid { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.permission-grid input { width:18px; height:18px; min-height:18px; padding:0; accent-color:var(--zakah-700); }
.permission-grid label { min-height:44px; display: flex; gap: .35rem; align-items: center; padding: .55rem; border-radius: 9px; background: var(--surface-soft); }
.role-templates { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin-bottom:1rem; padding:.75rem; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); }
.role-templates span { margin-inline-end:.25rem; color:var(--ink-600); font-size:.8rem; font-weight:800; }
.role-templates button { padding:.45rem .65rem; border:1px solid #c9d9cc; border-radius:9px; background:white; color:var(--zakah-800); font-family:inherit; font-weight:800; cursor:pointer; }
.admin-readonly .primary-button,
.admin-readonly .danger-button,
.admin-readonly .danger-link,
.admin-readonly .inline-editor,
.admin-readonly .role-templates,
.admin-readonly .form-card,
.admin-readonly .lookup-list .row-actions,
.admin-readonly .filter-editor { display:none !important; }
.admin-no-create .requires-create,
.admin-no-edit .requires-edit,
.admin-no-delete .requires-delete { display:none !important; }
.effective-permissions { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-bottom:1rem; padding:.75rem; border-radius:12px; background:#f2f7f3; }
.effective-permissions > strong { width:100%; margin-bottom:.2rem; }
.effective-permissions small { color:var(--ink-600); }
.filter-list { display: grid; gap: .45rem; }
.filter-list article { display: flex; justify-content: space-between; align-items: center; padding: .6rem; border: 1px solid var(--line); border-radius: 10px; }
.inline-editor.wide { grid-template-columns: repeat(4,minmax(0,1fr)) auto; }

@media(max-width:900px){.admin-columns{grid-template-columns:1fr}.inline-editor.wide,.inline-form.stacked,.authorization-controls{grid-template-columns:1fr}.history-list article{grid-template-columns:repeat(2,minmax(0,1fr))}.history-list article>*{min-width:0;overflow-wrap:anywhere}}
@media(max-width:900px){.case-lock-banner,.case-unlock-controls{grid-template-columns:1fr}.case-lock-banner{align-items:stretch}}

@media (max-width: 1050px) { .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .workspace-grid { grid-template-columns: minmax(0,1fr); } .sticky-card { position: static; } }
@media (max-width: 760px) { .split-heading, .toolbar { align-items: stretch; flex-direction: column; } .form-grid, .form-grid.compact, .choice-grid, .lookup-list { grid-template-columns: 1fr; } .settings-layout { grid-template-columns: 1fr; } .settings-nav { grid-template-columns: repeat(2,minmax(0,1fr)); } .inline-editor { grid-template-columns: 1fr; } }

.workspace-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; margin-bottom:1rem; }
.workspace-summary article,.workspace-summary-card { position:relative; display:flex; align-items:center; justify-content:space-between; padding:1rem 1.15rem; border:1px solid var(--line); border-radius:15px; background:white; box-shadow:0 6px 20px rgba(27,66,43,.05); font-family:inherit; text-align:right; }
.workspace-summary-card{cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.workspace-summary-card:hover{transform:translateY(-1px);border-color:#9bc1a6}.workspace-summary-card i{position:absolute;top:.45rem;left:.55rem;display:none;width:22px;height:22px;place-items:center;border-radius:50%;background:var(--zakah-800);color:white;font-style:normal;font-weight:900}.workspace-summary-card.is-filtered{border-color:var(--zakah-700);box-shadow:0 0 0 2px rgba(43,112,67,.12),0 8px 24px rgba(27,66,43,.1)}.workspace-summary-card.is-filtered i{display:grid}
.workspace-summary span { color:var(--ink-600); font-weight:700; }
.workspace-summary strong { font-size:1.55rem; color:var(--zakah-800); }
.workspace-summary .is-success { background:#edf9f0; }.workspace-summary .is-warning { background:#fff8e7; }
.filter-workspace { margin-bottom:1rem; }
.filter-primary { display:grid; grid-template-columns:170px minmax(220px,1fr) auto auto auto; gap:.65rem; align-items:center; }
.filter-primary input,.filter-primary select,.advanced-filter-grid select,.batch-command-bar input,.pagination-bar select { min-height:44px; padding:.6rem .75rem; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); font-family:inherit; }
.text-button { border:0; background:transparent; color:var(--ink-600); font-family:inherit; font-weight:800; cursor:pointer; }
.advanced-filter-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.advanced-filter-grid label span { display:block; margin-bottom:.35rem; color:var(--ink-600); font-size:.82rem; font-weight:800; }.advanced-filter-grid select{width:100%;}.filter-apply{display:flex;align-items:flex-end;}
.batch-command-bar { display:grid; grid-template-columns:minmax(220px,1fr) minmax(240px,1.2fr) auto auto; gap:.7rem; align-items:center; margin-bottom:1rem; }.batch-command-bar>div{display:flex;flex-direction:column;}.batch-command-bar span{color:var(--ink-600);font-size:.8rem;}
.selectable-table input[type=checkbox] { width:18px; height:18px; accent-color:var(--zakah-700); }.data-table tbody tr.selected-row{background:#edf7ef;}
.case-table{min-width:1320px}.case-table .sticky-actions{position:sticky;left:0;z-index:3;min-width:190px;background:#fff;box-shadow:8px 0 14px -12px rgba(19,48,30,.55)}.case-table thead .sticky-actions{z-index:6;background:#f8faf8}.case-table tbody tr:hover td{background:#f8fbf8}.case-table tbody tr.last-opened-row td{background:#fff7d6}.case-table tbody tr.last-opened-row td:first-child{box-shadow:inset -4px 0 0 #c49b21}.case-table tbody tr.selected-row td{background:#edf7ef}.case-table .column-sort{display:inline-flex;align-items:center;gap:.35rem;padding:0;border:0;background:transparent;color:inherit;font-family:inherit;font-weight:900;cursor:pointer}.case-table .column-sort span{min-width:12px;color:var(--olive-700);font-size:.7rem}.column-filter-row th{padding:.45rem .3rem;border-bottom:2px solid var(--line);background:#f8faf8}.column-filter-row input,.column-filter-row select{width:100%;min-width:92px;height:36px;padding:.35rem .45rem;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink-800);font-family:inherit;font-size:.76rem}.column-filter-row th:nth-last-child(2) input{min-width:105px}.column-filter-actions{display:flex;align-items:center;gap:.3rem}.column-filter-actions button{min-width:38px;min-height:36px;padding:.35rem .55rem}
.analytics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; margin:1.2rem 0; }.chart-card{min-height:360px;}
.bar-chart{display:grid;gap:.68rem;margin-top:1rem}.bar-row{display:grid;grid-template-columns:100px minmax(0,1fr) 42px;align-items:center;gap:.65rem}.bar-row>span{overflow:hidden;color:var(--ink-600);font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.bar-row>strong{font-size:.82rem}.bar-track{height:10px;overflow:hidden;border-radius:999px;background:#edf2ed}.bar-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--zakah-500),var(--zakah-800));transition:width .35s ease}.bar-track.gold i{background:linear-gradient(90deg,#dbba54,#897021)}.bar-track.blue i{background:linear-gradient(90deg,#6ea4bd,#315f76)}
.rating-distribution{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:1rem}.rating-distribution>div{display:flex;flex-direction:column;padding:1rem;border-radius:14px;background:var(--surface-soft)}.rating-distribution strong{margin:.2rem 0;font-size:1.8rem;color:var(--zakah-800)}.rating-distribution small{color:var(--ink-600)}
.worker-preview{display:grid;gap:.5rem}.worker-preview a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.8rem;padding:.75rem;border-bottom:1px solid var(--line);color:var(--ink-900);text-decoration:none}.worker-preview small{color:var(--ink-600)}
.worker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.worker-card-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem}.worker-card h2{margin:0;font-size:1.05rem}.worker-card-head span{color:var(--ink-600);font-size:.78rem}.worker-card-head>strong{font-size:1.8rem;color:var(--zakah-800)}.progress-track{height:9px;margin:1rem 0;overflow:hidden;border-radius:999px;background:#edf2ed}.progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--zakah-500),var(--zakah-800))}.worker-stats{display:flex;justify-content:space-between;gap:.5rem;margin-bottom:1rem;color:var(--ink-600);font-size:.78rem}.worker-stats span{display:flex;flex-direction:column}.worker-stats strong{color:var(--ink-900);font-size:1rem}
@media(max-width:1100px){.filter-primary{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-primary>*{min-width:0}.advanced-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.worker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.batch-command-bar{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.workspace-summary,.analytics-grid,.worker-grid,.advanced-filter-grid{grid-template-columns:1fr}.filter-primary,.batch-command-bar{grid-template-columns:1fr}.worker-preview a{grid-template-columns:1fr}.bar-row{grid-template-columns:85px minmax(0,1fr) 36px}}

.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.workflow-stepper { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.55rem; margin-bottom:1.2rem; }
.workflow-stepper span { display:flex; align-items:center; gap:.45rem; min-height:52px; padding:.7rem; border:1px solid var(--line); border-radius:13px; background:#f5f7f5; color:var(--ink-600); font-size:.82rem; font-weight:800; }
.workflow-stepper span b { display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto; border-radius:50%; background:#dfe6df; }
.workflow-stepper span.active { border-color:#b9d6c1; background:#edf8ef; color:var(--zakah-800); }.workflow-stepper span.active b{background:var(--zakah-800);color:white}
.form-section-heading { margin:1.4rem 0 1rem; padding-bottom:.75rem; border-bottom:1px solid var(--line); }.form-section-heading:first-child{margin-top:0}.form-section-heading span{color:var(--olive-700);font-size:.8rem;font-weight:900}.form-section-heading h2{margin:.2rem 0}.form-section-heading p{margin:0;color:var(--ink-600)}
.case-applicant-heading{display:flex;align-items:center;gap:.55rem;margin:.3rem 0 .45rem;color:var(--ink-700)}.case-applicant-heading span{padding:.24rem .5rem;border-radius:999px;background:#e8f4eb;color:var(--zakah-800);font-size:.76rem;font-weight:900}.case-applicant-heading strong{font-size:1.05rem;color:var(--ink-900)}
.completion-panel { margin-bottom:1rem; }.completion-heading{display:grid;grid-template-columns:auto minmax(200px,1fr);align-items:center;gap:1.25rem}.completion-heading h2{margin:.2rem 0;font-size:2rem;color:var(--zakah-800)}.completion-meter{height:12px;overflow:hidden;border-radius:999px;background:#e5ebe6}.completion-meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--zakah-500),var(--zakah-800));transition:width .3s ease}.completion-checks,.required-document-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.completion-checks span,.required-document-list span{padding:.45rem .65rem;border-radius:999px;font-size:.78rem;font-weight:800}.completion-checks .complete,.required-document-list .complete{background:#e5f5e9;color:#267344}.completion-checks .missing,.required-document-list .missing{background:#fff1e8;color:#9a4c27}.completion-warning{margin:1rem 0 0;color:#8d552b;font-weight:700}
.quality-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.quality-villages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}.quality-villages span{display:flex;justify-content:space-between;gap:.5rem;padding:.7rem;border-radius:10px;background:var(--surface-soft)}.quality-villages b{color:var(--zakah-800)}.missing-tags{display:flex;flex-wrap:wrap;gap:.25rem}.missing-tags span{padding:.25rem .45rem;border-radius:999px;background:#fff1e8;color:#8d4a27;font-size:.72rem}.completion-score{font-size:1.05rem;font-weight:900;color:var(--zakah-800)}
fieldset.inline-form{min-width:0;padding:0;border:0}fieldset:disabled{opacity:.65}.pagination-bar{flex-wrap:wrap}

@media(max-width:760px){
    .readonly-banner { flex-direction: column; align-items: stretch; }
    .readonly-banner strong { align-self: flex-start; max-width: 100%; }
    .record-row { display: grid; grid-template-columns: auto minmax(0,1fr); }
    .record-row > .row-actions { grid-column: 1/-1; flex-wrap: wrap; justify-content: flex-start; }
    .record-row .row-actions button, .record-row .row-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .6rem .75rem; }
    .record-main strong, .record-main small { overflow-wrap: anywhere; }
    .section-heading { flex-wrap: wrap; gap: .6rem; }
    .draft-banner{align-items:stretch;flex-direction:column}.case-workspace-tabs{display:grid;grid-template-columns:1fr 1fr}.case-workspace-tabs button,.case-workspace-tabs a{text-align:center}
    .workflow-stepper{display:flex;overflow-x:auto;padding-bottom:.35rem}.workflow-stepper span{min-width:150px}.quality-summary,.quality-villages{grid-template-columns:1fr}.completion-heading{grid-template-columns:1fr}
    .responsive-table{min-width:0;white-space:normal}.responsive-table thead{display:none}.responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td{display:block;width:100%}.responsive-table tr{margin-bottom:1rem;padding:.7rem;border:1px solid var(--line);border-radius:14px;background:white}.responsive-table td{display:grid;grid-template-columns:105px minmax(0,1fr);gap:.6rem;padding:.5rem;border:0}.responsive-table td::before{content:attr(data-label);color:var(--ink-600);font-size:.76rem;font-weight:800}.responsive-table td.row-actions{position:static;display:flex;flex-wrap:wrap;min-width:0;padding-top:.8rem;border-top:1px solid var(--line);box-shadow:none}.responsive-table td.row-actions::before{display:none}
}