/* =========================================================
   Service.Bagger2Go – Portal Base (GLOBAL)
   Zweck: Einheitliches UI für alle Module/Programme
   Hinweis: Modulspezifisches CSS gehört in /assets/css/admin.css
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  --bg: #f3f4f1;
  --surface: #ffffff;
  --surface2: #f8f8f5;
  --text: #161b22;
  --muted: rgba(22,27,34,.64);

  --border: rgba(15,23,42,.10);
  --border2: rgba(15,23,42,.08);

  --pri: #f4b400;
  --pri2: #d99100;
  --pri-ink: #241900;

  --ok: #16a34a;
  --warn: #f59e0b;
  --danger: #dc2626;

  --shadow: 0 12px 32px rgba(22,27,34,.07);
  --shadow2: 0 18px 48px rgba(22,27,34,.12);

  --r: 18px;
  --r-sm: 12px;
  --r-pill: 999px;

  --gap: 14px;
}

/* ---------- Reset / Base ---------- */
*{ box-sizing:border-box; }
html, body{ height:100%; margin:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button, input, select, textarea{ font: inherit; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   Layout: Topbar / Container / Main
   ========================================================= */

.app-body{ background: var(--bg); }

.app-topbar{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246,247,251,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border2);
}

.app-topbar-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  width: 100%;
}

.app-brand{
  font-weight: 900;
  letter-spacing: .2px;
  text-decoration: none;
  color: var(--text);
  display:flex;
  align-items:center;
  gap: 10px;
}

.app-topbar-right{
  margin-left: auto;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap: 10px;
}

.app-mobile-menu{
  display:none;
}

.app-pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: rgba(15,23,42,.75);
}

.app-push-status{
  max-width: 220px;
  padding: 6px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.72);
  color: rgba(15,23,42,.66);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}
.app-push-status[data-state="ok"]{
  border-color: rgba(22,163,74,.24);
  background: rgba(22,163,74,.10);
  color: #166534;
}
.app-push-status[data-state="error"]{
  border-color: rgba(220,38,38,.24);
  background: rgba(220,38,38,.10);
  color: #991b1b;
}
.btn-ghost.is-active,
.shortcut.is-active{
  border-color: rgba(22,163,74,.35);
  background: rgba(22,163,74,.10);
}

.pwa-toast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow2);
}
.pwa-toast strong{ font-size: 15px; }
.pwa-toast span{ color: var(--muted); font-size: 13px; line-height: 1.35; }
.pwa-toast-actions{ display:flex; gap:8px; justify-content:flex-end; }

.push-read-stats{
  display:grid;
  gap:4px;
  min-width:130px;
  font-size:12px;
  line-height:1.25;
}
.push-read-stats span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:750;
  color:#20262e;
}
.push-read-stats b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  color:#166534;
  font-weight:950;
}
.push-read-stats small{
  color:var(--muted);
}

.app-main{ padding: 14px 0 0; }

.app-container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 14px 24px;
}

.app-head{
  padding: 18px 0 12px;
}

.app-h1{
  margin: 0;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.12;
  letter-spacing: -.2px;
}

.app-sub{
  margin: 8px 0 0;
  color: var(--muted);
}
.app-sub.small{ font-size: 13px; opacity: .9; }

@media (min-width: 720px){
  .app-topbar-inner{ padding: 12px 20px; }
  .app-container{ padding: 0 20px 28px; }
}

/* =========================================================
   Cards / Sections
   ========================================================= */

.section{ margin: 0 0 14px; }

.card{
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.card-head{
  padding: 16px 18px 10px;
  font-weight: 900;
  letter-spacing: -.1px;
}

.card-body{ padding: 0 18px 18px; }

.empty{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(15,23,42,.03);
  color: rgba(15,23,42,.78);
}

/* =========================================================
   Grid / Tiles (Dashboard)
   ========================================================= */

.grid3{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: 14px;
}

@media (min-width: 740px){
  .grid3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1040px){
  .grid3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.shortcut{
  display:block;
  text-decoration:none;
  color: inherit;
}

.shortcut.card{
  padding: 18px;
  min-height: 110px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.shortcut.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  border-color: rgba(37,99,235,.18);
}

.shortcut-title{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.2;
}

.shortcut-sub{
  margin-top: 2px;
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* optional Icon Bubble (falls genutzt) */
.logo{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,.12);
  color: var(--pri);
}
.logo svg{ width: 20px; height: 20px; }

/* =========================================================
   Buttons
   ========================================================= */

.btn, .btn-ghost{
  appearance:none;
  border-radius: var(--r-pill);
  padding: 10px 14px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease, border-color .12s ease, filter .12s ease;
  user-select: none;
  white-space: nowrap;
}

.btn{
  background: var(--surface);
  border: 1px solid rgba(15,23,42,.14);
  color: rgba(15,23,42,.92);
}
.btn:hover{ background: rgba(15,23,42,.03); }
.btn:active{ transform: translateY(1px); }

.btn-ghost{
  background: var(--surface);
  border: 1px solid var(--border);
  color: rgba(15,23,42,.92);
}
.btn-ghost:hover{ background: rgba(15,23,42,.04); }
.btn-ghost:active{ transform: translateY(1px); }

.btn-primary{
  background: linear-gradient(135deg, var(--pri), var(--pri2));
  border: 0;
  color: #fff;
  box-shadow: 0 10px 24px rgba(37,99,235,.28);
}
.btn-primary:hover{ filter: brightness(1.04); }

.btn-danger{
  background: #fff;
  border: 1.5px solid rgba(220,38,38,.85);
  color: var(--danger);
}
.btn-danger:hover{ background: rgba(220,38,38,.08); }

.btn-sm{ padding: 7px 10px; font-size: 12px; }

/* =========================================================
   Forms (Basis – Details gern in forms.css)
   ========================================================= */

.row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.input,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"]{
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
  outline: none;
  font-size: 14px;
}

textarea{ min-height: 90px; resize: vertical; }

.input:focus,
select:focus,
textarea:focus,
input:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

/* =========================================================
   Badges / Alerts
   ========================================================= */

.badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: rgba(15,23,42,.03);
}

.badge.ok{ background: rgba(22,163,74,.12); border-color: rgba(22,163,74,.24); }
.badge.warn{ background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.26); }
.badge.danger{ background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.24); }

.alert{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(15,23,42,.03);
}
.alert.ok{ background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.25); }
.alert.error{ background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.25); }

/* =========================================================
   Tables (Basis – Modul-spezifisch in admin.css erweitern)
   ========================================================= */

.table-wrap{ overflow:auto; }

.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.table th, .table td{
  padding: 12px;
  border-bottom: 1px solid var(--border2);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.table thead th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--muted);
  background: rgba(15,23,42,.03);
}

.table tbody tr:hover td{
  background: rgba(37,99,235,.04);
}

.table tbody tr:last-child td{ border-bottom: none; }

/* =========================================================
   Footer
   ========================================================= */

.app-footer{
  margin-top: 26px;
  padding: 16px 0;
  border-top: 1px solid var(--border2);
  background: rgba(246,247,251,.92);
  color: rgba(15,23,42,.55);
}

.app-footer-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 14px;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

@media (min-width: 720px){
  .app-footer-inner{ padding: 0 20px; }
}

/* =========================================================
   Utilities (hilft für Einheits-Look ohne Inline-Styles)
   ========================================================= */
.w-120{ max-width:120px; }
.w-180{ max-width:180px; }
.w-220{ max-width:220px; }
.w-280{ max-width:280px; }
.w-340{ max-width:340px; }
.w-360{ max-width:360px; }

.stack{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.right{ margin-left:auto; }
.flex{ display:flex; }
.center-v{ align-items:center; }

.hidden{ display:none !important; }

/* =========================================================
   LOGIN – Override (body.login)
   ========================================================= */

body.login{
  background: radial-gradient(1200px 600px at 20% 10%, rgba(37,99,235,.14), transparent 60%),
              radial-gradient(900px 500px at 90% 20%, rgba(29,78,216,.10), transparent 55%),
              #f6f7fb;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

/* Topbar/Footer im Login aus */
body.login .app-topbar,
body.login .app-footer{
  display: none !important;
}

/* Login Wrapper */
body.login .auth-grid{
  width: 100%;
  max-width: 420px;
}

/* Login Card */
body.login .auth-card{
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(15,23,42,.14);
  padding: 34px 30px;
  text-align: left;
}

/* Titel */
body.login .auth-card .h1,
body.login h1{
  margin: 0 0 6px;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -.2px;
  color: #0f172a;
}

body.login .auth-card .muted,
body.login .muted{
  margin: 0 0 18px;
  color: rgba(15,23,42,.62);
  font-size: 14px;
  line-height: 1.35;
}

/* Inputs (Login nur hier) */
body.login .input,
body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"]{
  width: 100%;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
  font-size: 15px;
  outline: none;
  margin-bottom: 12px;
}

body.login .input:focus,
body.login input:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}

/* Login Button */
body.login .btn,
body.login button[type="submit"]{
  width: 100%;
  padding: 13px 14px;
  border-radius: 14px;
  border: 0;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 14px 30px rgba(37,99,235,.26);
}

body.login .btn:hover,
body.login button[type="submit"]:hover{
  filter: brightness(1.05);
}

body.login .btn:active,
body.login button[type="submit"]:active{
  transform: translateY(1px);
}

/* Links unten */
body.login .links{
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

body.login .links a{
  color: #2563eb;
  text-decoration: none;
  font-size: 14px;
}
body.login .links a:hover{
  text-decoration: underline;
}

/* Kleine Hinweise/Errors */
body.login .alert,
body.login .empty{
  margin-bottom: 12px;
}

/* =========================================================
   Bagger2Go UI Refresh 2026
   ========================================================= */

html{ scroll-behavior:smooth; }

body{
  line-height:1.5;
  text-rendering:optimizeLegibility;
}

:focus-visible{
  outline:3px solid rgba(244,180,0,.75);
  outline-offset:3px;
}

.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:1000;
  transform:translateY(-160%);
  padding:10px 14px;
  border-radius:10px;
  background:#161b22;
  color:#fff;
  text-decoration:none;
}
.skip-link:focus{ transform:translateY(0); }

.app-topbar{
  background:rgba(22,27,34,.96);
  border-bottom:1px solid rgba(255,255,255,.1);
  color:#fff;
}

.app-brand{ color:#fff; }
.app-brand-mark{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:linear-gradient(135deg,#ffd23c,var(--pri));
  color:#211700;
  font-size:12px;
  font-weight:950;
  letter-spacing:-.3px;
  box-shadow:0 8px 24px rgba(244,180,0,.2);
}
.app-brand-copy{ display:grid; line-height:1.1; }
.app-brand-copy strong{ font-size:15px; letter-spacing:.1px; }
.app-brand-copy small{
  margin-top:3px;
  color:rgba(255,255,255,.62);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.app-topbar .app-pill{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.13);
  color:rgba(255,255,255,.8);
}
.app-topbar .btn-ghost{
  background:transparent;
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
.app-topbar .btn-ghost:hover{ background:rgba(255,255,255,.1); }
.app-logout-form{ margin:0; }

.app-eyebrow,
.auth-kicker{
  margin:0 0 7px;
  color:#9b6d00;
  font-size:11px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.app-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  min-height:126px;
  padding:28px 0 18px;
}

.card{
  border-color:rgba(22,27,34,.08);
  box-shadow:var(--shadow);
}
.shortcut.card{
  position:relative;
  overflow:hidden;
  min-height:128px;
  border-top:3px solid transparent;
}
.shortcut.card::after{
  content:'→';
  position:absolute;
  right:18px;
  bottom:14px;
  color:rgba(22,27,34,.28);
  font-size:20px;
  transition:transform .16s ease,color .16s ease;
}
.shortcut.card:hover{
  border-top-color:var(--pri);
  border-right-color:rgba(244,180,0,.2);
  border-bottom-color:rgba(244,180,0,.2);
  border-left-color:rgba(244,180,0,.2);
}
.shortcut.card:hover::after{ transform:translateX(3px); color:#9b6d00; }
.logo{ background:rgba(244,180,0,.16); color:#8a6200; }

.btn-primary{
  background:linear-gradient(135deg,#ffd23c,var(--pri));
  color:var(--pri-ink);
  box-shadow:0 12px 28px rgba(217,145,0,.25);
  font-weight:850;
}

/* Login */
body.login{
  display:grid;
  place-items:center;
  min-height:100dvh;
  padding:max(24px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  background:
    radial-gradient(circle at 15% 12%,rgba(244,180,0,.2),transparent 32%),
    linear-gradient(135deg,#0f1319 0%,#1b212a 55%,#10141a 100%);
}

body.login .auth-shell{
  width:min(1080px,100%);
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  background:rgba(255,255,255,.04);
  box-shadow:0 30px 90px rgba(0,0,0,.36);
}

body.login .auth-intro{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:590px;
  padding:clamp(36px,6vw,76px);
  color:#fff;
}
.auth-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:auto;
  font-weight:850;
}
.auth-brand span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:var(--pri);
  color:#211700;
  font-size:12px;
}
body.login .auth-intro .auth-kicker{ margin-top:44px; color:#ffd23c; }
body.login .auth-intro h1{
  max-width:600px;
  margin:0;
  color:#fff;
  font-size:clamp(38px,5vw,64px);
  line-height:1.02;
  letter-spacing:-.045em;
}
body.login .auth-intro > p:not(.auth-kicker){
  max-width:560px;
  margin:22px 0 0;
  color:rgba(255,255,255,.68);
  font-size:17px;
}
.auth-benefits{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:auto 0 0;
  padding:30px 0 0;
  list-style:none;
  color:rgba(255,255,255,.7);
  font-size:13px;
}
.auth-benefits li::before{ content:'✓'; margin-right:8px; color:#ffd23c; font-weight:900; }

body.login .auth-card{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(32px,5vw,64px);
  border:0;
  border-radius:0;
  background:#fff;
  box-shadow:none;
  text-align:left;
}
.auth-card-head{ margin-bottom:24px; }
body.login .auth-card h2{
  margin:0 0 8px;
  color:var(--text);
  font-size:clamp(25px,3vw,34px);
  line-height:1.12;
  letter-spacing:-.03em;
}
body.login .auth-card .muted{ margin:0; }
.auth-form{ display:grid; gap:18px; }
.field{ display:grid; gap:7px; }
.field label{ color:#303641; font-size:13px; font-weight:750; }
.field-label-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.field-label-row a{ color:#7a5700; font-size:12px; text-decoration:none; }
.field-label-row a:hover{ text-decoration:underline; }
body.login .auth-form .input{
  margin:0;
  min-height:50px;
  border-radius:12px;
  background:#fafaf8;
}
body.login button.auth-submit{
  min-height:50px;
  margin-top:4px;
  border-radius:12px;
  background:linear-gradient(135deg,#ffd23c,var(--pri));
  color:var(--pri-ink);
  box-shadow:0 12px 28px rgba(217,145,0,.25);
}
.auth-help{
  margin:24px 0 0;
  padding-top:20px;
  border-top:1px solid var(--border2);
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}

@media (max-width:760px){
  .app-brand-copy small,.app-topbar .app-pill{ display:none; }
  .app-topbar-inner{ padding:10px 12px; }
  .app-brand-mark{ width:38px; height:38px; }
  .app-head{ min-height:106px; padding:22px 0 14px; }
  body.login{ align-items:start; padding:0; background:#fff; }
  body.login .auth-shell{ display:block; border:0; border-radius:0; box-shadow:none; }
  body.login .auth-intro{ min-height:245px; padding:28px 24px 32px; }
  body.login .auth-intro h1{ font-size:34px; }
  body.login .auth-intro > p:not(.auth-kicker){ margin-top:14px; font-size:14px; }
  .auth-brand{ margin-bottom:34px; }
  body.login .auth-intro .auth-kicker{ margin-top:0; }
  .auth-benefits{ display:none; }
  body.login .auth-card{ min-height:calc(100dvh - 245px); padding:34px 24px max(34px,env(safe-area-inset-bottom)); }
}

.d-mobile-only{ display:none; }
@media (max-width:760px){ .d-mobile-only{ display:block; } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* =========================================================
   Responsive hardening
   Prevent page-level horizontal scrolling across portal pages.
   ========================================================= */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.app-body,
.app-main,
.app-container,
.app-head,
.card,
.claim-wrap,
.claim-card,
.page,
.wrap,
.crm-page,
.crm-card,
.ticket-form-card,
.ticket-chat-card{
  max-width:100%;
  min-width:0;
}

.app-topbar-inner,
.app-footer-inner{
  min-width:0;
}

.app-brand,
.app-topbar-right,
.stack,
.inline,
.toolbar,
.admin-toolbar,
.dealer-actions,
.ticket-actions,
.ticket-toolbar,
.ticket-filters,
.form-actions,
.row-actions,
.used-toolbar,
.used-card-actions{
  min-width:0;
}

.app-brand{
  flex:0 1 auto;
}

.app-brand-copy,
.app-brand-copy strong,
.app-brand-copy small,
.app-h1,
.app-sub,
.shortcut-title,
.shortcut-sub,
.card-head,
.card-body,
.ticket-title,
.ticket-meta,
.chat-body,
.crm-cell,
.crm-leadtitle,
.crm-email,
.dealer-list-table td,
.price-table td,
.used-card-body,
.fr-card{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:normal;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-outline,
.crm-btn,
.model-chip,
.badge,
.ticket-badge,
.status-badge,
.used-status,
.app-pill,
.app-push-status{
  max-width:100%;
  white-space:normal;
  text-align:center;
}

.table-wrap,
.dealer-mobile-table,
.dealer-list-table-wrap,
.price-table-wrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.table{
  min-width:min(680px, 100%);
}

.table th,
.table td{
  max-width:min(34rem, 72vw);
  white-space:normal;
  overflow-wrap:anywhere;
}

.table .num,
.table .numeric,
.price-table .numeric{
  white-space:nowrap;
}

.table .btn,
.table .btn-primary,
.table .btn-secondary,
.table .btn-ghost,
.table .btn-outline,
.table a{
  white-space:nowrap;
}

@media (max-width: 680px){
  .table-wrap .table{
    min-width:640px;
  }
}

input,
select,
textarea,
button{
  max-width:100%;
}

.field-label-row,
.card-head,
.app-head,
.price-section-head,
.fr-section-head,
.ticket-row,
.chat-head{
  min-width:0;
}

@media (max-width: 900px){
  .app-head{
    align-items:flex-start;
    flex-direction:column;
    min-height:0;
  }

  .app-topbar-inner{
    align-items:flex-start;
  }

  .app-topbar-right{
    flex:1 1 100%;
    justify-content:flex-start;
  }

  .app-topbar .btn-ghost,
  .app-push-status{
    flex:1 1 130px;
  }

  .grid,
  .form-grid,
  .grid2,
  .grid3,
  .claim-card .grid3,
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
}

@media (max-width: 760px){
  .app-container{
    padding-right:max(12px, env(safe-area-inset-right));
    padding-left:max(12px, env(safe-area-inset-left));
  }

  .app-topbar-inner{
    flex-wrap:wrap;
  }

  .app-topbar-right{
    gap:7px;
  }

  .app-topbar .btn-ghost,
  .app-push-status{
    flex:1 1 calc(50% - 7px);
    min-width:0;
    padding-right:9px;
    padding-left:9px;
    font-size:12px;
  }

  .app-logout-form{
    flex:1 1 calc(50% - 7px);
  }

  .app-logout-form .btn-ghost{
    width:100%;
  }

  .pwa-toast{
    right:10px;
    bottom:10px;
    width:calc(100vw - 20px);
  }

  .card-head,
  .card-body,
  .claim-card{
    padding-right:14px;
    padding-left:14px;
  }

  .form-actions,
  .ticket-actions,
  .row-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .form-actions > *,
  .ticket-actions > *,
  .row-actions > *{
    width:100%;
  }
}

@media (max-width: 420px){
  .app-topbar .btn-ghost,
  .app-push-status,
  .app-logout-form{
    flex-basis:100%;
  }
}

/* Compact mobile header: actions open only on demand. */
@media (max-width: 900px){
  .app-topbar{
    position:sticky;
    top:0;
  }

  .app-topbar-inner{
    align-items:center;
    flex-wrap:nowrap;
    gap:9px;
    position:relative;
  }

  .app-brand{
    flex:0 0 auto;
  }

  .app-topbar-right{
    display:none;
  }

  .app-mobile-menu{
    display:block;
    width:auto;
    flex:0 0 auto;
    margin:0 0 0 auto;
  }

  .app-mobile-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:38px;
    padding:7px 12px;
    border:1px solid #d99b00;
    border-radius:11px;
    background:#f4b400;
    color:#211700;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
    list-style:none;
  }

  .app-mobile-toggle::-webkit-details-marker{
    display:none;
  }

  .app-mobile-menu[open] .app-mobile-toggle{
    box-shadow:0 0 0 3px rgba(244,180,0,.2);
  }

  .app-mobile-panel{
    position:absolute;
    top:calc(100% + 7px);
    right:10px;
    z-index:140;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    width:min(340px,calc(100vw - 20px));
    padding:10px;
    border:1px solid #dce2ea;
    border-radius:14px;
    background:#fff;
    box-shadow:0 18px 45px rgba(15,23,42,.2);
  }

  .app-mobile-panel .btn-ghost,
  .app-mobile-panel .app-logout-form,
  .app-mobile-panel .app-push-status,
  .app-mobile-panel .app-pill{
    width:100%;
    max-width:100%;
  }

  .app-mobile-panel .btn-ghost{
    justify-content:center;
    min-height:36px;
    white-space:normal;
    text-align:center;
    padding:7px 8px;
    font-size:12px;
    border-color:#dce2ea;
    background:#fff;
    color:#172033;
  }

  .app-mobile-panel .app-logout-form{
    margin:0;
  }

  .app-mobile-panel .app-push-status,
  .app-mobile-panel .app-pill{
    display:block;
    grid-column:1 / -1;
    border-color:#dce2ea;
    background:#f6f7f9;
    color:#596579;
    white-space:normal;
    text-align:center;
  }
}

@media (max-width: 760px){
  .app-topbar-inner{
    padding:9px 10px;
  }

  .app-brand-copy{
    display:none;
  }

  .app-brand-mark{
    width:36px;
    height:36px;
    border-radius:10px;
  }

  .app-mobile-extra,
  .app-mobile-panel .app-pill{
    display:none;
  }
}

@media (max-width: 420px){
  .app-container{
    padding-right:10px;
    padding-left:10px;
  }

  .card{
    border-radius:14px;
  }
}