/* Smartphone-only shared brand and Today layout. Desktop and tablet rules stay in styles.css. */
@media (max-width: 760px) {
  .sidebar > .brand .brand-home-button,
  .app-shell.sidebar-collapsed .sidebar > .brand .brand-home-button {
    gap: 4.9px;
  }

  .sidebar > .brand .logo-mascot,
  .app-shell.sidebar-collapsed .sidebar > .brand .logo-mascot {
    width: 35.7px;
    height: 35.7px;
  }

  .sidebar > .brand .logo-wordmark,
  .app-shell.sidebar-collapsed .sidebar > .brand .logo-wordmark {
    font-size: 25.2px;
  }

  /* Keep all temporary startup states out of the first mobile paint.
     The complete Today view is revealed atomically after its data is ready. */
  body[data-app-ready="false"] .app-shell,
  body[data-app-ready="false"] .floating-ai-chat-button,
  body[data-app-ready="false"] .floating-ai-encouragement-bubble,
  body[data-app-ready="false"] .floating-ai-chat-panel,
  body[data-app-ready="false"] .mobile-more-menu,
  body[data-app-ready="false"] .mobile-bottom-nav {
    visibility: hidden !important;
  }

  /* The mobile logo already occupies its own row. Remove the obsolete
     topbar spacer only on the Today queue so the summary begins below it. */
  .app-shell[data-active-nav-category="today"]:has(#queueView:not(.hidden)) > .workspace {
    padding-top: 0;
  }

  .app-shell[data-active-nav-category="today"]:has(#queueView:not(.hidden)) > .workspace > .topbar {
    display: none;
    margin: 0;
  }

  .queue-panel > .today-page-header {
    display: none;
  }

  .queue-panel > .queue-stats {
    order: 1;
  }

  .queue-panel > .today-notification-summary {
    order: 2;
    display: grid;
    gap: 10px;
    margin: 0 0 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
  }

  .today-notification-summary > strong {
    font-size: 14px;
  }

  .today-notification-summary > div {
    display: grid;
    gap: 6px;
  }

  .today-notification-summary button {
    min-width: 0;
    min-height: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid #eadfd3;
    border-radius: 12px;
    background: #fffaf5;
    color: var(--ink);
    text-align: left;
  }

  .today-notification-summary button > span,
  .today-notification-summary button > small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .today-notification-summary button > span {
    font-size: 13px;
    font-weight: 800;
  }

  .today-notification-summary button > small {
    color: var(--muted);
    font-size: 11px;
  }

  .today-notification-summary button > b {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--accent);
    font-size: 20px;
  }

  /* Keep notification cards readable without the light-card glare in dark mode. */
  :root[data-theme="dark"] .today-notification-summary button {
    border-color: var(--line);
    background: var(--surface-soft);
    color: var(--ink);
  }

  :root[data-theme="dark"] .today-notification-summary button > span {
    color: var(--ink);
  }

  :root[data-theme="dark"] .today-notification-summary button > small {
    color: var(--muted);
  }

  :root[data-theme="dark"] .today-notification-summary button > b {
    color: var(--accent-strong);
  }

  .today-notification-summary > small,
  .today-notification-summary > span {
    color: var(--muted);
    font-size: 11px;
  }

  .queue-panel > .queue-list {
    order: 3;
  }

  .today-reservations-section:not(.is-tomorrow) > .today-dashboard-card-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .today-reservations-section:not(.is-tomorrow) > .today-dashboard-card-heading > div {
    width: 100%;
  }

  .today-reservations-section:not(.is-tomorrow) > .today-dashboard-card-heading h4 {
    white-space: nowrap;
  }

  .today-reservations-section:not(.is-tomorrow) > .today-dashboard-card-heading > .today-dashboard-text-button {
    justify-self: end;
    max-width: none;
  }

  .today-reservations-section:not(.is-tomorrow) .today-dashboard-heading-icon.calendar-days,
  .today-reservations-section.is-tomorrow .today-dashboard-heading-icon.calendar-clock {
    font-size: 0;
  }

  .today-reservations-section:not(.is-tomorrow) .today-dashboard-heading-icon.calendar-days::before,
  .today-reservations-section.is-tomorrow .today-dashboard-heading-icon.calendar-clock::before {
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e8d78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 14v2.2l1.6 1'/%3E%3Cpath d='M16 2v3'/%3E%3Cpath d='M21 7.338V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h2.338'/%3E%3Cpath d='M3 9h5.859'/%3E%3Cpath d='M8 2v3'/%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
  }

  .today-tasks-section > .today-dashboard-card-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .today-tasks-section > .today-dashboard-card-heading > div {
    width: 100%;
  }

  .today-tasks-section > .today-dashboard-card-heading h4 {
    white-space: nowrap;
  }

  .today-tasks-section > .today-dashboard-card-heading > .today-dashboard-text-button {
    justify-self: end;
    max-width: none;
    white-space: nowrap;
  }

  .today-x-summary-section > .today-dashboard-card-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .today-x-summary-section > .today-dashboard-card-heading > div {
    width: 100%;
  }

  .today-x-summary-section > .today-dashboard-card-heading h4 {
    white-space: nowrap;
  }

  .today-x-summary-section > .today-dashboard-card-heading > .today-dashboard-text-button {
    justify-self: end;
    max-width: none;
    white-space: nowrap;
  }

  .today-tasks-section .today-task-priority {
    display: none;
  }

  .today-overview-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .today-overview-stat-grid .queue-stat {
    min-height: 96px;
    align-content: center;
    gap: 5px;
    padding: 8px 4px;
    text-align: center;
  }

  .today-overview-stat-grid .queue-stat[data-today-summary-target] {
    width: 100%;
    margin: 0;
    appearance: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
  }

  .today-overview-stat-grid .queue-stat[data-today-summary-target]:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }

  .today-overview-stat-grid .queue-stat-heading {
    align-items: center;
    flex-direction: column;
    gap: 4px;
  }

  .today-overview-stat-grid .queue-stat-icon {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  .today-overview-stat-grid .queue-stat.reservations .queue-stat-icon,
  .today-overview-stat-grid .queue-stat.tasks .queue-stat-icon {
    font-size: 0;
  }

  .today-overview-stat-grid .queue-stat.reservations .queue-stat-icon::before,
  .today-overview-stat-grid .queue-stat.tasks .queue-stat-icon::before {
    display: block;
    width: 18px;
    height: 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
  }

  /* Lucide CalendarDays: today's reservation card. */
  .today-overview-stat-grid .queue-stat.reservations .queue-stat-icon::before,
  .today-reservations-section:not(.is-tomorrow) .today-dashboard-heading-icon.calendar-days::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c45745' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v3'/%3E%3Cpath d='M16 2v3'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M8 13h.01'/%3E%3Cpath d='M12 13h.01'/%3E%3Cpath d='M16 13h.01'/%3E%3Cpath d='M8 17h.01'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M16 17h.01'/%3E%3C/svg%3E");
  }

  /* Lucide CalendarClock: tomorrow's reservation card. */
  .today-overview-stat-grid .queue-stat.tasks .queue-stat-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e8d78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 14v2.2l1.6 1'/%3E%3Cpath d='M16 2v3'/%3E%3Cpath d='M21 7.338V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h2.338'/%3E%3Cpath d='M3 9h5.859'/%3E%3Cpath d='M8 2v3'/%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3C/svg%3E");
  }

  .today-overview-stat-grid .queue-stat.x-summary .queue-stat-x-icon {
    color: #1f1f1f;
  }

  .today-overview-stat-grid .queue-stat-summary {
    justify-items: center;
    gap: 2px;
  }

  .today-overview-stat-grid .queue-stat-title {
    min-height: 2.5em;
    font-size: 10px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .today-overview-stat-grid .queue-stat strong {
    justify-content: center;
    gap: 2px;
    font-size: 20px;
    line-height: 1;
  }

  .today-overview-stat-grid .queue-stat strong small {
    font-size: 9px;
  }

  .today-overview-stat-grid .queue-stat-details {
    display: none;
  }

  .today-workspace-grid,
  .today-workspace-main {
    gap: 10px;
  }

  .today-workspace-mobile > .today-overview-section {
    scroll-margin-top: 12px;
  }

  .today-reservation-row-course-summary {
    grid-column: 3 / -1;
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 12px;
  }

  .today-reservation-row-course-summary .today-reservation-row-course {
    min-width: 0;
    padding-left: 0;
  }

  .today-reservation-row-course-summary .today-reservation-row-course::before {
    display: none;
  }

  .today-tomorrow-row-course-summary {
    display: flex;
    min-width: max-content;
    grid-row: 1;
    grid-column: 3;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
  }

  .today-tomorrow-card > time {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: start;
  }

  .today-tomorrow-card > strong {
    grid-row: 1;
    grid-column: 2;
  }

  .today-tomorrow-card > .today-tomorrow-row-place {
    min-width: 0;
    grid-row: 2;
    grid-column: 2 / -1;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .today-reservation-row-amount {
    flex: none;
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .today-mobile-daily-sales-total {
    min-height: 46px;
    display: grid;
    place-items: center;
    padding: 9px 14px;
    border-top: 1px solid var(--line);
    background: var(--surface-soft);
  }

  .today-mobile-daily-sales-total p {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
  }

  .today-mobile-daily-sales-total strong {
    color: var(--ink);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
  }
}