/* Dark compatibility for existing Tailwind-heavy screens. */
.dark .bg-white, :root[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
.dark .bg-slate-50, :root[data-theme="dark"] .bg-slate-50,
.dark .bg-gray-50, :root[data-theme="dark"] .bg-gray-50 { background-color: var(--surface-secondary) !important; }
.dark .bg-\[\#fdfdfd\], :root[data-theme="dark"] .bg-\[\#fdfdfd\],
.dark .bg-\[\#f8fafc\], :root[data-theme="dark"] .bg-\[\#f8fafc\] { background-color: var(--bg) !important; }
.dark .border-gray-100, :root[data-theme="dark"] .border-gray-100,
.dark .border-slate-100, :root[data-theme="dark"] .border-slate-100,
.dark .border-gray-200, :root[data-theme="dark"] .border-gray-200,
.dark .border-slate-200, :root[data-theme="dark"] .border-slate-200 { border-color: var(--border-soft) !important; }
.dark .text-gray-900, :root[data-theme="dark"] .text-gray-900,
.dark .text-slate-900, :root[data-theme="dark"] .text-slate-900,
.dark .text-gray-800, :root[data-theme="dark"] .text-gray-800,
.dark .text-slate-800, :root[data-theme="dark"] .text-slate-800 { color: var(--text) !important; }
.dark .text-gray-700, :root[data-theme="dark"] .text-gray-700,
.dark .text-slate-700, :root[data-theme="dark"] .text-slate-700,
.dark .text-gray-600, :root[data-theme="dark"] .text-gray-600,
.dark .text-slate-600, :root[data-theme="dark"] .text-slate-600 { color: var(--text-secondary) !important; }
.dark .text-gray-500, :root[data-theme="dark"] .text-gray-500,
.dark .text-slate-500, :root[data-theme="dark"] .text-slate-500,
.dark .text-gray-400, :root[data-theme="dark"] .text-gray-400,
.dark .text-slate-400, :root[data-theme="dark"] .text-slate-400 { color: var(--muted) !important; }
.dark .shadow-sm, :root[data-theme="dark"] .shadow-sm,
.dark .shadow, :root[data-theme="dark"] .shadow,
.dark .shadow-lg, :root[data-theme="dark"] .shadow-lg,
.dark .shadow-xl, :root[data-theme="dark"] .shadow-xl,
.dark .shadow-2xl, :root[data-theme="dark"] .shadow-2xl { box-shadow: var(--shadow-md) !important; }
.dark .bg-green-100, :root[data-theme="dark"] .bg-green-100,
.dark .bg-green-50, :root[data-theme="dark"] .bg-green-50 { background-color: var(--success-soft) !important; }
.dark .text-green-700, :root[data-theme="dark"] .text-green-700,
.dark .text-green-600, :root[data-theme="dark"] .text-green-600 { color: var(--success) !important; }
.dark .bg-yellow-100, :root[data-theme="dark"] .bg-yellow-100,
.dark .bg-yellow-50, :root[data-theme="dark"] .bg-yellow-50,
.dark .bg-orange-100, :root[data-theme="dark"] .bg-orange-100,
.dark .bg-orange-50, :root[data-theme="dark"] .bg-orange-50 { background-color: var(--warning-soft) !important; }
.dark .text-yellow-800, :root[data-theme="dark"] .text-yellow-800,
.dark .text-yellow-700, :root[data-theme="dark"] .text-yellow-700,
.dark .text-yellow-600, :root[data-theme="dark"] .text-yellow-600,
.dark .text-orange-800, :root[data-theme="dark"] .text-orange-800,
.dark .text-orange-700, :root[data-theme="dark"] .text-orange-700,
.dark .text-orange-600, :root[data-theme="dark"] .text-orange-600 { color: var(--warning) !important; }
.dark .bg-red-100, :root[data-theme="dark"] .bg-red-100,
.dark .bg-red-50, :root[data-theme="dark"] .bg-red-50 { background-color: var(--danger-soft) !important; }
.dark .text-red-800, :root[data-theme="dark"] .text-red-800,
.dark .text-red-700, :root[data-theme="dark"] .text-red-700,
.dark .text-red-600, :root[data-theme="dark"] .text-red-600 { color: var(--danger) !important; }
.dark .bg-blue-100, :root[data-theme="dark"] .bg-blue-100,
.dark .bg-blue-50, :root[data-theme="dark"] .bg-blue-50,
.dark .bg-purple-100, :root[data-theme="dark"] .bg-purple-100,
.dark .bg-purple-50, :root[data-theme="dark"] .bg-purple-50 { background-color: var(--info-soft) !important; }
.dark .text-blue-800, :root[data-theme="dark"] .text-blue-800,
.dark .text-blue-700, :root[data-theme="dark"] .text-blue-700,
.dark .text-blue-600, :root[data-theme="dark"] .text-blue-600,
.dark .text-purple-800, :root[data-theme="dark"] .text-purple-800,
.dark .text-purple-700, :root[data-theme="dark"] .text-purple-700,
.dark .text-purple-600, :root[data-theme="dark"] .text-purple-600 { color: var(--info) !important; }
.dark .bg-gray-100, :root[data-theme="dark"] .bg-gray-100 { background-color: var(--surface-tertiary) !important; }

@media(max-width:768px){
  .app-page { padding: 16px; padding-bottom: 84px; }
  .app-header {
    height: 68px;
    padding-inline: 14px;
  }
  .theme-toggle { width: 70px; }
  .shell-content { padding: 0; }
  .header-search { display: none; }
  .header-date-pill { display: none; }
  .page-toolbar {
    padding: 12px;
    gap: 10px;
  }
  .page-toolbar__grow {
    min-width: 100%;
  }
  .dashboard-grid { grid-template-columns: 1fr; }
  .modal-overlay { padding: 14px; }
  .modal-shell { max-height: calc(100dvh - 28px); }
  .ops-summary-grid,
  .ops-filter-grid,
  .ops-form-layout,
  .ops-team-grid,
  .dashboard-optional-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-edit-banner,
  .dashboard-edit-actions__bar {
    padding-inline: 14px;
  }
  .ops-actions {
    justify-content: flex-start;
  }
  .ops-table {
    min-width: 860px;
  }
}
@media(max-width:1280px){
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-search {
    max-width: 288px;
  }
  .profile-trigger {
    max-width: 172px;
  }
  .profile-trigger__name {
    max-width: 112px;
  }
}
@media(min-width:640px){
  .dashboard-widget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  .dashboard-widget-grid > .widget-span-medium,
  .dashboard-widget-grid > .widget-span-large,
  .dashboard-widget-grid > .widget-span-wide {
    grid-column: 1 / -1;
  }
  .dashboard-widget-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media(min-width:1024px){
  .dashboard-workspace.is-editing {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  }
  .dashboard-editor-drawer {
    display: block;
    position: sticky;
    top: 94px;
    max-height: calc(100dvh - 120px);
    overflow: auto;
  }
  .dashboard-widget-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: 76px;
  }
  .dashboard-widget-grid > .widget-span-small,
  .dashboard-widget-grid > .widget-span-medium,
  .dashboard-widget-grid > .widget-span-large,
  .dashboard-widget-grid > .widget-span-wide {
    height: 100%;
  }
  .dashboard-widget-grid > .widget-span-small {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
  }
  .dashboard-widget-grid > .widget-span-medium {
    grid-column: span 4 / span 4;
    grid-row: span 4 / span 4;
  }
  .dashboard-widget-grid > .widget-span-large {
    grid-column: span 4 / span 4;
    grid-row: span 4 / span 4;
  }
  .dashboard-widget-grid > .widget-span-wide {
    grid-column: 1 / -1;
    grid-row: span 5 / span 5;
  }
}
@media(min-width:1280px){
  .dashboard-widget-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .dashboard-widget-grid > .widget-span-small {
    grid-column: span 3 / span 3;
  }
  .dashboard-widget-grid > .widget-span-medium {
    grid-column: span 4 / span 4;
  }
  .dashboard-widget-grid > .widget-span-large {
    grid-column: span 6 / span 6;
  }
  .dashboard-widget-grid > .widget-span-wide {
    grid-column: 1 / -1;
  }
  .dashboard-widget-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media(max-width:1023px){
  .dashboard-editor-mobile-sheet {
    display: grid;
    gap: 14px;
  }
}
@media(max-width:639px){
  .dashboard-mini-grid,
  .dashboard-mini-grid--triple {
    grid-template-columns: 1fr;
  }
  .dashboard-queue-row {
    grid-template-columns: 1fr;
  }
}

/* PDF PRINT TEMPLATE */
@media print {
   body * { visibility: hidden; }
   #os-print-container, #os-print-container * { visibility: visible; }
   #os-print-container { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; background: white; margin: 0; padding: 20px; box-sizing: border-box; }
   .pdf-checkbox { width: 14px; height: 14px; border: 1.5px solid #000; display: inline-block; margin-right: 5px; vertical-align: middle; }
   .pdf-checkbox.checked { background-color: #000; }
   .pdf-line { border-bottom: 1px solid #94a3b8; margin-top: 25px; height: 1px; }
   @page { size: A4 portrait; margin: 15mm; }
}