/* ==========================================================================
   Crazy Mask - Arabic RTL design system  ("ink & confetti")
   Layers: 1) primitive tokens  2) semantic tokens  3) component tokens/styles
   Components never use raw colors: they only read semantic tokens.
   Fonts are stored locally (assets/fonts). Direction is RTL; use logical properties only.
   ========================================================================== */

@font-face { font-family: 'Tajawal'; font-weight: 400; font-display: swap; src: local('Tajawal'), url('../fonts/Tajawal-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Tajawal'; font-weight: 500; font-display: swap; src: local('Tajawal Medium'), url('../fonts/Tajawal-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Tajawal'; font-weight: 700; font-display: swap; src: local('Tajawal Bold'), url('../fonts/Tajawal-Bold.ttf') format('truetype'); }

/* ---- 1. Primitive tokens (raw values; contrast of every pairing below was computed, see docs) ---- */
:root {
    --ink-900: #1E1A3C;
    --ink-800: #2B2653;
    --ink-700: #3B3568;
    --ink-100: #E6E3F5;
    --paper-50: #F7F6FB;
    --white: #FFFFFF;
    --line-200: #E2DFEC;
    --line-500: #8F8AA6;
    --gray-700: #5E5972;
    --gray-900: #1B1830;
    --rose-600: #B8185A;
    --rose-700: #9E1250;
    --rose-100: #FBE3EE;
    --saffron-400: #F4B400;
    --teal-700: #0B5D56;
    --teal-100: #DDF3EF;
    --amber-700: #8A3F06;
    --amber-100: #FDEBD3;
    --red-700: #B42318;
    --red-800: #8F1D14;
    --red-100: #FCE4E1;
    --blue-800: #1F3F8F;
    --blue-100: #E4ECFC;
    --slate-700: #4A465C;
    --slate-100: #ECEAF3;

    --font-ui: 'Tajawal', 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-code: Consolas, 'Courier New', monospace;

    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
    --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem;

    --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-stat: 2.25rem;

    --radius-control: 10px; --radius-card: 16px; --radius-pill: 999px;
    --shadow-1: 0 1px 2px rgba(30, 26, 60, .06), 0 2px 8px rgba(30, 26, 60, .05);
    --shadow-2: 0 8px 28px rgba(30, 26, 60, .18);
    --ease: 160ms ease-out;
}

/* ---- 2. Semantic tokens ---- */
:root {
    --color-bg: var(--paper-50);
    --color-surface: var(--white);
    --color-text: var(--gray-900);
    --color-text-muted: var(--gray-700);
    --color-border: var(--line-200);
    --color-border-strong: var(--line-500);   /* form controls: >= 3:1 against white */
    --color-primary: var(--rose-600);
    --color-primary-hover: var(--rose-700);
    --color-on-primary: var(--white);
    --color-link: var(--rose-700);
    --color-focus: var(--ink-700);
    --color-chrome: var(--ink-900);           /* sidebar / top bar */
    --color-chrome-text: var(--ink-100);
    --color-chrome-hover: var(--ink-800);
    --color-accent: var(--saffron-400);       /* the one "confetti" accent: active marker, hero number */
    --color-success-fg: var(--teal-700);   --color-success-bg: var(--teal-100);
    --color-warning-fg: var(--amber-700);  --color-warning-bg: var(--amber-100);
    --color-danger-fg: var(--red-800);     --color-danger-bg: var(--red-100);
    --color-info-fg: var(--blue-800);      --color-info-bg: var(--blue-100);
    --color-neutral-fg: var(--slate-700);  --color-neutral-bg: var(--slate-100);
}

/* ---- 3. Base ---- */
* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    margin: 0; font-family: var(--font-ui); font-size: var(--text-base); line-height: 1.7;
    background: var(--color-bg); color: var(--color-text);
}
h1 { font-size: var(--text-2xl); line-height: 1.3; margin: 0 0 var(--space-4); font-weight: 700; }
h2 { font-size: var(--text-lg); margin: 0 0 var(--space-3); font-weight: 700; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-link); text-underline-offset: 3px; }
.muted { color: var(--color-text-muted); }
small.muted { display: block; margin-top: var(--space-1); font-size: var(--text-sm); }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }

/* ---- Shell: ink sidebar (desktop) / top bar + drawer (mobile) ---- */
.topbar { display: none; align-items: center; gap: var(--space-3); background: var(--color-chrome); color: var(--color-chrome-text); padding: var(--space-2) var(--space-4); position: sticky; top: 0; z-index: 20; min-height: 56px; }
.topbar .brand-name { font-weight: 700; font-size: var(--text-lg); color: var(--white); }
.shell { display: flex; align-items: stretch; min-height: 100vh; }
.sidebar {
    width: 272px; flex-shrink: 0; background: var(--color-chrome); color: var(--color-chrome-text);
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.confetti { height: 8px; flex-shrink: 0; background:
    radial-gradient(circle at 8px 4px, var(--saffron-400) 2.5px, transparent 3px) 0 0 / 28px 8px,
    radial-gradient(circle at 21px 4px, var(--rose-600) 2.5px, transparent 3px) 0 0 / 28px 8px; }
.brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); color: var(--white); text-decoration: none; font-size: var(--text-xl); font-weight: 700; }
.brand-logo { max-height: 36px; width: auto; }
.nav { list-style: none; margin: 0; padding: 0 var(--space-3); flex: 1; }
.nav-group { padding: var(--space-4) var(--space-3) var(--space-1); font-size: var(--text-sm); color: #B9B4D6; }
.nav a, .nav-btn {
    display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3);
    color: var(--color-chrome-text); text-decoration: none; background: none; border: 0; border-radius: var(--radius-control);
    font: inherit; cursor: pointer; text-align: start; position: relative; transition: background var(--ease);
}
.nav a:hover, .nav-btn:hover { background: var(--color-chrome-hover); }
.nav a[aria-current="page"] { background: var(--color-chrome-hover); color: var(--white); font-weight: 700; }
/* the memorable detail: a saffron "eye" marker on the current page */
.nav a[aria-current="page"]::before { content: ''; position: absolute; inset-inline-start: -12px; top: 50%; width: 8px; height: 22px; margin-top: -11px; background: var(--color-accent); border-radius: 0 100% 0 100%; }
.sidebar :focus-visible, .topbar :focus-visible { outline-color: var(--color-accent); }
.sidebar-foot { padding: var(--space-4) var(--space-5) var(--space-5); border-top: 1px solid var(--color-chrome-hover); }
.sidebar-foot .who { display: block; color: var(--white); font-weight: 700; }
.sidebar-foot .role { display: block; font-size: var(--text-sm); color: #B9B4D6; margin-bottom: var(--space-2); }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; color: var(--white); border: 1px solid #6D66A1; border-radius: var(--radius-control); cursor: pointer; }
.scrim { position: fixed; inset: 0; background: rgba(15, 12, 35, .55); z-index: 25; }
.content { flex: 1; min-width: 0; padding: var(--space-6) var(--space-6) var(--space-7); max-width: 1180px; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 44px; padding: var(--space-2) var(--space-4); font: inherit; font-weight: 500; line-height: 1.3;
    background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-control); text-decoration: none; cursor: pointer; text-align: center;
    transition: background var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.btn:hover { background: var(--color-bg); border-color: var(--color-text-muted); }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-warn { color: var(--color-warning-fg); border-color: var(--color-warning-fg); }
.btn-warn:hover { background: var(--color-warning-bg); border-color: var(--color-warning-fg); }
.btn-sm { min-height: 36px; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .6; cursor: not-allowed; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ''; position: absolute; width: 1.1em; height: 1.1em; border: 2px solid var(--white); border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn:not(.btn-primary).is-loading::after { border-color: var(--color-text); border-top-color: transparent; }
.nav-btn.btn { }
@keyframes spin { to { transform: rotate(360deg); } }
@media (pointer: fine) { .btn { min-height: 40px; } .btn-sm { min-height: 34px; } }

/* ---- Cards, forms ---- */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-5); margin-bottom: var(--space-4); box-shadow: var(--shadow-1); }
.form-narrow { max-width: 640px; }
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-weight: 500; margin-bottom: var(--space-1); }
input[type=text], input[type=password], input[type=email], input[type=search], input[type=file], select, textarea {
    width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); font: inherit; color: var(--color-text);
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface);
}
textarea { min-height: 96px; }
input::placeholder { color: var(--color-text-muted); opacity: .8; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
input:disabled, select:disabled { background: var(--color-neutral-bg); color: var(--color-text-muted); }
.ltr-input { direction: ltr; text-align: left; }
.field.check label { display: flex; gap: var(--space-2); align-items: center; font-weight: 400; min-height: 44px; }
.field.check input { width: 20px; height: 20px; accent-color: var(--color-primary); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.filters .field { margin: 0; min-width: 150px; }
.filters .grow { flex: 1; min-width: 220px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.page-head h1 { margin: 0; }

/* ---- Alerts, badges, empty states ---- */
.alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); margin-bottom: var(--space-4); border: 1px solid; }
.alert .icon { margin-top: .2em; }
.alert ul { margin: var(--space-1) 0 0; padding-inline-start: 1.25rem; }
.alert-success { background: var(--color-success-bg); border-color: var(--color-success-fg); color: var(--color-success-fg); }
.alert-error   { background: var(--color-danger-bg);  border-color: var(--color-danger-fg);  color: var(--color-danger-fg); }
.alert-info    { background: var(--color-info-bg);    border-color: var(--color-info-fg);    color: var(--color-info-fg); }
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-3); min-height: 26px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-success, .badge-ok { background: var(--color-success-bg); color: var(--color-success-fg); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger-fg); }
.badge-info    { background: var(--color-info-bg);    color: var(--color-info-fg); }
.badge-neutral, .badge-off { background: var(--color-neutral-bg); color: var(--color-neutral-fg); }
.empty { text-align: center; padding: var(--space-7) var(--space-4); }
.empty .icon { width: 2.5rem; height: 2.5rem; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.empty p { color: var(--color-text-muted); }
.code { font-family: var(--font-code); background: var(--color-neutral-bg); color: var(--color-text); padding: 0 var(--space-2); border-radius: 6px; direction: ltr; unicode-bidi: isolate; display: inline-block; }
.code-big { font-size: var(--text-xl); font-weight: 700; }
.code-card { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-1); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: start; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table th { background: var(--color-bg); font-weight: 700; white-space: nowrap; font-size: var(--text-sm); color: var(--color-text-muted); }
.table tbody tr:hover { background: var(--color-bg); }
.row-actions { white-space: nowrap; }
.row-actions .btn { margin-inline-end: var(--space-1); }
form.inline { display: inline; }
.inline-edit { display: flex; gap: var(--space-2); }
.inline-edit input { min-width: 140px; }
.pager { display: flex; gap: var(--space-4); align-items: center; justify-content: center; margin-top: var(--space-4); }

/* ---- Dashboard ---- */
.dash-filter { margin-bottom: var(--space-4); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: var(--space-1); text-decoration: none; color: inherit; }
a.tile:hover { border-color: var(--color-border-strong); }
.tile-label { color: var(--color-text-muted); font-size: var(--text-sm); display: flex; gap: var(--space-2); align-items: center; }
.tile-value { font-size: var(--text-stat); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tile-value.money { font-size: 1.6rem; }
.tile-sub { font-size: var(--text-sm); color: var(--color-text-muted); }
.dash-grid.flush { margin: 0; }
.tile--hero { background: var(--color-chrome); border-color: var(--color-chrome); color: var(--white); grid-column: span 2; }
.tile--hero .tile-label, .tile--hero .tile-sub { color: #C9C5E4; }
.tile--hero .tile-value { color: var(--color-accent); font-size: 3rem; }
.panel-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-4); }
.panel-grid .card { margin: 0; }
.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.list-plain li:last-child { border-bottom: 0; }

/* ---- Roles screen ---- */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); text-decoration: none; background: var(--color-surface); color: var(--color-text); }
.tab[aria-current="page"] { background: var(--color-chrome); border-color: var(--color-chrome); color: var(--white); font-weight: 700; }
.perm-group { border: 1px solid var(--color-border); border-radius: var(--radius-control); margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-4); }
.perm-group legend { font-weight: 700; padding: 0 var(--space-2); }
.perm { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; }
.perm input { width: 20px; height: 20px; accent-color: var(--color-primary); }

/* ---- Confirm dialog ---- */
.dialog { border: 0; border-radius: var(--radius-card); padding: var(--space-5); width: min(92vw, 420px); box-shadow: var(--shadow-2); color: var(--color-text); }
.dialog::backdrop { background: rgba(15, 12, 35, .55); }
.dialog h2 { margin-bottom: var(--space-2); }

/* ---- Login ---- */
body.bare { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-4); background: var(--color-bg); }
.auth-box { width: 100%; max-width: 440px; }
.auth-card { padding: 0; overflow: hidden; }
.auth-card .confetti { height: 10px; background-color: var(--color-chrome); }
.auth-card .auth-body { padding: var(--space-6) var(--space-5) var(--space-5); }
.auth-head { text-align: center; margin-bottom: var(--space-5); }
.auth-logo { max-height: 72px; margin-bottom: var(--space-2); }
.auth-head h1 { margin-bottom: var(--space-1); }

/* ---- Tablet / mobile ---- */
@media (max-width: 1000px) {
    .content { padding: var(--space-5) var(--space-4) var(--space-7); }
    .tile--hero { grid-column: auto; }
    .panel-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
    .topbar { display: flex; }
    .shell { display: block; min-height: 0; }
    .sidebar { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 30; width: min(84vw, 320px); height: 100%; transform: translateX(100%); visibility: hidden; transition: transform 200ms ease-out, visibility 200ms; box-shadow: var(--shadow-2); }
    .sidebar.open { transform: none; visibility: visible; }
    h1 { font-size: var(--text-xl); }
    .table-wrap { background: transparent; border: 0; box-shadow: none; overflow: visible; }
    .table.responsive thead { display: none; }
    .table.responsive, .table.responsive tbody, .table.responsive tr, .table.responsive td { display: block; width: 100%; }
    .table.responsive tr { margin-bottom: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); padding: var(--space-2) 0; box-shadow: var(--shadow-1); }
    .table.responsive td { border: 0; padding: var(--space-1) var(--space-4); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
    .table.responsive td::before { content: attr(data-label); font-weight: 700; color: var(--color-text-muted); flex-shrink: 0; font-size: var(--text-sm); }
    .table.responsive tr:hover { background: var(--color-surface); }
    .inline-edit { flex-wrap: wrap; justify-content: flex-end; }
    .filters .field { flex: 1 1 140px; }
    .page-head .btn { width: 100%; }
    .row-actions { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (forced-colors: active) { .btn, input, select, textarea, .card, .tile { border: 1px solid CanvasText; } }
@media print { .topbar, .sidebar, .actions, .btn, .scrim { display: none !important; } .content { padding: 0; } }

/* ---- Forms with several columns, live search lists, totals box ---- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 var(--space-4); }
.search-box { position: relative; }
.results { list-style: none; margin: var(--space-1) 0 0; padding: var(--space-1); position: absolute; inset-inline: 0; z-index: 15; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-2); max-height: 320px; overflow-y: auto; }
.results[hidden] { display: none; }
.results li { padding: var(--space-2) var(--space-3); border-radius: 8px; cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.results li:hover, .results li:focus { background: var(--color-bg); outline: none; box-shadow: inset 0 0 0 2px var(--color-focus); }
.results li.none { cursor: default; color: var(--color-text-muted); }
input.sm { min-width: 90px; max-width: 140px; }
.totals { margin-top: var(--space-4); margin-inline-start: auto; max-width: 380px; display: grid; gap: var(--space-2); }
.totals > div { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.totals input { max-width: 160px; }
.totals .grand { border-top: 2px solid var(--color-text); padding-top: var(--space-2); font-size: var(--text-lg); }
@media print { .no-print { display: none !important; } .card { box-shadow: none; } }

/* the hidden attribute must always win over display rules */
[hidden] { display: none !important; }

.logo-preview { max-height: 90px; max-width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-control); padding: var(--space-2); background: var(--white); }
.mt-3 { margin-top: var(--space-3); }

/* ---- Party calendar (no library): CSS grid, Saturday-first weeks, RTL. Status colours reuse the semantic tokens. ---- */
.cal-bar { display: grid; gap: var(--space-3); }
.cal-title { font-size: var(--text-lg); margin-inline: var(--space-3); }
.cal-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); padding: 0; font-size: var(--text-sm); }
.cal-legend li { display: flex; align-items: center; gap: var(--space-2); }
.cal-swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid currentColor; }
.st-new { background: var(--color-info-bg); color: var(--color-info-fg); }
.st-confirmed { background: #E9E4F8; color: #3B2D8A; }
.st-preparing { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.st-ready { background: var(--color-success-bg); color: var(--color-success-fg); }
.st-completed { background: var(--color-neutral-bg); color: var(--color-neutral-fg); }
.st-cancelled { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.cal-month { border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow-1); }
.cal-head, .cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-wd { background: var(--color-bg); padding: var(--space-2); text-align: center; font-weight: 700; font-size: var(--text-sm); color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); }
.cal-cell { min-height: 118px; padding: var(--space-1); border-inline-start: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-cell:first-child { border-inline-start: 0; }
.cal-cell.is-out { background: var(--color-bg); }
.cal-cell.is-out .cal-num { opacity: .5; }
.cal-cell.is-today { box-shadow: inset 0 0 0 2px var(--color-primary); }
.cal-num { display: flex; justify-content: space-between; align-items: center; font-weight: 700; text-decoration: none; color: var(--color-text); padding: 2px 6px; border-radius: 6px; min-height: 28px; }
.cal-num:hover { background: var(--color-bg); }
.cal-count { background: var(--color-chrome); color: var(--white); border-radius: var(--radius-pill); font-size: .75rem; min-width: 22px; text-align: center; padding: 0 6px; }
.cal-chip { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; padding: 3px 6px; border-radius: 6px; text-decoration: none; font-size: .8rem; line-height: 1.35; border: 1px solid transparent; }
.cal-chip:hover { border-color: currentColor; }
.cal-time { font-weight: 700; }
.cal-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-where { flex-basis: 100%; opacity: .85; }
.cal-st { font-size: .72rem; opacity: .9; }
.cal-chip.st-cancelled .cal-who { text-decoration: line-through; }
.cal-more { font-size: .8rem; padding: 0 6px; }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
.cal-col { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.cal-col.is-today { box-shadow: inset 0 0 0 2px var(--color-primary); }
.cal-col h2 { font-size: var(--text-base); margin: 0 0 var(--space-1); }
.cal-col h2 a { text-decoration: none; color: inherit; }
.flt-group { border: 1px solid var(--color-border); border-radius: var(--radius-control); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; padding: var(--space-2) var(--space-3); margin: 0; min-width: 0; }
.flt-group legend { font-weight: 700; font-size: var(--text-sm); padding: 0 var(--space-2); }
.flt-group .field { margin: 0; }
@media (max-width: 900px) {
    .cal-week { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    /* phones: the month shows only the day number and a count; tap a day to see its parties */
    .cal-cell { min-height: 52px; padding: 2px; }
    .cal-cell .cal-chip, .cal-cell .cal-more { display: none; }
    .cal-cell.has-events { background: var(--color-info-bg); }
    .cal-num { flex-direction: column; gap: 2px; justify-content: center; text-align: center; padding: 2px; }
    .cal-wd { padding: var(--space-1); font-size: .7rem; }
    .cal-title { flex-basis: 100%; margin: var(--space-2) 0 0; }
}
@media print { .cal-chip { border: 1px solid #999; } }

/* ---- Execution team ---- */
.exec-contact .exec-phone strong { font-size: var(--text-lg); }
.exec-contact .actions .btn { min-height: 44px; min-width: 96px; justify-content: center; }
@media (max-width: 700px) { .exec-contact .actions { display: grid; grid-template-columns: 1fr 1fr; } .exec-contact .actions .btn:first-child { grid-column: 1 / -1; } }
.alert-warn    { background: var(--color-warning-bg); border-color: var(--color-warning-fg); color: var(--color-warning-fg); }

/* ---- Item pictures ---- */
.item-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border); vertical-align: middle; background: var(--color-bg); }
.item-thumb--none { display: inline-block; background: repeating-linear-gradient(45deg, var(--color-bg), var(--color-bg) 6px, var(--color-surface) 6px, var(--color-surface) 12px); }
.item-thumb-link { display: inline-block; line-height: 0; margin-inline-end: var(--space-2); }
.item-photo { width: 160px; height: 160px; object-fit: cover; border-radius: var(--radius-control); border: 1px solid var(--color-border); display: block; margin: var(--space-2) 0; }
.img-current { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media print { .item-thumb { width: 36px; height: 36px; } }