/* =====================================================================
   Rajo Poultry — design tokens
   Mobile-first: base rules below target phones (the majority of real
   usage); min-width media queries near the bottom PROMOTE the layout
   up to tablet/desktop, rather than the other way around. Warm paper
   background instead of cold grey, a deep feather-green primary, a
   clay/grain accent, and a display serif reserved for headings and
   big numbers -- everything else stays on fast system fonts.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --color-ink: #211D16;
  --color-bg: #F7F3EA;
  --color-surface: #FFFFFF;
  --color-surface-tint: #FBF8F1;
  --color-border: #E5DCC6;
  --color-muted: #756B57;

  --color-primary: #2F5233;
  --color-primary-dark: #1E3A22;
  --color-primary-light: #4C7A53;
  --color-primary-tint: #E6EEE2;

  --color-accent: #C97C3D;
  --color-accent-dark: #A8632D;
  --color-accent-tint: #F7E9D9;

  --color-danger: #A23E30;
  --color-danger-tint: #F7E4E0;
  --color-warning: #A9741C;
  --color-warning-tint: #F6EBD3;
  --color-success: #2F5233;
  --color-success-tint: #E6EEE2;
  --color-info: #2D5478;
  --color-info-tint: #E2ECF4;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 3px rgba(33, 29, 22, 0.07), 0 1px 2px rgba(33, 29, 22, 0.05);
  --shadow-raised: 0 4px 14px rgba(33, 29, 22, 0.10);
  --shadow-drawer: 4px 0 32px rgba(33, 29, 22, 0.22);

  --sidebar-width: 252px;
  --topbar-height: 58px;
}

[data-theme="dark"] {
  --color-ink: #EDE7D9;
  --color-bg: #14130E;
  --color-surface: #201D16;
  --color-surface-tint: #27231A;
  --color-border: #383225;
  --color-muted: #A79C82;

  --color-primary: #5E9A67;
  --color-primary-dark: #7CB885;
  --color-primary-light: #6FAE78;
  --color-primary-tint: #1B2A1D;

  --color-accent: #E0A666;
  --color-accent-dark: #EBBE8C;
  --color-accent-tint: #2C2315;

  --color-danger: #E08979;
  --color-danger-tint: #34201C;
  --color-warning: #E0B15C;
  --color-warning-tint: #322810;
  --color-success: #7CB885;
  --color-success-tint: #1B2A1D;
  --color-info: #8FB6D9;
  --color-info-tint: #1B2530;
}
[data-theme="dark"] .topbar { background: #121F17; }
[data-theme="dark"] .btn-primary:hover { background: #274F2D; }
[data-theme="dark"] .sidebar-nav li.active > a,
[data-theme="dark"] .sidebar-nav li a.sub-active { background: var(--color-primary-tint); }
[data-theme="dark"] .sidebar-nav li a:hover { background: var(--color-surface-tint); }
[data-theme="dark"] .btn-secondary { background: var(--color-surface-tint); color: var(--color-ink); }
[data-theme="dark"] table.data-table th { background: var(--color-surface-tint); }
[data-theme="dark"] table.data-table tr:hover td { background: var(--color-surface-tint); }
[data-theme="dark"] .form-group input, [data-theme="dark"] .form-group select, [data-theme="dark"] .form-group textarea {
  background: #191710; color: var(--color-ink); border-color: var(--color-border);
}
[data-theme="dark"] .kpi-card, [data-theme="dark"] .card { box-shadow: none; }

/* =====================================================================
   Base -- overflow-x is locked down at the root, belt-and-braces
   against any single element ever forcing the page to scroll
   sideways (the failure mode that matters most on a phone).
   ===================================================================== */
* { box-sizing: border-box; min-width: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.app-shell { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; width: 100%; }

/* =====================================================================
   Topbar -- mobile-first: name + role badge + logout text are HIDDEN
   by default (avatar only), and only reappear once there's real room,
   at the desktop breakpoint near the bottom of this file. This is the
   opposite of "show everything, then hide on small screens" -- it
   can't overflow on a phone because the wide content was never shown
   there in the first place.
   ===================================================================== */
.topbar {
  height: var(--topbar-height);
  background: linear-gradient(135deg, var(--color-primary-dark), #16301B);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
}
.sidebar-toggle {
  background: none; border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-sm); flex-shrink: 0;
  font-size: 20px; line-height: 1;
}
.sidebar-toggle:hover, .sidebar-toggle:active { background: rgba(255,255,255,0.14); }
.topbar-logo { height: 34px; width: 34px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #fff; }
.topbar-farm-name {
  font-weight: 600; font-size: 14px; flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-clock { display: none; font-size: 12px; color: rgba(255,255,255,0.8); white-space: nowrap; flex-shrink: 0; text-align: right; line-height: 1.3; }
.topbar-clock-full { display: none; }
@media (min-width: 400px) { .topbar-clock { display: block; } }
@media (min-width: 640px) { .topbar-clock-compact { display: none; } .topbar-clock-full { display: inline; } }
.topbar-user { display: flex; align-items: center; gap: 10px; font-size: 13px; flex-shrink: 0; }
.topbar-user-name, .topbar-user-role, .topbar-logout { display: none; }
.topbar-logout { color: #fff; opacity: 0.85; white-space: nowrap; }
.topbar-avatar {
  display: flex; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.18);
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 13px;
  align-items: center; justify-content: center; flex-shrink: 0; border: 1.5px solid rgba(255,255,255,0.3);
}

/* Topbar icon buttons (notification bell, calendar) with dropdown panels */
.topbar-icon-group { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.topbar-icon-dropdown { position: relative; }
.topbar-icon-btn {
  background: none; border: none; color: #fff; cursor: pointer; position: relative;
  width: 38px; height: 38px; border-radius: var(--radius-sm); font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
.topbar-icon-btn:hover, .topbar-icon-btn:active { background: rgba(255,255,255,0.14); }
.topbar-icon-badge {
  position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px; padding: 0 3px;
  background: var(--color-accent); color: #fff; border-radius: 10px; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1; font-family: var(--font-body);
}
.topbar-icon-badge-alert { background: var(--color-danger); }
.topbar-dropdown-panel {
  display: none; position: absolute; right: -8px; top: calc(100% + 10px); width: 280px; max-width: 88vw;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised); z-index: 40; overflow: hidden; color: var(--color-ink);
}
.topbar-dropdown-panel.open { display: block; }
.topbar-dropdown-title { padding: 10px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-muted); border-bottom: 1px solid var(--color-border); }
.topbar-dropdown-empty { padding: 18px 14px; font-size: 13px; color: var(--color-muted); text-align: center; }
.topbar-dropdown-item { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--color-border); color: var(--color-ink); }
.topbar-dropdown-item:last-child { border-bottom: none; }
.topbar-dropdown-item:hover { background: var(--color-surface-tint); text-decoration: none; }
.topbar-dropdown-item span { color: var(--color-muted); white-space: nowrap; font-size: 12px; }
.topbar-dropdown-item-error { border-left: 3px solid var(--color-danger); }
.topbar-dropdown-item-warning { border-left: 3px solid var(--color-warning); }
.badge {
  padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,0.18); white-space: nowrap; letter-spacing: 0.01em;
}
.badge-administrator { background: rgba(224, 166, 102, 0.4); }

/* =====================================================================
   Body layout / Sidebar -- an off-canvas drawer by default (mobile);
   becomes a static column only once promoted at the desktop
   breakpoint. Nothing about the mobile drawer depends on a max-width
   override firing correctly -- it IS the base state.
   ===================================================================== */
.app-body { display: flex; flex: 1; position: relative; width: 100%; overflow-x: hidden; }
.sidebar {
  width: min(85vw, 300px);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 0 0 24px;
  flex-shrink: 0;
  position: fixed; left: -100%; top: 0; bottom: 0;
  z-index: 25; transition: left 0.24s cubic-bezier(.4,0,.2,1);
  box-shadow: var(--shadow-drawer);
  overflow-y: auto; overflow-x: hidden;
  padding-top: var(--topbar-height);
}
.sidebar.open { left: 0; }
.sidebar-close {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px;
  background: var(--color-surface-tint); border: 1px solid var(--color-border); border-radius: 50%;
  color: var(--color-muted); font-size: 22px; line-height: 1; cursor: pointer; z-index: 1;
}
.sidebar-close:hover { background: var(--color-border); color: var(--color-ink); }
.sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(20, 19, 14, 0.5);
  z-index: 24; opacity: 0; transition: opacity 0.2s ease; backdrop-filter: blur(1px);
}
.sidebar-backdrop.open { display: block; opacity: 1; }
.sidebar-nav { list-style: none; margin: 0; padding: 8px 10px; }
.sidebar-nav li { margin-bottom: 2px; }
.sidebar-badge {
  display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px; border-radius: 10px;
  background: var(--color-danger); color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 16px;
}
.sidebar-logo { padding: 18px 16px 16px; text-align: center; border-bottom: 1px solid var(--color-border); margin-bottom: 8px; }
.sidebar-logo img { height: 48px; max-height: 55px; min-height: 40px; max-width: 100%; object-fit: contain; border-radius: 8px; }
.sidebar-logo-text { display: inline-block; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--color-primary-dark); line-height: 1.25; }
.sidebar-nav li a {
  display: block; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--color-ink); font-size: 14px; font-weight: 500;
  transition: background 0.12s ease;
}
.sidebar-nav li.active > a,
.sidebar-nav li a.sub-active { background: var(--color-primary-tint); color: var(--color-primary-dark); font-weight: 700; }
.sidebar-nav li a:hover { background: var(--color-surface-tint); text-decoration: none; }
.sidebar-section {
  padding: 18px 14px 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-muted); font-weight: 700;
}
.sidebar-disabled { padding: 9px 14px; font-size: 13px; color: var(--color-muted); opacity: 0.6; cursor: default; }

.content { flex: 1; min-width: 0; width: 100%; padding: 16px; max-width: 1100px; overflow-x: hidden; }

.app-footer {
  text-align: center; font-size: 12px; color: var(--color-muted);
  padding: 18px; border-top: 1px solid var(--color-border); background: var(--color-surface);
}

/* =====================================================================
   Alerts
   ===================================================================== */
.alert { padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 16px; font-size: 14px; line-height: 1.5; }
.alert-error { background: var(--color-danger-tint); color: var(--color-danger); }
.alert-success { background: var(--color-success-tint); color: var(--color-success); }
.alert-warning { background: var(--color-warning-tint); color: var(--color-warning); }
.alert-info { background: var(--color-info-tint); color: var(--color-info); }
.alert a { color: inherit; font-weight: 700; text-decoration: underline; }

/* =====================================================================
   Cards / KPIs -- a single column by default (mobile), promoted to a
   grid at wider widths. minmax(..., 1fr) alone can force overflow at
   narrow widths because the minimum isn't actually respected inside a
   grid item by default; the auto-fit + explicit single-column mobile
   base below avoids that entirely, and every kpi-card gets a colored
   left accent so the section reads clearly even at a glance.
   ===================================================================== */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-card); }
.kpi-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; }
.kpi-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 16px 18px; box-shadow: var(--shadow-card); border-left: 3px solid var(--color-primary);
  min-width: 0; overflow: hidden;
}
.kpi-value { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--color-ink); line-height: 1.1; }
.kpi-label { font-size: 13px; color: var(--color-muted); margin-top: 6px; line-height: 1.4; overflow-wrap: break-word; }
.kpi-section-title {
  font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--color-ink);
  margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border);
}
.kpi-section-title:first-child { margin-top: 0; }

/* =====================================================================
   Forms
   ===================================================================== */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.form-group input[type=text], .form-group input[type=password], .form-group input[type=email],
.form-group input[type=number], .form-group input[type=date], .form-group input[type=tel],
.form-group select, .form-group textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 15px;
  background: var(--color-surface); color: var(--color-ink); font-family: inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-tint);
}
.form-hint { font-size: 12px; color: var(--color-muted); margin-top: 5px; }
.form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 200px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--radius-sm); border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; text-decoration: none; font-family: inherit;
  min-height: 44px; /* comfortable tap target on phones */
  transition: background 0.12s ease, transform 0.06s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 2px 6px rgba(47, 82, 51, 0.25); }
.btn-primary:hover { background: var(--color-primary-dark); text-decoration: none; }
.btn-secondary { background: var(--color-surface-tint); color: var(--color-ink); border: 1px solid var(--color-border); }
.btn-secondary:hover { background: var(--color-border); text-decoration: none; }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { opacity: 0.9; text-decoration: none; }
.btn-sm { padding: 6px 12px; font-size: 12px; min-height: 34px; }

/* =====================================================================
   Tables -- horizontal scroll wrapper is applied via .table-scroll in
   markup where needed, so a wide table scrolls WITHIN itself rather
   than pushing the whole page sideways.
   ===================================================================== */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.table-scroll table.data-table { border: none; }
table.data-table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
table.data-table th, table.data-table td {
  padding: 11px 14px; border-bottom: 1px solid var(--color-border); text-align: left; font-size: 14px;
}
table.data-table th { background: var(--color-surface-tint); font-weight: 700; font-size: 12px; color: var(--color-muted); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.03em; }
table.data-table tbody tr:nth-child(even) td { background: var(--color-surface-tint); }
table.data-table tr:hover td { background: var(--color-primary-tint); }
.status-pill { padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status-active { background: var(--color-success-tint); color: var(--color-success); }
.status-inactive { background: var(--color-surface-tint); color: var(--color-muted); }
.status-warning { background: var(--color-warning-tint); color: var(--color-warning); }
.status-danger { background: var(--color-danger-tint); color: var(--color-danger); }
.status-info { background: var(--color-info-tint); color: var(--color-info); }

/* Progress bar for incubation batches */
.progress-track { background: var(--color-surface-tint); border-radius: 6px; height: 10px; overflow: hidden; width: 100%; border: 1px solid var(--color-border); }
.progress-fill { background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary)); height: 100%; }
.progress-label { font-size: 12px; color: var(--color-muted); margin-top: 5px; }
.milestone-list { list-style: none; padding: 0; margin: 10px 0 0; font-size: 13px; }
.milestone-list li { padding: 8px 0; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; gap: 12px; }
.milestone-list li:last-child { border-bottom: none; }
.milestone-done { color: var(--color-success); }
.milestone-today, .milestone-soon { color: var(--color-warning); font-weight: 700; }
.milestone-due { color: var(--color-danger); font-weight: 700; }

/* Weight trend bar chart (pure CSS, no JS dependency) */
.weight-chart { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding-top: 8px; overflow-x: auto; }
.weight-chart-col { display: flex; flex-direction: column; align-items: center; min-width: 44px; height: 100%; justify-content: flex-end; }
.weight-chart-bar-wrap { flex: 1; display: flex; align-items: flex-end; width: 100%; }
.weight-chart-bar { width: 100%; background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary)); border-radius: 4px 4px 0 0; min-height: 4px; }
.weight-chart-value { font-size: 11px; font-weight: 700; color: var(--color-ink); margin-top: 4px; }
.weight-chart-label { font-size: 10px; color: var(--color-muted); margin-top: 2px; white-space: nowrap; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 10px; flex-wrap: wrap; }
.toolbar-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar-filters input, .toolbar-filters select { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; }

.pagination { display: flex; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 7px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; }
.pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.page-header h1 { font-size: 21px; }
.page-header p { margin: 5px 0 0; color: var(--color-muted); font-size: 14px; }

.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at top, var(--color-primary-tint) 0%, var(--color-bg) 55%);
  padding: 20px;
}
.auth-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px 24px; width: 100%; max-width: 380px; box-shadow: var(--shadow-raised); }
.auth-box h1 { font-size: 21px; margin-top: 0; text-align: center; }
.auth-box .btn { width: 100%; }

/* Incubation module: stage badges, sub-nav tabs */
.stage-candling { background: var(--color-warning-tint); color: var(--color-warning); }
.stage-lockdown { background: var(--color-danger-tint); color: var(--color-danger); }
.stage-hatchdue { background: var(--color-info-tint); color: var(--color-info); }

.subnav { display: flex; gap: 2px; margin-bottom: 20px; border-bottom: 1px solid var(--color-border); flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.subnav a { padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--color-muted); border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; }
.subnav a.active { color: var(--color-primary-dark); border-bottom-color: var(--color-primary); }
.subnav a:hover { text-decoration: none; color: var(--color-primary-dark); }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.detail-item { font-size: 13px; min-width: 0; }
.detail-item .label { color: var(--color-muted); display: block; font-size: 11px; letter-spacing: 0.03em; margin-bottom: 3px; text-transform: uppercase; }
.detail-item .value { font-weight: 600; overflow-wrap: break-word; }

.rate-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
.rate-card { background: var(--color-surface-tint); border-radius: var(--radius-md); padding: 14px; text-align: center; min-width: 0; }
.rate-card .rate-value { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--color-ink); }
.rate-card .rate-label { font-size: 11px; color: var(--color-muted); margin-top: 2px; }

.section-divider { margin: 28px 0 16px; font-family: var(--font-display); font-size: 17px; font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }

/* =====================================================================
   Mobile-first promotion breakpoints. Everything above this point IS
   the phone layout; these min-width queries only ADD desktop
   refinements on top -- nothing here is required for the mobile
   experience to already be correct and complete.
   ===================================================================== */
@media (min-width: 480px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 600px) {
  .topbar-farm-name { font-size: 15px; }
  .topbar { padding: 0 16px; gap: 14px; }
  .auth-box { padding: 32px; }
}
@media (min-width: 768px) {
  .topbar-user-name, .topbar-user-role, .topbar-logout { display: inline; }
  .topbar-avatar { display: none; }
  .rate-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .detail-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (min-width: 900px) {
  .sidebar-toggle { display: none; }
  .sidebar {
    position: static; width: var(--sidebar-width); left: 0; padding-top: 10px;
    box-shadow: none; transition: none;
  }
  .sidebar-backdrop { display: none !important; }
  .sidebar-close { display: none; }
  .content { padding: 24px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .kpi-value { font-size: 30px; }
  .page-header h1 { font-size: 24px; }
}

/* =====================================================================
   New Sale form (modules/sales/add.php + assets/js/sales-form.js).
   The item tiles are real radio buttons (works without JavaScript);
   JS only adds the is-selected look and the type-specific sections.
   ===================================================================== */
.sale-card { max-width: 640px; }
.sale-fieldset { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.sale-fieldset > legend { font-size: 13px; font-weight: 600; margin: 0 0 8px; padding: 0; color: var(--color-ink); }

.sale-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .sale-tiles { grid-template-columns: repeat(4, 1fr); } }
.sale-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-height: 96px; padding: 14px 12px 12px; cursor: pointer;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sale-tile:hover { border-color: var(--color-primary-light); }
.sale-tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sale-tile-ring { position: absolute; inset: -4px; border-radius: calc(var(--radius-md) + 3px); pointer-events: none; }
.sale-tile input:focus-visible ~ .sale-tile-ring { outline: 2px solid var(--color-accent); }
.sale-tile-icon { width: 30px; height: 30px; margin-bottom: 4px; color: var(--color-primary); }
.sale-tile-name { font-size: 15px; font-weight: 600; line-height: 1.2; }
.sale-tile-sub { font-size: 12px; line-height: 1.3; color: var(--color-muted); }
.sale-tile.is-selected { border-color: var(--color-primary); background: var(--color-primary-tint); box-shadow: inset 0 0 0 1px var(--color-primary); }

.sale-panel { margin: 0 0 4px; }
.sale-panel[hidden], .sale-gauge[hidden], .sale-pay-fields[hidden], .sale-hint[hidden] { display: none; }
.sale-empty { margin: 0 0 16px; padding: 14px; font-size: 14px; border: 1.5px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-tint); }
.sale-empty p { margin: 0 0 10px; }

.sale-gauge { margin: 2px 0 18px; }
.sale-gauge-text { margin-bottom: 6px; font-size: 13px; color: var(--color-muted); }
.sale-gauge-track { height: 8px; overflow: hidden; border-radius: 99px; border: 1px solid var(--color-border); background: var(--color-surface-tint); }
.sale-gauge-fill { width: 0; height: 100%; border-radius: 99px; background: var(--color-primary); transition: width 0.2s ease, background-color 0.2s ease; }
.sale-gauge.is-over .sale-gauge-fill { background: var(--color-danger); }
.sale-gauge.is-over .sale-gauge-text { color: var(--color-danger); font-weight: 600; }

.form-group input.sale-locked { background: var(--color-surface-tint); color: var(--color-muted); cursor: default; }
.form-group input[aria-invalid="true"] { border-color: var(--color-danger); }
/* When two fields wrap onto separate lines on a phone, keep the same vertical rhythm as every other field. */
.sale-card .form-row { row-gap: 0; }

.sale-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 20px; padding: 14px 16px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-primary-tint);
}
.sale-total-label { font-size: 14px; color: var(--color-muted); }
.sale-total-amount {
  font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1.1;
  color: var(--color-primary-dark); font-variant-numeric: lining-nums tabular-nums;
}
.sale-hint { margin: -10px 0 16px; font-size: 12px; color: var(--color-muted); }
.sale-hint.is-warning { color: var(--color-warning); }

.sale-seg {
  display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
}
.sale-seg label {
  position: relative; margin: 0; padding: 12px 6px; text-align: center; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--color-muted);
  border-left: 1px solid var(--color-border); transition: background-color 0.15s ease, color 0.15s ease;
}
.sale-seg label:first-child { border-left: 0; }
.sale-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sale-seg input:focus-visible ~ .sale-seg-ring { outline: 2px solid var(--color-accent); outline-offset: -3px; }
.sale-seg-ring { position: absolute; inset: 0; pointer-events: none; }
.sale-seg label.is-selected { background: var(--color-primary); color: var(--color-surface); }
.sale-pay-fields { margin-top: 14px; }

.sale-row-compact .form-group { min-width: 130px; }

.sale-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sale-actions .btn-primary { flex: 1 1 200px; }

@media (prefers-reduced-motion: reduce) {
  .sale-tile, .sale-gauge-fill, .sale-seg label { transition: none; }
}

/* Invoice / printable receipt */
.invoice-header { display: flex; justify-content: space-between; align-items: flex-start; }
.invoice-card { max-width: 720px; }

@media print {
  .no-print, .topbar, .sidebar, .sidebar-backdrop, .app-footer { display: none !important; }
  body { background: #fff; }
  .content { padding: 0; max-width: 100%; }
  .invoice-card { border: none; box-shadow: none; max-width: 100%; }
}