/* Red Comercial UI System 2026 */
:root{
  --ui-primary:var(--brand-primary,#0f3f93);
  --ui-secondary:var(--brand-secondary,#155dd7);
  --ui-accent:var(--brand-accent,#ef3f44);
  --ui-success:#138a55;
  --ui-warning:#b7791f;
  --ui-danger:#d92d3a;
  --ui-info:#1967b3;
  --ui-bg:#f4f6f9;
  --ui-surface:#fff;
  --ui-subtle:#f8fafc;
  --ui-soft-blue:#eef4ff;
  --ui-text:#182033;
  --ui-text-2:#445066;
  --ui-muted:#6d788b;
  --ui-border:#e2e7ef;
  --ui-border-strong:#d4dbe6;
  --ui-radius-xs:8px;
  --ui-radius-sm:10px;
  --ui-radius-md:14px;
  --ui-radius-lg:18px;
  --ui-shadow-1:0 1px 2px rgba(20,35,60,.03),0 5px 16px rgba(20,35,60,.035);
  --ui-shadow-2:0 10px 30px rgba(20,35,60,.08);
  --ui-header-h:72px;
  --ui-control-h:42px;
  --page-bg:var(--ui-bg);
  --surface:var(--ui-surface);
  --surface-soft:var(--ui-subtle);
  --text:var(--ui-text);
  --muted:var(--ui-muted);
  --line:var(--ui-border);
  --shadow:var(--ui-shadow-1);
  --radius:var(--ui-radius-md);
  --topbar-h:var(--ui-header-h);
}
*{box-sizing:border-box}
html{min-width:320px;scroll-behavior:smooth}
body{margin:0;color:var(--ui-text);background:var(--ui-bg);font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif;font-size:14px;line-height:1.5;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
a{color:var(--ui-primary);text-decoration:none}
a:hover{color:var(--ui-secondary)}
img{max-width:100%}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid rgba(21,93,215,.18);outline-offset:2px}
[hidden]{display:none!important}
[x-cloak]{display:none!important}
.icon{width:20px;height:20px;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.muted{color:var(--ui-muted)!important}.min-w-0{min-width:0}
.surface,.ui-card{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-1)}
.section-heading,.page-heading,.ui-card-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.section-heading{margin-bottom:14px}.section-heading>div{min-width:0}
.section-heading h2,.ui-card-heading h2{margin:0;color:var(--ui-text);font-size:15px;font-weight:750;letter-spacing:-.012em}
.section-heading p{margin:3px 0 0;color:var(--ui-muted);font-size:13px}
.section-heading>a,.mini-link{color:var(--ui-primary);font-size:12px;font-weight:700;white-space:nowrap}
.eyebrow{display:inline-flex;align-items:center;color:var(--ui-primary);font-size:11px;font-weight:750;letter-spacing:.055em;text-transform:uppercase}

/* Buttons */
.btn{min-height:var(--ui-control-h);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;border:1px solid transparent;border-radius:10px;font-size:13px;font-weight:700;line-height:1.1;box-shadow:none;transition:background-color .16s,border-color .16s,color .16s,box-shadow .16s,transform .16s}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:none}
.btn-sm{min-height:34px;padding:0 12px;border-radius:9px;font-size:12px}.btn-lg{min-height:48px;padding:0 21px}
.btn-brand,.btn-primary{color:#fff;background:var(--ui-primary);border-color:var(--ui-primary);box-shadow:0 6px 14px rgba(15,63,147,.14)}
.btn-brand:hover,.btn-brand:focus,.btn-primary:hover,.btn-primary:focus{color:#fff;background:var(--ui-secondary);border-color:var(--ui-secondary)}
.btn-outline-brand,.btn-outline-primary{color:var(--ui-primary);background:#fff;border-color:#9db6df}
.btn-outline-brand:hover,.btn-outline-primary:hover{color:#fff;background:var(--ui-primary);border-color:var(--ui-primary)}
.btn-light,.btn-secondary{color:var(--ui-text-2);background:#fff;border-color:var(--ui-border-strong)}
.btn-light:hover,.btn-secondary:hover{color:var(--ui-primary);background:var(--ui-soft-blue);border-color:#c8d8ee}
.btn-danger{color:#fff;background:var(--ui-danger);border-color:var(--ui-danger)}
.btn-danger:hover{color:#fff;background:#bd2230;border-color:#bd2230}
.btn-outline-danger{color:var(--ui-danger);background:#fff;border-color:#ebadb4}.btn-outline-danger:hover{color:#fff;background:var(--ui-danger);border-color:var(--ui-danger)}
.btn-danger-soft{color:var(--ui-danger);background:#fff1f2;border-color:#ffd3d7}
.btn[disabled],.btn.disabled{opacity:.55;pointer-events:none;transform:none}
.icon-button{width:42px;height:42px;min-width:42px;display:grid;place-items:center;padding:0;color:var(--ui-text-2);background:transparent;border:1px solid transparent;border-radius:11px;transition:background-color .16s,color .16s,border-color .16s}
.icon-button:hover,.icon-button.active{color:var(--ui-primary);background:var(--ui-soft-blue);border-color:#dce7f7}

/* Forms */
.form-label,.form-field label,.panel-form label,.compact-form label,.stack-form label,.request-form label{color:var(--ui-text-2);font-size:12px;font-weight:700}
.form-control,.form-select,.panel-form input,.panel-form select,.panel-form textarea,.compact-form input,.compact-form select,.compact-form textarea,.stack-form input,.stack-form select,.stack-form textarea,.request-form input,.request-form select,.request-form textarea{min-height:var(--ui-control-h);width:100%;color:var(--ui-text);background:#fff;border:1px solid var(--ui-border-strong);border-radius:10px;box-shadow:none;font-size:13px;transition:border-color .16s,box-shadow .16s}
.form-control:focus,.form-select:focus,.panel-form input:focus,.panel-form select:focus,.panel-form textarea:focus,.compact-form input:focus,.compact-form select:focus,.compact-form textarea:focus,.stack-form input:focus,.stack-form select:focus,.stack-form textarea:focus,.request-form input:focus,.request-form select:focus,.request-form textarea:focus{border-color:#83a6dc;box-shadow:0 0 0 4px rgba(21,93,215,.09);outline:0}
textarea.form-control,.panel-form textarea,.compact-form textarea,.stack-form textarea,.request-form textarea{min-height:96px;padding-top:10px;resize:vertical}
.form-hint,.form-helper{margin-top:4px;color:var(--ui-muted);font-size:12px;line-height:1.4}
.filter-check,.check-inline,.consent-check{display:flex!important;align-items:center;gap:9px;min-height:38px;color:var(--ui-text-2);font-size:13px;font-weight:600!important}
.filter-check input,.check-inline input,.consent-check input{width:17px;height:17px;min-height:0;accent-color:var(--ui-primary)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.form-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.full-span,.form-field-full,.full{grid-column:1/-1}
.form-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid var(--ui-border)}
.form-alert,.alert{padding:12px 14px;border:1px solid transparent;border-radius:10px;font-size:13px;line-height:1.45}
.form-alert.success,.alert-success{color:#17663f;background:#eef9f3;border-color:#cbead8}.form-alert.error,.alert-danger{color:#9f2733;background:#fff1f2;border-color:#f4c8cd}.form-alert.warning,.alert-warning{color:#775315;background:#fff8e8;border-color:#eedcaf}.alert-info{color:#185b91;background:#eef7ff;border-color:#cce4f6}

/* Status and data */
.status-badge,.soft-badge,.business-badge,.level-pill,.promo-chip,.availability-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid #d9e4f3;border-radius:999px;color:#28598f;background:#f1f6fc;font-size:11px;font-weight:700;line-height:1}
.status-active,.status-published,.status-approved,.status-completed,.status-open,.status-accepted{color:#17663f;background:#edf9f2;border-color:#cbe9d6}.status-pending,.status-review,.status-scheduled,.status-in_review{color:#7b5914;background:#fff7e6;border-color:#eedbac}.status-cancelled,.status-rejected,.status-suspended,.status-expired,.status-closed{color:#a12835;background:#fff0f1;border-color:#f3c9ce}
.verified-badge{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:5px;color:#fff;background:var(--ui-secondary);border-radius:50%;font-size:11px;font-weight:800;vertical-align:1px}
.table-responsive,.responsive-table-wrap,.admin-table-wrap{overflow:auto;border-radius:var(--ui-radius-md)}
.table{width:100%;margin:0;color:var(--ui-text);font-size:13px;border-collapse:separate;border-spacing:0}
.table>:not(caption)>*>*{padding:12px 14px;background:transparent;border-color:var(--ui-border);vertical-align:middle}
.table thead th{position:relative;color:var(--ui-muted);background:#f8fafc;font-size:11px;font-weight:750;letter-spacing:.025em;text-transform:uppercase;white-space:nowrap}
.table tbody tr:hover{background:#fbfcfe}.table tbody td{color:var(--ui-text-2)}
.table-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap}
.entity-cell{display:flex;align-items:center;gap:10px;min-width:180px}.entity-cell img{width:40px;height:40px;object-fit:cover;border-radius:9px}
.empty-state,.feed-empty,.directory-empty,.empty-row{display:grid;place-items:center;text-align:center;color:var(--ui-muted)}
.empty-symbol{width:58px;height:58px;display:grid;place-items:center;margin:0 auto 14px;color:var(--ui-primary);background:var(--ui-soft-blue);border-radius:16px}.empty-symbol .icon{width:27px;height:27px}
.empty-state h2,.feed-empty h2,.directory-empty h3{margin:0 0 6px;color:var(--ui-text);font-size:19px;font-weight:750}.empty-state p,.feed-empty p,.directory-empty p{max-width:520px;margin:0 0 16px;font-size:13px;line-height:1.5}

/* Modal, toast and loading */
.modal-content{border:0;border-radius:16px;box-shadow:0 24px 70px rgba(17,31,55,.18)}.modal-header,.modal-footer{border-color:var(--ui-border)}.modal-title{font-size:17px;font-weight:750}
.ui-toast-region{position:fixed;right:18px;bottom:18px;z-index:2000;display:grid;gap:10px;width:min(380px,calc(100vw - 36px))}.ui-toast{padding:13px 15px;background:#fff;border:1px solid var(--ui-border);border-radius:12px;box-shadow:var(--ui-shadow-2)}
.skeleton{position:relative;overflow:hidden;background:#edf1f5;border-radius:8px}.skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:ui-shimmer 1.3s infinite}@keyframes ui-shimmer{to{transform:translateX(100%)}}
.htmx-request{opacity:.68;pointer-events:none}

@media(max-width:767px){
  body{font-size:14px}.form-grid,.form-grid-4{grid-template-columns:1fr}.full-span,.form-field-full,.full{grid-column:auto}.btn{min-height:44px}.form-actions{align-items:stretch;flex-direction:column-reverse}.form-actions .btn{width:100%}.table>:not(caption)>*>*{padding:11px 12px}
}