/* EWETOPIA — shared chrome for all modules */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --sage:#8da07a; --sage-dark:#7d9069;
  --slate:#446488; --slate-dark:#2d3d52;
  --cream:#edede5; --cream-light:#f5f5ef; --warm-white:#faf9f7;
  --tan:#deded4; --tan-border:#c8c8be;
  --text:#1a1a1a; --text-2:#6b6b6b; --text-3:#9a9a9a;
  --gold-accent:#d4d4a8; --amber:#d4a832;
  --crimson:#c45b4a;
}

html { background: url('https://royal.laemmle.com/web_images/black-laurels-bg.jpg') top left / auto repeat fixed var(--slate-dark); }
body { font-family: 'Source Serif 4', Georgia, serif; background: transparent; color: var(--text); font-size: 13px; -webkit-font-smoothing: antialiased; }

button { font-family: 'DM Sans', sans-serif; cursor: pointer; padding: 8px 14px; border: 1px solid var(--cream); border-radius: 3px; background: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--slate-dark); }
button:hover:not(:disabled) { background: var(--cream-light); border-color: var(--sage); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary { background: var(--sage); color: #fff; border-color: var(--sage-dark); }
button.primary:hover:not(:disabled) { background: var(--sage-dark); }
button.busy { background: #fff; color: var(--text-2); cursor: progress; }
button.busy .spin { display: inline-block; width: 10px; height: 10px; border: 1.5px solid var(--tan-border); border-top-color: var(--sage); border-radius: 50%; vertical-align: -1px; margin-right: 6px; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

a { color: var(--slate); text-decoration: none; }
a:hover { color: var(--slate-dark); }

/* ─── PAGE FRAME ─── */
.page-frame { max-width: 1360px; margin: 0 auto; background: var(--cream-light); box-shadow: 0 8px 40px rgba(0,0,0,0.25); min-height: 100vh; display: flex; flex-direction: column; }

/* ─── TOP NAV ─── */
.topnav { background: var(--slate-dark); padding: 0 30px; display: flex; align-items: center; height: 60px; gap: 24px; }
.topnav .brand { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 4px; color: #fff; text-decoration: none; }
.topnav .brand:hover { color: #fff; }
.topnav .nav-tabs { display: flex; gap: 24px; align-items: center; height: 100%; margin-left: 24px; }
.topnav .nav-tab { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.75); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; line-height: 1; }
.topnav .nav-tab.active { color: #fff; border-bottom-color: var(--sage); }
.topnav .nav-tab:hover { color: #fff; }
.topnav .who { margin-left: auto; font-family: 'DM Sans', sans-serif; font-size: 11px; color: rgba(255,255,255,0.7); }
.topnav .who #who { color: #fff; font-weight: 600; }
.topnav .who a { color: var(--gold-accent); cursor: pointer; margin-left: 12px; }
.topnav .who a:hover { color: #fff; }

/* ─── WELCOME ─── */
.welcome { padding: 24px 30px 6px; }
.welcome .greeting { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 3px; color: var(--slate-dark); }
.welcome .meta { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--text-3); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 4px; }

/* ─── SECTIONS / CARDS ─── */
.section { padding: 18px 30px 0; }
.section-label { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--text-3); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 0 30px 18px; }
@media (max-width: 760px) { .card-grid { grid-template-columns: 1fr; } }
.card { background: var(--warm-white); border: 1px solid var(--tan-border); border-radius: 4px; padding: 22px 24px; display: flex; flex-direction: column; min-height: 160px; }
.card h3 { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 3px; color: var(--slate-dark); margin-bottom: 4px; }
.card .desc { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; color: var(--text-2); font-size: 13px; margin-bottom: 18px; flex-grow: 1; }
.card .card-action { display: flex; gap: 10px; align-items: center; }
.card .external { font-family: 'DM Sans', sans-serif; font-size: 10px; color: var(--text-3); letter-spacing: 1px; text-transform: uppercase; }
.card-grid .card { min-height: 0; }
.card-grid .card h3 { margin-bottom: 14px; }

/* ─── DCU TABLE ─── */
.dcu-wrap { padding: 0 30px 32px; }
.dcu-card { background: var(--warm-white); border: 1px solid var(--tan-border); border-radius: 4px; padding: 22px 24px; }
.dcu-card h3 { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 3px; color: var(--slate-dark); margin-bottom: 4px; }
.dcu-card .desc { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; color: var(--text-2); font-size: 13px; margin-bottom: 16px; }
.dcu-table { width: 100%; border-collapse: collapse; font-family: 'DM Sans', sans-serif; font-size: 13px; }
.dcu-table th { text-align: left; font-size: 10px; font-weight: 600; color: var(--text-3); letter-spacing: 1.5px; text-transform: uppercase; padding: 8px 12px; border-bottom: 1px solid var(--tan); }
.dcu-table td { padding: 14px 12px; border-bottom: 1px solid var(--cream); color: var(--text); vertical-align: middle; }
.dcu-table tr:last-child td { border-bottom: none; }
.dcu-table .theatre { font-weight: 600; color: var(--slate-dark); }
.dcu-table .last-seen { color: var(--text-2); font-size: 12px; }
.dcu-table .disk { color: var(--text-2); font-size: 12px; }
.dcu-table .disk.warn { color: var(--amber); font-weight: 600; }
.dcu-table .actions { text-align: right; }
.dcu-table .action-note { display: block; margin-top: 4px; font-size: 11px; letter-spacing: 0.2px; line-height: 1.3; }
.dcu-table .action-note.success { color: var(--sage-dark); }
.dcu-table .action-note.failure { color: var(--crimson); }

.status-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #aaa; }
.dot.running       { background: var(--sage); }
.dot.failed        { background: var(--crimson); }
.dot.busy          { background: var(--slate); }
.dot.stopped       { background: var(--amber); }
.dot.unreachable   { background: #aaa; }
.dot.not_installed { background: #aaa; }
.dot.unknown       { background: #aaa; }
.status-pill.running       { color: var(--sage-dark); }
.status-pill.failed        { color: var(--crimson); }
.status-pill.busy          { color: var(--slate); }
.status-pill.stopped       { color: #b08a1c; }
.status-pill.unreachable   { color: var(--text-3); }
.status-pill.not_installed { color: var(--text-3); }
.status-pill.unknown       { color: var(--text-3); }

/* Freshness indicator */
.dcu-card .freshness { font-family: 'DM Sans', sans-serif; font-size: 10px; color: var(--text-3); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; }
.dcu-card .freshness.stale { color: var(--amber); }

/* Cleanup row */
.dcu-cleanup { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--cream); display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.cleanup-button { background: var(--crimson); color: #fff; border: 1px solid var(--crimson); border-radius: 3px; padding: 10px 18px; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
.cleanup-button:hover:not(:disabled) { background: #a84838; border-color: #a84838; }
.cleanup-button:disabled { opacity: 0.55; cursor: progress; }
.cleanup-result { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--text-2); line-height: 1.55; white-space: pre-line; flex: 1; min-width: 240px; }
.cleanup-result.success { color: var(--sage-dark); }
.cleanup-result.failure { color: var(--crimson); }
.cleanup-result strong { color: var(--slate-dark); font-weight: 600; }

/* ─── COLLAPSIBLE STATUS CARDS ─── */
.dcu-wrap .dcu-card + .dcu-card { margin-top: 18px; }
.collapse-head { display: flex; align-items: center; gap: 14px; cursor: pointer; user-select: none; }
.collapse-head h3 { margin-bottom: 0; }
.collapse-head .head-note { font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-3); }
.collapse-head .head-note.fail { color: var(--crimson); font-weight: 700; }
.collapse-head .chev { margin-left: auto; color: var(--text-3); font-size: 15px; line-height: 1; transition: transform 0.15s ease; transform: rotate(90deg); }
.collapsible.collapsed .chev { transform: rotate(0deg); }
.collapsible .card-body { margin-top: 14px; }
.collapsible.collapsed .card-body { display: none; }

/* ─── SHEPHERD MODULE ─── */
.shepherd-actions { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
#shepherd-run-status { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--text-2); }
.shepherd-empty { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--text-3); font-style: italic; padding: 6px 0; }
.shepherd-runs { border-top: 1px solid var(--cream); }
.shepherd-runs details.run { border-bottom: 1px solid var(--cream); }
.shepherd-runs summary { display: flex; align-items: center; gap: 14px; padding: 10px 4px; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 12px; list-style: none; }
.shepherd-runs summary::-webkit-details-marker { display: none; }
.run-status { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.run-status.ok { background: var(--sage); }
.run-status.fail { background: var(--crimson); }
.run-when { font-weight: 600; color: var(--slate-dark); min-width: 112px; }
.run-source { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-3); min-width: 66px; }
.run-source.manual { color: var(--slate); font-weight: 700; }
.run-mode { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-3); }
.run-cud { color: var(--text-2); }
.run-unmatched { color: var(--amber); font-weight: 600; font-size: 11px; }
.run-secs { margin-left: auto; color: var(--text-3); font-size: 11px; }
.run-detail { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.6; color: var(--text-2); background: var(--cream-light); border: 1px solid var(--cream); border-radius: 3px; padding: 10px 12px; margin: 0 4px 12px; overflow-x: auto; white-space: pre; }

/* ─── BOX OFFICE REPORTS MODULE ─── */
.bor-actions { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.bor-run-status { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--text-2); }
.bor-schedule { font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; }
.bor-theatres { border-top: 1px solid var(--cream); }
.bor-theatres details.th { border-bottom: 1px solid var(--cream); }
.bor-theatres summary { display: flex; align-items: center; gap: 14px; padding: 12px 4px; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 13px; list-style: none; }
.bor-theatres summary::-webkit-details-marker { display: none; }
.th-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #aaa; }
.th-dot.ok { background: var(--sage); }
.th-dot.partial { background: var(--amber); }
.th-dot.fail { background: var(--crimson); }
.th-dot.none { background: #aaa; }
.th-name { font-weight: 700; color: var(--slate-dark); min-width: 120px; }
.th-count { color: var(--text-2); }
.th-up { color: var(--sage-dark); font-weight: 600; }
.th-skip { color: var(--text-3); }
.th-mail { color: var(--slate); font-weight: 600; }
.th-fail { color: var(--crimson); font-weight: 700; }
.th-when { margin-left: auto; color: var(--text-3); font-size: 11px; }
.th-films { width: 100%; border-collapse: collapse; font-family: 'DM Sans', sans-serif; font-size: 12px; margin: 2px 4px 14px; }
.th-films th { text-align: left; font-size: 9.5px; font-weight: 600; color: var(--text-3); letter-spacing: 1px; text-transform: uppercase; padding: 6px 10px; border-bottom: 1px solid var(--tan); }
.th-films td { padding: 9px 10px; border-bottom: 1px solid var(--cream-light); vertical-align: middle; }
.th-films td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.th-films td.film { font-weight: 600; color: var(--text); }
.th-films tr:last-child td { border-bottom: none; }
.badge { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; }
.badge.uploaded { background: #e7eede; color: var(--sage-dark); }
.badge.skipped  { background: #ececec; color: var(--text-3); }
.badge.nosales  { background: #f6ecca; color: #9a7a13; }
.badge.failed   { background: #f3ddd8; color: var(--crimson); }
.badge.emailed  { background: #dde6ef; color: var(--slate-dark); }
.badge.pending  { background: #ececec; color: var(--text-3); }
.badge.na       { background: transparent; color: var(--text-3); }
.bor-runlog { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--cream); }
.bor-runlog .rl-label { font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.bor-runlog .rl-row { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--text-2); padding: 5px 4px; display: flex; gap: 14px; align-items: center; }
.bor-runlog .rl-when { font-weight: 600; color: var(--slate-dark); min-width: 150px; }

/* ─── FOOTER ─── */
.footer-app { margin-top: auto; padding: 22px 30px; border-top: 1px solid var(--tan); background: var(--cream); font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--text-3); letter-spacing: 0.5px; }
.footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.footer-bottom { text-align: center; margin-top: 8px; font-style: italic; color: var(--text-3); font-size: 11px; }