/* cairo-arabic-wght-normal */
@font-face {
  font-family: 'Saba UI';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(/fonts/cairo-arabic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* cairo-latin-ext-wght-normal */
@font-face {
  font-family: 'Saba UI';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(/fonts/cairo-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* cairo-latin-wght-normal */
@font-face {
  font-family: 'Saba UI';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(/fonts/cairo-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* SABA presentation system. Voucher artwork and print geometry remain in styles.css. */
:root {
  --ink: #172b3a;
  --muted: #586a77;
  --canvas: #f3f6f8;
  --surface: #fff;
  --border: #dce4e9;
  --accent: #087e82;
  --accent-deep: #076469;
  --mint: #087852;
  --danger: #b32d42;
  --navy: #122b39;
  --shadow: 0 3px 14px rgb(18 43 57 / 4%);
  --saba-ink: var(--ink);
  --saba-muted: var(--muted);
  --saba-blue: var(--accent);
  --saba-line: var(--border);
  --saba-glass: #fff;
  --saba-shadow: var(--shadow);
  color-scheme: light;
}
html { scroll-padding-block: 1rem; }
html[dir="rtl"] body { background: var(--canvas); color: var(--ink); font-family: "Saba UI", Cairo, Tahoma, Arial, sans-serif; line-height: 1.65; }
button, input, select, textarea { font: inherit; }
button, a, summary, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #0a8b91;
  outline-offset: 3px;
}
.skip-link { position: fixed; inset-block-start: .75rem; inset-inline-start: 1rem; z-index: 100; padding: .75rem 1rem; border-radius: .6rem; background: white; color: var(--accent-deep); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.ui-icon { inline-size: 1.25rem; block-size: 1.25rem; flex: 0 0 auto; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark { border-radius: .75rem; background: #0a8588; color: #fff !important; box-shadow: none; }
.brand-lockup strong, .sidebar-brand strong { letter-spacing: .12em; font-size: 1.1rem; }
.brand-lockup small, .sidebar-brand small { color: inherit; opacity: .75; }
.eyebrow { color: var(--accent-deep); font-size: .7rem; letter-spacing: .07em; }
/* Sign in */
.auth-shell { max-inline-size: 88rem; margin-inline: auto; grid-template-columns: minmax(0, 1.1fr) minmax(24rem, .9fr); gap: clamp(2rem, 5vw, 6rem); padding: clamp(1.5rem, 4vw, 4rem); }
.auth-brand-panel { align-self: stretch; min-height: 40rem; border: 0; border-radius: 1.5rem; padding: clamp(2rem, 4vw, 4rem); background: #122f3e; box-shadow: none; justify-content: center; }
.auth-brand-panel::after { display: none; }
.auth-brand-panel .eyebrow { margin-block: 3rem 1rem; color: #a5d8d7; }
.auth-brand-panel h1 { margin-block: 0 1rem; font-size: clamp(2rem, 3.4vw, 3.5rem); line-height: 1.5; letter-spacing: -.04em; }
.auth-brand-panel h1 span { color: #8ee0d0; }
.auth-brand-panel .lead { margin: 0; color: #c5d5dd; font-size: 1rem; line-height: 2; }
.auth-features { display: grid; gap: .9rem; margin-block-start: 2rem; color: #e6eef2; font-size: .88rem; }
.auth-features > div { display: flex; align-items: center; gap: .8rem; }
.auth-features .ui-icon { color: #8ee0d0; }
.auth-brand-foot { margin-block-start: 3rem; padding-block-start: 1.25rem; border-block-start: 1px solid #35515e; font-size: .72rem; color: #adc5cf; direction: ltr; text-align: start; letter-spacing: .1em; }
.auth-card { border: 1px solid var(--border); border-radius: 1.25rem; background: white; box-shadow: 0 12px 40px rgb(18 43 57 / 5%); backdrop-filter: none; padding: clamp(1.5rem, 3vw, 2.5rem); max-inline-size: 33rem; }
.auth-card .card-heading h2 { font-size: 1.65rem; line-height: 1.6; }
.auth-card .card-heading p { font-size: .88rem; line-height: 1.9; }
.auth-card .form-grid { gap: 1rem; }
.auth-card .button { min-block-size: 3rem; }
/* Workspace and navigation */
.app-shell, html[dir="rtl"] .app-shell { grid-template-columns: 16.5rem minmax(0, 1fr) !important; background: var(--canvas); }
.sidebar { background: var(--navy); border: 0; padding: 1.25rem .85rem; box-shadow: none; height: 100dvh; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sidebar-top { padding: .25rem .5rem 1.5rem; }
.sidebar-nav { gap: .4rem !important; }
.sidebar .nav-item, .nav-section summary { min-block-size: 2.9rem; font-size: .85rem; padding: .65rem .85rem; color: #c6d5dd; border-radius: .6rem; background: transparent; }
.sidebar .nav-item:hover, .nav-section summary:hover { color: white; background: #213f4d; }
.sidebar .nav-item.active { color: #b0f1df; background: #204953; box-shadow: inset -3px 0 #65d9be; }
.sidebar .nav-item b, .nav-section summary b { font-weight: 650; }
.nav-section summary { list-style: none; }
.nav-section-links { margin: .25rem 1.45rem .65rem 0; padding-inline: .7rem 0; border-inline-start: 1px solid #3c5663; border-right-width: 0; }
html[dir="rtl"] .nav-section-links { border-right: 1px solid #3c5663; }
.nav-section-links .nav-item { min-height: 2.75rem; padding: .5rem .7rem; font-size: .8rem; }
.sidebar-footer { display: grid; gap: .5rem; border-block-start: 1px solid #35505e; padding: 1.25rem .5rem .25rem; margin-block-start: auto; }
.sidebar-footer span { margin: 0; color: #c6d5dd; font-size: .72rem; }
.sidebar-footer .button { min-height: 2.75rem; color: #d3e0e7; border-color: #405b68; background: transparent; font-size: .78rem; }
.sidebar-footer .button:hover { color: white; background: #23414e; }
.icon-button { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; min-width: 2.75rem; border-radius: .6rem; box-shadow: none; }
.sidebar .icon-button { border-color: #3c5663; background: transparent; color: #d3e0e7; }
.workspace { padding: clamp(1.25rem, 2.6vw, 2.75rem); overflow: visible; }
.topbar { position: static; inset: auto; z-index: auto; padding: 0 0 1.5rem; margin-block-end: 1.25rem; border: 0; border-block-end: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; flex-wrap: wrap; container-type: normal; gap: .8rem; }
.topbar-title { display: flex; align-items: center; min-width: 0; gap: .85rem; }
.topbar-title > div { overflow: visible; }
.topbar .eyebrow { margin-block-end: .3rem; color: var(--muted); font-size: .68rem; white-space: normal; }
.topbar h1 { color: var(--ink); font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.65; white-space: normal; overflow: visible; }
.topbar-actions .button { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
#mobile-nav-toggle { background: white; color: var(--ink); border-color: var(--border); }
.page { max-inline-size: 100rem; margin-inline: auto; }
/* Cards, forms, and hierarchy */
.panel, .metric, .report-metrics article { background: white; border: 1px solid var(--border); border-radius: .9rem; box-shadow: var(--shadow); backdrop-filter: none; }
.panel { padding: clamp(1rem, 1.7vw, 1.6rem); margin-block-end: 1.25rem; }
.panel-heading { gap: 1rem; margin-block-end: 1.2rem; align-items: center; flex-wrap: wrap; }
.panel-heading > div { min-inline-size: 0; }
.panel-heading h2 { font-size: 1.05rem; line-height: 1.7; color: var(--ink); }
.panel-heading p, .panel p, .table-summary, .subtle { color: var(--muted); font-size: .82rem; line-height: 1.85; }
.metrics { gap: 1rem; margin-block-end: 1.5rem; }
.metric { position: relative; min-height: 10rem; padding: 1.25rem; overflow: hidden; }
.metric span { color: #485d6b; font-size: .82rem; padding-inline-end: 2rem; }
.metric strong { color: var(--ink); font-size: 2.2rem; font-variant-numeric: tabular-nums; line-height: 1.25; margin-block: .9rem .65rem; letter-spacing: -.03em; }
.metric small { color: var(--muted); font-size: .7rem; font-weight: 500; }
.metric-icon { position: absolute; inset-inline-end: 1rem; inset-block-start: 1rem; display: grid; place-items: center; inline-size: 2.1rem; block-size: 2.1rem; border-radius: .6rem; color: var(--accent-deep); background: #e8f5f3; }
.form-grid, .form-grid.compact { gap: 1.1rem; }
.field { font-size: .82rem; gap: .5rem; color: #344c5b; }
.field small { font-size: .72rem; color: var(--muted); }
.field input, .field select, .table-view-controls input, .table-view-controls select, .inline-controls select, textarea { min-height: 2.85rem; padding: .65rem .8rem; border: 1px solid #b7c6d0; border-radius: .55rem; color: var(--ink); background: #fff; box-shadow: none; font-size: .85rem; }
.field input:focus, .field select:focus, .table-view-controls input:focus, .table-view-controls select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); box-shadow: none; }
input::placeholder, textarea::placeholder { color: #667984; opacity: 1; }
input[type="email"], input[autocomplete="url"] { direction: ltr; text-align: left; }
input[type="checkbox"] { inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--accent); flex: 0 0 auto; }
.check, .check-field { min-block-size: 2.75rem; color: #344c5b; gap: .65rem; line-height: 1.7; }
.check-field { border-color: var(--border); background: #f7fafb; padding: .75rem; border-radius: .55rem; }
.button, .small-button { min-height: 2.75rem; padding: .65rem 1rem; border-radius: .55rem; font-weight: 700; line-height: 1.5; box-shadow: none; transition: background .15s, border-color .15s; }
.button:hover { transform: none; }
.button.primary, .small-button.primary { color: #fff; background: var(--accent); border: 1px solid var(--accent); box-shadow: none; }
.button.primary:hover, .small-button.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.button.secondary, .small-button { color: #285564; background: #fff; border: 1px solid #bdcdd5; font-size: .8rem; }
.button.secondary:hover, .small-button:hover { background: #ecf5f5; border-color: #8bb6ba; }
.button.danger, .small-button.danger { color: var(--danger); background: #fff5f6; border: 1px solid #e6b6be; }
.button.danger:hover, .small-button.danger:hover { background: #fce7eb; border-color: #cf8a96; }
.button:disabled, .small-button:disabled { opacity: .5; cursor: not-allowed; }
.split-layout, .um-studio-grid, .um-template-grid { gap: 1.25rem; }
.tip-panel { background: #edf5f5; border: 1px solid #ccdfdf; color: var(--ink); }
.tip-panel h2 { font-size: 1.35rem; color: var(--ink); }
.tip-panel p, .tip-panel strong { color: #344c5b; }
.tip-panel .eyebrow { color: var(--accent-deep); }
.disclosure-panel, .table-view-disclosure { border: 1px solid var(--border); border-radius: .65rem; background: #f8fafb; }
.disclosure-panel > summary, .table-view-disclosure > summary { min-height: 2.85rem; color: #285564; font-size: .8rem; }
.disclosure-panel > summary small { color: var(--muted); }
.disclosure-panel > summary::before, .table-view-disclosure > summary::before { color: var(--accent-deep); }
.disclosure-panel[open] > summary, .table-view-disclosure[open] > summary { background: #edf5f5; border-color: var(--border); }
.disclosure-body { padding: 1rem; }
/* Data stays in tables. Scroll inside each table, never the whole page. */
.table-wrap { max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--border); border-radius: .65rem; scrollbar-width: thin; scrollbar-color: #9bb3bf #f1f5f7; }
table { font-size: .82rem; }
thead { background: #f4f7f9; }
th { padding: .9rem .9rem; font-size: .75rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: #445b69; border-color: var(--border); }
td { padding: .9rem .9rem; font-size: .8rem; color: #263f4e; border-color: #e8eef2; }
tbody tr:hover { background: #f6fbfb; }
tbody tr:has(input:checked) { background: #eaf6f3; }
td:first-child { font-weight: 650; }
td.empty { padding: 2.75rem 1rem; font-weight: 500; text-align: center; line-height: 1.9; color: var(--muted); }
.table-actions { flex-wrap: wrap; gap: .45rem; }
.table-actions .small-button { white-space: nowrap; }
.table-view-controls { padding: .9rem; border-color: var(--border); background: #f7fafb; border-radius: .65rem; gap: .8rem; }
.table-view-controls label { color: #445b69; font-size: .73rem; letter-spacing: 0; text-transform: none; }
.table-view-advanced { background: white; border-color: var(--border); }
.table-sub-summary, .group-row td { color: #285564; background: #edf6f5; }
.table-pagination, .batch-pagination { gap: .75rem; color: var(--muted); background: #f7fafb; border-color: var(--border); }
.table-pagination select, .batch-pagination select { min-height: 2.75rem; border-color: #b7c6d0; }
.table-pagination > span { color: var(--muted); }
.badge { padding: .3rem .65rem; border-radius: 999px; font-size: .73rem; color: #086744; background: #e5f4eb; white-space: nowrap; }
.badge.offline { color: #536773; background: #edf1f4; }
.library-selection-bar { flex-wrap: wrap; padding: .85rem 1rem; border: 1px solid #c4dedc; background: #edf7f5; border-radius: .65rem; }
.library-selection-bar .table-summary { flex: 1 0 100%; }
.library-selection-bar .button { flex: 1 1 12rem; min-width: 0; white-space: normal; color: #285564; background: white; border-color: #b6cece; }
.library-selection-bar .button.danger { color: var(--danger); background: #fff5f6; border-color: #e6b6be; }
.library-card-prefix { color: var(--accent-deep); }
.report-metrics article { background: #f7fbfa; border-color: #cfe1de; padding: 1rem; }
.report-metrics strong { color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.report-metrics span, .report-metrics small { color: #485f6c; text-transform: none; letter-spacing: 0; }
.saved-layout { border-color: var(--border); background: #fff; }
.saved-layout.selected { border-color: #82b7b3; background: #edf7f5; box-shadow: none; }
.saved-layout strong { color: #285564; }
.layout-element-tabs { border-color: var(--border); background: #f4f7f9; }
.layout-element-tabs button { min-height: 2.75rem; color: #445b69; border-color: #bdcdd5; }
.layout-element-tabs button.active { background: var(--accent); border-color: var(--accent); color: white; }
.voucher-preview-panel { background: #edf2f5; border-color: #d4dfe5; }
html[dir="rtl"] .voucher-canvas { font-family: Cairo, Tahoma, Arial, sans-serif; }
/* Keep the preview in the document flow so it cannot cover the heading or batch actions. */
@media (min-width: 1081px) {
  .um-studio-main { align-self: stretch; }
  .voucher-preview-panel.viewport-fixed-preview {
    position: sticky !important;
    top: 1rem;
    left: auto;
    width: min(100%, var(--um-preview-panel-width, 100%));
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    z-index: 5;
  }
}
.preview-resize-handle { min-width: 2.75rem; min-height: 2.75rem; color: var(--accent-deep); border-color: #9dbec2; box-shadow: none; }
.image-preview-empty { color: #445b69; border-color: #9bb3bf; background: #fff; }
.info-toggle { inline-size: 1.75rem; block-size: 1.75rem; color: #285564; background: #edf5f5; border-color: #91b7bb; }
.info-content { color: #344c5b; background: #fff; border-color: var(--border); box-shadow: 0 8px 30px rgb(18 43 57 / 12%); }
.load-status { margin-block: 0 1rem; background: #edf7f5; border-color: #c4dedc; color: #285564; box-shadow: none; }
.load-status-row strong, .load-status-row span:last-child { color: #285564; }
.load-track { background: #c6e4de; }
.import-status { border-color: var(--border); box-shadow: none; }
.toast { z-index: 100; background: #173947; border-radius: .75rem; padding: 1rem 1.25rem; font-size: .85rem; box-shadow: 0 8px 30px rgb(18 43 57 / 18%); }
.toast.error { background: #a2273b; }
.dialog { border: 1px solid var(--border); border-radius: 1rem; background: white; max-height: calc(100dvh - 2rem); overflow: auto; }
.dialog::backdrop { background: rgb(13 34 45 / 55%); }
.dialog-close { width: 2.75rem; height: 2.75rem; }
/* Collapsed navigation expands when a group is activated (presentation.js). */
.app-shell.sidebar-collapsed, html[dir="rtl"] .app-shell.sidebar-collapsed { grid-template-columns: 5.5rem minmax(0, 1fr) !important; }
.app-shell.sidebar-collapsed .sidebar-top { flex-direction: column; gap: 1rem; padding-inline: 0; }
.app-shell.sidebar-collapsed .sidebar-nav .ui-icon { inline-size: 1.4rem; block-size: 1.4rem; }
.mobile-nav-backdrop { display: none; }
@media (min-width: 981px) {
  .sidebar { display: flex; flex-direction: column; gap: 1rem; }
  .sidebar-footer { flex-shrink: 0; }
}
@media (max-width: 1200px) and (min-width: 981px) {
  .app-shell, html[dir="rtl"] .app-shell { grid-template-columns: 14.5rem minmax(0, 1fr) !important; }
  .app-shell.sidebar-collapsed, html[dir="rtl"] .app-shell.sidebar-collapsed { grid-template-columns: 5.5rem minmax(0, 1fr) !important; }
  .workspace { padding: 1.25rem; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-layout { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .auth-shell { grid-template-columns: 1fr; max-inline-size: 44rem; gap: 1.5rem; padding: 1.5rem; }
  .auth-brand-panel { min-height: 0; padding: 2rem; }
  .auth-brand-panel .eyebrow { margin-block-start: 1.5rem; }
  .auth-brand-panel h1 { font-size: 2rem; }
  .auth-features { grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: .75rem; gap: .6rem; }
  .auth-features > div { flex-direction: column; align-items: flex-start; }
  .auth-brand-foot { display: none; }
  .auth-card { max-inline-size: none; width: 100%; }
  .app-shell, html[dir="rtl"] .app-shell { display: block; }
  .workspace, html[dir="rtl"] .workspace { width: 100%; padding: 1.25rem; }
  .sidebar, html[dir="rtl"] .sidebar { display: flex; position: fixed; inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; flex-direction: column; gap: 1rem; width: min(20rem, 88vw); padding: max(1rem, env(safe-area-inset-top)) .85rem max(1rem, env(safe-area-inset-bottom)); transform: translateX(110%); visibility: hidden; pointer-events: none; z-index: 70; }
  .app-shell.sidebar-open .sidebar { transform: none; visibility: visible; pointer-events: auto; box-shadow: -10px 0 35px rgb(18 43 57 / 20%); }
  .mobile-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 60; border: 0; visibility: hidden; pointer-events: none; background: rgb(13 34 45 / 50%); opacity: 0; transition: opacity .2s; }
  .app-shell.sidebar-open .mobile-nav-backdrop { visibility: visible; pointer-events: auto; opacity: 1; }
  body.mobile-menu-open { overflow: hidden; touch-action: auto; }
  .sidebar-nav { overflow: visible !important; }
  .sidebar-footer { display: grid; }
  .sidebar-footer .button { width: 100%; }
  .topbar { gap: .8rem; padding-block-end: 1rem; }
  .split-layout, .um-studio-grid, .um-template-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .auth-shell { padding: 1rem; gap: 1rem; }
  .auth-brand-panel { padding: 1.5rem; border-radius: 1rem; }
  .auth-brand-panel .eyebrow { margin-block: 1.25rem .75rem; font-size: .68rem; }
  .auth-brand-panel h1 { font-size: 1.65rem; margin-block-end: .6rem; }
  .auth-brand-panel .lead { font-size: .82rem; }
  .auth-features { display: none; }
  .auth-card { padding: 1.5rem 1.1rem; border-radius: 1rem; }
  .workspace, html[dir="rtl"] .workspace { padding: max(1rem, env(safe-area-inset-top)) .85rem calc(1.5rem + env(safe-area-inset-bottom)); }
  .topbar-title { flex-basis: 100%; }
  .topbar h1 { font-size: 1.35rem; }
  .topbar-actions { width: 100%; justify-content: flex-end; }
  .topbar-actions .button { min-width: 0; font-size: .78rem; padding-inline: .85rem; }
  .panel { padding: 1rem; border-radius: .8rem; }
  .panel-heading { flex-direction: column; align-items: stretch; gap: .75rem; }
  .panel-heading > .button, .panel-heading > .small-button { width: 100%; }
  .metric { min-height: 9rem; padding: 1rem; }
  .metric span { font-size: .75rem; }
  .metric strong { font-size: 1.8rem; }
  .metric small { font-size: .65rem; line-height: 1.75; }
  .metric-icon { inset-inline-end: .6rem; inline-size: 1.7rem; block-size: 1.7rem; }
  .metric-icon .ui-icon { inline-size: 1rem; block-size: 1rem; }
  .metrics { gap: .7rem; }
  .form-grid, .form-grid.compact, .table-view-controls, .table-view-advanced { grid-template-columns: 1fr; }
  .batch-actions, .report-actions { display: grid; grid-template-columns: 1fr; gap: .65rem; }
  .table-pagination .pagination-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-selection-bar { padding: .75rem; }
  .library-selection-bar .button { flex: 0 1 auto; width: 100%; min-height: 2.75rem; }
  .table-wrap table { min-width: 36rem; }
  .table-wrap.scrollable::before { content: 'اسحب الجدول لرؤية بقية الأعمدة'; display: block; position: sticky; right: 0; width: 100%; padding: .6rem .8rem; background: #eef5f6; color: #445b69; font-size: .7rem; text-align: start; }
  .table-wrap th, .table-wrap td { padding: .8rem .75rem; }
  .dialog { width: calc(100vw - 1.5rem); max-height: calc(100dvh - 1.5rem); padding: 3.5rem 1rem 1.25rem; }
}
@media (max-width: 360px) { .metrics { grid-template-columns: 1fr; } .auth-brand-panel h1 { font-size: 1.45rem; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media print { .skip-link { display: none !important; } }

/* Dense table rows keep a 44px touch target and all existing actions. */
.table-wrap table { min-width: 0; }
.table-wrap th { padding: .55rem .5rem; white-space: nowrap; }
.table-wrap td { padding: .35rem .5rem; vertical-align: middle; line-height: 1.5; }
.table-wrap .table-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: .25rem; }
.table-wrap .small-button.table-icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; line-height: 1; }
.table-icon-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.table-action-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.table-action-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.table-action-cell, .table-date, .table-number { width: 1%; white-space: nowrap; }
.table-wrap th:has(input[type="checkbox"]), .table-wrap td:has(> input[type="checkbox"]) { width: 44px; min-width: 44px; text-align: center; padding: .25rem; }
.table-wrap input[type="checkbox"] { width: 20px; height: 20px; margin: 12px; }
.table-wrap .badge { padding: .2rem .5rem; }
.library-name-cell { width: 10rem; }
.library-details { width: 10rem; }
.library-details summary { display: flex; align-items: center; gap: .3rem; min-height: 44px; cursor: pointer; color: var(--ink); }
.library-details summary::before { content: '+'; flex: none; font-weight: 700; color: var(--accent); }
.library-details[open] summary::before { content: '−'; }
.library-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.library-details[open] .library-name { white-space: normal; overflow-wrap: anywhere; }
.library-detail-body { display: grid; gap: .35rem; padding: .5rem 0; color: var(--muted); overflow-wrap: anywhere; }
.library-profile { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-error { display: inline-block; max-width: 16rem; white-space: normal; overflow-wrap: anywhere; }

.table-wrap { contain: inline-size paint; }

.workspace-import-actions .small-button { min-width: 0; white-space: normal; }

.table-action-icon--pdf, .table-action-icon--script, .table-action-icon--import { width: 28px; height: 28px; }

#page-um-generate .batch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
#page-um-generate .batch-actions .button.table-icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; }
.table-action-icon--txt, .table-action-icon--csv { width: 28px; height: 28px; }
#um-generated-table td:nth-child(-n+2) { width: 1%; white-space: nowrap; }
.generated-field-details { width: 8rem; }
.generated-field-details summary { display: flex; align-items: center; min-height: 32px; gap: .25rem; cursor: pointer; }
.generated-field-details summary::before { content: '+'; flex: none; color: var(--accent); }
.generated-field-details[open] summary::before { content: '−'; }
.generated-field-details summary span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.generated-field-details[open] summary span { white-space: pre-wrap; overflow-wrap: anywhere; }