/* Adapt to available workspace width, including embedded browser panes. */
@media screen {
  html[data-theme] .mobile-links a:hover,
  html[data-theme] .mobile-links a:focus-visible,
  html[data-theme] .side-nav a:hover,
  html[data-theme] .side-nav a:focus-visible {
    background: #E47B18; color: #251d17;
  }
  /* Hide scrollbar tracks while preserving mouse, touch, and keyboard scrolling. */
  html, body, body * { scrollbar-width: none !important; -ms-overflow-style: none !important; }
  html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar {
    display: none !important; width: 0 !important; height: 0 !important;
  }
  ::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 8px; }
  .app-sidebar { overflow-y: auto; }
  .app-sidebar .brand-mark { flex-shrink: 0; }
  .app-header {
    position: sticky; left: auto; margin-left: 218px; height: auto;
    min-height: 64px; padding: 12px 24px; gap: 12px; flex-wrap: wrap;
  }
  body.nav-collapsed .app-header { left: auto; margin-left: 76px; }
  .header-title { min-width: 0; flex: 1 1 230px; }
  .header-title > strong { overflow-wrap: anywhere; }
  .header-title button, .header-avatar, .live-datetime > i { flex-shrink: 0; }
  .header-actions { height: auto; flex-wrap: wrap; justify-content: flex-end; }
  .header-profile { min-width: 0; height: auto; }
  .header-profile > span:last-child { min-width: 0; }
  .header-profile strong { overflow-wrap: anywhere; }
  .app-header .live-datetime strong { display: block; }
  .app-content { min-width: 0; padding-top: 22px; }
  .app-content .row > *, .panel, .card { min-width: 0; }
  .app-content .d-flex { flex-wrap: wrap; gap: 8px; }
  .app-content .d-flex > * { min-width: 0; }
  .table-responsive { max-width: 100%; overflow-x: auto; }
  .table-responsive .table { min-width: 640px; }
  .table-responsive input, .table-responsive select { min-width: 110px; }
  .table-scroll { max-width: 100%; overflow-x: auto; }
  .table-scroll .table { min-width: 520px; }
  .modal-dialog { max-width: min(var(--bs-modal-width, 500px), calc(100% - 24px)); }
  .modal-content { max-height: calc(100dvh - 24px); overflow-y: auto; }
  .modal-body { min-height: 0; overflow-y: auto; }
  .modal-footer { flex-wrap: wrap; }
  .modal-header > :first-child { min-width: 0; overflow-wrap: anywhere; }
  .modal-header .btn-close { flex-shrink: 0; }
  .offcanvas { max-width: 100vw; }
  .pos-layout { container: checkout-workspace / inline-size; }
  .pos-layout.row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 16px; margin: 0;
  }
  .pos-layout.row > .pos-products, .pos-layout.row > .pos-order-column { width: auto; padding: 0; margin: 0; }
  .pos-products { min-width: 0; }
  .pos-toolbar .pos-search { min-width: 0; }
  .pos-search input { min-width: 0; }
  .pos-search > i { flex-shrink: 0; }
  .category-pills { flex-wrap: wrap; overflow: visible; padding-bottom: 14px; }
  .category-pills button { white-space: normal; overflow-wrap: anywhere; }
  #productGrid.row {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: 12px; margin: 0;
  }
  #productGrid > .product-cell { width: auto; padding: 0; margin: 0; min-width: 0; }
  #productGrid > .product-cell[hidden] { display: none; }
  .product-card { height: 100%; overflow-wrap: anywhere; }
  .cashier-order {
    display: flex; flex-direction: column;
    position: sticky; top: 100px; max-height: calc(100dvh - 116px);
    overflow-y: auto; scroll-margin-top: 140px;
  }
  .cashier-order > * { flex-shrink: 0; }
  .cashier-order .cart-body { flex: 1 1 auto; min-height: 100px; max-height: 30dvh; }
  .order-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .order-heading h4 { flex: 1; margin: 0; }
  .back-to-products { color: var(--orange-deep); font-size: 12px; }
  .cashier-order .order-item-bottom { flex-wrap: wrap; }
  .cashier-order .order-item-bottom > b { overflow-wrap: anywhere; min-width: 0; }
  .order-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-actions .btn { overflow-wrap: anywhere; }
  .order-history-row { flex-wrap: wrap; }
  .order-history-row > span { flex: 1 1 180px; }
  .order-history-row > .btn { flex-shrink: 0; }
  .pos-order-shortcut { display: none; }
  @media (max-width: 1100px) { .app-header { margin-left: 190px; padding-inline: 18px; } }
  @media (max-width: 900px) {
    .app-header { display: none; }
    .app-content, body.nav-collapsed .app-content { margin-left: 0; padding-top: 16px; }
    .mobile-header {
      display: flex; flex-direction: column; align-items: stretch; height: auto;
      gap: 10px; padding: 10px 12px; background: var(--card); color: var(--ink);
    }
    .mobile-header-primary, .mobile-header-secondary, .mobile-header-controls {
      display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap;
    }
    .mobile-header-primary > strong { flex: 1 1 120px; font-size: 14px; }
    .mobile-header-controls { margin-left: auto; flex-shrink: 0; }
    .mobile-header .brand-mark, .mobile-header button { flex-shrink: 0; }
    .mobile-header .icon-button {
      width: 38px; height: 38px; padding: 0; display: grid; place-items: center;
      border: 1px solid var(--line); border-radius: 9px;
      background: var(--card); color: var(--ink);
    }
    .mobile-header .icon-button:hover { border-color: var(--orange); }
    .mobile-header .icon-button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
    .mobile-header-secondary {
      justify-content: space-between;
      border-top: 1px solid var(--line); padding-top: 10px;
    }
    .mobile-header .header-profile { border: 0; padding: 0; margin: 0; flex: 1 1 100px; }
    .mobile-header .header-profile > span:last-child { display: grid; }
    .mobile-clock { display: flex; padding: 0; margin: 0; border: 0; }
    .mobile-clock > i { display: grid; }
    .mobile-clock strong { display: block; font-size: 10px; }
    .mobile-clock small { margin-top: 3px; }
    .mobile-header .notification-trigger { margin-left: 0; }
    .notification-modal .modal-dialog { margin: 12px; }
    .cashier-order { top: 145px; max-height: calc(100dvh - 160px); }
  }
  @container checkout-workspace (max-width: 760px) {
    .pos-layout.row > .pos-products, .pos-layout.row > .pos-order-column { grid-column: 1 / -1; }
    .cashier-order { position: static; max-height: none; }
    .pos-order-shortcut {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      position: fixed; z-index: 1020; right: 16px; bottom: max(12px, env(safe-area-inset-bottom));
      width: min(340px, calc(100% - 32px)); min-height: 48px; padding: 12px 16px;
      border-radius: 14px; background: var(--orange); color: #fff; text-decoration: none;
      box-shadow: 0 6px 24px rgb(40 30 20 / 20%); font-weight: 600;
    }
    .pos-order-shortcut:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
    .pos-order-column { padding-bottom: 70px !important; }
  }
  @media (max-width: 560px) {
    .pos-layout.row { grid-template-columns: minmax(0, 1fr); }
    .cashier-order .order-heading { padding-inline: 14px; }
    .pos-layout .product-card { padding: 10px; }
    .pos-products { scroll-margin-top: 170px; }
    .app-content { padding-bottom: 80px; }
    .floating-action { max-width: calc(100vw - 24px); white-space: normal; }
  }
  @media (max-height: 600px) {
    .app-header, .mobile-header { position: static; }
    .cashier-order { position: static; max-height: none; }
    .cashier-order .cart-body { max-height: 240px; }
    .app-sidebar { padding-top: 12px; padding-bottom: 12px; }
    .side-nav { margin-top: 16px; }
  }
}

/* Readable alerts and stable profile labels across device sizes. */
.notification-modal .modal-dialog{max-width:480px}
.notification-modal .modal-header h5{font-size:20px}
.notification-modal .modal-header small,.notification-pop-row small{font-size:13px}
.notification-pop-row p{font-size:16px;line-height:1.55;overflow-wrap:anywhere}
.notification-pop-row>div{min-width:0}
.notification-list{font-size:16px;line-height:1.55;overflow-wrap:anywhere}
.notification-list small{font-size:13px}
.notification-modal .modal-body{max-height:65dvh;overflow-y:auto}
.notification-modal .modal-footer .btn{font-size:14px}
.location-line{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;align-items:start}
.location-line>span{display:flex;align-items:center;gap:10px;white-space:nowrap;line-height:1.6}
.location-line i{flex:0 0 20px;width:20px;margin-right:0;text-align:center}
.location-line>b{min-width:0;line-height:1.6;text-align:right;overflow-wrap:break-word;text-wrap:pretty}
.current-order-dialog{padding:0;border:0;border-radius:20px;background:var(--card);color:var(--ink);width:min(540px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;box-shadow:0 16px 60px #0005}
.current-order-dialog::backdrop{background:#0007;backdrop-filter:blur(3px)}
.current-order-dialog .cashier-order{position:static;max-height:none;margin:0;width:100%}
.current-order-dialog .cart-body{max-height:32dvh;overflow:auto;min-height:120px}
.pos-order-shortcut{display:none!important}
@media(max-width:767px){
 .pos-order-column:empty{display:none}
 .pos-products{padding-bottom:90px}
 .pos-order-shortcut{display:flex!important;position:fixed;left:auto;right:16px;bottom:max(16px,env(safe-area-inset-bottom));width:max-content;max-width:calc(100vw - 32px);z-index:1020;align-items:center;justify-content:flex-start;gap:12px;padding:12px 20px;min-height:56px;border:0;border-radius:16px;background:var(--orange);color:#fff;box-shadow:0 6px 24px #0003;font-size:16px;text-align:left}
 .pos-order-shortcut>i{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;font-size:21px;line-height:1}
 .pos-order-shortcut .order-shortcut-label{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.25}
 .order-shortcut-label small{font-size:12px;font-weight:400}
 .pos-order-shortcut strong{margin-left:4px;font-size:16px}
 .pos-order-shortcut strong{flex-shrink:0;white-space:nowrap}
 .location-line{grid-template-columns:max-content minmax(0,1fr);gap:16px}
 .location-line>b{text-align:right;padding-left:0;font-size:15px;line-height:1.65}
}
@media print{.current-order-dialog,.pos-order-shortcut{display:none!important}}

/* Expenses become labeled entry fields and record cards on small screens. */
@media screen and (max-width:900px){
 .expenses-panel.table-responsive{overflow:visible;padding:14px}
 .expenses-panel .expenses-table{display:block;min-width:0;width:100%;margin:0;border:0}
 .expenses-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .expenses-table tbody{display:grid;gap:16px;border:0}
 .expenses-table tbody>tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
 .expenses-table tbody>tr.expense-input-row{background:var(--cream)}
 .expenses-panel .expenses-table tbody td{display:block;min-width:0;width:auto;padding:0;border:0;white-space:normal;overflow-wrap:anywhere;background:transparent;box-shadow:none}
 .expenses-table td::before{content:attr(data-label);display:block;margin-bottom:6px;font-size:12px;font-weight:600;color:var(--muted);line-height:1.4}
 .expenses-table td[data-label="Description"],.expenses-table td[data-label="Actions"]{grid-column:1 / -1}
 .expenses-table .expense-input-row td[data-label="Date"],.expenses-table .expense-input-row td[data-label="Amount"]{grid-column:1 / -1}
 .expenses-table .expense-record-row td[data-label="Description"]{font-size:16px;font-weight:600}
 .expenses-table .expense-record-row td[data-label="Amount"]{font-size:18px;font-weight:700}
 .expenses-table td[data-label="Actions"]::before{display:none}
 .expenses-panel input.form-control,.expenses-panel select.form-select{min-width:0;width:100%;max-width:100%;min-height:44px;font-size:16px}
 .expenses-table .expense-form-actions,.expenses-table .expense-row-actions{display:flex;flex-wrap:wrap;gap:10px;width:100%}
 .expenses-table .expense-form-actions .btn,.expenses-table .expense-row-actions .btn{flex:1 1 100px;min-height:44px}
 .expenses-table tfoot{display:block;margin-top:18px;border:0}
 .expenses-table tfoot tr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 2px;border:0;border-top:2px solid var(--line)}
 .expenses-table tfoot th{padding:0;border:0;font-size:18px;background:transparent;overflow-wrap:anywhere}
 .expenses-table tfoot th:last-child{text-align:right;color:var(--orange-deep)}
}

.printer-connection-error{margin:16px 0 0;padding:14px 16px;border:1px solid var(--bs-danger-border-subtle,#f1aeb5);border-radius:10px;background:var(--bs-danger-bg-subtle,#f8d7da);color:var(--bs-danger-text-emphasis,#58151c);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.printer-connection-error strong{display:block;margin-bottom:4px}
.printer-connection-error p{margin:0;color:inherit}

.product-icon .category-food-icon{display:block;width:52px;height:52px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.order-thumbnail .category-food-icon{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){.product-icon .category-food-icon{width:44px;height:44px}}

/* Availability status uses the same semantic colors throughout the app. */
html .availability-available,html .stock-status.healthy{color:var(--green)!important}
html .availability-unavailable,html .stock-status.critical{color:var(--danger)!important}
.availability-available,.availability-unavailable{font-weight:600}
html .stock-status.healthy{background:color-mix(in srgb,var(--green) 12%,transparent)}
html .stock-status.critical{background:color-mix(in srgb,var(--danger) 12%,transparent)}

html .badge.availability-available{background:color-mix(in srgb,var(--green) 12%,transparent)!important}
html .badge.availability-unavailable{background:color-mix(in srgb,var(--danger) 12%,transparent)!important}

/* Phone navigation drawer follows the workspace palette. */
#mobileNav.phone-navigation{--bs-offcanvas-width:min(320px,84vw);background:var(--card);color:var(--ink);border-right:1px solid var(--line);box-shadow:12px 0 36px rgb(0 0 0 / 12%)}
.phone-navigation .phone-nav-header{padding:20px 16px;border-bottom:1px solid var(--line);gap:12px;flex-shrink:0}
.phone-nav-brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:var(--ink);font-size:14px;font-weight:700;line-height:1.35}
.phone-nav-brand img{flex:none;border-radius:8px}
.phone-nav-brand small{display:block;font-size:12px;color:var(--muted);font-weight:500}
.phone-nav-close{display:grid;place-items:center;width:36px;height:36px;flex:none;margin-left:auto;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:26px;line-height:1}
.phone-navigation .phone-nav-body{display:flex;flex-direction:column;gap:32px;padding:18px 12px 14px;overflow-y:auto;min-height:0}
.phone-nav-main,.phone-nav-utilities{display:grid;gap:5px}
.phone-nav-section{margin:0;padding:0 12px 10px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.phone-nav-utilities{margin-top:auto;padding-top:12px}
.phone-navigation nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 12px;border-radius:9px;color:var(--ink);background:transparent;text-decoration:none;font-size:14px;line-height:1.4}
.phone-navigation nav a>i{display:grid;place-items:center;flex:0 0 20px;font-size:17px;color:var(--muted)}
.phone-navigation nav a>span{min-width:0;overflow-wrap:anywhere}
.phone-navigation nav a.active{background:var(--cream-2);color:var(--orange-deep);font-weight:700;box-shadow:inset 3px 0 var(--orange)}
.phone-navigation nav a.active>i{color:var(--orange-deep)}
.phone-navigation nav a:hover,.phone-nav-close:hover{background:var(--cream-2)}
.phone-navigation a:focus-visible,.phone-nav-close:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.phone-nav-count{margin-left:auto;flex:none;border-radius:999px;padding:2px 7px;background:var(--orange);color:var(--porcelain);font-size:11px}
.phone-nav-account{display:flex;align-items:center;gap:10px;padding:16px;border-top:1px solid var(--line);background:var(--cream);color:var(--ink);text-decoration:none;flex-shrink:0}
.phone-nav-avatar{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;background:var(--orange);color:var(--porcelain);font-size:13px;font-weight:700}
.phone-nav-account-copy{display:grid;gap:2px;min-width:0;flex:1}
.phone-nav-account-copy strong{font-size:13px;overflow-wrap:anywhere}
.phone-nav-account-copy small{font-size:11px;color:var(--muted)}
.phone-nav-account>i{font-size:13px;color:var(--muted)}
@media(max-width:900px){.offcanvas-backdrop.show{opacity:.35}}

/* Keep navigation feedback brief and avoid moving fixed checkout controls. */
@media screen and (prefers-reduced-motion:no-preference){
 .app-content{animation:navigation-enter 220ms ease-out;transition:opacity 120ms ease-out}
 .app-content.navigation-leaving{animation:none;opacity:0}
 .phone-navigation nav a,.phone-nav-account{transition:background-color 150ms ease,color 150ms ease}
 .phone-navigation .navigation-pending,.side-nav .navigation-pending{background:var(--cream-2);color:var(--orange-deep)}
}
@keyframes navigation-enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.app-content{animation:none!important;transition:none!important}.app-content.navigation-leaving{opacity:1}}

/* Shared control sizing, readable overflow, and stable page spacing. */
@media screen {
  html, body, body * { scrollbar-width: none !important; -ms-overflow-style: none !important; }
  html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar {
    display: none !important; width: 0 !important; height: 0 !important;
  }
  .app-content { padding-bottom: 100px; }
  .app-content h2 { font-family: 'DM Sans', Arial, sans-serif; line-height: 1.3; }
  .app-content > .page-heading > h2, .app-content > .page-heading > p,
  .app-content > .page-heading > div:first-child { display: block; }
  .page-heading { margin-bottom: 20px; }
  .page-heading h2 { font-size: clamp(22px, 2vw, 28px); margin-bottom: 8px; }
  .page-heading p { color: var(--muted); line-height: 1.6; }
  .app-content .btn, .modal .btn, .current-order-dialog .btn { min-height: 44px; white-space: normal; line-height: 1.4; }
  .app-content .form-control, .app-content .form-select, .modal .form-control, .modal .form-select { min-height: 44px; }
  .app-content .badge { white-space: normal; line-height: 1.4; }
  .add-floating-action { color: #251d17 !important; bottom: max(20px, env(safe-area-inset-bottom)); }
  .add-floating-action i { color: inherit !important; }
  .notification-page-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
  .notification-page-heading h2 { margin: 0 0 6px; font-size: clamp(22px, 2vw, 28px); }
  .notification-page-heading p { margin: 0; color: var(--muted); }
  .notification-page-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .notification-scope { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
  .notification-record { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .notification-record:last-child { border-bottom: 0; }
  .notification-record > div { min-width: 0; flex: 1; }
  .notification-record p { margin: 0 0 4px; }
  .notification-record > .notification-kind { flex-shrink: 0; }
  .notification-record > .badge { flex-shrink: 0; }
  .table-responsive, .table-scroll, .dashboard-table-scroll { overscroll-behavior-x: contain; }
}
@media screen and (max-width: 900px) {
  .mobile-header { position: static; gap: 8px; padding: 10px 12px; }
  .mobile-header-primary { flex-wrap: nowrap; gap: 6px; }
  .mobile-header-primary > strong { flex: 1 1 0; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
  .mobile-header .brand-mark { width: 32px; height: 32px; border-radius: 8px; }
  .mobile-header .header-back-button { width: 28px; padding: 0; flex: 0 0 28px; }
  .mobile-header-controls { flex-wrap: nowrap; gap: 4px; }
  .mobile-header .notification-trigger, .mobile-header .theme-trigger, .mobile-header .icon-button { width: 36px; height: 40px; min-width: 36px; margin: 0; }
  .mobile-header-secondary { flex-wrap: nowrap; gap: 12px; padding-top: 8px; }
  .mobile-header .header-avatar { width: 32px; height: 32px; flex: 0 0 32px; }
  .mobile-header .header-profile strong { font-size: 12px; }
  .mobile-header .header-profile small { font-size: 11px; }
  .mobile-header .mobile-clock { display: flex; flex: 0 0 auto; }
  .mobile-clock > i { display: none; }
  .mobile-clock strong { font-size: 10px; }
  .mobile-clock small { font-size: 10px; }
  .app-content, body.nav-collapsed .app-content { padding: 16px 12px 96px; }
  .app-content .form-control, .app-content .form-select, .modal .form-control, .modal .form-select { font-size: 16px; max-width: 100%; }
  .app-content .table-responsive:has(> .responsive-records) { overflow: visible; }
  .app-content .responsive-records { table-layout: auto; }
  .app-content > .table-responsive, .app-content .activity-card .table-responsive { min-width: 0; }
  .app-content .responsive-records { display: block; width: 100%; min-width: 0; margin: 0; }
  .responsive-records colgroup { display: none; }
  .responsive-records thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .responsive-records tbody { display: grid; gap: 14px; }
  .responsive-records tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .app-content .responsive-records tbody td { display: block; min-width: 0; width: auto; padding: 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; background: transparent; box-shadow: none; font-size: 14px; }
  .responsive-records td::before { content: attr(data-label); display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
  .responsive-records .record-title, .responsive-records .record-actions, .responsive-records .record-empty { grid-column: 1 / -1; }
  .responsive-records .record-title { font-weight: 600; }
  .responsive-records .record-actions::before, .responsive-records .record-empty::before { display: none; }
  .responsive-records .record-actions > div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
  .responsive-records .record-actions .btn { min-width: 72px; }
  .inventory-management-table td:nth-child(6) .progress { margin: 0 0 8px; }
  .inventory-management-table td:nth-child(6) .inventory-level-label { text-align: left; }
  .inventory-management-table .badge { min-width: 0; max-width: 100%; }
  .table-responsive.panel:has(> .responsive-records) { padding: 12px; }
  .user-row { gap: 12px; }
  .user-row > .flex-grow-1 { min-width: 0; overflow-wrap: anywhere; }
  .notification-page-actions { width: 100%; }
  .notification-page-actions form { flex: 1 1 170px; }
  .notification-page-actions .btn { width: 100%; }
  .modal-dialog { margin: 12px auto; }
}
@media screen and (max-width: 360px) {
  .cashier-interface .mobile-header-primary { flex-wrap: wrap; }
  .cashier-interface .mobile-header-controls { flex-basis: 100%; justify-content: flex-end; }
  .mobile-header .header-profile { gap: 6px; }
  .mobile-header .mobile-clock strong { max-width: 110px; }
  .modal-body .col-6 { width: 100%; }
}
@media screen and (max-width:900px) {
  .app-content > .floating-action { position: static; width: fit-content; max-width: 100%; margin: 0 0 16px auto; min-height: 44px; }
  .app-content > .floating-action:hover { transform: none; }
}
@media screen {
 .operation-form label { display: grid; gap: 6px; min-width: 0; }
 .operation-form { display: grid; gap: 16px; margin-top: 20px; }
 .operation-form p { margin: 0; line-height: 1.6; }
}

/* Row actions keep the same solid appearance with mouse, touch, or keyboard. */
html[data-theme] :is(.inventory-row-actions,.menu-row-actions,.expense-row-actions) .btn {
  --bs-btn-color: #fff;
  --bs-btn-bg: #606773;
  --bs-btn-border-color: #606773;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #606773;
  --bs-btn-hover-border-color: #606773;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #606773;
  --bs-btn-active-border-color: #606773;
  background: #606773;
  border-color: #606773;
  color: #fff;
  opacity: 1;
  visibility: visible;
  transition: none;
}
html[data-theme] :is(.inventory-row-actions,.menu-row-actions,.expense-row-actions) :is(.btn-outline-danger,.expense-delete) {
  --bs-btn-bg: #b93643;
  --bs-btn-border-color: #b93643;
  --bs-btn-hover-bg: #b93643;
  --bs-btn-hover-border-color: #b93643;
  --bs-btn-active-bg: #b93643;
  --bs-btn-active-border-color: #b93643;
  background: #b93643;
  border-color: #b93643;
  color: #fff;
}
html[data-theme] :is(.inventory-row-actions,.menu-row-actions,.expense-row-actions) .btn:is(:hover,:active,:focus-visible) {
  background: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  color: #fff;
  transform: none;
  box-shadow: none;
}
html[data-theme] :is(.inventory-row-actions,.menu-row-actions,.expense-row-actions) .btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Compact Edit actions share a white surface; profile setting rows follow their theme. */
html[data-theme] .app-content .action-edit.action-edit:not(.setting-button),
html[data-theme] .app-content .action-edit.action-edit:not(.setting-button):is(:hover,:active,:focus-visible) {
  --bs-btn-color: #606773;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #9ca3af;
  --bs-btn-hover-color: #606773;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #9ca3af;
  --bs-btn-active-color: #606773;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #9ca3af;
  background: #fff;
  border: 1px solid #9ca3af;
  border-radius: 7px;
  color: #606773;
  transition: none;
}
html[data-theme] .app-content .action-edit:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Management headings and their primary action share a single alignment system. */
.app-content > .management-heading {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 28px; margin: 0 0 24px; min-width: 0;
}
.management-heading-copy { min-width: 0; max-width: 72ch; }
.management-heading-copy h2 { margin: 0 0 8px; font-size: clamp(22px,2vw,28px); line-height: 1.3; }
.management-heading-copy p { margin: 0; color: var(--muted); line-height: 1.6; }
html[data-theme] .management-add,
html[data-theme] .logout-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 0 0 auto; min-height: 44px; min-width: 0; width: fit-content; padding: 12px 20px;
  border: 0; border-radius: 9px;
  background: linear-gradient(135deg,#E47B18,#E47B18); color: #fff!important; font: 600 13px/20px 'DM Sans',Arial,sans-serif;
  box-shadow: 0 7px 16px rgba(225,151,69,.2); white-space: nowrap; transform: none;
  transition: background .15s ease,box-shadow .15s ease;
}
html[data-theme] .logout-button { width: 100%; }
html[data-theme] .management-add:is(:hover,:active),
html[data-theme] .logout-button:is(:hover,:active) { background: linear-gradient(135deg,#E47B18,#A9510A); color: #fff!important; transform: none; }
.management-add i,.logout-button i { color: inherit; font-size: 14px; line-height: 1; display: grid; place-items: center; width: 16px; height: 16px; }
.management-add:focus-visible,.logout-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.offline-primary-action-row{display:flex;align-items:center;justify-content:flex-end;margin-top:16px}
html[data-theme] #offlineSettings.offline-focused .offline-primary-action-row #offlinePrimary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  flex:0 0 auto;min-height:44px;min-width:0;width:fit-content!important;padding:12px 20px;
  border:0;border-radius:9px;background:linear-gradient(135deg,#E47B18,#E47B18)!important;
  color:#fff!important;font:600 13px/20px 'DM Sans',Arial,sans-serif;
  box-shadow:0 7px 16px rgba(225,151,69,.2);white-space:nowrap;transform:none;
  transition:background .15s ease,box-shadow .15s ease;
}
html[data-theme] #offlineSettings.offline-focused .offline-primary-action-row #offlinePrimary:is(:hover,:active){background:linear-gradient(135deg,#E47B18,#A9510A)!important;color:#fff!important;transform:none}
html[data-theme] #offlineSettings.offline-focused .offline-primary-action-row #offlinePrimary:before{margin-right:0;font-size:14px;line-height:1}
html[data-theme] #offlineSettings.offline-focused .offline-primary-action-row #offlinePrimary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:600px) {
  .app-content > .management-heading { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 20px; }
  html[data-theme] .management-add { width: fit-content; max-width: 100%; min-width: 0; align-self: flex-end; }
}

/* Date filters and native date fields follow the active theme everywhere. */
html[data-theme] .date-filter-trigger,
html[data-theme] input:is([type="date"],[type="datetime-local"],[type="month"],[type="week"]){background-color:var(--card);color:var(--ink);border-color:var(--line);color-scheme:light}
html[data-theme=dark] .date-filter-trigger,
html[data-theme=dark] input:is([type="date"],[type="datetime-local"],[type="month"],[type="week"]){color-scheme:dark}
.date-filter-trigger>i{color:inherit}

/* Order history follows the inventory management table's spacing and hierarchy. */
.order-history-records { padding:18px; }
.order-history-table { width:100%; min-width:1080px; table-layout:fixed; margin:0; }
.order-history-table :is(th,td) { padding:16px 14px; vertical-align:middle; line-height:1.5; text-align:center; }
.order-history-table th { font-size:11px; letter-spacing:.04em; white-space:nowrap; }
.order-history-table td { height:75px; font-size:13px; overflow-wrap:anywhere; }
.order-history-table td strong { font-weight:600; }
.order-history-table :is(th,td):nth-child(2) { font-variant-numeric:tabular-nums; }
.order-history-table :is(th,td):nth-child(6) { white-space:nowrap; font-variant-numeric:tabular-nums; }
.order-history-table .order-status { display:inline-flex; align-items:center; justify-content:center; min-height:26px; min-width:90px; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:500; color:var(--muted); background:var(--cream-2); }
.order-history-table .order-status-completed { color:var(--green); background:color-mix(in srgb,var(--green) 12%,transparent); }
.order-history-table :is(.order-status-voided,.order-status-refunded) { color:var(--danger); background:color-mix(in srgb,var(--danger) 12%,transparent); }
.order-history-table .order-items-list { margin:0; text-align:center; line-height:1.6; }
.order-items-list > div + div { margin-top:8px; }
.order-history-pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:16px; padding-top:20px; color:var(--muted); font-size:13px; }
@media screen and (max-width:900px) {
  .order-history-records { padding:12px; }
  .app-content .order-history-table { min-width:0; }
  .app-content .order-history-table td { height:auto; }
  .app-content .order-history-table tbody td { text-align:center; }
  .app-content .order-history-table td:last-child { grid-column:1 / -1; text-align:center; }
  .app-content .order-history-table td:last-child::before { display:block; }
  .order-history-table .order-items-list { padding:0; border:0; background:transparent; }
}

/* Inventory and menu row actions share the reference's icon and label spacing. */
html[data-theme] :is(.inventory-row-actions,.menu-row-actions) .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:10px 12px; border-radius:7px; font-size:13px; line-height:22px;
}
html[data-theme] :is(.inventory-row-actions,.menu-row-actions) .btn i {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 14px;
  width:14px; font-size:13px; line-height:1; color:inherit;
}
html[data-theme] :is(.inventory-row-actions,.menu-row-actions) .btn-outline-danger { font-weight:600; }
@media screen and (min-width:901px) { .menu-management-table { min-width:1240px; } }

/* Phone and tablet workspace rhythm: shared gutters, compact records, clear actions. */
@media screen and (max-width:900px) {
  .app-content,body.nav-collapsed .app-content { padding:20px 16px calc(32px + env(safe-area-inset-bottom)); }
  .app-content > :is(h2,.page-heading,.management-heading) { margin-top:0; }
  .app-content > h2:first-child,.app-content > h2:first-child + p { display:block; }
  .app-content > h2,.app-content .page-heading h2 { font-size:24px; line-height:1.3; }
  .app-content > p,.page-heading p { font-size:13px; line-height:1.6; }
  .app-content .panel { border-radius:14px; }
  .mobile-header { padding:12px 16px; gap:12px; }
  .mobile-header .header-profile { flex:1 1 0; }
  .mobile-header .mobile-clock { text-align:right; }
  .mobile-header .header-profile strong { line-height:1.4; }
  .mobile-header .header-profile small { margin-top:2px; }
  .mobile-header .mobile-clock small { font-size:11px; }
  .app-content :is(.inventory-records,.menu-records,.order-history-records) {
    padding:0; margin-bottom:24px; border:0; background:transparent; box-shadow:none;
  }
  .app-content .responsive-records tbody { gap:16px; }
  .app-content .responsive-records tbody > tr { gap:16px; padding:18px; border-radius:14px; align-content:start; }
  .app-content .responsive-records tbody td { line-height:1.55; }
  .responsive-records td::before { margin-bottom:6px; line-height:1.4; }
  .app-content .responsive-records .record-title { padding-bottom:12px; border-bottom:1px solid var(--line); font-size:15px; }
  .app-content .responsive-records .record-actions { padding-top:12px; border-top:1px solid var(--line); }
  .app-content :is(.inventory-row-actions,.menu-row-actions) { justify-content:flex-start; flex-wrap:wrap; gap:8px; }
  .app-content .order-history-table td:nth-child(6) { grid-column:1 / -1; padding-top:12px; border-top:1px solid var(--line); font-size:17px; font-weight:600; }
  .app-content .order-history-table td:last-child { padding-top:12px; border-top:1px solid var(--line); }
  .app-content .order-history-table td:last-child::before { font-weight:500; }
  .app-content .order-history-table .order-items-list { line-height:1.6; }
  .app-content .order-history-table .order-items-list > div + div { margin-top:10px; }
  .order-history-pagination { padding-top:4px; }
  .app-content .setting-line { gap:16px; padding-block:16px; align-items:flex-start; }
  .app-content .setting-line > b { min-width:0; overflow-wrap:anywhere; text-align:right; }
  .app-content .location-line { grid-template-columns:100px minmax(0,1fr); }
  .app-content .setting-button { gap:12px; padding-block:16px; }
  .app-content .user-row { padding:16px; align-items:flex-start; }
  .app-content .user-row .avatar { flex-shrink:0; }
  .app-content .activity-card-heading { align-items:flex-start; gap:12px; }
  .app-content .activity-card-heading h2 { font-size:20px; }
  .app-content .notification-record { gap:12px; padding:16px; }
  .modal .modal-footer { gap:10px; padding:16px; }
  .modal .modal-footer > * { margin:0; }
  .modal .form-label { margin-bottom:6px; line-height:1.5; }
  .app-content .expenses-table tbody > tr { gap:16px; padding:18px; }
  .app-content .expenses-panel { padding:12px; }
}
@media screen and (min-width:700px) and (max-width:900px) {
  .app-content,body.nav-collapsed .app-content { padding-inline:24px; }
  .mobile-header { padding-inline:24px; }
  .app-content :is(.inventory-management-table,.menu-management-table,.order-history-table) tbody {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start;
  }
  .app-content :is(.inventory-management-table,.menu-management-table,.order-history-table) tbody > tr:has(.record-empty) { grid-column:1 / -1; }
}
@media screen and (max-width:600px) {
  .mobile-header .mobile-header-primary { display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px 12px; align-items:center; }
  .mobile-header-primary > .brand-mark { grid-column:1; grid-row:1; }
  .mobile-header-primary > strong { grid-column:2; grid-row:1; font-size:15px; line-height:1.4; }
  .mobile-header-primary > .header-back-button { grid-column:1; grid-row:2; width:32px; min-height:44px; }
  .mobile-header-primary > .mobile-header-controls { grid-column:2; grid-row:2; justify-self:end; margin:0; flex-basis:auto; gap:6px; }
  .mobile-header .mobile-header-controls > :is(button,.sync-trigger) { width:44px; height:44px; min-width:44px; flex:0 0 44px; padding:0; }
  .app-content > .management-heading { align-items:flex-start; gap:14px; }
  .app-content > .management-heading .management-add { align-self:flex-start; }
  .app-content .management-heading-copy { width:100%; }
  .app-content .dashboard-view-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:4px; }
  .app-content .dashboard-view-tabs a { justify-content:center; padding:10px 12px; }
  .app-content .dashboard-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .app-content .dashboard-tabs button { padding:10px; }
  .app-content .reports-layout { --bs-gutter-y:20px; }
  .app-content .reports-layout .panel { padding:18px; }
  .app-content .profile-hero { padding:4px 0 24px; }
  .app-content .profile-hero h2 { font-size:26px; }
}
@media screen and (min-width:901px) and (max-width:1100px) {
  .app-content .reports-layout > div { width:100%; }
  .app-content .activity-layout { grid-template-columns:minmax(0,1fr); }
  .app-content .batch-workspace { grid-template-columns:minmax(0,1fr); }
  .app-content .batch-presets { border-left:0; border-top:1px solid var(--line); }
}

@media screen and (max-width:900px) {
  .app-content .table-responsive.panel:is(.inventory-records,.menu-records) { padding:0; }
}

@media screen and (min-width:700px) and (max-width:900px) {
  .app-content :is(.inventory-management-table,.menu-management-table) tbody { align-items:stretch; }
  .app-content :is(.inventory-management-table,.menu-management-table) .record-title { min-height:60px; }
  .expenses-table tbody > tr > td[data-label="Date"] { grid-column:1; grid-row:1; }
  .expenses-table tbody > tr > td[data-label="Amount"] { grid-column:2; grid-row:1; }
  .expenses-table tbody > tr > td[data-label="Description"] { grid-column:1 / -1; grid-row:2; }
  .expenses-table tbody > tr > td[data-label="Category"] { grid-column:1; grid-row:3; }
  .expenses-table tbody > tr > td[data-label="Type"] { grid-column:2; grid-row:3; }
  .expenses-table tbody > tr > td[data-label="Actions"] { grid-column:1 / -1; grid-row:4; }
}

@media screen and (min-width:601px) and (max-width:900px) {
  .mobile-header .mobile-header-controls > :is(button,.sync-trigger) { width:44px; height:44px; min-width:44px; flex:0 0 44px; }
}

/* One phone header across every tab: brand, utility row, then profile and clock. */
@media screen and (max-width:600px){
 .mobile-header{padding:12px 16px;gap:10px}
 .mobile-header .mobile-header-primary{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:8px}
 .mobile-header-primary>.brand-mark{grid-column:1;grid-row:1;width:36px;height:36px;border-radius:9px}
 .mobile-header-primary>strong{grid-column:2;grid-row:1;min-width:0;font-size:14px;font-weight:700;line-height:1.4;overflow-wrap:normal}
 .mobile-header-primary>.header-back-button{grid-column:1;grid-row:2;width:44px;height:44px;min-height:44px;margin:0;padding:0;display:grid;place-items:center;justify-self:start}
 .mobile-header-primary>.mobile-header-controls{grid-column:2;grid-row:2;display:flex;flex-wrap:nowrap;flex-basis:auto;gap:6px;justify-content:flex-end;justify-self:end;margin:0;min-width:0}
 .mobile-header .mobile-header-controls>button{width:44px;height:44px;min-width:44px;min-height:44px;flex:0 0 44px;margin:0;padding:0;display:grid;place-items:center;border-radius:10px}
 .mobile-header .mobile-header-controls>button i{font-size:18px;line-height:1}
 .mobile-header .mobile-header-controls>.icon-button i{font-size:24px}
 .mobile-header .mobile-header-secondary{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid var(--line)}
 .mobile-header .header-profile{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 0}
 .mobile-header .header-avatar{display:grid;flex:0 0 34px;width:34px;height:34px;border-radius:9px;font-size:12px}
 .mobile-header .header-profile>span:last-child{display:grid;gap:1px;min-width:0}
 .mobile-header .header-profile strong{font-size:12px;line-height:1.4}
 .mobile-header .header-profile small{font-size:11px;line-height:1.4;margin:0}
 .mobile-header .mobile-clock{display:flex;flex:0 0 auto;min-width:0;text-align:right}
 .mobile-header .mobile-clock strong{font-size:10px;line-height:1.4}
 .mobile-header .mobile-clock small{display:block;font-size:10px;line-height:1.4;margin-top:2px}
}

@media screen and (min-width:601px) and (max-width:900px){
 .mobile-header .header-back-button{width:44px;min-width:44px;height:44px;min-height:44px;flex:0 0 44px;padding:0}
}

/* Approved drawer layout: utilities and account details stay in navigation. */
@media screen and (max-width:900px){
 .mobile-header{padding:10px 16px;gap:0;min-height:64px}
 .mobile-header .mobile-header-primary{display:grid;grid-template-columns:32px minmax(0,1fr) 44px;gap:10px;align-items:center}
 .mobile-header-primary>.brand-mark{grid-column:1;grid-row:1;width:32px;height:32px;border-radius:9px}
 .mobile-header-primary>[data-mobile-page-title]{grid-column:2;grid-row:1;min-width:0;font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.3px;overflow-wrap:normal}
 .mobile-header-primary>.mobile-header-controls{grid-column:3;grid-row:1;display:flex;justify-self:end;margin:0;flex-basis:auto;gap:0}
 .mobile-header .mobile-header-controls>.icon-button{display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;flex:0 0 44px;border:0;background:transparent;padding:8px}
 .mobile-header .mobile-header-controls>.icon-button i{font-size:25px}
}
#mobileNav.phone-navigation{--bs-offcanvas-width:min(320px,calc(100vw - 42px))}
.phone-navigation .phone-nav-header{padding:14px 16px;min-height:70px}
.phone-navigation .phone-nav-body{display:flex;flex-direction:column;gap:18px;padding:8px 12px 14px;overflow-y:auto;min-height:0;flex:1}
.phone-navigation .drawer-tools{flex-shrink:0}
.drawer-back{display:flex;align-items:center;gap:9px;min-height:44px;width:100%;padding:10px 8px;border:0;background:transparent;color:var(--muted);font-size:12px;text-align:left}
.drawer-back i{font-size:14px}
.drawer-tools-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:12px 8px 9px;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.drawer-tools-heading small{font-size:10px;letter-spacing:0;text-transform:none;color:var(--green);text-align:right}
.drawer-tools-heading small[data-state=attention],.drawer-tools-heading small[data-state=offline]{color:var(--danger)}
.drawer-tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.phone-navigation .drawer-tools-grid>button{display:flex;align-items:center;justify-content:flex-start;gap:7px;min-height:44px;height:auto;min-width:0;width:100%;padding:9px 10px;margin:0;border:1px solid var(--line);border-radius:8px;background:var(--cream);color:var(--ink);font-size:12px;font-weight:400;text-align:left;flex:none;position:relative}
.phone-navigation .drawer-tools-grid>.printer-settings-trigger{display:flex!important}
.drawer-tools-grid>button i{font-size:17px;line-height:1;color:var(--muted);flex-shrink:0}
.phone-navigation .drawer-tools-grid .drawer-tool-label{position:static;border:0;padding:0;min-width:0;background:transparent;color:inherit;font-size:12px}
.drawer-tools-grid .sync-trigger[data-state=ready] i{color:var(--green)}
.drawer-tools-grid .drawer-unread{min-width:16px;height:16px;margin-left:auto;padding:0 4px;border-radius:10px;background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger);font-size:10px;line-height:16px;font-weight:500;text-align:center}
.phone-navigation .phone-nav-section{margin:0 8px 9px;font-size:10px}
.phone-navigation nav a{font-size:13px;min-height:44px;padding:10px 12px;gap:11px}
.phone-navigation nav a.active{background:var(--orange);color:#251d17;box-shadow:none;font-weight:600}
.phone-navigation nav a.active>i{color:#463019}
.phone-navigation .phone-nav-utilities{margin-top:0}
.drawer-account-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px;border-top:1px solid var(--line);background:var(--card);flex-shrink:0}
.drawer-account-footer .phone-nav-account{border:0;background:transparent;padding:0;min-width:0;flex:1;gap:8px;min-height:44px}
.drawer-account-footer .phone-nav-avatar{width:32px;height:32px;flex:0 0 32px;border-radius:9px;font-size:12px}
.drawer-account-footer .phone-nav-account-copy strong{font-size:12px;line-height:1.4}
.drawer-account-footer .phone-nav-account-copy small{font-size:10px}
.drawer-clock{text-align:right;flex:0 0 auto;font-size:10px;line-height:1.5;color:var(--muted)}
.drawer-clock [data-live-date]{display:block}.drawer-clock [data-live-time]{display:block;font-size:12px;font-weight:650;color:var(--ink)}
.drawer-tools-grid button:focus-visible,.drawer-back:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* Profile settings use one consistent row, icon, status, and action language. */
.settings-card{padding:20px 24px}
.settings-card>h3{margin:0 0 8px;font-size:14px}
.settings-card .setting-item{width:100%;min-height:66px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:11px 2px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);text-align:left}
.settings-card .setting-item:last-child{border-bottom:0}
.settings-card button.setting-item{transition:background-color .2s ease,color .2s ease}
.settings-card button.setting-item:hover{background:color-mix(in srgb,var(--orange) 7%,transparent)}
.settings-card button.setting-item:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:10px}
.settings-card .setting-copy{display:flex;align-items:center;gap:12px;min-width:0}
.settings-card .setting-copy>span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.settings-card .setting-copy strong{font-size:13px;font-weight:600;line-height:1.4;color:var(--ink)}
.settings-card .setting-copy small{display:block;font-size:11px;font-weight:400;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.settings-card .setting-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:9px;background:var(--cream);color:var(--muted)}
.settings-card .setting-icon-success{background:color-mix(in srgb,var(--green) 10%,var(--card));color:var(--green)}
.settings-card .setting-icon i,.settings-card .setting-chevron,.settings-card .setting-toggle{margin:0}
.settings-card .setting-icon i{color:inherit;font-size:16px;line-height:1}
.settings-card .setting-end{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.settings-card .setting-status{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-height:26px;max-width:none;padding:5px 10px;border-radius:999px;background:var(--cream);color:var(--muted);font-size:10px;font-weight:600;line-height:1.2;text-align:center;white-space:nowrap}
.settings-card .setting-status-success,.settings-card .setting-status[data-tone=success]{background:color-mix(in srgb,var(--green) 11%,var(--card));color:var(--green)}
.settings-card .setting-status-warning,.settings-card .setting-status[data-tone=warning]{background:color-mix(in srgb,var(--orange) 13%,var(--card));color:var(--orange-deep)}
.settings-card .setting-status-neutral,.settings-card .setting-status[data-tone=neutral]{background:var(--cream);color:var(--muted)}
.settings-card .setting-chevron{color:var(--muted);font-size:13px;flex:0 0 auto}
.settings-card .setting-toggle{color:var(--orange-deep);font-size:22px;line-height:1}
@media(max-width:600px){
 .settings-card{padding:17px 16px}
 .settings-card .setting-item{gap:10px;min-height:64px}
 .settings-card .setting-copy{gap:10px}
 .settings-card .setting-status{max-width:none}
 .settings-card .setting-end{gap:7px}
}

/* Keep the desktop brand on the same 64px header line as the page title. */
@media screen and (min-width:901px){
 .app-sidebar>.sidebar-brand{flex:0 0 64px;min-height:64px;margin:-24px -18px 0;padding:0 18px}
}
@media screen and (min-width:901px) and (max-width:1100px){
 .app-sidebar>.sidebar-brand{margin-inline:-14px;padding-inline:14px}
}

/* Notifications use the same centered floating dialog as Sync Status/settings. */
html .notification-modal.profile-edit-modal .modal-dialog{width:min(480px,calc(100vw - 24px));max-width:min(480px,calc(100vw - 24px));height:calc(100dvh - 24px);min-height:calc(100dvh - 24px);margin:12px auto;padding:0}
.notification-modal.profile-edit-modal .profile-edit-heading>p{margin-bottom:18px}
.notification-modal.profile-edit-modal .modal-body{max-height:none;min-height:0;overflow-y:auto;border:1px solid var(--dialog-border);border-radius:12px;flex:0 1 auto}
.notification-modal.profile-edit-modal .notification-pop-row{display:flex;align-items:flex-start;gap:12px;padding:15px 12px;border-bottom:1px solid var(--dialog-border);border-radius:0;background:var(--dialog-bg);color:var(--dialog-ink)}
.notification-modal.profile-edit-modal .notification-pop-row:last-child{border-bottom:0}
.notification-modal.profile-edit-modal .notification-pop-row.unread{background:var(--dialog-soft);box-shadow:inset 3px 0 var(--orange)}
.notification-modal.profile-edit-modal .notification-kind{flex:0 0 34px;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--dialog-soft);color:var(--orange-deep);font-size:17px}
.notification-modal.profile-edit-modal .notification-pop-row>div{min-width:0;flex:1}
.notification-modal.profile-edit-modal .notification-pop-row p{margin:0 0 6px;font-size:15px;font-weight:400;line-height:1.6;color:var(--dialog-ink);overflow-wrap:anywhere}
.notification-modal.profile-edit-modal .notification-pop-row.unread p{font-weight:600}
.notification-modal.profile-edit-modal .notification-pop-row small{display:block;font-size:12px;line-height:1.5;color:var(--dialog-muted)}
.notification-modal.profile-edit-modal .empty-mini{padding:24px 16px;font-size:14px;line-height:1.6;color:var(--dialog-muted)}
.notification-modal.profile-edit-modal .empty-mini p{margin:10px 0 0}
.notification-modal.profile-edit-modal .modal-footer{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:20px 0 0;border:0}
.notification-modal.profile-edit-modal .modal-footer>form{width:100%;margin:0;grid-row:1}
.notification-modal.profile-edit-modal .modal-footer :is(.btn,a.btn){display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:0;padding:11px 16px;border-radius:10px;font-size:13px;line-height:1.5}
@media print{.notification-modal{display:none!important}}