/* HayOrder 1.1.30: balanced settings grid, two-row navigation and compact mobile actions. */

/* Eight sections form two calm navigation rows on desktop. */
.hayorder-settings-body .ho-settings .ho-settings-tabs{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:9px!important}
.hayorder-settings-body .ho-settings .ho-settings-tabs a{justify-content:flex-start!important;min-height:52px!important;padding:10px 13px!important;border-radius:11px!important;font-size:12px!important;font-weight:690!important;letter-spacing:-.01em!important}
.hayorder-settings-body .ho-settings .ho-settings-tabs .icon{width:17px!important;height:17px!important}

/* Every logical pair occupies one row: page/workflow, branding/design, notices/app, account/system. */
.hayorder-settings-body .ho-settings .ho-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch!important;gap:16px!important}
.hayorder-settings-body .ho-settings .ho-settings-grid>#settings-system{grid-column:auto!important}
.hayorder-settings-body .ho-settings .ho-panel{height:100%;box-sizing:border-box}
.hayorder-settings-body .ho-settings .ho-panel>header{align-items:flex-start!important}
.hayorder-settings-body .ho-settings .ho-panel>header>div{min-width:0}
.hayorder-settings-body .ho-settings .ho-panel header h3{font-size:18px!important;line-height:1.25!important}
.hayorder-settings-body .ho-settings .ho-panel header p{max-width:620px!important}

/* Workflow explanation fills the card with useful information instead of empty space. */
.ho-settings .ho-workflow-statuses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:13px}
.ho-settings .ho-workflow-statuses article{position:relative;display:grid;gap:3px;min-width:0;padding:13px 10px 11px;border:1px solid var(--line);border-radius:11px;background:var(--surface-soft)}
.ho-settings .ho-workflow-statuses article>span{width:9px;height:9px;border-radius:50%;background:#42d998;box-shadow:0 0 0 4px rgba(66,217,152,.11)}
.ho-settings .ho-workflow-statuses .is-accepted{background:#69b8ff;box-shadow:0 0 0 4px rgba(105,184,255,.11)}
.ho-settings .ho-workflow-statuses .is-processing{background:#f0aa4b;box-shadow:0 0 0 4px rgba(240,170,75,.11)}
.ho-settings .ho-workflow-statuses .is-ready{background:#36cbe8;box-shadow:0 0 0 4px rgba(54,203,232,.11)}
.ho-settings .ho-workflow-statuses article>small{position:absolute;top:10px;right:10px;color:var(--muted);font-size:9px;font-weight:760}
.ho-settings .ho-workflow-statuses strong{margin-top:5px;font-size:11.5px;line-height:1.25;white-space:normal}
.ho-settings .ho-workflow-statuses em{color:var(--muted);font-size:9.5px;font-style:normal;line-height:1.3}
.ho-settings .ho-workflow-info{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:13px;border:1px solid color-mix(in srgb,var(--success) 30%,var(--line));border-radius:11px;background:color-mix(in srgb,var(--success) 7%,var(--surface-soft))}
.ho-settings .ho-workflow-info>.icon{flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:var(--success)}
.ho-settings .ho-workflow-info>div{display:grid;gap:3px}.ho-settings .ho-workflow-info strong{font-size:12px}.ho-settings .ho-workflow-info small{color:var(--muted);font-size:10.5px;line-height:1.45}

/* Dashboard design shows the exact UI elements affected by the chosen accent. */
.ho-settings .ho-dashboard-appearance{display:flex;flex-direction:column}
.ho-settings .ho-dashboard-appearance .ho-dashboard-accent-field{max-width:none!important;width:100%;margin:10px 0 12px!important}
.ho-settings .ho-dashboard-presets{grid-template-columns:repeat(3,minmax(0,1fr))!important;margin:0 0 14px!important}
.ho-settings .ho-dashboard-preview{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(150px,.72fr)!important;gap:10px!important;padding:14px!important;align-items:stretch!important}
.ho-settings .ho-dashboard-preview-title{grid-column:1/-1;display:grid;gap:2px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.ho-settings .ho-dashboard-preview-title>span{font-size:13px;font-weight:760}.ho-settings .ho-dashboard-preview-title>small{color:var(--muted);font-size:10px}
.ho-settings .ho-dashboard-preview-menu{display:flex;align-items:center;gap:8px;min-width:0;padding:10px;border:1px solid var(--preview-accent);border-radius:9px;background:color-mix(in srgb,var(--preview-accent) 13%,transparent)}
.ho-settings .ho-dashboard-preview-menu>span{width:4px;height:25px;border-radius:4px;background:var(--preview-accent)}
.ho-settings .ho-dashboard-preview-menu>strong{font-size:11px;line-height:1.3}
.ho-settings .ho-dashboard-preview-card{display:grid;gap:2px;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.ho-settings .ho-dashboard-preview-card small{color:var(--muted);font-size:9px}.ho-settings .ho-dashboard-preview-card strong{font-size:20px;line-height:1.1}.ho-settings .ho-dashboard-preview-card em{color:var(--preview-link);font-size:9.5px;font-style:normal;font-weight:700}
.ho-settings .ho-dashboard-preview-actions{grid-column:1/-1;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;width:100%}
.ho-settings .ho-dashboard-preview-actions b,.ho-settings .ho-dashboard-preview-actions em{display:flex!important;align-items:center;justify-content:center;min-height:38px!important;padding:8px 10px!important;border-radius:8px!important;font-size:11px!important;font-style:normal!important;text-align:center}
.ho-settings .ho-dashboard-preview-actions em{border:1px solid var(--preview-accent)!important;color:var(--preview-link)!important}
.ho-settings .ho-dashboard-usage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.ho-settings .ho-dashboard-usage article{display:flex;align-items:flex-start;gap:8px;padding:11px 9px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft)}
.ho-settings .ho-dashboard-usage .icon{flex:0 0 16px;width:16px;height:16px;color:var(--link)}
.ho-settings .ho-dashboard-usage article>div{display:grid;gap:3px;min-width:0}.ho-settings .ho-dashboard-usage strong{font-size:10.5px;line-height:1.3}.ho-settings .ho-dashboard-usage small{color:var(--muted);font-size:9px;line-height:1.35}

/* Consistent action rhythm. */
.ho-settings .ho-link-pair{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
.ho-settings .ho-link-pair a,.ho-settings .ho-small-btn,.ho-settings .ho-preview-link,.ho-settings .ho-save-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:10px!important;font-weight:700!important}
.ho-settings .ho-settings-savebar>div{display:grid!important;grid-template-columns:auto auto!important;gap:9px!important}

/* On phones: primary order action on row one, secondary actions side by side below. */
@media(max-width:700px){
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons>form:has(.ho-action-accept),
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons>form:has(.ho54-primary-action){grid-column:1/-1!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons form,
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons>button{width:100%!important;min-width:0!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons button{width:100%!important;min-width:0!important;min-height:48px!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons>.ho54-print{grid-column:auto!important}
}

@media(max-width:1050px){
  .hayorder-settings-body .ho-settings .ho-settings-grid{grid-template-columns:minmax(0,1fr)!important}
  .hayorder-settings-body .ho-settings .ho-settings-grid>#settings-system{grid-column:auto!important}
}
@media(max-width:760px){
  .hayorder-settings-body .ho-settings .ho-settings-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hayorder-settings-body .ho-settings .ho-settings-tabs a{min-height:48px!important;padding:9px 10px!important}
  .ho-settings .ho-workflow-statuses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ho-settings .ho-dashboard-usage{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:430px){
  .ho-settings .ho-dashboard-preview{grid-template-columns:minmax(0,1fr)!important}
  .ho-settings .ho-dashboard-preview-title,.ho-settings .ho-dashboard-preview-actions{grid-column:1!important}
  .ho-settings .ho-settings-savebar>div{grid-template-columns:minmax(0,1fr)!important}
}