/*
 * «المناسبات» (js/occasions.js, docs/adr/0016): the coming 30 days (also on the calendar page),
 * birthdays, the catalog of occasions with a switch each, the settings of both kinds, and the
 * occasion, employee and import dialogs. Interior-page language as the schedule pages: flat panels
 * on hairlines, radius 0 on structure, 4px on controls. What is scheduled is marked with
 * --fm-accent, as on the calendar; colours are tokens only.
 */

body[data-view='occasions'] .actionbar { display: none; }
#view-occasions { display: grid; gap: var(--space-5); align-content: start; padding-block-end: var(--space-7); }
#view-occasions[hidden] { display: none; }
#view-occasions .page-head { padding-block-end: 0; }

.occ-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap: var(--space-5); align-items: start; }
.occ-head { align-items: center; }
.occ-head .switch { flex: none; }
.occ-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.occ-actions:not(:has(> :not([hidden]))) { display: none; }

/* Posters being drawn in this browser. */
.occ-progress { padding: var(--space-3) var(--space-4); border-inline-start: 3px solid var(--fm-accent); background: color-mix(in srgb, var(--fm-accent) 8%, var(--fm-surface-raised)); font: var(--type-small); color: var(--fm-text); }
.occ-progress.is-done { border-inline-start-color: var(--fm-online); }

.occ-warn { padding: var(--space-3) var(--space-4); border: 1px solid var(--fm-warning); background: color-mix(in srgb, var(--fm-warning) 8%, var(--fm-surface)); font: var(--type-small); }
.occ-private { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--fm-surface-raised); border: 1px solid var(--fm-border); font: var(--type-small); color: var(--fm-text-secondary); }
.occ-private .icon { color: var(--fm-primary-text); margin-block-start: 2px; }
.occ-empty, .occ-up-empty { padding-block: var(--space-3); font: var(--type-small); color: var(--fm-text-secondary); list-style: none; }

/* ---------- The coming 30 days: a date block, what it is, and whether its poster is ready ---------- */
.occ-up { display: grid; list-style: none; padding: 0; }
.occ-up-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding-block: var(--space-3); border-block-end: 1px solid var(--fm-border); }
.occ-up-item:last-child { border-block-end: 0; }
.occ-up-date {
  display: grid; justify-items: center; align-content: center; min-height: 52px; padding: 4px 0;
  border-inline-start: 3px solid var(--fm-accent); background: color-mix(in srgb, var(--fm-accent) 12%, var(--fm-surface-raised));
}
.occ-up-date b { font: 600 20px/24px 'Inter', var(--fm-font); }
.occ-up-date small { font: 400 11px/16px var(--fm-font); color: var(--fm-text-secondary); }
.occ-up-item.is-today .occ-up-date { border-inline-start-color: var(--fm-primary-text); }
.occ-up-main { display: grid; gap: 2px; min-width: 0; }
.occ-up-title { font: var(--type-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.occ-up-main small { font: var(--type-small); color: var(--fm-text-secondary); }
.occ-up-note { color: var(--fm-text); }
.occ-up-chips { display: flex; gap: var(--space-1); flex-wrap: wrap; justify-content: flex-end; }
.occ-up--compact .occ-up-item { padding-block: var(--space-2); }
@media (max-width: 639px) {
  .occ-up-item { grid-template-columns: 48px minmax(0, 1fr); }
  .occ-up-chips { grid-column: 2; justify-content: flex-start; }
}

/* ---------- The catalog: a group per kind, a row per occasion ---------- */
.occ-group { border-block-start: 1px solid var(--fm-border); }
.occ-group > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  min-height: 48px; padding-block: var(--space-3); cursor: pointer; list-style: none; font: var(--type-label);
}
.occ-group > summary::-webkit-details-marker { display: none; }
.occ-group > summary::before { content: ''; flex: none; align-self: center; width: 7px; height: 7px; border-block-end: 2px solid currentColor; border-inline-end: 2px solid currentColor; transform: rotate(45deg); margin-inline-end: var(--space-1); transition: transform var(--motion-fast) var(--ease-out); }
.occ-group:not([open]) > summary::before { transform: rotate(calc(var(--dir) * 135deg)); }
.occ-group > summary span { flex: 1; }
.occ-group > summary small { font: var(--type-small); color: var(--fm-text-secondary); }
.occ-group > summary:focus-visible { outline: 2px solid var(--fm-focus); outline-offset: 2px; }
.occ-list { display: grid; list-style: none; padding: 0 0 var(--space-3); }
.occ-row { display: grid; grid-template-columns: 44px 36px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding-block: var(--space-3); border-block-start: 1px solid var(--fm-border); }
.occ-row.is-off .occ-main { color: var(--fm-text-secondary); }
.occ-switch { min-height: 40px; }
.occ-art { position: relative; display: grid; place-items: center; width: 36px; aspect-ratio: 9 / 16; overflow: hidden; background: var(--fm-device-bg); color: var(--fm-stage-text); }
.occ-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.occ-art .icon { width: 16px; height: 16px; }
.occ-row.is-off .occ-art { opacity: .5; }
.occ-main { display: grid; gap: 1px; min-width: 0; }
.occ-name { font: var(--type-label); overflow-wrap: anywhere; }
.occ-line { font: var(--type-small); color: var(--fm-text-secondary); overflow-wrap: anywhere; }
.occ-when { font: 400 12px/18px var(--fm-font); color: var(--fm-text-secondary); }
.occ-side { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
.occ-side .btn { height: 36px; padding: 0 var(--space-3); font: 600 13px/20px var(--fm-font); }
.occ-source { font: var(--type-small); color: var(--fm-link); }
@media (max-width: 639px) {
  .occ-row { grid-template-columns: 44px 36px minmax(0, 1fr); }
  .occ-side { grid-column: 3; justify-content: flex-start; }
}

/* ---------- Employees (admins) ---------- */
.occ-people { display: grid; gap: var(--space-3); }
.emp-table { border-block-start: 1px solid var(--fm-border); }
.emp-row .admin-row-meta span + span::before { content: '·'; margin-inline-end: var(--space-3); color: var(--fm-border-strong); }
.emp-row .admin-actions { align-items: center; }
.emp-row .pill { height: 28px; }
.emp-all { padding: 0; justify-content: flex-start; }

/* ---------- Settings of each kind ---------- */
.occ-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.occ-settings .occ-set-wide { grid-column: 1 / -1; }
.occ-settings .entry-group { padding-block-end: 0; border-block-end: 0; }
.occ-settings .form-actions { padding: 0; justify-content: flex-start; }
.occ-settings textarea.input { min-height: 72px; padding-block: var(--space-2); line-height: 24px; resize: vertical; }
.occ-set-window { align-content: start; }
.occ-set-window .entry-allday { align-self: start; min-height: 32px; }
.occ-set-window .week-times .input { flex: 1 1 96px; }
.occ-set-rule { margin: 0; padding: 0; border: 0; min-width: 0; }
.occ-set-rule legend { padding: 0; margin-block-end: var(--space-2); }
.occ-set-rule label { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; font: var(--type-small); }
.occ-settings .input:disabled { background: var(--fm-disabled-bg); color: var(--fm-disabled-text); box-shadow: none; cursor: not-allowed; }
@media (max-width: 759px) { .occ-settings { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The calendar page: the coming 30 days, compact ---------- */
.occ-soon .panel-head .text-link { min-height: 32px; font: var(--type-small); font-weight: 600; }

/* ---------- Dialogs ---------- */
.dialog--occ[open] {
  width: min(1040px, calc(100vw - 2 * var(--margin))); max-width: none;
  height: min(820px, calc(100vh - 48px));
  grid-template-columns: minmax(0, 1fr) minmax(280px, 40%);
  overflow: hidden;
}
.occ-form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-height: 0; overflow-y: auto; }
.occ-form .entry-body:disabled .seg-radio label { cursor: default; }
.occ-preview { padding-block-start: 56px; }
.occ-preview .mk-device { height: min(560px, calc(100vh - 260px)); }
.dialog--occ .authform-error { margin: 0 var(--space-5) var(--space-3); }
@media (max-width: 899px) {
  .dialog--occ[open] { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 32px); overflow-y: auto; }
  .occ-preview { order: -1; border-inline-start: 0; border-block-end: 1px solid var(--fm-border); }
  .occ-preview .mk-device { height: auto; width: min(200px, 56vw); }
  .occ-form { overflow: visible; }
}

.dialog--emp[open], .dialog--import[open] { grid-template-columns: minmax(0, 1fr); width: min(560px, calc(100vw - 2 * var(--margin))); max-height: calc(100vh - 48px); overflow-y: auto; }
.dialog--import[open] { width: min(860px, calc(100vw - 2 * var(--margin))); }
.emp-consent { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; font: var(--type-body); cursor: pointer; }
.emp-consent input { accent-color: var(--fm-primary); width: 18px; height: 18px; }
.emp-photo { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.emp-photo canvas { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 2px var(--fm-primary-text); }
.emp-photo .file-pick { flex: 1 1 auto; min-width: 0; }
.dialog--import .occ-private { margin: 0; }

.imp-summary { font: var(--type-label); }
.imp-problems { display: grid; gap: var(--space-2); padding: 0; list-style: none; font: var(--type-small); color: var(--fm-warning); }
.imp-problems:empty { display: none; }
.imp-table { display: grid; max-height: min(420px, 50vh); overflow-y: auto; border: 1px solid var(--fm-border); }
.imp-row { display: grid; grid-template-columns: 44px minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, 1fr) 56px minmax(0, 1.4fr); align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--fm-border); font: var(--type-small); }
.imp-row:last-child { border-block-end: 0; }
.imp-row > span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.imp-row small { color: var(--fm-text-secondary); font-size: 11px; }
.imp-head { position: sticky; inset-block-start: 0; z-index: 1; background: var(--fm-surface); color: var(--fm-text-secondary); font-weight: 600; }
.imp-n { color: var(--fm-text-secondary); font-family: 'Inter', var(--fm-font); }
.imp-row.is-bad { background: color-mix(in srgb, var(--fm-warning) 6%, transparent); }
.imp-bad { color: var(--fm-warning); font-weight: 600; }
.imp-row .chip { justify-self: start; }
@media (max-width: 639px) {
  .imp-row { grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr); }
  .imp-row > span:nth-child(4), .imp-row > span:nth-child(5) { display: none; }
  .imp-row > span:nth-child(6) { grid-column: 2 / -1; }
}

/* An entry kept by «المناسبات», opened from the calendar: read only, with a way there. */
.dialog--entry .entry-kept { margin: 0 var(--space-5) var(--space-3); }
.dialog--entry .entry-kept .text-link { min-height: 0; display: inline; }
.occ-form .entry-body { align-content: start; }