:root {
  --bg: #f3f9ff;
  --panel: #ffffff;
  --panel-2: #eaf6ff;
  --text: #102033;
  --muted: #61758b;
  --line: #d6e7f5;
  --primary: #0ea5e9;
  --primary-dark: #075985;
  --accent: #38bdf8;
  --danger: #b42318;
  --success: #0f766e;
  --shadow: 0 16px 48px rgba(14, 74, 122, 0.14);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  background: var(--bg);
  color: var(--text);
  margin: 0;
  min-height: 100%;
}

body {
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.auth-help {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 12px;
}

.auth-help strong {
  color: var(--text);
}

.auth-help code {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--primary-dark);
  padding: 1px 5px;
}

.hidden {
  display: none !important;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.side-nav {
  background: #082f49;
  color: #f8fbff;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 100vh;
  padding: 20px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand-block {
  align-items: center;
  display: flex;
  gap: 12px;
  min-height: 56px;
}

.brand-block strong,
.brand-block span {
  display: block;
}

.brand-block span {
  color: #b9d7ec;
  font-size: 13px;
  margin-top: 2px;
}

.brand-mark {
  align-items: center;
  background: #38bdf8;
  border-radius: 8px;
  color: #ffffff;
  display: grid;
  flex: 0 0 44px;
  font-size: 20px;
  height: 44px;
  place-items: center;
}

.nav-list {
  display: grid;
  gap: 6px;
}

.nav-link,
.nav-logout {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #d9edf8;
  display: flex;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.nav-link i,
.nav-logout i {
  color: #7dd3fc;
  text-align: center;
  width: 20px;
}

.nav-link.active,
.nav-link:hover,
.nav-logout:hover {
  background: rgba(125, 211, 252, 0.16);
  color: #ffffff;
}

.nav-logout {
  margin-top: auto;
}

.app-main {
  min-width: 0;
  padding: 24px 28px 96px;
}

.topbar {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin: 0 auto 20px;
  max-width: 1180px;
}

.topbar h1 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0;
}

.topbar p {
  color: var(--muted);
  margin: 5px 0 0;
}

.icon-button {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--primary-dark);
  display: grid;
  font-size: 18px;
  height: 44px;
  place-items: center;
  width: 44px;
}

#menu-btn {
  display: none;
}

.view {
  display: grid;
  gap: 16px;
  margin: 0 auto;
  max-width: 1180px;
}

.notice {
  background: #fff7db;
  border: 1px solid #f2d070;
  border-radius: 8px;
  color: #5d4500;
  margin: 0 auto 16px;
  max-width: 1180px;
  padding: 12px 14px;
}

.notice.error {
  background: #fff1f0;
  border-color: #ffc9c4;
  color: var(--danger);
}

.notice.success {
  background: #eaf8f2;
  border-color: #b5e4cf;
  color: var(--success);
}

.hero {
  background:
    linear-gradient(120deg, rgba(14, 165, 233, 0.94), rgba(7, 89, 133, 0.92)),
    url("../img/pwa.svg") right 28px center / 150px no-repeat;
  border-radius: 8px;
  color: #ffffff;
  min-height: 210px;
  overflow: hidden;
  padding: 28px;
}

.hero h2 {
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  margin: 0 0 12px;
  max-width: 720px;
}

.hero p {
  color: #e0f7ff;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  max-width: 680px;
}

.home-hero {
  align-items: center;
  background:
    radial-gradient(circle at 82% 18%, rgba(186, 230, 253, 0.75), transparent 28%),
    linear-gradient(135deg, #eff9ff 0%, #dff3ff 45%, #c7e8ff 100%);
  border: 1px solid #c7def0;
  border-radius: 8px;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.85fr);
  min-height: 360px;
  overflow: hidden;
  padding: 30px;
  position: relative;
}

.home-hero::after {
  color: rgba(14, 116, 144, 0.08);
  content: "AIRCOND";
  font-size: 84px;
  font-weight: 900;
  letter-spacing: 0;
  position: absolute;
  right: 18px;
  bottom: 8px;
}

.home-hero-copy {
  position: relative;
  z-index: 1;
}

.hero-kicker {
  color: var(--primary-dark);
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.home-hero h2 {
  color: var(--text);
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.02;
  margin: 0 0 14px;
  max-width: 650px;
}

.home-hero p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
  margin: 0;
  max-width: 620px;
}

.home-hero .button.ghost {
  background: rgba(14, 165, 233, 0.12);
  color: var(--primary-dark);
}

.install-button {
  background: linear-gradient(135deg, #0f766e, #22c55e);
  color: #ffffff;
}

.aircond-visual {
  min-height: 280px;
  position: relative;
  z-index: 1;
}

.ac-unit {
  align-items: center;
  background: #ffffff;
  border: 1px solid #c5e3f6;
  border-radius: 8px;
  box-shadow: 0 20px 45px rgba(14, 74, 122, 0.16);
  display: flex;
  justify-content: space-between;
  min-height: 82px;
  padding: 18px;
}

.ac-unit span {
  background: linear-gradient(90deg, #dbeafe, #f8fbff);
  border-radius: 999px;
  display: block;
  height: 12px;
  width: 64%;
}

.ac-unit i {
  color: var(--primary);
  font-size: 28px;
}

.cool-line {
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.18), rgba(14, 165, 233, 0));
  border-radius: 999px;
  height: 16px;
  position: absolute;
  right: 26px;
}

.cool-line.one {
  top: 122px;
  width: 80%;
}

.cool-line.two {
  top: 164px;
  width: 64%;
}

.cool-line.three {
  top: 206px;
  width: 72%;
}

.hero-chip {
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #c5e3f6;
  border-radius: 8px;
  bottom: 44px;
  box-shadow: 0 14px 30px rgba(14, 74, 122, 0.12);
  color: var(--primary-dark);
  display: inline-flex;
  gap: 9px;
  left: 8px;
  min-height: 48px;
  padding: 10px 12px;
  position: absolute;
}

.hero-chip.second {
  bottom: -12px;
  left: 70px;
}

.home-feature-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-card {
  border-color: #c7def0;
  display: grid;
  gap: 12px;
  min-height: 220px;
  overflow: hidden;
  padding: 24px;
  position: relative;
}

.feature-card::after {
  color: rgba(14, 165, 233, 0.08);
  content: "";
  font-family: "Font Awesome 5 Free";
  font-size: 76px;
  font-weight: 900;
  position: absolute;
  right: 18px;
  top: 18px;
}

.feature-card:nth-child(1)::after {
  content: "\f274";
}

.feature-card:nth-child(2)::after {
  content: "\f570";
}

.feature-card:nth-child(3)::after {
  content: "\f0f3";
}

.feature-card h3 {
  font-size: 24px;
  line-height: 1.15;
  margin: 0;
  position: relative;
  z-index: 1;
}

.feature-card p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  position: relative;
  z-index: 1;
}

.feature-icon {
  align-items: center;
  background: linear-gradient(135deg, #e0f2fe, #f8fcff);
  border-radius: 8px;
  color: var(--primary);
  display: grid;
  font-size: 30px;
  height: 76px;
  place-items: center;
  position: relative;
  width: 76px;
  z-index: 1;
}

.install-guide {
  background: #ffffff;
  border: 1px solid #c7def0;
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(14, 74, 122, 0.09);
  display: grid;
  gap: 14px;
  padding: 18px;
}

.install-guide span:first-child {
  color: var(--primary-dark);
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.install-guide h3 {
  font-size: 24px;
  margin: 0 0 6px;
}

.install-guide p {
  color: var(--muted);
  margin: 0;
}

.install-steps {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.install-steps article {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 14px;
}

.install-steps i {
  color: var(--primary);
  font-size: 30px;
}

.install-steps strong {
  color: var(--text);
}

.install-steps span {
  color: var(--muted);
  line-height: 1.4;
}

.hero-actions,
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  display: inline-flex;
  gap: 8px;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  text-decoration: none;
}

.button.primary {
  background: var(--primary);
  color: #ffffff;
}

.button.secondary {
  background: #ffffff;
  border-color: var(--line);
  color: var(--primary-dark);
}

.button.ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.button.danger {
  background: var(--danger);
  color: #ffffff;
}

.grid {
  display: grid;
  gap: 14px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.card h3 {
  font-size: 18px;
  margin: 0 0 10px;
}

.card p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.metric {
  display: grid;
  gap: 8px;
}

.metric span {
  color: var(--muted);
  font-size: 13px;
}

.metric strong {
  font-size: 30px;
  line-height: 1;
}

.session-strip {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}

.session-strip strong,
.session-strip span {
  display: block;
}

.session-strip span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.admin-greet {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(234, 246, 255, 0.96)),
    url("../img/schedule.svg") right 24px center / 132px no-repeat;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 16px;
  min-height: 126px;
  overflow: hidden;
  padding: 20px;
}

.admin-avatar {
  align-items: center;
  background: linear-gradient(135deg, #0284c7, #38bdf8);
  border-radius: 50%;
  color: #ffffff;
  display: grid;
  flex: 0 0 68px;
  font-size: 26px;
  height: 68px;
  place-items: center;
}

.admin-greet span,
.panel-heading span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.admin-greet h2 {
  font-size: 32px;
  line-height: 1.05;
  margin: 3px 0;
}

.admin-greet p {
  color: var(--muted);
  margin: 0;
}

.admin-greet-art {
  color: rgba(14, 165, 233, 0.18);
  font-size: 82px;
  margin-left: auto;
}

.admin-stat-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-stat-card {
  align-items: center;
  border-radius: 8px;
  color: #ffffff;
  display: flex;
  gap: 14px;
  min-height: 124px;
  overflow: hidden;
  padding: 18px;
  position: relative;
}

.admin-stat-card::after {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  content: "";
  height: 118px;
  position: absolute;
  right: -42px;
  top: -42px;
  width: 118px;
}

.admin-stat-card.violet {
  background: linear-gradient(135deg, #5f72bd 0%, #8b5cf6 100%);
}

.admin-stat-card.rose {
  background: linear-gradient(135deg, #fe5196 0%, #f77062 100%);
}

.admin-stat-card.sky {
  background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%);
}

.admin-stat-card.amber {
  background: linear-gradient(135deg, #f59f00 0%, #fcc419 100%);
}

.admin-stat-card.emerald {
  background: linear-gradient(135deg, #059669 0%, #14b8a6 100%);
}

.stat-icon {
  align-items: center;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 50%;
  display: grid;
  flex: 0 0 50px;
  height: 50px;
  place-items: center;
  position: relative;
  z-index: 1;
}

.admin-stat-card span,
.admin-stat-card strong {
  display: block;
  position: relative;
  z-index: 1;
}

.admin-stat-card span {
  font-size: 13px;
  opacity: 0.9;
}

.admin-stat-card strong {
  font-size: 26px;
  line-height: 1.15;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.admin-dashboard-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr);
}

.admin-main-column,
.admin-side-column {
  display: grid;
  gap: 14px;
}

.admin-panel,
.admin-feed {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.panel-heading {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.panel-heading h3,
.admin-feed h3 {
  font-size: 18px;
  margin: 0;
}

.progress-list {
  display: grid;
  gap: 14px;
}

.progress-row {
  display: grid;
  gap: 8px;
}

.progress-row > div:first-child {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.progress-row strong {
  font-size: 14px;
}

.progress-row span {
  color: var(--muted);
  font-size: 13px;
}

.progress-track {
  background: #e5f3fd;
  border-radius: 999px;
  height: 9px;
  overflow: hidden;
}

.progress-track span {
  background: linear-gradient(90deg, #0ea5e9, #67e8f9);
  display: block;
  height: 100%;
}

.admin-vitals {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 16px;
}

.admin-vital {
  border-radius: 8px;
  color: #ffffff;
  display: grid;
  gap: 5px;
  min-height: 106px;
  padding: 14px;
}

.admin-vital i {
  font-size: 22px;
}

.admin-vital span {
  font-size: 13px;
  opacity: 0.92;
}

.admin-vital strong {
  font-size: 28px;
  line-height: 1;
}

.admin-vital.amber {
  background: linear-gradient(135deg, #f59f00, #fcc419);
}

.admin-vital.sky {
  background: linear-gradient(135deg, #0284c7, #38bdf8);
}

.admin-vital.green {
  background: linear-gradient(135deg, #0f766e, #5eead4);
}

.admin-vital.violet {
  background: linear-gradient(135deg, #5f72bd, #8b5cf6);
}

.admin-actions {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-action {
  align-items: center;
  background: #fbfdfc;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: flex;
  gap: 12px;
  min-height: 78px;
  padding: 12px;
  text-decoration: none;
}

.admin-action:hover {
  border-color: #93c5fd;
  box-shadow: 0 10px 26px rgba(14, 165, 233, 0.12);
}

.admin-action i {
  align-items: center;
  background: var(--panel-2);
  border-radius: 8px;
  color: var(--primary);
  display: grid;
  flex: 0 0 42px;
  height: 42px;
  place-items: center;
}

.admin-action strong,
.admin-action span {
  display: block;
}

.admin-action strong {
  font-size: 14px;
}

.admin-action span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 2px;
}

.admin-feed ul {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-feed li {
  border-top: 1px solid var(--line);
  display: grid;
  font-size: 13px;
  gap: 6px;
  padding: 10px 0;
}

.admin-feed li:first-child {
  border-top: 0;
  padding-top: 4px;
}

.admin-feed li > span {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 12px;
}

.admin-feed p {
  color: var(--muted);
  margin: 0;
}

.dashboard-income-chart .report-chart {
  min-height: 210px;
  padding-top: 8px;
}

.dashboard-income-chart .report-bar-wrap {
  height: 194px;
}

.dashboard-income-chart .report-bar-value {
  display: none;
}

.customer-hero {
  align-items: center;
  background:
    radial-gradient(circle at 85% 16%, rgba(125, 211, 252, 0.45), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #eaf6ff 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  min-height: 154px;
  overflow: hidden;
  padding: 20px;
}

.customer-hero span,
.customer-care-card span {
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.customer-hero h2 {
  font-size: 28px;
  line-height: 1.1;
  margin: 5px 0;
}

.customer-hero p {
  color: var(--muted);
  margin: 0;
}

.customer-hero-icon {
  align-items: center;
  background: linear-gradient(135deg, #0ea5e9, #67e8f9);
  border-radius: 50%;
  color: #ffffff;
  display: grid;
  flex: 0 0 78px;
  font-size: 32px;
  height: 78px;
  place-items: center;
}

.customer-metric-grid,
.customer-actions {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.customer-metric {
  align-content: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  justify-items: center;
  min-height: 128px;
  padding: 16px;
  text-align: center;
}

.customer-metric i {
  color: var(--primary);
  font-size: 22px;
}

.customer-metric span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}

.customer-metric strong {
  color: var(--text);
  font-size: 34px;
  line-height: 1;
}

.customer-action {
  align-content: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: grid;
  gap: 8px;
  justify-items: center;
  min-height: 132px;
  padding: 16px;
  text-align: center;
  text-decoration: none;
}

.customer-action:hover {
  border-color: #93c5fd;
  box-shadow: 0 10px 26px rgba(14, 165, 233, 0.12);
}

.customer-action i {
  align-items: center;
  background: var(--panel-2);
  border-radius: 8px;
  color: var(--primary);
  display: grid;
  font-size: 22px;
  height: 44px;
  place-items: center;
  width: 44px;
}

.customer-action strong {
  font-size: 16px;
}

.customer-action span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.customer-care-card {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.95), rgba(7, 89, 133, 0.94)),
    url("../img/cloud.svg") right 22px center / 112px no-repeat;
  border-radius: 8px;
  color: #ffffff;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-height: 160px;
  padding: 20px;
}

.customer-care-card span,
.customer-care-card p {
  color: #e0f7ff;
}

.customer-care-card h3 {
  font-size: 24px;
  margin: 4px 0 8px;
}

.customer-care-card p {
  line-height: 1.5;
  margin: 0;
  max-width: 620px;
}

.customer-feed-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.customer-feed {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.customer-feed h3 {
  font-size: 17px;
  margin: 0 0 10px;
}

.customer-feed ul {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.customer-feed li {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
  padding: 11px 0;
}

.customer-feed li:first-child {
  border-top: 0;
  padding-top: 0;
}

.customer-feed li > span {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.customer-feed p {
  color: var(--muted);
  margin: 0;
}

.quick-actions {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.action-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: grid;
  gap: 7px;
  min-height: 132px;
  padding: 16px;
  text-decoration: none;
}

.action-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 10px 30px rgba(14, 165, 233, 0.12);
}

.action-card i {
  color: var(--primary);
  font-size: 22px;
}

.action-card strong {
  font-size: 16px;
}

.action-card span {
  color: var(--muted);
  line-height: 1.4;
}

.mini-list ul {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mini-list li {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 5px;
  padding-top: 10px;
}

.mini-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.mini-list li > span {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.tabs {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
}

.tab-button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  min-height: 40px;
  padding: 8px 12px;
}

.tab-button.active,
.tab-button:hover {
  background: var(--panel-2);
  border-color: #93c5fd;
  color: var(--primary-dark);
}

.calendar-shell {
  display: grid;
  gap: 12px;
}

.calendar-hero {
  align-items: center;
  background:
    radial-gradient(circle at 88% 12%, rgba(125, 211, 252, 0.42), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #eaf6ff 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  min-height: 142px;
  overflow: hidden;
  padding: 20px;
}

.calendar-hero span,
.calendar-panel-head span {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.calendar-hero h2 {
  font-size: 30px;
  line-height: 1.08;
  margin: 5px 0 8px;
}

.calendar-hero p,
.calendar-panel-head p {
  color: var(--muted);
  margin: 0;
}

.calendar-hero-icon {
  align-items: center;
  background: linear-gradient(135deg, #0ea5e9, #67e8f9);
  border-radius: 50%;
  color: #ffffff;
  display: grid;
  flex: 0 0 78px;
  font-size: 32px;
  height: 78px;
  place-items: center;
}

.calendar-tabs {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 8px;
}

.calendar-tab {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  justify-content: center;
  min-height: 42px;
  padding: 8px 10px;
}

.calendar-tab i {
  color: var(--primary);
}

.calendar-tab.active,
.calendar-tab:hover {
  background: var(--panel-2);
  border-color: #93c5fd;
  color: var(--primary-dark);
}

.catalogue-shell {
  display: grid;
  gap: 12px;
}

.catalogue-hero {
  align-items: center;
  background:
    radial-gradient(circle at 86% 16%, rgba(125, 211, 252, 0.42), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #eaf6ff 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  min-height: 134px;
  overflow: hidden;
  padding: 20px;
}

.catalogue-hero span,
.catalogue-panel-head span {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.catalogue-hero h2 {
  font-size: 30px;
  line-height: 1.08;
  margin: 5px 0 8px;
}

.catalogue-hero p,
.catalogue-panel-head p {
  color: var(--muted);
  margin: 0;
}

.catalogue-hero-icon {
  align-items: center;
  background: linear-gradient(135deg, #0ea5e9, #67e8f9);
  border-radius: 50%;
  color: #ffffff;
  display: grid;
  flex: 0 0 74px;
  font-size: 30px;
  height: 74px;
  place-items: center;
}

.catalogue-tabs {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 8px;
}

.catalogue-tab {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  justify-content: center;
  min-height: 42px;
  padding: 8px 10px;
}

.catalogue-tab i {
  color: var(--primary);
}

.catalogue-tab.active,
.catalogue-tab:hover {
  background: var(--panel-2);
  border-color: #93c5fd;
  color: var(--primary-dark);
}

.catalogue-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.catalogue-panel-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.catalogue-panel-head h3 {
  font-size: 22px;
  margin: 4px 0 0;
}

.catalogue-table {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.catalogue-row {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  font-size: 13px;
  gap: 10px;
  grid-template-columns: 1.15fr 1.8fr 1fr auto auto;
  padding: 10px 12px;
}

.catalogue-row:first-child {
  border-top: 0;
}

.catalogue-head {
  background: var(--panel-2);
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.catalogue-row strong,
.catalogue-row small,
.catalogue-row span {
  display: block;
}

.catalogue-row strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.catalogue-name-cell {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.catalogue-thumb {
  align-items: center;
  background: #eaf6ff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--primary);
  display: inline-flex;
  flex: 0 0 42px;
  height: 42px;
  justify-content: center;
  overflow: hidden;
  width: 42px;
}

.catalogue-thumb img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.catalogue-thumb.icon i {
  font-size: 18px;
}

.catalogue-row small,
.catalogue-row span {
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.catalogue-row .row-actions {
  margin-top: 0;
}

.catalogue-row .button {
  font-size: 12px;
  min-height: 34px;
  padding: 7px 10px;
}

.catalogue-image-field {
  align-items: center;
  background: #f8fcff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 108px;
  padding: 12px;
}

.catalogue-image-field small {
  color: var(--muted);
  grid-column: 1 / -1;
  line-height: 1.4;
}

.catalogue-image-preview {
  align-items: center;
  aspect-ratio: 1;
  background: #eaf6ff;
  border: 1px dashed #b9d9f3;
  border-radius: 8px;
  color: var(--primary);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 6px;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.catalogue-image-preview i {
  font-size: 26px;
}

.catalogue-image-preview img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.customer-admin-hero {
  align-items: center;
  background:
    radial-gradient(circle at 86% 16%, rgba(125, 211, 252, 0.42), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #eaf6ff 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  min-height: 134px;
  overflow: hidden;
  padding: 20px;
}

.customer-admin-hero span,
.customer-admin-head span {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.customer-admin-hero h2 {
  font-size: 30px;
  line-height: 1.08;
  margin: 5px 0 8px;
}

.customer-admin-hero p,
.customer-admin-head p {
  color: var(--muted);
  margin: 0;
}

.customer-admin-icon {
  align-items: center;
  background: linear-gradient(135deg, #0ea5e9, #67e8f9);
  border-radius: 50%;
  color: #ffffff;
  display: grid;
  flex: 0 0 74px;
  font-size: 30px;
  height: 74px;
  place-items: center;
}

.customer-admin-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.customer-admin-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.customer-admin-head h3 {
  font-size: 22px;
  margin: 4px 0 0;
}

.customer-filter-form {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.customer-filter-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1.3fr 0.8fr 1fr 1fr;
}

.admin-customer-table {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.admin-customer-row {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  font-size: 13px;
  gap: 10px;
  grid-template-columns: 1.15fr 1.35fr 1.65fr 1fr auto;
  padding: 10px 12px;
}

.admin-customer-row:first-child {
  border-top: 0;
}

.admin-customer-head {
  background: var(--panel-2);
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-customer-row strong,
.admin-customer-row small,
.admin-customer-row span {
  display: block;
}

.admin-customer-row strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.admin-customer-row small,
.admin-customer-row span {
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.customer-counts {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-counts span {
  background: var(--panel-2);
  border-radius: 8px;
  color: var(--primary-dark);
  font-size: 12px;
  padding: 5px 7px;
}

.reports-hero {
  align-items: center;
  background:
    radial-gradient(circle at 86% 16%, rgba(125, 211, 252, 0.42), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #eaf6ff 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  min-height: 144px;
  overflow: hidden;
  padding: 20px;
}

.reports-hero span,
.report-panel-head span {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.reports-hero h2 {
  font-size: 30px;
  line-height: 1.08;
  margin: 5px 0 8px;
}

.reports-hero p,
.report-panel-head p {
  color: var(--muted);
  margin: 0;
}

.reports-hero-icon {
  align-items: center;
  background: linear-gradient(135deg, #0ea5e9, #67e8f9);
  border-radius: 50%;
  color: #ffffff;
  display: grid;
  flex: 0 0 78px;
  font-size: 32px;
  height: 78px;
  place-items: center;
}

.reports-kpi-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.report-kpi {
  align-content: center;
  border-radius: 8px;
  color: #ffffff;
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 14px;
}

.report-kpi i {
  font-size: 22px;
}

.report-kpi span {
  font-size: 12px;
  opacity: 0.92;
}

.report-kpi strong {
  font-size: 24px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.report-kpi.sky,
.report-kpi.blue {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.report-kpi.green {
  background: linear-gradient(135deg, #0f766e, #5eead4);
}

.report-kpi.amber {
  background: linear-gradient(135deg, #f59f00, #fbbf24);
}

.report-kpi.rose {
  background: linear-gradient(135deg, #f43f5e, #fb7185);
}

.reports-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
}

.report-panel-head h3 {
  font-size: 20px;
  margin: 4px 0 4px;
}

.report-chart {
  align-items: end;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: 240px;
  padding: 22px 4px 0;
}

.report-chart.year {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.report-bar-wrap {
  align-items: center;
  display: grid;
  gap: 6px;
  height: 220px;
  justify-items: center;
  min-width: 0;
}

.report-bar {
  align-self: end;
  background: linear-gradient(180deg, #67e8f9, #0ea5e9);
  border-radius: 8px 8px 0 0;
  min-height: 4px;
  width: 100%;
}

.report-bar-value {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.1;
  min-height: 24px;
  overflow-wrap: anywhere;
  text-align: center;
}

.report-bar-wrap span {
  color: var(--muted);
  font-size: 11px;
}

.cashflow-chart {
  align-items: end;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: 250px;
  padding: 18px 4px 0;
}

.cashflow-chart.year {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cashflow-group {
  align-items: end;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 222px;
  min-width: 0;
}

.cashflow-group > span {
  color: var(--muted);
  font-size: 11px;
  grid-column: 1 / -1;
  text-align: center;
}

.cashflow-bar {
  align-self: end;
  border-radius: 8px 8px 0 0;
  min-height: 4px;
}

.cashflow-bar.income {
  background: linear-gradient(180deg, #67e8f9, #0ea5e9);
}

.cashflow-bar.expense {
  background: linear-gradient(180deg, #fda4af, #f43f5e);
}

.cashflow-bar.profit {
  background: linear-gradient(180deg, #5eead4, #0f766e);
}

.cashflow-bar.loss {
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
}

.cashflow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}

.cashflow-legend span {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
}

.cashflow-legend i {
  border-radius: 999px;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.cashflow-legend .income {
  background: #0ea5e9;
}

.cashflow-legend .expense {
  background: #f43f5e;
}

.cashflow-legend .profit {
  background: #0f766e;
}

.report-list {
  display: grid;
  gap: 10px;
}

.report-list-row {
  display: grid;
  gap: 7px;
}

.report-list-row > div:first-child {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.report-list-row strong,
.report-list-row em {
  color: var(--text);
  font-style: normal;
  font-weight: 800;
}

.report-list-row span {
  color: var(--muted);
  font-size: 12px;
}

.report-progress {
  background: var(--panel-2);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.report-progress span {
  background: linear-gradient(90deg, #0ea5e9, #67e8f9);
  display: block;
  height: 100%;
}

.report-status-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-status-grid div,
.report-note {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-height: 86px;
  padding: 12px;
}

.report-status-grid strong,
.report-note strong {
  color: var(--text);
  font-size: 26px;
  line-height: 1;
}

.report-note {
  margin-bottom: 10px;
}

.report-note span {
  color: var(--muted);
}

.report-action-columns {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-action-columns h4 {
  margin: 0 0 8px;
}

.report-action-columns ul {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.report-action-columns li {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 10px;
}

.report-action-columns li span {
  color: var(--muted);
  font-size: 12px;
}

.settings-shell {
  display: grid;
  gap: 12px;
}

.settings-hero {
  align-items: center;
  background:
    radial-gradient(circle at 86% 16%, rgba(125, 211, 252, 0.42), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #eaf6ff 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  min-height: 136px;
  overflow: hidden;
  padding: 20px;
}

.settings-hero span,
.settings-panel-head span {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.settings-hero h2 {
  font-size: 30px;
  line-height: 1.08;
  margin: 5px 0 8px;
}

.settings-hero p,
.settings-panel-head p {
  color: var(--muted);
  margin: 0;
}

.settings-hero-icon {
  align-items: center;
  background: linear-gradient(135deg, #0ea5e9, #67e8f9);
  border-radius: 50%;
  color: #ffffff;
  display: grid;
  flex: 0 0 74px;
  font-size: 30px;
  height: 74px;
  place-items: center;
}

.settings-tabs {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 8px;
}

.settings-tab {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  justify-content: center;
  min-height: 42px;
  padding: 8px 10px;
}

.settings-tab i {
  color: var(--primary);
}

.settings-tab.active,
.settings-tab:hover {
  background: var(--panel-2);
  border-color: #93c5fd;
  color: var(--primary-dark);
}

.settings-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.settings-panel-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.settings-panel-head h3 {
  font-size: 22px;
  margin: 4px 0 0;
}

.settings-table {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.settings-row {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  font-size: 13px;
  gap: 10px;
  grid-template-columns: 1.25fr 1.65fr 1.1fr auto auto;
  padding: 10px 12px;
}

.settings-row:first-child {
  border-top: 0;
}

.settings-head {
  background: var(--panel-2);
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.settings-row strong,
.settings-row small,
.settings-row span {
  display: block;
}

.settings-row strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.settings-row small,
.settings-row span {
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.settings-row .row-actions {
  margin-top: 0;
}

.settings-row .button {
  font-size: 12px;
  min-height: 34px;
  padding: 7px 10px;
}

.owner-setting-note {
  background: linear-gradient(135deg, #eff8ff, #ffffff);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 14px;
}

.owner-setting-note strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.2;
}

.owner-setting-note span,
.owner-setting-note small {
  color: var(--muted);
  line-height: 1.4;
}

.settings-api-preview {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--primary-dark);
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
}

.settings-api-preview span {
  overflow-wrap: anywhere;
}

.qr-settings-layout,
.qr-payment-block,
.hero-upload-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) 240px;
}

.qr-preview-card,
.qr-payment-block,
.hero-mobile-preview {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.qr-preview-card {
  display: grid;
  gap: 8px;
}

.qr-preview-card strong,
.qr-preview-card span {
  display: block;
  overflow-wrap: anywhere;
}

.qr-preview-card span,
.qr-bank-info span {
  color: var(--muted);
}

.hero-mobile-preview {
  align-content: center;
  aspect-ratio: 9 / 16;
  display: grid;
  justify-items: center;
  overflow: hidden;
  padding: 0;
}

.hero-mobile-preview img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.hero-mobile-preview div {
  color: var(--muted);
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 18px;
  text-align: center;
}

.hero-mobile-preview i {
  color: var(--primary);
  font-size: 36px;
}

.qr-preview-image {
  align-items: center;
  background: #ffffff;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--primary);
  display: grid;
  min-height: 210px;
  overflow: hidden;
  place-items: center;
}

.qr-preview-image img {
  display: block;
  max-height: 260px;
  max-width: 100%;
  object-fit: contain;
}

.qr-preview-image i {
  font-size: 54px;
}

.qr-payment-block {
  margin-top: 12px;
}

.qr-payment-block h3 {
  margin: 0 0 6px;
}

.qr-bank-info {
  display: grid;
  gap: 4px;
  grid-template-columns: 110px minmax(0, 1fr);
  margin-top: 12px;
}

.calendar-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.calendar-panel-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.calendar-panel-head.compact {
  margin-bottom: -4px;
}

.calendar-panel-head h3 {
  font-size: 22px;
  margin: 4px 0 0;
}

.calendar-summary-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calendar-summary-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.calendar-summary {
  align-content: center;
  border-radius: 8px;
  color: #ffffff;
  display: grid;
  gap: 5px;
  min-height: 104px;
  padding: 14px;
}

.calendar-summary i {
  font-size: 22px;
}

.calendar-summary span {
  font-size: 12px;
  opacity: 0.92;
}

.calendar-summary strong {
  font-size: 28px;
  line-height: 1.05;
}

.calendar-summary.sky,
.calendar-summary.blue {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.calendar-summary.green {
  background: linear-gradient(135deg, #0f766e, #5eead4);
}

.calendar-summary.amber {
  background: linear-gradient(135deg, #f59f00, #fbbf24);
}

.month-calendar {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.month-day {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: grid;
  gap: 5px;
  min-height: 104px;
  padding: 10px;
  text-align: left;
}

.month-day:hover {
  border-color: #93c5fd;
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.1);
}

.month-day span,
.month-day small,
.month-day em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.2;
}

.month-day strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}

.month-day em {
  background: var(--panel-2);
  border-radius: 999px;
  color: var(--primary-dark);
  justify-self: start;
  padding: 4px 7px;
}

.month-day.busy {
  border-color: #93c5fd;
}

.month-day.blocked {
  background: #fff8e6;
  border-color: #f8d27a;
}

.month-day.blocked em {
  background: #fff0bd;
  color: #7a5200;
}

.calendar-two-column {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
}

.operating-grid,
.blocked-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.operating-card,
.blocked-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-height: 154px;
  padding: 14px;
}

.operating-card.closed {
  background: #f8fafc;
}

.operating-card h3,
.blocked-card h3 {
  font-size: 18px;
  margin: 8px 0 0;
}

.operating-card strong,
.blocked-card strong {
  color: var(--text);
  font-size: 18px;
}

.operating-card p,
.blocked-card p {
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}

.operating-card .button {
  justify-self: start;
}

.admin-form-shell {
  display: grid;
  gap: 14px;
}

.search-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 42px;
  min-width: min(100%, 280px);
  padding: 10px 12px;
}

.inline-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inline-form input,
.inline-form select {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 42px;
  padding: 9px 12px;
}

.list {
  display: grid;
  gap: 10px;
}

.list-item {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px;
}

.list-item h3 {
  font-size: 16px;
  margin: 0 0 5px;
}

.list-item p {
  color: var(--muted);
  margin: 0;
}

.list-item .row-actions {
  align-items: center;
  justify-content: flex-end;
  margin-top: 0;
}

.booking-filter-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1.1fr 1fr 1fr;
}

.admin-booking-table,
.admin-quotation-table,
.admin-payment-table,
.admin-audit-table {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.admin-booking-row,
.admin-quotation-row,
.admin-payment-row,
.admin-audit-row {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  font-size: 13px;
  gap: 10px;
  grid-template-columns: 1.05fr 1.3fr 1.25fr 1fr auto auto;
  padding: 10px 12px;
}

.admin-quotation-row {
  grid-template-columns: 1.05fr 1.2fr 1.45fr 1fr 0.8fr auto auto;
}

.admin-payment-row {
  grid-template-columns: 1.05fr 1.15fr 1.05fr 0.9fr 1fr 0.8fr auto auto;
}

.admin-audit-row {
  grid-template-columns: 0.9fr 1.35fr 1fr 1.25fr 1fr 0.9fr;
}

.admin-booking-row:first-child,
.admin-quotation-row:first-child,
.admin-payment-row:first-child,
.admin-audit-row:first-child {
  border-top: 0;
}

.admin-booking-head,
.admin-quotation-head,
.admin-payment-head,
.admin-audit-head {
  background: var(--panel-2);
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-booking-row strong,
.admin-booking-row small,
.admin-booking-row span,
.admin-quotation-row strong,
.admin-quotation-row small,
.admin-quotation-row span,
.admin-payment-row strong,
.admin-payment-row small,
.admin-payment-row span,
.admin-audit-row strong,
.admin-audit-row small,
.admin-audit-row span {
  display: block;
}

.admin-booking-row strong,
.admin-quotation-row strong,
.admin-payment-row strong,
.admin-audit-row strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.admin-booking-row small,
.admin-booking-row span,
.admin-quotation-row small,
.admin-quotation-row span,
.admin-payment-row small,
.admin-payment-row span,
.admin-audit-row small,
.admin-audit-row span {
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-booking-row .row-actions,
.admin-quotation-row .row-actions,
.admin-payment-row .row-actions,
.admin-audit-row .row-actions {
  margin-top: 0;
}

.admin-booking-row .button,
.admin-quotation-row .button,
.admin-payment-row .button,
.admin-audit-row .button {
  font-size: 12px;
  min-height: 34px;
  padding: 7px 10px;
}

.audit-hero {
  align-items: center;
  background:
    radial-gradient(circle at 86% 16%, rgba(96, 165, 250, 0.32), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #eaf6ff 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  min-height: 136px;
  overflow: hidden;
  padding: 20px;
}

.audit-hero span {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.audit-hero h2 {
  font-size: 30px;
  line-height: 1.08;
  margin: 5px 0 8px;
}

.audit-hero p {
  color: var(--muted);
  margin: 0;
}

.audit-hero-icon {
  align-items: center;
  background: linear-gradient(135deg, #2563eb, #67e8f9);
  border-radius: 50%;
  color: #ffffff;
  display: grid;
  flex: 0 0 74px;
  font-size: 30px;
  height: 74px;
  place-items: center;
}

.audit-filter-grid {
  grid-template-columns: 1fr 1.1fr 1fr 1fr;
}

.profile-hero {
  align-items: center;
  background:
    radial-gradient(circle at 86% 16%, rgba(125, 211, 252, 0.36), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #eaf6ff 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  min-height: 136px;
  padding: 20px;
}

.profile-hero span {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.profile-hero h2 {
  font-size: 30px;
  line-height: 1.08;
  margin: 5px 0 8px;
}

.profile-hero p {
  color: var(--muted);
  margin: 0;
}

.profile-hero-icon {
  align-items: center;
  background: linear-gradient(135deg, #2563eb, #67e8f9);
  border-radius: 50%;
  color: #ffffff;
  display: grid;
  flex: 0 0 74px;
  font-size: 30px;
  height: 74px;
  place-items: center;
}

.session-list {
  display: grid;
  gap: 10px;
}

.session-card {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 12px;
}

.session-icon {
  align-items: center;
  background: var(--panel-2);
  border-radius: 8px;
  color: var(--primary);
  display: grid;
  font-size: 22px;
  height: 48px;
  place-items: center;
  width: 48px;
}

.session-card strong,
.session-card small {
  display: block;
}

.session-card strong {
  color: var(--text);
  font-size: 15px;
}

.session-card small,
.session-meta {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.session-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 8px;
}

.secure-file-block {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 14px 0;
  padding: 12px;
}

.secure-file-block strong,
.secure-file-block span {
  display: block;
}

.secure-file-block span {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.password-form {
  max-width: 760px;
}

.checkbox-row {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: flex;
  gap: 10px;
  padding: 12px 14px;
}

.checkbox-row input {
  accent-color: var(--primary);
  height: 18px;
  width: 18px;
}

.checkbox-row span {
  color: var(--text);
  font-weight: 700;
}

.expenses-hero {
  align-items: center;
  background:
    radial-gradient(circle at 86% 16%, rgba(125, 211, 252, 0.42), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #eaf6ff 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  min-height: 136px;
  overflow: hidden;
  padding: 20px;
}

.expenses-hero span,
.expenses-panel-head span {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.expenses-hero h2 {
  font-size: 30px;
  line-height: 1.08;
  margin: 5px 0 8px;
}

.expenses-hero p,
.expenses-panel-head p {
  color: var(--muted);
  margin: 0;
}

.expenses-hero-icon {
  align-items: center;
  background: linear-gradient(135deg, #0ea5e9, #67e8f9);
  border-radius: 50%;
  color: #ffffff;
  display: grid;
  flex: 0 0 74px;
  font-size: 30px;
  height: 74px;
  place-items: center;
}

.expenses-kpi-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.expenses-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.expenses-panel-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.expenses-panel-head h3 {
  font-size: 22px;
  margin: 4px 0 0;
}

.admin-expense-table {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.admin-expense-row {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  font-size: 13px;
  gap: 10px;
  grid-template-columns: 1.05fr 1.5fr auto 1fr 0.85fr auto;
  padding: 10px 12px;
}

.admin-expense-row:first-child {
  border-top: 0;
}

.admin-expense-head {
  background: var(--panel-2);
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-expense-row strong,
.admin-expense-row small,
.admin-expense-row span {
  display: block;
}

.admin-expense-row strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.admin-expense-row small,
.admin-expense-row span {
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-expense-row .row-actions {
  margin-top: 0;
}

.admin-expense-row .button {
  font-size: 12px;
  min-height: 34px;
  padding: 7px 10px;
}

.pagination-bar {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 10px 12px;
}

.pagination-bar span {
  font-size: 13px;
  font-weight: 700;
}

.status {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 9px;
  text-transform: capitalize;
}

.status.pending,
.status.requested,
.status.verification_required,
.status.issued,
.status.partial {
  background: #fff6d7;
  color: #7a5200;
}

.status.confirmed,
.status.quoted,
.status.paid,
.status.sent,
.status.assigned {
  background: #e7f7ef;
  color: #0f684d;
}

.status.cancelled,
.status.failed,
.status.rejected {
  background: #ffe7e3;
  color: #9f2418;
}

.status.completed,
.status.accepted {
  background: #e8f0ff;
  color: #2853a5;
}

.status.open,
.status.active,
.status.public,
.status.published {
  background: #e7f7ef;
  color: #0f684d;
}

.status.closed,
.status.inactive,
.status.private,
.status.draft,
.status.full_day,
.status.partial {
  background: #eef2f7;
  color: #425466;
}

.status.in_progress,
.status.on_the_way {
  background: #e8f0ff;
  color: #2853a5;
}

.status.salary,
.status.fuel,
.status.transport,
.status.marketing,
.status.utilities,
.status.tools,
.status.parts,
.status.other {
  background: #eaf6ff;
  color: var(--primary-dark);
}

.form {
  display: grid;
  gap: 12px;
}

.form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  gap: 6px;
}

.form input,
.form select,
.form textarea {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 44px;
  padding: 10px 12px;
  width: 100%;
}

.form input[type="date"],
.form input[type="month"],
.inline-form input[type="date"],
.inline-form input[type="month"] {
  cursor: pointer;
}

.date-picker-shell {
  position: relative;
}

.date-picker-shell .native-date-input {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  width: 1px;
}

.date-display-button {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.date-display-button i {
  color: var(--text);
  font-size: 16px;
}

.form textarea {
  min-height: 92px;
  resize: vertical;
}

.booking-flow .toolbar p {
  color: var(--muted);
  margin: 4px 0 0;
}

.slot-panel {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.slot-panel h4 {
  margin: 0;
}

.slot-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.slot-button {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: grid;
  gap: 4px;
  min-height: 64px;
  padding: 10px;
  text-align: left;
}

.slot-button span {
  color: var(--muted);
  font-size: 12px;
}

.slot-button.selected {
  background: #e0f2fe;
  border-color: var(--primary);
  color: var(--primary-dark);
}

.slot-button:disabled {
  background: #f0f3f2;
  color: #9aa6a3;
}

.slot-loading {
  align-items: center;
  color: var(--muted);
  display: flex;
  gap: 10px;
}

.slot-loading .spinner {
  height: 22px;
  width: 22px;
}

.booking-summary {
  background: #fffdf2;
  border: 1px solid #eadf9d;
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 12px;
}

.booking-summary strong {
  color: #594800;
}

.booking-summary span {
  color: var(--muted);
}

.detail-card {
  display: grid;
  gap: 14px;
}

.detail-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.detail-grid div {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 12px;
}

.detail-grid strong {
  color: var(--text);
  font-size: 13px;
}

.detail-grid span {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.job-gallery-card {
  overflow: hidden;
}

.job-gallery-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.job-image-group {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.job-image-group h4 {
  margin: 0;
}

.job-image-group p {
  color: var(--muted);
  margin: 0;
}

.job-image-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.job-image-list a {
  aspect-ratio: 1;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
  overflow: hidden;
}

.job-image-list img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.auth-layout {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 420px;
  min-height: calc(100vh - 160px);
}

.auth-panel {
  box-shadow: var(--shadow);
}

.empty-state,
.loading-state {
  align-items: center;
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  justify-items: center;
  min-height: 180px;
  padding: 24px;
  text-align: center;
}

.spinner {
  animation: spin 0.8s linear infinite;
  border: 3px solid #d8ecfb;
  border-top-color: var(--primary);
  border-radius: 50%;
  height: 34px;
  width: 34px;
}

.bottom-nav {
  display: none;
}

.nav-backdrop {
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 980px) {
  .app-shell {
    display: block;
  }

  .side-nav {
    bottom: 0;
    left: 0;
    max-width: 320px;
    position: fixed;
    top: 0;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    width: 86vw;
  }

  .side-nav.open {
    transform: translateX(0);
  }

  .nav-backdrop.open {
    background: rgba(10, 20, 18, 0.42);
    display: block;
    inset: 0;
    position: fixed;
    z-index: 15;
  }

  #menu-btn {
    display: grid;
  }

  .app-main {
    padding: 18px 14px 92px;
  }

  .topbar h1 {
    font-size: 22px;
  }

  .topbar p {
    font-size: 13px;
  }

  .grid.two,
  .grid.three,
  .grid.four,
  .auth-layout,
  .quick-actions,
  .home-feature-grid,
  .admin-dashboard-layout,
  .customer-feed-grid,
  .form-grid,
  .slot-grid,
  .detail-grid,
  .job-gallery-grid {
    grid-template-columns: 1fr;
  }

  .customer-metric-grid,
  .customer-actions,
  .admin-stat-grid,
  .admin-actions,
  .admin-vitals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .session-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-greet {
    align-items: flex-start;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(234, 246, 255, 0.96)),
      url("../img/schedule.svg") right 14px bottom 12px / 92px no-repeat;
    padding: 16px;
  }

  .admin-avatar {
    flex-basis: 56px;
    font-size: 22px;
    height: 56px;
  }

  .admin-greet h2 {
    font-size: 24px;
  }

  .admin-greet-art {
    display: none;
  }

  .admin-stat-card {
    align-content: center;
    display: grid;
    gap: 8px;
    min-height: 118px;
    padding: 14px;
  }

  .admin-stat-card .stat-icon {
    flex-basis: 42px;
    font-size: 18px;
    height: 42px;
    width: 42px;
  }

  .admin-stat-card strong {
    font-size: 22px;
  }

  .admin-stat-card span {
    font-size: 12px;
  }

  .admin-dashboard-layout {
    display: grid;
  }

  .admin-vital,
  .admin-action {
    min-height: 112px;
  }

  .admin-action {
    align-content: center;
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .admin-action i {
    flex-basis: 42px;
  }

  .admin-feed {
    padding: 14px;
  }

  .admin-feed h3 {
    font-size: 16px;
  }

  .admin-feed li {
    font-size: 12.5px;
  }

  .calendar-hero {
    align-items: flex-start;
    padding: 16px;
  }

  .calendar-hero h2 {
    font-size: 24px;
  }

  .calendar-hero-icon {
    flex-basis: 58px;
    font-size: 24px;
    height: 58px;
  }

  .calendar-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalogue-hero {
    align-items: flex-start;
    padding: 16px;
  }

  .catalogue-hero h2 {
    font-size: 24px;
  }

  .catalogue-hero-icon {
    flex-basis: 58px;
    font-size: 24px;
    height: 58px;
  }

  .catalogue-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalogue-panel-head {
    display: grid;
  }

  .customer-admin-hero {
    align-items: flex-start;
    padding: 16px;
  }

  .customer-admin-hero h2 {
    font-size: 24px;
  }

  .customer-admin-icon {
    flex-basis: 58px;
    font-size: 24px;
    height: 58px;
  }

  .customer-admin-head,
  .customer-filter-grid {
    display: grid;
  }

  .reports-hero {
    align-items: flex-start;
    padding: 16px;
  }

  .reports-hero h2 {
    font-size: 24px;
  }

  .reports-hero-icon {
    flex-basis: 58px;
    font-size: 24px;
    height: 58px;
  }

  .expenses-hero {
    align-items: flex-start;
    padding: 16px;
  }

  .expenses-hero h2 {
    font-size: 24px;
  }

  .expenses-hero-icon {
    flex-basis: 58px;
    font-size: 24px;
    height: 58px;
  }

  .expenses-kpi-grid {
    grid-template-columns: 1fr;
  }

  .expenses-panel-head {
    display: grid;
  }

  .settings-hero {
    align-items: flex-start;
    padding: 16px;
  }

  .settings-hero h2 {
    font-size: 24px;
  }

  .settings-hero-icon {
    flex-basis: 58px;
    font-size: 24px;
    height: 58px;
  }

  .settings-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-panel-head {
    display: grid;
  }

  .qr-settings-layout,
  .qr-payment-block,
  .hero-upload-layout {
    grid-template-columns: 1fr;
  }

  .reports-kpi-grid,
  .reports-grid,
  .report-action-columns {
    grid-template-columns: 1fr;
  }

  .report-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-chart {
    gap: 5px;
    min-height: 210px;
  }

  .cashflow-chart {
    gap: 5px;
    min-height: 210px;
  }

  .report-bar-wrap {
    height: 194px;
  }

  .cashflow-group {
    height: 194px;
  }

  .report-bar-value {
    display: none;
  }

  .customer-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-filter-grid label:first-child {
    grid-column: 1 / -1;
  }

  .customer-filter-form {
    padding: 12px;
  }

  .customer-filter-form label {
    font-size: 12px;
  }

  .customer-filter-form input,
  .customer-filter-form select,
  .customer-filter-form .date-display-button {
    font-size: 14px;
    min-height: 42px;
  }

  .customer-filter-form .row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 8px;
  }

  .customer-filter-form .button {
    width: 100%;
  }

  .calendar-panel-head {
    display: grid;
  }

  .calendar-summary-grid,
  .calendar-summary-grid.four,
  .calendar-two-column,
  .operating-grid,
  .blocked-grid {
    grid-template-columns: 1fr;
  }

  .month-calendar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .month-day {
    min-height: 94px;
  }

  .admin-side-column {
    min-width: 0;
  }

  .customer-hero {
    min-height: 136px;
    padding: 16px;
  }

  .customer-hero h2 {
    font-size: 23px;
  }

  .customer-hero-icon {
    flex-basis: 58px;
    font-size: 24px;
    height: 58px;
  }

  .customer-metric {
    min-height: 112px;
    padding: 14px;
  }

  .customer-metric strong {
    font-size: 30px;
  }

  .customer-action {
    min-height: 122px;
    padding: 14px;
  }

  .customer-care-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero {
    background:
      linear-gradient(120deg, rgba(14, 165, 233, 0.96), rgba(7, 89, 133, 0.93)),
      url("../img/pwa.svg") right 18px bottom 14px / 96px no-repeat;
    padding: 22px;
  }

  .home-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 24px;
  }

  .home-hero.has-mobile-banner {
    align-content: end;
    background:
      linear-gradient(180deg, rgba(6, 31, 55, 0.1) 0%, rgba(6, 31, 55, 0.72) 100%),
      var(--home-hero-image) center / cover no-repeat;
    min-height: calc(100svh - 190px);
    padding: 22px;
  }

  .home-hero.has-mobile-banner::after,
  .home-hero.has-mobile-banner .aircond-visual {
    display: none;
  }

  .home-hero.has-mobile-banner .hero-kicker,
  .home-hero.has-mobile-banner h2,
  .home-hero.has-mobile-banner p {
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(8, 47, 73, 0.34);
  }

  .home-hero.has-mobile-banner .button.secondary,
  .home-hero.has-mobile-banner .button.ghost {
    background: rgba(255, 255, 255, 0.88);
  }

  .home-hero::after {
    font-size: 44px;
  }

  .home-hero h2 {
    font-size: 36px;
  }

  .home-hero p {
    font-size: 16px;
  }

  .install-steps {
    grid-template-columns: 1fr;
  }

  .feature-card {
    min-height: 190px;
  }

  .aircond-visual {
    min-height: 220px;
  }

  .hero-chip {
    bottom: 34px;
  }

  .hero-chip.second {
    bottom: -2px;
    left: 42px;
  }

  .list-item {
    grid-template-columns: 1fr;
  }

  .booking-filter-grid,
  .admin-booking-row,
  .admin-quotation-row,
  .admin-payment-row,
  .admin-audit-row,
  .admin-expense-row,
  .catalogue-row,
  .admin-customer-row,
  .settings-row {
    grid-template-columns: 1fr;
  }

  .admin-booking-row,
  .admin-quotation-row,
  .admin-payment-row,
  .admin-audit-row,
  .admin-expense-row,
  .catalogue-row,
  .admin-customer-row,
  .settings-row {
    align-items: start;
    font-size: 12.5px;
    padding: 12px;
  }

  .admin-booking-head,
  .admin-quotation-head,
  .admin-payment-head,
  .admin-audit-head,
  .admin-expense-head,
  .catalogue-head,
  .admin-customer-head,
  .settings-head {
    display: none;
  }

  .admin-booking-row .row-actions,
  .admin-quotation-row .row-actions,
  .admin-payment-row .row-actions,
  .admin-audit-row .row-actions,
  .admin-expense-row .row-actions,
  .catalogue-row .row-actions,
  .settings-row .row-actions {
    justify-content: flex-start;
  }

  .catalogue-image-field {
    grid-template-columns: 1fr;
  }

  .catalogue-image-preview {
    max-width: 128px;
  }

  .session-card {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .session-card .row-actions {
    justify-content: flex-start;
  }

  .bottom-nav {
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--line);
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    left: 0;
    min-height: 68px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    z-index: 10;
  }

  .bottom-link {
    align-items: center;
    border-radius: 8px;
    color: #5c738a;
    display: grid;
    font-size: 11px;
    gap: 4px;
    justify-items: center;
    min-width: 0;
    padding: 6px 4px;
    text-decoration: none;
  }

  .bottom-link i {
    color: var(--primary-dark);
    font-size: 19px;
  }

  .bottom-link.active {
    background: var(--panel-2);
    color: var(--primary-dark);
  }

  .bottom-link.active i {
    color: var(--primary);
  }
}