/* Dashboard-only palette. Guest pages do not load this stylesheet. */


@media screen {
  body { background: var(--bg); color: var(--text); }
  body::before { display: none; }
  .layout > aside {
    background: var(--sidebar);
    border-color: var(--line);
    box-shadow: 6px 0 24px rgb(0 0 0 / 12%);
  }
  .top { background: var(--sidebar); border-color: var(--line); }
  .top > span { color: var(--muted) !important; }
  #crumb { color: var(--text) !important; }

  /* Replace legacy inline light-theme colors without changing generated markup. */
  body [style*="color:"] { color: var(--text) !important; }
  body p[style*="color:"], body small[style*="color:"],
  body label[style*="color:"], body span.muted[style*="color:"] {
    color: var(--muted) !important;
  }
  p, small, label, .muted, .label, .finance-note, .row small,
  .menuinfo small, .photo-status, .barlabel, .ticket li, .foot {
    color: var(--muted);
  }
  h1, h2, h3, strong, .value, .row strong, .menuinfo strong { color: var(--text); }
  a, a:visited, .textbtn { color: var(--mint2); }
  a:hover, .textbtn:hover { color: var(--text); }
  .eyebrow, .good { color: var(--mint); }

  .card, .ticket, .insight, .form-card, .foot,
  #subscription .card, .payment-dialog, .item-editor {
    background: var(--surface) !important;
    color: var(--text);
    border-color: var(--line) !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%), var(--shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .card .card, .item-editor .card { background: var(--surface2) !important; }
  #subscription, #subscription .card h2 { color: var(--text); }
  #subscription .card p, #subscription .finance-note { color: var(--muted); }
  #subscription .card a { color: var(--mint2); }
  #subscription th, #subscription td, .row, .menuitem, .head {
    border-color: var(--line);
  }
  th { color: var(--mint2); }

  .nav button { color: var(--text); font-weight: 650; }
  .nav button:hover { background: var(--surface2); color: var(--text); border-color: var(--line); }
  .nav button.active {
    background: var(--selected);
    color: var(--on-action);
    border-color: var(--control-line);
    box-shadow: inset 4px 0 0 var(--mint);
    font-weight: 800;
  }

  .btn, .menu-action, button.menu-availability, #staffAuthButton {
    color: var(--text);
    background: var(--surface2);
    border: 1px solid var(--control-line);
    border-radius: 10px;
    box-shadow: none;
  }
  .btn:hover, .menu-action:hover, #staffAuthButton:hover {
    background: var(--surface-hover);
    border-color: var(--mint);
  }
  body .primary, body .btn.primary, body button.primary[style*="color:"] {
    background: var(--action);
    color: var(--on-action) !important;
    border-color: var(--action);
    box-shadow: 0 4px 12px rgb(0 0 0 / 16%);
  }
  body .primary:hover, body .btn.primary:hover {
    background: var(--action-hover);
    border-color: var(--mint);
  }
  button:disabled, .btn:disabled, input:disabled, select:disabled, textarea:disabled {
    opacity: 1;
    color: var(--muted) !important;
    background: var(--surface2) !important;
    border-color: var(--line) !important;
    box-shadow: none;
    transform: none;
  }
  #staffAuthButton { padding: 8px 14px; min-height: 40px; white-space: nowrap; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    background: var(--bg) !important;
    color: var(--text) !important;
    border-color: var(--control-line) !important;
  }
  input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
  :focus-visible { outline-color: var(--mint); }

  .status, .payment-neutral {
    background: var(--surface2);
    color: var(--text);
    border-color: var(--control-line);
  }
  .tag, .id, .occupied, .status.Ready, .status.Served {
    background: var(--success-surface);
    color: var(--success-text);
    border-color: var(--control-line);
  }
  /* Dark text stays readable on both pale backgrounds supplied by setMode. */
  #modeTag {
    background: var(--connection-surface);
    color: var(--connection-text) !important;
    border-color: var(--control-line);
  }
  .status.Preparing { background: var(--preparing-surface); color: var(--preparing-text); }
  .status.Paid { background: var(--paid-surface); color: var(--paid-text); }
  .table, .available { background: var(--surface2); color: var(--muted); border-color: var(--line); }
  .table b { color: var(--text); }
  .status.New, .status.Placed, .calls-count {
    background: var(--warning-surface);
    color: var(--warning-text);
  }
  .status.Cancelled, .menu-action.danger {
    background: var(--danger-surface);
    color: var(--danger-text);
  }
  #trialBanner { background: var(--warning-surface) !important; color: var(--warning-text) !important; }
  #trialBanner * { color: inherit; }
  #trialBanner .btn { color: var(--text); }

  .billing-plan-name { display: block; font-size: 1rem; font-weight: 650; color: var(--muted); }
  .billing-plan-price { display: block; margin-top: 8px; font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 850; letter-spacing: -.04em; line-height: 1.2; }
  .billing-plan-price small { font-size: .48em; font-weight: 650; letter-spacing: 0; }
  .billing-savings {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--control-line);
    background: var(--success-surface);
    color: var(--success-text);
    font-size: .9rem;
    font-weight: 750;
  }
}

/* Aurora stays behind opaque-enough surfaces so data keeps its contrast. */
@media screen {
  body.dinetap-dashboard {
    background: radial-gradient(ellipse at 85% 0%, rgb(16 137 81 / 16%), transparent 48%),
      radial-gradient(ellipse at 12% 60%, rgb(24 94 62 / 13%), transparent 50%), var(--bg);
  }
  .dinetap-dashboard .layout > aside, .dinetap-dashboard .top {
    background: var(--sidebar-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .dinetap-dashboard .card, .dinetap-dashboard .insight, .dinetap-dashboard .form-card,
  .dinetap-dashboard #subscription .card, .dinetap-dashboard dialog {
    background: var(--glass) !important; border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 rgb(195 255 220 / 9%), var(--shadow);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .dinetap-dashboard .row, .dinetap-dashboard .menuitem, .dinetap-dashboard .ticket {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .dinetap-dashboard .row:hover, .dinetap-dashboard .menuitem:hover { background: rgb(113 230 173 / 4%); }
  .dinetap-dashboard .nav button.active { box-shadow: inset 3px 0 var(--mint), var(--glow); }
  .dinetap-dashboard h1 { font-weight: 600; letter-spacing: -.045em; line-height: 1.25; }
  .dinetap-dashboard h2, .dinetap-dashboard h3 { line-height: 1.4; letter-spacing: -.025em; }
  .dinetap-dashboard .btn, .dinetap-dashboard .menu-action, .dinetap-dashboard input,
  .dinetap-dashboard select, .dinetap-dashboard textarea { border-radius: var(--radius-sm); }
  body.dinetap-dashboard .primary, body.dinetap-dashboard .btn.primary {
    background: linear-gradient(125deg, var(--action), var(--action-end)); box-shadow: var(--glow);
  }
  body.dinetap-dashboard .primary:hover { background: var(--action-hover); }
  .dinetap-dashboard .btn, .dinetap-dashboard .menu-action, .dinetap-dashboard .nav button,
  .dinetap-dashboard .card { transition: transform var(--duration-fast) var(--ease-out); }
  .dinetap-dashboard .btn:active, .dinetap-dashboard .menu-action:active { transform: scale(.98); }
  .dinetap-dashboard .page:not(.hidden), .dinetap-dashboard .dt-enter { animation: aurora-enter var(--duration-normal) var(--ease-out) both; }
  .dinetap-dashboard .nav button { white-space: normal; }
  .dinetap-dashboard .card:has(> table) { overflow-x: auto; }
  .dinetap-dashboard #subscription table { min-width: 500px; }
  @media (hover: hover) {
    .dinetap-dashboard .card:hover { transform: translateY(-2px); }
  }
  @keyframes aurora-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* Owner Run 2: touch targets and initial-load presentation. */
@media screen {
 .dinetap-dashboard .page { position: relative; min-height: 320px; }
 .owner-data-loading .page>*:not(.owner-skeleton-grid) { visibility: hidden; }
 .owner-skeleton-grid { position: absolute; inset: 0 0 auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; pointer-events: none; }
 .owner-skeleton { min-height: 140px; border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(var(--surface2),var(--surface2)) 18px 24px/55% 14px no-repeat,linear-gradient(var(--surface2),var(--surface2)) 18px 58px/35% 30px no-repeat,var(--surface); animation: owner-skeleton-pulse 1.2s ease-in-out infinite; }
 .owner-skeleton:nth-child(even) { animation-delay: .15s; }
 .owner-empty { grid-column: 1/-1; padding: 16px; border: 1px dashed var(--line); border-radius: var(--radius-md); background: var(--surface); }
 .owner-empty p { margin: 0 0 12px; color: var(--muted); }
 .dinetap-dashboard .textbtn, .dinetap-dashboard .menu-action, .dinetap-dashboard .menu-availability, .dinetap-dashboard .nav button { min-height: 44px; }
 .dinetap-dashboard .menu-action { width: 44px; }
 .dinetap-dashboard .textbtn { display: inline-flex; align-items: center; padding: 8px 10px; }
 .dinetap-dashboard .order-badges { gap: 8px; }
 .dinetap-dashboard .ticket .status { margin-right: 6px; }
 @media(max-width:480px){
  .owner-skeleton-grid { gap: 10px; }
  .dinetap-dashboard .row { grid-template-columns: 40px minmax(0,1fr); }
  .dinetap-dashboard .row>div { min-width: 0; }
  .dinetap-dashboard .menuitem { align-items: flex-start; gap: 8px; }
  .dinetap-dashboard .menuitem .menuinfo { flex-basis: calc(100% - 70px); }
  .dinetap-dashboard .menuitem .menu-availability { margin-left: auto; }
  .dinetap-dashboard .head { gap: 10px; }
  .dinetap-dashboard .head>div { max-width: 100%; flex-wrap: wrap; }
 }
}
@keyframes owner-skeleton-pulse { 50% { opacity: .5; } }