:root {
    --navy: #30336b;
    --navy-dark: #20234e;
    --green: #0d8741;
    --orange: #ff8a00;
    --yellow: #ffd52e;
    --red: #d93939;
    --blue: #2474c5;
    --ink: #1e2430;
    --muted: #6d7480;
    --line: #e3e6eb;
    --soft: #f6f7f9;
    --shadow: 0 14px 35px rgba(24, 31, 55, .10);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: #f4f6f8; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: #f4f6f8; font-size: 15px; }
a { color: var(--navy); text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
button, input, textarea, select { font: inherit; }
input, textarea, select { width: 100%; border: 1px solid #bfc5cf; border-radius: 8px; padding: 10px 12px; background: #fff; outline: none; transition: .18s ease; }
input:focus, textarea:focus, select:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(48, 51, 107, .10); }
textarea { resize: vertical; }
label { display: grid; gap: 7px; font-size: 14px; }
small, .small { font-size: 12px; }
.muted { color: var(--muted); }
.preline { white-space: pre-line; }
.topbar { min-height: 76px; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 10px 28px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); }
.brand img { width: 92px; height: 50px; object-fit: contain; }
.brand span { font-size: 18px; }
.topnav { display: flex; gap: 8px; }
.topnav a { padding: 9px 12px; border-radius: 8px; font-size: 14px; }
.topnav a:hover { background: var(--soft); }
.svg-icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }
.label-with-icon { display: inline-flex; align-items: center; gap: 8px; }
.userbox { display: flex; align-items: center; gap: 12px; text-align: right; }
.page { max-width: 1240px; margin: 0 auto; padding: 30px 24px 60px; }
.wide-page { max-width: 1900px; }
.page-heading, .form-heading, .detail-header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 24px; }
.page-heading-dashboard { margin-bottom: 18px; }
h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.05; margin: 0 0 8px; }
h2 { font-size: 18px; margin: 0 0 12px; }
p { line-height: 1.55; }
.heading-actions, .detail-actions, .action-row, .badge-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.btn { border: 1px solid transparent; border-radius: 8px; padding: 10px 15px; cursor: pointer; font-weight: 700; display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-dark); }
.btn-outline { border-color: var(--navy); background: #fff; color: var(--navy); }
.btn-danger { background: var(--red); color: #fff; }
.btn-success { background: var(--green); color: #fff; }
.btn-small { padding: 7px 10px; font-size: 12px; }
.btn-tiny { padding: 5px 8px; font-size: 11px; }
.btn-large { padding: 14px; font-size: 16px; }
.btn-block { width: 100%; }
.flash-stack { display: grid; gap: 8px; margin-bottom: 18px; }
.flash { padding: 12px 14px; border-radius: 8px; font-weight: 650; }
.flash-success { background: #dcf6e7; color: #086833; }
.flash-error { background: #fde4e4; color: #a02020; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card, .narrow-card, .form-shell, .detail-shell { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.login-card { width: min(440px, 100%); padding: 36px; text-align: center; }
.login-logo { width: 210px; height: 120px; object-fit: contain; }
.login-card h1 { font-size: 30px; }
.stack-form { display: grid; gap: 16px; text-align: left; margin-top: 24px; }
.narrow-card { max-width: 620px; margin: 40px auto; padding: 30px; }
.alert-inline { background: #fff4ce; border-radius: 8px; padding: 12px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stats-grid article { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; }
.stats-grid span { color: var(--muted); font-size: 15px; }
.stats-grid strong { font-size: 30px; color: var(--navy); }
.filters { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 15px; display: grid; gap: 16px; align-items: end; margin-bottom: 20px; }
.filters-enhanced { grid-template-columns: 1fr; }
.filter-toolbar { display: grid; grid-template-columns: minmax(230px, 300px) 1fr auto; gap: 16px; align-items: start; }
.toolbar-left, .toolbar-center, .toolbar-right { display: flex; align-items: center; }
.toolbar-center { justify-content: center; gap: 18px; flex-wrap: wrap; }
.toolbar-right { flex-direction: column; align-items: flex-end; gap: 10px; }
.compact-label { gap: 8px; }
.icon-field select { min-width: 190px; }
.scope-buttons, .custom-dates { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.scope-toolbar { justify-content: flex-end; }
.custom-dates-toolbar { justify-content: flex-end; }
.chip { border: 1px solid var(--navy); background: #fff; color: var(--navy); padding: 8px 11px; border-radius: 999px; cursor: pointer; }
.chip.active { background: var(--navy); color: #fff; }
.custom-dates input { width: 170px; }
.switch-chip { position: relative; display: inline-flex; }
.switch-chip input { position: absolute; opacity: 0; pointer-events: none; }
.switch-chip > span { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid #ccd2dc; border-radius: 999px; background: #f5f6f9; color: #5f6672; cursor: pointer; font-weight: 700; }
.switch-chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.filter-search-row { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: end; }
.full-row { width: 100%; }
.live-filter-status { min-height: 16px; color: var(--muted); font-size: 11px; text-align: right; }
.filters.is-loading { opacity: .72; pointer-events: none; }
.date-label-inline { color: var(--muted); }
.table-section { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin: 14px 0; overflow: hidden; }
.table-section summary { cursor: pointer; display: flex; gap: 10px; align-items: center; padding: 16px 18px; font-size: 18px; font-weight: 800; list-style: none; }
.table-section summary::-webkit-details-marker { display: none; }
.count-pill { background: var(--soft); color: var(--navy); border-radius: 999px; padding: 3px 9px; font-size: 12px; }
.table-wrap { overflow-x: auto; }
.orders-table { width: 100%; border-collapse: collapse; min-width: 1260px; font-size: 13px; }
.orders-table th { text-align: left; background: #f9fafb; color: #404753; padding: 12px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; font-size: 12.5px; }
.orders-table td { padding: 11px 10px; border-bottom: 1px solid #edf0f3; vertical-align: middle; }
.order-row.soon td { background: #ffd08a; }
.order-row.soon td:first-child { box-shadow: inset 6px 0 0 #f08a00; }
.order-row.overdue td { animation: overdue-sine-pulse 1.55s ease-in-out infinite; }
.order-row.overdue td:first-child { box-shadow: inset 6px 0 0 #a80000; }
.order-row.paid:not(.overdue):not(.soon) { background: #f0fbf4; }
@keyframes overdue-sine-pulse {
    0%, 100% { background-color: #ffd9d9; }
    50% { background-color: #ff6666; }
}
.actions-cell { white-space: nowrap; }
.icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--navy); border-radius: 50%; margin-right: 4px; color: var(--navy); background: #fff; }
.icon-btn .svg-icon { width: 15px; height: 15px; }
.icon-btn:hover { background: var(--navy); color: #fff; }
.code-pill { border: 1px solid #aab0ba; border-radius: 6px; padding: 5px 7px; font-weight: 800; white-space: nowrap; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.badge-navy { background: var(--navy); color: #fff; }
.badge-orange { background: #fff0d9; color: #a85800; }
.badge-blue { background: #e2f0ff; color: #185a9d; margin-left: 5px; }
.badge-green { background: #dcf6e7; color: #086833; }
.badge-yellow { background: #fff2bd; color: #795d00; }
.badge-gray { background: #e8eaee; color: #5b616b; }
.yesno { display: inline-block; border-radius: 5px; padding: 3px 7px; font-weight: 800; }
.yesno.yes { background: var(--navy); color: #fff; }
.yesno.no { border: 1px solid #d8dbe1; color: #9aa0aa; }
.status-toggle { border: 0; background: transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 11px; }
.status-toggle span { width: 30px; height: 17px; border-radius: 999px; background: #bbb; display: inline-block; position: relative; }
.status-toggle span::after { content: ''; position: absolute; width: 13px; height: 13px; background: white; border-radius: 50%; left: 2px; top: 2px; }
.orders-table th.col-balance, .orders-table th.col-time, .orders-table th.col-place { font-size: 13.5px; color: var(--navy-dark); }
.orders-table td.cell-strong { font-size: 15px; font-weight: 800; color: var(--ink); }
.empty-state { text-align: center; padding: 30px !important; color: var(--muted); }
.legend { display: flex; gap: 18px; font-size: 12px; margin-top: 16px; }
.legend span { display: flex; gap: 6px; align-items: center; }
.legend i { width: 18px; height: 12px; border-radius: 3px; display: inline-block; }
.legend-overdue { background: #e33b3b; animation: overdue-sine-pulse 1.55s ease-in-out infinite; }.legend-soon { background: #f08a00; }.legend-paid { background: #d9f4e2; }
.form-shell, .detail-shell { padding: 30px; }
.form-shell { max-width: 900px; margin: 0 auto; }
.order-form { display: grid; gap: 20px; }
.form-grid { display: grid; gap: 16px; }
.top-grid { grid-template-columns: 1.6fr repeat(3, .7fr); align-items: end; }
.two-cols { grid-template-columns: repeat(2, 1fr); }
.three-cols { grid-template-columns: repeat(3, 1fr); }
.switch-label { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.switch-label input { position: absolute; opacity: 0; pointer-events: none; }
.switch-label i { width: 46px; height: 25px; border-radius: 999px; background: #c8cbd0; position: relative; cursor: pointer; }
.switch-label i::after { content: ''; width: 19px; height: 19px; border-radius: 50%; background: #fff; position: absolute; top: 3px; left: 3px; transition: .18s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch-label input:checked + i { background: var(--navy); }
.switch-label input:checked + i::after { transform: translateX(21px); }
.file-field { border: 1px dashed var(--navy); border-radius: 10px; padding: 14px; }
.file-field input { border: 0; padding: 4px 0; }
.mini-images { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-images img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.detail-header { border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.eyebrow { color: var(--navy); font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 7px; }
.detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.info-card { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: #fff; }
.info-card.span-2 { grid-column: span 2; }
.info-card h2 { color: var(--navy); }
.money-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.money-summary span { display: grid; gap: 4px; color: var(--muted); }
.money-summary strong { font-size: 20px; color: var(--ink); }
.content-section { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.inline-upload { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.image-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.image-gallery figure { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.image-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.image-gallery figcaption { padding: 9px; font-size: 11px; display: grid; gap: 7px; }
.image-gallery figcaption > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-gallery figcaption div { display: flex; gap: 10px; }
.image-gallery form { display: inline; }
.link-danger { border: 0; background: none; color: var(--red); padding: 0; cursor: pointer; }
.timeline { list-style: none; padding: 0; display: grid; gap: 12px; }
.timeline li { border-left: 3px solid var(--navy); padding: 6px 0 6px 14px; display: grid; gap: 3px; }
.timeline small { color: var(--muted); }
.danger-zone { margin-top: 28px; border: 1px solid #f0c6c6; background: #fff9f9; border-radius: 12px; padding: 18px; }
.annul-form, .inline-reset { display: flex; gap: 8px; align-items: center; }
.users-table { min-width: 900px; }
@media (max-width: 1100px) {
    .filter-toolbar { grid-template-columns: 1fr; }
    .toolbar-left, .toolbar-center, .toolbar-right { justify-content: flex-start; }
    .toolbar-right { align-items: flex-start; }
    .filter-search-row { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: repeat(2, 1fr); }
    .top-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .topbar { grid-template-columns: 1fr auto; padding: 8px 14px; gap: 10px; }
    .topnav { grid-column: 1 / -1; overflow-x: auto; order: 3; }
    .brand span { display: none; }
    .brand img { width: 78px; }
    .userbox .muted { display: none; }
    .page { padding: 20px 12px 40px; }
    .page-heading, .form-heading, .detail-header { flex-direction: column; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .toolbar-center { justify-content: flex-start; }
    .scope-toolbar, .custom-dates-toolbar { justify-content: flex-start; }
    .form-shell, .detail-shell { padding: 18px; border-radius: 10px; }
    .two-cols, .three-cols, .top-grid, .detail-grid { grid-template-columns: 1fr; }
    .info-card.span-2 { grid-column: span 1; }
    .money-summary { grid-template-columns: 1fr; }
    .custom-dates input { width: 135px; }
    .inline-upload, .annul-form, .inline-reset { flex-direction: column; align-items: stretch; }
}
.upload-help { color: var(--muted); line-height: 1.4; }
.upload-selection { color: var(--green); font-size: 13px; font-weight: 750; }
.create-image-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.create-image-previews[hidden] { display: none; }
.create-image-previews figure { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.create-image-previews img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.create-image-previews figcaption { padding: 7px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auto-upload-form { margin-bottom: 16px; }
.auto-upload-field { border: 1px dashed var(--navy); border-radius: 10px; padding: 14px; background: #fbfbfd; }
.auto-upload-field > span { font-weight: 800; color: var(--navy); }
.auto-upload-field input { border: 0; padding: 7px 0 2px; background: transparent; }
.auto-upload-field small { color: var(--muted); }
.upload-progress { color: var(--green); font-size: 13px; min-height: 18px; }


.dashboard-heading-actions { justify-content: flex-end; }
.clock-box { min-width: 250px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(135deg, #ffffff, #f4f7fb); box-shadow: var(--shadow); display: grid; gap: 4px; text-align: right; }
.clock-box-label { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.clock-box strong { font-size: 28px; color: var(--navy); line-height: 1; }
.clock-box span[data-clock-date] { font-size: 15px; color: var(--ink); }
.led-panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 18px; }
.led-panel-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.led-panel-title { font-weight: 800; color: var(--navy); }
.led-screen { position: relative; overflow: hidden; border-radius: 12px; background: #0b0f1f; border: 4px solid #161b31; min-height: 70px; display: flex; align-items: center; box-shadow: inset 0 0 18px rgba(0,0,0,.55); }
.led-screen::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1.2px); background-size: 10px 10px; opacity: .35; pointer-events: none; }
.led-marquee-track { display: inline-flex; align-items: center; gap: 60px; white-space: nowrap; min-width: max-content; padding-left: 100%; animation: led-scroll 22s linear infinite; }
.led-marquee-track span { font-size: clamp(22px, 3vw, 34px); line-height: 1; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #80d8ff; text-shadow: 0 0 7px rgba(128,216,255,.95), 0 0 18px rgba(128,216,255,.45); padding: 18px 0; }
@keyframes led-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.led-editor-form { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.app-modal-backdrop[hidden] { display: none !important; }
.app-modal-backdrop { position: fixed; inset: 0; background: rgba(17, 22, 35, .55); display: grid; place-items: center; z-index: 3000; padding: 18px; }
.app-modal { width: min(560px, 100%); background: #fff; border-radius: 18px; box-shadow: 0 30px 60px rgba(9, 16, 35, .28); padding: 24px 24px 20px; position: relative; border: 1px solid var(--line); }
.app-modal-close { position: absolute; top: 14px; right: 16px; border: 0; background: transparent; font-size: 28px; line-height: 1; color: #8b92a0; cursor: pointer; }
.app-modal-content h2 { font-size: 32px; margin: 0 0 12px; color: var(--ink); }
.app-modal-message { margin: 0 0 10px; font-size: 19px; line-height: 1.5; color: #343b47; }
.app-modal-warning { margin: 0 0 12px; font-size: 18px; line-height: 1.45; color: var(--red); font-weight: 700; }
.app-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
[data-toggleable][hidden] { display: none !important; }
@media (max-width: 900px) {
  .dashboard-heading-actions { width: 100%; justify-content: flex-start; }
  .clock-box { text-align: left; min-width: unset; width: 100%; }
  .led-panel-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .clock-box strong { font-size: 24px; }
  .led-marquee-track span { font-size: 20px; }
  .app-modal { padding: 20px 18px 18px; }
  .app-modal-content h2 { font-size: 26px; }
  .app-modal-message, .app-modal-warning { font-size: 17px; }
  .app-modal-actions { flex-direction: column; }
}


.action-card {
    min-width: 250px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--navy);
    background: linear-gradient(135deg, var(--navy), #45408e);
    color: #fff;
    box-shadow: var(--shadow);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.action-card:hover { color: #fff; transform: translateY(-1px); }
.action-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.action-card-icon .svg-icon { width: 22px; height: 22px; }
.action-card-text { display: grid; gap: 2px; }
.action-card-text small {
    color: rgba(255,255,255,.82);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.action-card-text strong { font-size: 24px; line-height: 1.05; color: #fff; }
.dashboard-heading-actions { align-items: stretch; gap: 12px; }
.dashboard-heading-actions .clock-box,
.dashboard-heading-actions .action-card { min-height: 86px; }
@media (max-width: 900px) {
  .action-card { width: 100%; min-width: unset; }
}


/* V5.3 mobile compact detail page */
.compact-order-view .detail-header { gap: 12px; }
.compact-detail-header { align-items: flex-start; }
.compact-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.compact-order-stack { display: grid; gap: 12px; margin-top: 14px; }
.compact-card { padding: 16px 18px; }
.compact-card p { margin: 4px 0 0; }
.detail-summary-card { padding: 16px 18px; }
.detail-summary-header { margin-bottom: 10px; }
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 16px;
  align-items: start;
}
.summary-item { display: grid; gap: 4px; }
.summary-label { font-size: 14px; color: var(--muted); }
.summary-item strong { font-size: 18px; line-height: 1.25; color: var(--ink); }
.summary-item small { font-size: 14px; color: var(--muted); line-height: 1.35; }
.summary-box {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}
.summary-store-box { grid-column: span 2; }
.summary-update-box { grid-column: span 2; }
.summary-status-box strong { font-size: 20px; }
.payment-item strong { font-size: 24px; }
.balance-item .summary-label { color: var(--red); font-weight: 800; }
.balance-item strong { color: var(--red); }
.balance-item.has-balance strong { color: var(--red); }
.compact-content-section { margin-top: 18px; padding-top: 16px; }
.compact-upload-field { padding: 12px 14px; }
.compact-image-gallery { gap: 12px; }
.compact-timeline { gap: 10px; }
.compact-danger-zone { margin-top: 18px; padding: 16px; }
.compact-action-row { display: flex; flex-wrap: wrap; gap: 10px; }
.compact-action-row > form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.action-card-text > strong:only-child { margin: auto 0; }
.action-card-text small:empty { display: none; }

@media (max-width: 760px) {
  .topbar {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 10px 10px 8px;
    gap: 8px;
  }
  .brand img { width: 92px; }
  .topnav {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    padding-bottom: 2px;
  }
  .topnav a { white-space: nowrap; font-size: 14px; padding: 6px 2px; }
  .userbox { gap: 8px; }
  .userbox strong { font-size: 14px; }
  .btn-logout { padding: 9px 12px; border-radius: 12px; font-size: 14px; }
  .page { padding: 10px 10px 26px; }
  .page-heading h1 { font-size: 24px; }
  .dashboard-heading-actions .clock-box,
  .dashboard-heading-actions .action-card { min-height: 72px; }
  .action-card { padding: 12px 14px; }
  .action-card-text strong { font-size: 20px; }
  .clock-box strong { font-size: 22px; }
  .clock-box span[data-clock-date] { font-size: 13px; }

  .detail-shell { padding: 12px; }
  .compact-order-view .detail-header { padding-bottom: 12px; }
  .compact-detail-header h1 { font-size: 28px; margin-bottom: 8px; }
  .eyebrow { font-size: 11px; margin-bottom: 4px; }
  .badge-row { gap: 8px; }
  .badge-row .badge { padding: 8px 12px; font-size: 13px; }
  .compact-detail-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .compact-detail-actions .btn { width: 100%; padding-inline: 6px; }
  .compact-order-stack { gap: 10px; margin-top: 10px; }
  .compact-card,
  .detail-summary-card,
  .compact-danger-zone,
  .content-section,
  .info-card { border-radius: 12px; }
  .compact-card,
  .detail-summary-card { padding: 12px 14px; }
  .compact-card h2,
  .detail-summary-card h2,
  .content-section h2,
  .danger-zone h2 { font-size: 18px; margin-bottom: 8px; }
  .compact-card p,
  .summary-item strong,
  .summary-item small,
  .timeline li,
  .muted { font-size: 14px; }
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
  }
  .summary-item strong { font-size: 16px; }
  .payment-item strong { font-size: 18px; }
  .summary-status-box strong { font-size: 18px; }
  .summary-store-box,
  .summary-update-box { grid-column: span 2; }
  .compact-content-section { margin-top: 12px; padding-top: 12px; }
  .auto-upload-form { margin-bottom: 10px; }
  .compact-upload-field { padding: 10px 12px; }
  .compact-upload-field small,
  .upload-progress { font-size: 12px; }
  .image-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .image-gallery figcaption { padding: 7px; font-size: 10px; }
  .timeline li { padding: 4px 0 4px 10px; }
  .compact-danger-zone { padding: 12px; }
  .compact-action-row { gap: 8px; }
  .compact-action-row > form,
  .annul-form { width: 100%; }
  .annul-form input { min-width: 0; width: 100%; }
}


/* Cake shape selector */
.shape-picker-section {
  display: grid;
  gap: 12px;
  margin: 6px 0 10px;
}
.shape-picker-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.shape-picker-heading span {
  font-weight: 800;
  color: var(--ink);
}
.shape-picker-heading small {
  color: var(--muted);
}
.shape-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.shape-option {
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  padding: 12px 10px;
  display: grid;
  justify-items: center;
  gap: 8px;
  cursor: pointer;
  transition: .18s ease;
  color: var(--ink);
  min-height: 88px;
}
.shape-option:hover { border-color: var(--primary); transform: translateY(-1px); }
.shape-option svg { width: 28px; height: 28px; }
.shape-option span { font-size: 13px; font-weight: 700; text-align: center; line-height: 1.2; }
.shape-option.is-active {
  border-color: var(--primary);
  background: rgba(52, 55, 125, 0.08);
  box-shadow: 0 0 0 2px rgba(52,55,125,0.12) inset;
  color: var(--primary);
}

@media (max-width: 760px) {
  .shape-picker-heading { flex-direction: column; align-items: flex-start; }
  .shape-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shape-option { min-height: 78px; padding: 10px 8px; }
  .shape-option span { font-size: 12px; }
}


/* V5.6 detail mobile focus and visibility */
@media (max-width: 760px) {
  body.order-detail-mobile-focus .topbar { display: none; }
  body.order-detail-mobile-focus .page { padding: 8px 8px 18px; }
  body.order-detail-mobile-focus .detail-shell { padding: 10px; border-radius: 14px; }
  body.order-detail-mobile-focus .compact-detail-header h1 { font-size: 24px; line-height: 1.05; }
  body.order-detail-mobile-focus .compact-detail-actions { gap: 8px; }
  body.order-detail-mobile-focus .compact-detail-actions .btn { min-height: 44px; font-size: 13px; border-radius: 12px; }
  body.order-detail-mobile-focus .badge-row { gap: 6px; }
  body.order-detail-mobile-focus .badge-row .badge { padding: 7px 10px; font-size: 12px; }
  body.order-detail-mobile-focus .compact-card,
  body.order-detail-mobile-focus .detail-summary-card,
  body.order-detail-mobile-focus .compact-danger-zone,
  body.order-detail-mobile-focus .content-section,
  body.order-detail-mobile-focus .info-card { padding: 10px 12px; }
  body.order-detail-mobile-focus .compact-card h2,
  body.order-detail-mobile-focus .detail-summary-card h2,
  body.order-detail-mobile-focus .content-section h2,
  body.order-detail-mobile-focus .danger-zone h2 { font-size: 16px; margin-bottom: 6px; }
  body.order-detail-mobile-focus .compact-card p,
  body.order-detail-mobile-focus .summary-item strong,
  body.order-detail-mobile-focus .summary-item small,
  body.order-detail-mobile-focus .summary-label,
  body.order-detail-mobile-focus .timeline li,
  body.order-detail-mobile-focus .muted { font-size: 13px; }
  body.order-detail-mobile-focus .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
  body.order-detail-mobile-focus .summary-item { gap: 2px; }
  body.order-detail-mobile-focus .summary-item strong { font-size: 14px; line-height: 1.2; }
  body.order-detail-mobile-focus .payment-item strong { font-size: 16px; }
  body.order-detail-mobile-focus .summary-status-box strong { font-size: 16px; }
  body.order-detail-mobile-focus .summary-box { padding: 9px 10px; border-radius: 10px; }
  body.order-detail-mobile-focus .summary-store-box,
  body.order-detail-mobile-focus .summary-update-box { grid-column: span 2; }
  body.order-detail-mobile-focus .compact-content-section { margin-top: 10px; padding-top: 10px; }
  body.order-detail-mobile-focus .section-title h2,
  body.order-detail-mobile-focus .content-section > h2 { font-size: 16px; }
  body.order-detail-mobile-focus .compact-upload-field { padding: 10px; }
  body.order-detail-mobile-focus .compact-upload-field > span { font-size: 14px; }
  body.order-detail-mobile-focus .image-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.order-detail-mobile-focus .image-gallery figure { border-radius: 10px; overflow: hidden; }
  body.order-detail-mobile-focus .image-gallery img { aspect-ratio: 1 / 1; object-fit: cover; display:block; width:100%; }
  body.order-detail-mobile-focus .image-gallery figcaption { padding: 6px; font-size: 10px; }
  body.order-detail-mobile-focus .compact-danger-zone { padding: 10px; }
}


/* V5.7 form/detail refinements */
.top-grid { grid-template-columns: minmax(240px, 1.3fr) minmax(320px, 1fr); align-items: end; }
.switch-inline-group { display: flex; align-items: end; gap: 26px; flex-wrap: wrap; }
.switch-inline-group .switch-label { min-width: 96px; }
.form-images-section { margin-top: 0; }
.image-gallery-manage figcaption div { display:flex; gap:12px; align-items:center; }
.detail-close-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--line); border-radius:12px;
  color:var(--ink); text-decoration:none; font-size:28px; line-height:1; background:#fff;
}
.detail-close-btn:hover { border-color: var(--primary); color: var(--primary); }
.image-view-only-actions a { font-weight: 700; }

@media (max-width: 760px) {
  body.order-form-mobile-focus .topbar { display:none; }
  body.order-form-mobile-focus .page { padding: 10px 8px 24px; }
  body.order-form-mobile-focus .form-shell { padding: 16px 14px; border-radius: 14px; }
  body.order-form-mobile-focus .form-heading { gap: 12px; }
  body.order-form-mobile-focus .form-heading h1 { font-size: 26px; line-height: 1.08; }
  body.order-form-mobile-focus .form-heading .btn { align-self: flex-start; }
  body.order-form-mobile-focus .top-grid { grid-template-columns: 1fr; gap: 14px; }
  body.order-form-mobile-focus .switch-inline-group { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  body.order-form-mobile-focus .switch-inline-group .switch-label { min-width: 0; justify-items: center; align-items: center; text-align:center; }
  body.order-form-mobile-focus .switch-inline-group .switch-label span { font-size: 13px; }
  body.order-form-mobile-focus .file-field { padding: 12px; }
  body.order-form-mobile-focus .image-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  body.order-detail-mobile-focus .compact-detail-header { align-items: flex-start; position: relative; padding-right: 40px; }
  body.order-detail-mobile-focus .compact-detail-actions { position:absolute; top:0; right:0; }
  body.order-detail-mobile-focus .detail-close-btn { width:36px; height:36px; border-radius:10px; font-size:24px; }
}


/* Floating panel */
.app-panel-backdrop {
  position: fixed; inset: 0; background: rgba(15, 18, 35, .5);
  backdrop-filter: blur(2px); z-index: 1200; display: grid; place-items: center; padding: 24px;
}
.app-panel {
  width: min(1100px, 96vw); height: min(92vh, 860px); background: #fff; border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.24); display: grid; grid-template-rows: auto 1fr; overflow: hidden;
}
.app-panel-header {
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 14px 18px;
  border-bottom: 1px solid var(--line); background: #fff;
}
.app-panel-header h2 { margin: 0; font-size: 22px; color: var(--ink); }
.app-panel-close {
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 28px; line-height: 1; cursor: pointer;
}
.app-panel-close:hover { color: var(--primary); border-color: var(--primary); }
.app-panel-body { min-height: 0; background: #f7f8fc; overflow-x: hidden; }
.app-panel-frame { width: 100%; height: 100%; border: 0; background: #f7f8fc; display:block; overflow-x:hidden; }
body.panel-open { overflow: hidden; }

@media (max-width: 760px) {
  .app-panel-backdrop { padding: 0; }
  .app-panel { width: 100vw; height: 100vh; max-height:none; border-radius: 0; }
  .app-panel-header { padding: 10px 12px; }
  .app-panel-header h2 { font-size: 18px; }
  .app-panel-close {
    position: fixed; top: 10px; right: 10px; z-index: 5;
    width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.96);
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
  }
}

@media (max-width: 760px) {
  body.order-detail-mobile-focus .detail-close-btn { position: fixed; top: 10px; right: 10px; z-index: 30; box-shadow: 0 8px 20px rgba(0,0,0,.14); }
}

/* V5.9 critical fix: keep floating panel closed until an action is clicked */
.app-panel-backdrop[hidden] { display: none !important; }


/* V5.10 floating windows compact refresh */
body.panel-embedded .topbar { display:none !important; }
body.panel-embedded .page { padding:0; overflow-x:hidden; }
body.panel-embedded { overflow-x:hidden; }
body.panel-embedded .flash-stack { display:none; }
body.panel-embedded .form-shell,
body.panel-embedded .detail-shell { max-width:none; margin:0; padding:18px 20px 20px; border:0; border-radius:0; box-shadow:none; }
.panel-page-close { margin-left:auto; }
.panel-detail-mode .detail-header,
.panel-form-shell .form-heading { position:relative; padding-right:56px; }
.panel-detail-layout { display:grid; grid-template-columns:minmax(280px,320px) minmax(0,1fr); gap:18px; margin-top:14px; align-items:start; }
.panel-media-column, .panel-content-column { display:grid; gap:14px; }
.panel-media-card { margin-top:0; padding-top:0; border-top:0; }
.panel-side-gallery { grid-template-columns:1fr; }
.panel-detail-mode .compact-content-section { margin-top:0; }
.panel-detail-mode .detail-summary-card { padding:14px 16px; }
.panel-detail-mode .summary-grid { grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px 14px; }
.panel-detail-mode .summary-store-box,
.panel-detail-mode .summary-update-box { grid-column:span 2; }
.panel-detail-mode .summary-status-box { align-self:end; }
.panel-detail-mode .compact-card { padding:14px 16px; }
.panel-detail-mode .compact-card h2,
.panel-detail-mode .detail-summary-card h2 { margin-bottom:6px; }
.panel-detail-mode .compact-danger-zone { margin-top:0; padding:14px 16px; }
.panel-detail-mode .timeline { gap:8px; }
.panel-detail-mode .timeline li { padding:5px 0 5px 12px; }
.panel-detail-mode .image-gallery img { aspect-ratio: 5/4; }
.panel-form-shell { max-width:none; }
.panel-form-compact { gap:16px; }
.panel-form-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,360px); gap:18px; align-items:start; }
.panel-form-main { display:grid; gap:16px; min-width:0; width:100%; }
.panel-form-side { display:grid; gap:14px; min-width:0; align-content:start; }
.panel-form-compact .form-grid { gap:14px; }
.panel-form-compact .top-grid { grid-template-columns:minmax(240px,1fr) minmax(280px,340px); align-items:end; }
.panel-form-compact .switch-inline-group { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; align-items:end; }
.panel-form-compact .switch-inline-group .switch-label { min-width:0; justify-items:center; align-items:center; text-align:center; }
.panel-form-compact .shape-picker { grid-template-columns:repeat(5, minmax(0,1fr)); }
.panel-form-compact .shape-option { min-height:72px; padding:9px 8px; }
.panel-form-compact label textarea { min-height:84px; }
.panel-form-compact .form-images-section { margin-top:0; border:1px solid var(--line); border-radius:14px; padding:12px; }
.panel-form-compact .image-gallery-manage { grid-template-columns:repeat(2, minmax(0,1fr)); }
.panel-form-compact .file-field { padding:12px; }
.panel-form-compact .btn-large { margin-top:4px; }
.app-panel { width:min(1380px, 96vw); max-height:96vh; height:auto; overflow:hidden; grid-template-rows:1fr; }
.app-panel-header { display:none; }
.app-panel-body { background:#fff; overflow-y:auto; overflow-x:hidden; min-height:0; }
.app-panel-frame { width:100%; border:0; background:#fff; display:block; min-height:520px; overflow-x:hidden; }

@media (max-width: 1100px) {
  .panel-detail-layout { grid-template-columns:1fr; }
  .panel-side-gallery { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .panel-form-layout { grid-template-columns:1fr; }
  .panel-form-side { order:2; }
}

@media (max-width: 760px) {
  .app-panel-backdrop { padding:0; align-items:start; overflow:auto; }
  .app-panel { width:100%; max-width:none; min-height:100%; height:auto; max-height:none; border-radius:0; margin:0; overflow:visible; }
  .app-panel-body { overflow:visible; }
  body.panel-embedded .form-shell,
  body.panel-embedded .detail-shell { padding:12px 12px 14px; overflow:visible; }
  body.panel-embedded .detail-shell { border-radius:0; }
  .panel-detail-mode .summary-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 10px; }
  .panel-detail-mode .summary-store-box,
  .panel-detail-mode .summary-update-box { grid-column:span 2; }
  .panel-detail-mode .compact-card,
  .panel-detail-mode .detail-summary-card,
  .panel-detail-mode .panel-media-card,
  .panel-detail-mode .compact-danger-zone { padding:10px 12px; }
  .panel-side-gallery { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .panel-form-compact .top-grid,
  .panel-form-compact .two-cols,
  .panel-form-compact .three-cols { grid-template-columns:1fr; }
  .panel-form-compact .switch-inline-group { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
  .panel-form-compact .shape-picker { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .panel-form-compact .image-gallery-manage { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .panel-page-close { width:38px; height:38px; border-radius:12px; position:absolute; top:0; right:0; }
  body.panel-embedded.order-detail-mobile-focus .detail-header { padding-right:46px; }
  body.panel-embedded.order-form-mobile-focus .form-heading { padding-right:46px; }
}