/* Operational Rota presentation built on the shared LitL application foundation. */
.opsrota-app {
  --ops-ink: var(--litl-ink);
  --ops-muted: var(--litl-muted);
  --ops-border: var(--litl-border);
  --ops-brand: var(--litl-brand);
  --ops-focus: var(--litl-focus);
  color: var(--ops-ink);
  background: radial-gradient(circle at 82% 4%, rgb(32 128 159 / .08), transparent 24rem), var(--litl-canvas);
}

.opsrota-app .topbar { background: rgb(255 255 255 / .92); border-color: rgb(220 226 234 / .9); backdrop-filter: blur(14px); }
.opsrota-app .topbar-inner { max-width: 1280px; min-height: 60px; }
.opsrota-app .menu-group { flex-wrap: wrap; }
.opsrota-app .menu-btn:hover,
.opsrota-app .menu-btn:focus-visible { color: var(--ops-brand); background: #edf5f7; }
.opsrota-app .menu-panel { padding: .35rem; border-color: var(--ops-border); border-radius: var(--litl-radius); box-shadow: var(--litl-shadow-lg); }
.opsrota-app .menu-panel button { border-radius: .45rem; }
.opsrota-app .save-status { border-color: var(--ops-border); background: var(--litl-surface-soft); }

.opsrota-app .page { max-width: 1280px; padding-top: 24px; }
.opsrota-app .view-intro { margin-bottom: 20px; }
.opsrota-app .view-intro h1 { margin: 0; color: #152c38; font-size: clamp(1.75rem, 3vw, 2.35rem); letter-spacing: -.035em; line-height: 1.12; }
.opsrota-app .view-intro .desc { max-width: 52rem; margin: .75rem 0 0; color: var(--ops-muted); }

.opsrota-app .card { border-color: var(--ops-border); border-radius: var(--litl-radius-lg); box-shadow: var(--litl-shadow-sm); }
.opsrota-app .main-card,
.opsrota-app .editor-main,
.opsrota-app .editor-side { padding: clamp(16px, 2.5vw, 24px); }
.opsrota-app h2,
.opsrota-app h3 { color: var(--ops-ink); letter-spacing: -.015em; }
.opsrota-app .muted,
.opsrota-app .desc { color: var(--ops-muted); }

.opsrota-app .btn { border-color: var(--litl-border-strong); border-radius: var(--litl-radius-sm); font-weight: 650; }
.opsrota-app .btn:hover { border-color: #9fabb9; background: #f3f6f8; }
.opsrota-app .btn-primary { border-color: var(--ops-brand); background: var(--ops-brand); }
.opsrota-app .btn-primary:hover { border-color: var(--litl-brand-strong); background: var(--litl-brand-strong); }
.opsrota-app .btn-danger { color: var(--litl-danger); }
.opsrota-app input:not([type="checkbox"]):not([type="radio"]),
.opsrota-app select,
.opsrota-app textarea { border-color: var(--litl-border-strong); border-radius: var(--litl-radius-sm); }
.opsrota-app input:not([type="checkbox"]):not([type="radio"]):focus,
.opsrota-app select:focus,
.opsrota-app textarea:focus { outline: none; border-color: var(--ops-focus); box-shadow: 0 0 0 3px rgb(32 128 159 / .16); }
.opsrota-app .rota-scroll-wrap,
.opsrota-app .pattern-grid { border-color: var(--ops-border); border-radius: var(--litl-radius); }
.opsrota-app .modal-backdrop { background: rgb(15 23 42 / .56); backdrop-filter: blur(4px); }
.opsrota-app .modal-card { border: 1px solid rgb(255 255 255 / .7); border-radius: var(--litl-radius-lg); box-shadow: var(--litl-shadow-lg); }

@media (max-width: 720px) {
  .opsrota-app .topbar-inner { align-items: flex-start; flex-direction: column; }
  .opsrota-app .litl-brand-copy small { display: none; }
  .opsrota-app .save-status { align-self: stretch; justify-content: center; }
  .opsrota-app .litl-page-intro { padding: 1.25rem; }
  .opsrota-app .panel-title { align-items: flex-start; flex-direction: column; }
}


.opsrota-app .calculation-notice {
  position: fixed; z-index: 1200; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; min-width: min(360px, calc(100vw - 24px));
  padding: 11px 16px; border: 1px solid #9bc9d8; border-radius: var(--litl-radius);
  background: #effaff; color: var(--ops-ink); box-shadow: var(--litl-shadow-lg);
}
.opsrota-app .calculation-notice.hidden { display: none; }
.opsrota-app .calculation-notice small { display: block; margin-top: 2px; color: var(--ops-muted); }
.opsrota-app .calculation-cog { display: inline-block; color: var(--ops-brand); font-size: 1.6rem; animation: opsrota-cog-spin 1.4s linear infinite; }
@keyframes opsrota-cog-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .opsrota-app .calculation-cog { animation: none; } }

.opsrota-app .status-scheduled-off,
.opsrota-app .week-calendar-block.is-scheduled-off,
.opsrota-app .week-calendar-legend .is-scheduled-off,
.opsrota-app .month-calendar-hour.is-scheduled-off { background: #475569 !important; border-color: #334155; color: #fff; }
.opsrota-app .appliance-availability-editor { margin: 1rem 0; padding: 1rem; border: 1px solid #cbd5e1; border-radius: 12px; }
.opsrota-app .appliance-available-period { margin: .8rem 0; padding: .8rem; border: 1px solid #cbd5e1; border-radius: 10px; }
.opsrota-app .availability-weekdays { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .8rem; }
.opsrota-app .availability-weekdays label { display: inline-flex; align-items: center; gap: .25rem; }
.opsrota-app .availability-weekdays input { width: auto; }
.opsrota-app .availability-time-range { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; margin: .6rem 0; }
.opsrota-app .availability-time-range label { display: grid; gap: .25rem; }
.opsrota-app .availability-error { color: #b91c1c; font-weight: 600; }

.opsrota-app .file-lock-widget { margin-left: auto; }
.opsrota-app #fileLockBtn[data-lock-state="locked"] { background: #e2e8f0; color: #334155; }
.opsrota-app #fileLockBtn[data-lock-state="unlocked"] { background: #dcfce7; color: #166534; }
.opsrota-app #fileLockBtn[data-lock-state="blocked"] { background: #fee2e2; color: #991b1b; }
.opsrota-app .file-lock-notice { padding: 12px 16px; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 10px; color: #334155; }
.opsrota-app.file-locked .availability-edit { cursor: default; }
.opsrota-app.file-locked button:disabled { opacity: .55; cursor: not-allowed; }

.opsrota-app .pocket-calendar-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0 10px; }
.opsrota-app .pocket-calendar-weekdays, .opsrota-app .pocket-calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; text-align:center; }
.opsrota-app .pocket-calendar-weekdays { font-size:.8rem; color:#64748b; margin-bottom:6px; }
.opsrota-app .pocket-calendar-day { min-height:38px; border:1px solid #bfdbfe; border-radius:7px; color:#1e40af; background:#eff6ff; cursor:pointer; font:inherit; }
.opsrota-app .pocket-calendar-day:disabled { border-color:transparent; background:#f8fafc; color:#94a3b8; cursor:default; }
.opsrota-app .pocket-calendar-day.is-selected { color:white; background:#1d4ed8; border-color:#1d4ed8; font-weight:700; }
.opsrota-app .pocket-calendar-day:focus-visible { outline:3px solid #93c5fd; outline-offset:2px; }

.opsrota-app .draft-start-link { border:0; padding:0 3px; background:transparent; color:#92400e; font:inherit; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.opsrota-app .draft-start-link:hover { color:#451a03; }
.opsrota-app .rota-comparison-frame.has-review-comparison { margin-top:18px; padding:0 8px 8px; border:2px solid #cbd5e1; border-radius:12px; }
.opsrota-app .rota-comparison-frame.is-review-preview { border-color:#f59e0b; background:#fffdf8; }
.opsrota-app .rota-comparison-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:-14px 4px 14px; padding:8px 12px; border:1px solid #cbd5e1; border-radius:10px; background:white; color:#334155; }
.opsrota-app .is-review-preview .rota-comparison-controls { border-color:#f59e0b; background:#fffbeb; color:#78350f; }
.opsrota-app .rota-comparison-controls p { margin:4px 0 0; }
.opsrota-app .rota-review-switch { white-space:nowrap; }
.opsrota-app .rota-review-switch .switch input:checked + .slider { background:#f59e0b; }
.opsrota-app .rota-review-switch .switch input:focus-visible + .slider { outline:3px solid #fcd34d; outline-offset:3px; }

.opsrota-app .litl-function-nav { display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid #cbd5e1; margin:0 0 20px; }
.opsrota-app .litl-function-nav-item { border:0; border-bottom:3px solid transparent; background:transparent; padding:12px 18px; color:#475569; font:inherit; font-weight:700; cursor:pointer; }
.opsrota-app .litl-function-nav-item.tab-btn-active { color:#0369a1; border-bottom-color:#0284c7; background:#f0f9ff; }
.opsrota-app .setup-entry { padding:14px 0; border-bottom:1px solid #e2e8f0; }
.opsrota-app .setup-entry-fields,.opsrota-app .setup-add-form { display:flex; flex-wrap:wrap; align-items:end; gap:12px; }
.opsrota-app .setup-entry-fields label,.opsrota-app .setup-add-form label { display:grid; gap:5px; flex:1; min-width:150px; }
.opsrota-app .setup-entry-actions { display:flex; gap:6px; flex-wrap:wrap; }
.opsrota-app .setup-add-form { margin-top:24px; }
.opsrota-app .skill-rank-preferences { margin-top:12px; }
.opsrota-app .skill-rank-row { display:flex; align-items:center; gap:8px; margin-top:8px; }
.opsrota-app .skill-rank-row span { flex:1; }
.opsrota-app .rank-badge { display:inline-block; background:#e0f2fe; color:#075985; border-radius:5px; padding:2px 5px; font-size:.75rem; font-weight:700; margin-right:5px; }

.opsrota-app .rota-date-button { border:0; background:transparent; font:inherit; font-weight:700; color:inherit; padding:6px 8px; cursor:pointer; text-decoration:underline dotted; text-underline-offset:4px; }
.opsrota-app .rota-date-button:hover { color:#0369a1; background:#f0f9ff; border-radius:6px; }
.opsrota-app .rota-date-button:focus-visible { outline:2px solid #0284c7; outline-offset:2px; }
.opsrota-app .rota-now-label { font-size:.8rem; font-weight:700; color:#dc2626; white-space:nowrap; }
.opsrota-app .rota-now-table { position:relative; width:max-content; min-width:100%; }
.opsrota-app .rota-now-marker { position:absolute; bottom:0; width:2px; background:#dc2626; z-index:1; pointer-events:none; }
.opsrota-app .rota-now-marker::before { content:''; position:absolute; top:-5px; left:-3px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid #dc2626; }