:root {
  --bg: #090b0f;
  --panel: #141820;
  --panel-2: #1b2029;
  --yellow: #f5c400;
  --yellow-soft: #ffe56b;
  --text: #f7f7f7;
  --muted: #9ba3af;
  --danger: #ff5c5c;
  --success: #43d17d;
  --line: rgba(255,255,255,.09);
  --radius: 20px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body {
  background:
    radial-gradient(circle at 100% 0%, rgba(245,196,0,.12), transparent 35%),
    linear-gradient(180deg, #0b0e13 0%, #08090c 100%);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--yellow); }

#app { min-height: 100vh; padding-bottom: 94px; }
.page { padding: 16px; max-width: 680px; margin: 0 auto; }

.splash {
  min-height: 100vh; display: grid; place-content: center; text-align: center;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,
    rgba(245,196,0,.035) 20px 40px
  );
}
.brand-mark {
  width: 92px; height: 92px; border-radius: 24px; margin: 0 auto 18px;
  display: grid; place-items: center; color: #111; background: var(--yellow);
  font-size: 34px; font-weight: 1000; transform: rotate(-3deg);
  box-shadow: 0 16px 45px rgba(245,196,0,.22);
}
.splash h1 { margin: 0; font-size: 38px; letter-spacing: .08em; }
.splash p { color: var(--muted); margin: 8px 0 26px; }
.loader {
  width: 38px; height: 38px; border: 4px solid rgba(255,255,255,.12);
  border-top-color: var(--yellow); border-radius: 50%; margin: auto;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 18px;
}
.logo {
  font-weight: 1000; letter-spacing: .08em; font-size: 21px;
}
.logo span { color: var(--yellow); }
.avatar {
  width: 44px; height: 44px; border-radius: 14px; object-fit: cover;
  background: var(--panel-2); border: 1px solid var(--line);
  display: grid; place-items: center; font-weight: 900;
}

.hero {
  position: relative; overflow: hidden; padding: 22px;
  border-radius: 26px; color: #111;
  background:
    linear-gradient(135deg, rgba(255,255,255,.25), transparent 40%),
    var(--yellow);
  box-shadow: 0 16px 45px rgba(245,196,0,.13);
}
.hero::after {
  content: ""; position: absolute; right: -35px; bottom: -45px;
  width: 150px; height: 150px; border: 24px solid rgba(0,0,0,.09);
  border-radius: 50%;
}
.hero .eyebrow { font-size: 13px; font-weight: 800; opacity: .72; }
.hero h1 { margin: 4px 0 8px; font-size: 28px; line-height: 1.05; }
.hero p { margin: 0; max-width: 80%; font-weight: 650; opacity: .75; }

.grid { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.stats { margin-top: 14px; }
.stat, .card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
}
.stat { padding: 16px; }
.stat strong { display: block; font-size: 23px; color: var(--yellow); }
.stat span { font-size: 12px; color: var(--muted); }

.section-title {
  display: flex; justify-content: space-between; align-items: center;
  margin: 24px 2px 12px;
}
.section-title h2 { margin: 0; font-size: 20px; }
.section-title span { color: var(--muted); font-size: 13px; }

.card { padding: 16px; margin-bottom: 12px; }
.card h3 { margin: 0 0 7px; }
.card p { color: var(--muted); line-height: 1.5; margin: 0; }
.card-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; }

.btn {
  border: 0; border-radius: 14px; min-height: 48px; padding: 12px 16px;
  font-weight: 850;
}
.btn-primary { background: var(--yellow); color: #111; }
.btn-secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.btn-danger { background: rgba(255,92,92,.13); color: #ff8585; border: 1px solid rgba(255,92,92,.25); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.field { margin-bottom: 14px; }
.field label {
  display: block; color: var(--muted); font-size: 13px; font-weight: 700;
  margin: 0 0 7px 3px;
}
.input {
  width: 100%; min-height: 50px; border-radius: 14px; padding: 13px 14px;
  border: 1px solid var(--line); color: var(--text); background: var(--panel);
  outline: none;
}
.input:focus { border-color: rgba(245,196,0,.65); }
textarea.input { min-height: 100px; resize: vertical; }

.checkbox { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 13px; }
.checkbox input { margin-top: 3px; accent-color: var(--yellow); }

.bottom-nav {
  position: fixed; z-index: 20; left: 50%; bottom: 10px; transform: translateX(-50%);
  width: calc(100% - 20px); max-width: 660px; display: grid;
  grid-template-columns: repeat(5,1fr); padding: 8px;
  background: rgba(20,24,32,.94); border: 1px solid var(--line);
  backdrop-filter: blur(18px); border-radius: 22px;
  box-shadow: 0 15px 50px rgba(0,0,0,.45);
}
.nav-btn {
  border: 0; color: var(--muted); background: transparent; padding: 7px 2px;
  font-size: 10px; font-weight: 750; border-radius: 14px;
}
.nav-btn .icon { display: block; font-size: 21px; margin-bottom: 3px; }
.nav-btn.active { color: #111; background: var(--yellow); }

.rank-row {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 10px;
  align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line);
}
.rank-row:last-child { border-bottom: 0; }
.rank-number { font-size: 20px; font-weight: 950; color: var(--yellow); }
.rank-name { font-weight: 800; }
.rank-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rank-points { text-align: right; font-weight: 950; }

.pill {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
  padding: 6px 10px; color: var(--yellow-soft); background: rgba(245,196,0,.09);
  font-size: 12px; font-weight: 800; border: 1px solid rgba(245,196,0,.17);
}
.levels { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 14px; }
.level {
  border: 1px solid var(--line); border-radius: 14px; background: #11151c;
  padding: 11px 7px; color: var(--text); text-align: center;
}
.level strong, .level span { display: block; }
.level span { color: var(--muted); font-size: 11px; margin-top: 4px; }
.level.selected { border-color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }

.timer {
  font-size: clamp(52px, 18vw, 88px); line-height: 1; text-align: center;
  font-weight: 1000; letter-spacing: -.06em; color: var(--yellow);
  padding: 26px 0;
}
.status {
  border-radius: 12px; padding: 10px 12px; margin: 12px 0;
  background: rgba(67,209,125,.1); color: #7be6a6; text-align: center;
  border: 1px solid rgba(67,209,125,.2);
}
.status.error { background: rgba(255,92,92,.1); color: #ff8585; border-color: rgba(255,92,92,.22); }

.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; }
.tab {
  white-space: nowrap; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--muted); padding: 9px 13px; font-weight: 750;
}
.tab.active { background: var(--yellow); color: #111; }

.empty { text-align: center; color: var(--muted); padding: 35px 18px; }
.small { font-size: 12px; color: var(--muted); }
.muted { color: var(--muted); }
.yellow { color: var(--yellow); }
.divider { height: 1px; background: var(--line); margin: 14px 0; }
.admin-badge { color: #111; background: var(--yellow); border-radius: 8px; padding: 3px 7px; font-size: 10px; font-weight: 950; }

.toast {
  position: fixed; z-index: 100; top: 15px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 30px); max-width: 560px; padding: 13px 15px;
  border-radius: 14px; background: #202632; border: 1px solid var(--line);
  box-shadow: 0 15px 45px rgba(0,0,0,.4);
}
.toast.error { border-color: rgba(255,92,92,.45); }

@media (min-width: 720px) {
  .page { padding-top: 28px; }
}

.rating-tabs { margin-bottom: 4px; }
.btn-small { min-height: 38px; padding: 8px 12px; border-radius: 11px; }
.admin-user-filters { grid-template-columns: minmax(0, 1fr); }
.admin-users-list { margin-top: 14px; }
.user-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.user-row:last-child { border-bottom: 0; }
.user-main, .user-contact { min-width: 0; }
.user-contact { text-align: right; overflow-wrap: anywhere; }
.pagination {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-top: 14px;
}

@media (min-width: 560px) {
  .admin-user-filters { grid-template-columns: minmax(0, 1fr) 210px auto; align-items: end; }
}

@media (max-width: 430px) {
  .user-row { grid-template-columns: 1fr; }
  .user-contact { text-align: left; }
}

/* ===== DRIVE BUL WORK MODE ===== */

.work-page {
  padding-bottom: 36px;
}

.work-topbar,
.work-userbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.work-topbar {
  margin-bottom: 18px;
}

.work-userbar {
  margin-bottom: 18px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.work-login-hero {
  padding: 24px 4px 20px;
}

.work-login-hero .eyebrow {
  color: var(--yellow);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.work-login-hero h1 {
  margin: 5px 0 8px;
  font-size: 31px;
}

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

.work-login-card {
  margin-top: 12px;
}

.work-services {
  display: grid;
  gap: 9px;
}

.work-service {
  width: 100%;
  padding: 14px 15px;
  text-align: left;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.work-service strong,
.work-service span,
.work-service em {
  display: block;
}

.work-service strong {
  font-size: 15px;
}

.work-service span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.work-service em {
  width: max-content;
  margin-top: 8px;
  padding: 4px 7px;
  border-radius: 7px;
  background: rgba(245,196,0,.11);
  color: var(--yellow);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.work-service.selected {
  border-color: var(--yellow);
  background: rgba(245,196,0,.08);
  box-shadow: inset 0 0 0 1px var(--yellow);
}

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

.work-machine {
  min-width: 0;
  min-height: 92px;
  padding: 11px 7px;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--text);
  background: var(--panel);
  text-align: center;
}

.work-machine strong,
.work-machine span,
.work-machine small {
  display: block;
}

.work-machine strong {
  color: var(--yellow);
  font-size: 22px;
}

.work-machine span {
  margin-top: 3px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
}

.work-machine small {
  margin-top: 7px;
  color: var(--success);
  font-size: 10px;
  font-weight: 800;
}

.work-machine.selected {
  border-color: var(--yellow);
  background: var(--yellow);
  color: #111;
}

.work-machine.selected strong,
.work-machine.selected small {
  color: #111;
}

.work-machine.busy {
  opacity: .48;
  background: #17191e;
}

.work-machine.busy small {
  color: var(--danger);
}

.work-payment {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 9px;
  margin-bottom: 16px;
}

.work-payment-btn {
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--text);
  background: var(--panel);
  font-weight: 850;
}

.work-payment-btn.selected {
  color: #111;
  border-color: var(--yellow);
  background: var(--yellow);
}

.work-start-btn {
  min-height: 58px;
  font-size: 16px;
}

.work-timer-card {
  padding: 16px;
  margin-bottom: 11px;
  border: 1px solid rgba(245,196,0,.25);
  border-radius: 20px;
  background:
    linear-gradient(
      180deg,
      rgba(245,196,0,.055),
      transparent 60%
    ),
    var(--panel);
}

.work-timer-card.paused {
  border-color: rgba(255,255,255,.14);
}

.work-timer-head,
.work-timer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.work-sale-status {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 950;
}

.work-sale-status.running {
  color: #7be6a6;
  background: rgba(67,209,125,.1);
}

.work-sale-status.paused {
  color: var(--yellow);
  background: rgba(245,196,0,.1);
}

.work-timer-value {
  padding: 18px 0 14px;
  color: var(--yellow);
  font-size: 47px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -.05em;
  text-align: center;
}

.work-timer-value.ending {
  color: var(--danger);
}

.work-timer-meta {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.work-workers {
  margin-top: 8px;
}

.work-timer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.work-entry-card {
  margin-top: 12px;
}

@media (min-width: 520px) {
  .work-machines {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}


/* ==================================================
   DRIVE BUL — COMPACT WORK MODE
   ================================================== */

.compact-work-page {
  max-width: 760px;
  padding-top: 14px;
  padding-bottom: 150px;
}

.compact-work-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.compact-icon-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 21px;
  font-weight: 900;
}

.compact-work-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 8px;
}

.compact-staff {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 8px 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
}

.compact-staff strong,
.compact-staff span {
  display: block;
}

.compact-staff strong {
  font-size: 14px;
}

.compact-staff span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.compact-logout {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}

.compact-point-select {
  width: 100%;
  min-height: 54px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  outline: none;
  background: var(--panel);
  color: var(--text);
  font-weight: 750;
}

.compact-shift {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 11px;
}

.compact-shift.active {
  color: #78e8a5;
  border: 1px solid rgba(67,209,125,.23);
  background: rgba(67,209,125,.08);
}

.compact-shift.inactive {
  color: #ff8585;
  border: 1px solid rgba(255,92,92,.23);
  background: rgba(255,92,92,.08);
}

.compact-shift strong {
  overflow: hidden;
  margin-left: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
}

.shift-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.compact-section {
  margin-top: 17px;
}

.compact-section-head {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 8px;
}

.compact-section-head h2 {
  margin: 0;
  font-size: 17px;
}

.compact-section-head > span {
  color: var(--muted);
  font-size: 11px;
}

.compact-section-head > span strong {
  color: var(--yellow);
}

.compact-counter {
  min-width: 25px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--yellow) !important;
  text-align: center;
  font-weight: 900;
}

.compact-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.compact-service {
  position: relative;
  min-width: 0;
  min-height: 82px;
  padding: 10px 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  text-align: center;
}

.compact-service strong,
.compact-service span,
.compact-service b {
  display: block;
}

.compact-service strong {
  font-size: 13px;
  font-weight: 950;
}

.compact-service span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.compact-service b {
  margin-top: 3px;
  color: var(--yellow);
  font-size: 12px;
}

.compact-service em {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(245,196,0,.13);
  color: var(--yellow);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}

.compact-service.selected {
  border-color: var(--yellow);
  background:
    linear-gradient(
      180deg,
      rgba(245,196,0,.16),
      rgba(245,196,0,.055)
    );
  box-shadow: inset 0 0 0 1px var(--yellow);
}

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

.compact-machine {
  min-width: 0;
  min-height: 75px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  color: var(--text);
  text-align: center;
}

.compact-machine strong,
.compact-machine span,
.compact-machine small {
  display: block;
}

.compact-machine strong {
  color: var(--yellow);
  font-size: 20px;
  line-height: 1;
  font-weight: 1000;
}

.compact-machine span {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  overflow: hidden;
  font-size: 9px;
  line-height: 1.15;
}

.compact-machine small {
  margin-top: 3px;
  color: var(--success);
  font-size: 9px;
  font-weight: 900;
}

.compact-machine.selected {
  border-color: var(--yellow);
  background: var(--yellow);
  color: #111;
  transform: translateY(-1px);
}

.compact-machine.selected strong,
.compact-machine.selected small {
  color: #111;
}

.compact-machine.busy {
  opacity: .4;
  border-color: rgba(255,92,92,.22);
}

.compact-machine.busy small {
  color: var(--danger);
}

.compact-payment {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.compact-payment-btn {
  min-height: 43px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.compact-payment-btn.selected {
  border-color: var(--yellow);
  background: var(--yellow);
  color: #111;
}

.compact-phone {
  width: 100%;
  min-height: 43px;
  margin-top: 7px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
}

.compact-phone:focus {
  border-color: rgba(245,196,0,.55);
}

.compact-empty {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 13px;
  color: var(--muted);
  text-align: center;
  font-size: 11px;
}


/* ACTIVE TIMERS */

.active-sales-section {
  margin-top: 12px;
}

.active-sales-section .work-timer-card {
  padding: 11px 12px;
  margin-bottom: 7px;
  border-radius: 15px;
}

.active-sales-section .work-timer-value {
  padding: 9px 0 7px;
  font-size: 34px;
}

.active-sales-section .work-timer-actions {
  margin-top: 9px;
}

.active-sales-section .btn {
  min-height: 38px;
  padding: 7px 9px;
  font-size: 11px;
}


/* STICKY SALE BAR */

.work-sticky-spacer {
  height: 35px;
}

.work-sticky-bar {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 760px;
  transform: translateX(-50%);
  padding:
    9px
    max(12px, env(safe-area-inset-right))
    calc(9px + env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  border-top: 1px solid var(--line);
  background: rgba(9,11,15,.96);
  backdrop-filter: blur(18px);
  box-shadow: 0 -12px 35px rgba(0,0,0,.38);
}

.work-sticky-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.work-sticky-main {
  min-width: 0;
}

.work-sticky-main strong,
.work-sticky-main span {
  display: block;
}

.work-sticky-main strong {
  font-size: 12px;
}

.work-sticky-main span {
  max-width: 470px;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
}

.work-sticky-price {
  flex: 0 0 auto;
  color: var(--yellow);
  font-size: 17px;
  font-weight: 1000;
}

.work-sticky-start {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 13px;
  background: var(--yellow);
  color: #111;
  font-size: 14px;
  font-weight: 1000;
}

.work-sticky-start:disabled {
  background: #34301b;
  color: #827b55;
  cursor: not-allowed;
}


/* MOBILE */

@media (max-width: 520px) {
  .compact-work-meta {
    grid-template-columns: 1fr;
  }

  .compact-point-select {
    min-height: 46px;
  }

  .compact-staff {
    min-height: 46px;
  }

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

@media (max-width: 370px) {
  .compact-machines {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .compact-service strong {
    font-size: 11px;
  }
}

/* ===== COMPACT WORK UI POLISH ===== */

.compact-work-page {
  padding-bottom: 118px;
}

.compact-work-meta {
  gap: 6px;
}

.compact-staff {
  min-height: 48px;
}

.compact-point-select {
  min-height: 48px;
}

.compact-shift {
  margin-top: 6px;
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.compact-section {
  margin-top: 14px;
}

.compact-section-head {
  margin-bottom: 6px;
}

.compact-machines {
  gap: 6px;
}

.compact-machine {
  min-height: 72px;
}

.compact-payment-section {
  margin-top: 15px;
}

.compact-phone {
  min-height: 40px;
}

.no-active-sales {
  margin-top: 14px;
}

.compact-empty {
  padding: 13px;
}

.work-sticky-spacer {
  height: 10px;
}

.work-sticky-bar {
  padding-top: 7px;
  padding-bottom: calc(7px + env(safe-area-inset-bottom));
}

.work-sticky-info {
  margin-bottom: 5px;
}

.work-sticky-start {
  min-height: 44px;
}

.work-sticky-main span {
  margin-top: 1px;
}

@media (max-width: 520px) {
  .compact-work-page {
    padding-bottom: 112px;
  }
}

.location-action {
  width: 100%;
  min-height: 42px;
  margin-top: 7px;
  border-radius: 12px;
  font-weight: 950;
}

.location-action.open {
  border: 1px solid var(--yellow);
  background: var(--yellow);
  color: #111;
}

.location-action.close {
  border: 1px solid rgba(255,92,92,.35);
  background: rgba(255,92,92,.12);
  color: #ff8585;
}

.location-open-status,
.location-closed-status {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 9px;
  text-align: center;
  font-size: 10px;
  font-weight: 850;
}

.location-open-status {
  color: #75e4a1;
  background: rgba(67,209,125,.07);
}

.location-closed-status {
  color: #ff8585;
  background: rgba(255,92,92,.07);
}


/* ==================================================
   DRIVE BUL — FULL CHECKLIST
   ================================================== */

.work-checklist-overlay {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(5px);
}

.work-checklist-modal {
  width: 100%;
  max-width: 760px;
  max-height: 94dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
  background: #0d1015;
  box-shadow: 0 -20px 60px rgba(0,0,0,.5);
}

.work-checklist-top {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  padding: 17px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.work-checklist-kicker {
  margin-bottom: 3px;
  color: var(--yellow);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.work-checklist-top h2 {
  margin: 0;
  font-size: 21px;
}

.work-checklist-x {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}

.work-checklist-progress {
  flex: 0 0 auto;
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.work-checklist-progress strong {
  margin-left: 4px;
  color: var(--yellow);
}

.work-checklist-progress-track {
  height: 5px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel-2);
}

.work-checklist-progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--yellow);
  transition: width .2s ease;
}

.work-checklist-content {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 14px 20px;
}

.work-checklist-section {
  margin-top: 16px;
}

.work-checklist-section h3 {
  margin: 0 2px 7px;
  color: var(--yellow);
  font-size: 13px;
}

.work-checklist-item {
  position: relative;
  min-height: 47px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  cursor: pointer;
}

.work-checklist-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.work-checklist-box {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #404650;
  border-radius: 7px;
  color: transparent;
  font-size: 14px;
  font-weight: 1000;
}

.work-checklist-text {
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.work-checklist-item:has(input:checked) {
  border-color: rgba(67,209,125,.3);
  background: rgba(67,209,125,.07);
}

.work-checklist-item input:checked + .work-checklist-box {
  border-color: #43d17d;
  background: #43d17d;
  color: #07130c;
}

.work-checklist-item:has(input:checked)
.work-checklist-text {
  color: #a9b5ad;
}

.work-checklist-comment-label {
  display: block;
  margin: 18px 2px 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.work-checklist-comment {
  width: 100%;
  min-height: 82px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.work-checklist-comment:focus {
  border-color: rgba(245,196,0,.55);
}

.work-checklist-footer {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 7px;
  padding:
    10px
    14px
    calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(13,16,21,.98);
}

.work-checklist-cancel,
.work-checklist-submit {
  min-height: 47px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 950;
}

.work-checklist-cancel {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
}

.work-checklist-submit {
  border: 0;
  background: var(--yellow);
  color: #111;
}

.work-checklist-submit:disabled {
  background: #34301b;
  color: #827b55;
}

@media (min-width: 761px) {
  .work-checklist-overlay {
    align-items: center;
    padding: 25px;
  }

  .work-checklist-modal {
    max-height: 88vh;
    border-radius: 22px;
  }
}

.checklist-preview-tools {
  margin-top: 7px;
  padding: 9px;
  border: 1px dashed rgba(245,196,0,.28);
  border-radius: 11px;
  background: rgba(245,196,0,.035);
}

.checklist-preview-tools > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

.checklist-preview-tools > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.checklist-preview-btn {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 10px;
  font-weight: 850;
}

.checklist-test-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  padding: 3px 5px;
  border-radius: 5px;
  background: var(--yellow);
  color: #111;
  font-size: 8px;
  font-weight: 1000;
}

/* ===== CHARGING REPORT ===== */

.work-tool-button {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
}

.work-tool-button span {
  font-size: 12px;
  font-weight: 950;
}

.work-tool-button small {
  color: var(--muted);
  font-size: 9px;
}

.work-charging-overlay {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(5px);
}

.work-charging-modal {
  width: 100%;
  max-width: 760px;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
  background: #0d1015;
}

.work-charging-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  padding: 17px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.work-charging-top h2 {
  margin: 0;
  font-size: 21px;
}

.work-charging-body {
  overflow-y: auto;
  padding: 14px;
}

.charging-all-good {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px;
  border: 1px solid rgba(67,209,125,.2);
  border-radius: 15px;
  background: rgba(67,209,125,.055);
  text-align: center;
}

.charging-all-good strong {
  color: #75e4a1;
  font-size: 20px;
}

.charging-all-good span {
  max-width: 300px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.charging-summary {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
}

.charging-summary > div {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  text-align: center;
}

.charging-summary span,
.charging-summary strong {
  display: block;
}

.charging-summary span {
  color: var(--muted);
  font-size: 9px;
}

.charging-summary strong {
  margin-top: 2px;
  font-size: 18px;
}

.charging-hint {
  margin: 10px 2px 13px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.8;
}

.charging-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 50%;
}

.charging-dot.red {
  background: #ff5c5c;
}

.charging-dot.yellow {
  background: var(--yellow);
}

.charging-card {
  position: relative;
  display: flex;
  gap: 10px;
  margin-bottom: 7px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
}

.charging-card > input {
  position: absolute;
  opacity: 0;
}

.charging-check {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #404650;
  border-radius: 7px;
  color: transparent;
  font-weight: 1000;
}

.charging-card:has(input:checked)
.charging-check {
  border-color: #43d17d;
  background: #43d17d;
  color: #07130c;
}

.charging-red {
  border-left: 4px solid #ff5c5c;
}

.charging-yellow {
  border-left: 4px solid var(--yellow);
}

.charging-card-main {
  min-width: 0;
  flex: 1;
}

.charging-machine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.charging-machine-head strong {
  color: var(--yellow);
  font-size: 16px;
}

.charging-machine-head span {
  font-size: 9px;
  font-weight: 850;
}

.charging-red
.charging-machine-head span {
  color: #ff7777;
}

.charging-yellow
.charging-machine-head span {
  color: var(--yellow);
}

.charging-machine-type {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.charging-stats {
  display: flex;
  gap: 14px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 9px;
}

.charging-stats b {
  color: var(--text);
}

.charging-services {
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
}

.charging-submit {
  width: 100%;
  min-height: 47px;
  margin-top: 10px;
  border: 0;
  border-radius: 12px;
  background: var(--yellow);
  color: #111;
  font-size: 12px;
  font-weight: 950;
}

.charging-submit:disabled {
  background: #34301b;
  color: #827b55;
}

@media (min-width: 761px) {
  .work-charging-overlay {
    align-items: center;
    padding: 25px;
  }

  .work-charging-modal {
    max-height: 88vh;
    border-radius: 22px;
  }
}

/* ===== WORK HEADER ACTIONS ===== */

.compact-header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.compact-header-tool {
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.compact-header-tool:active {
  transform: scale(.98);
}

@media (max-width: 420px) {
  .compact-header-tool {
    padding: 0 9px;
    font-size: 9px;
  }
}

/* RETURN SALES */
.return-sales-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.return-sale-card {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  color: inherit;
  padding: 14px;
  text-align: left;
  cursor: pointer;
}

.return-sale-card:active {
  transform: scale(0.99);
}

.return-sale-card-top,
.return-sale-card-main,
.return-sale-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.return-sale-card-top strong {
  font-size: 15px;
}

.return-sale-card-top b {
  font-size: 16px;
  white-space: nowrap;
}

.return-sale-card-main {
  margin-top: 7px;
}

.return-sale-card-main span {
  font-weight: 600;
}

.return-sale-card-main small,
.return-sale-card-meta,
.return-sale-card > small {
  color: #9ca3af;
}

.return-sale-card-meta {
  margin-top: 8px;
  font-size: 12px;
}

.return-sale-card > small {
  display: block;
  margin-top: 8px;
}

.return-sale-card:disabled {
  opacity: 0.65;
  cursor: default;
}

.return-sale-card-meta > div {
  display: grid;
  gap: 2px;
}

.return-sale-card-meta > div strong {
  color: inherit;
  font-size: 12px;
}

.return-sale-card-meta > div span,
.return-sale-card-meta > div small {
  font-size: 11px;
  color: #9ca3af;
}

.return-sale-card-meta > span {
  text-align: right;
  white-space: nowrap;
}

/* PROFILE DRIVE QR */
.profile-qr-card {
  text-align: center;
}

.profile-qr-content {
  display: grid;
  gap: 16px;
  justify-items: center;
}

.profile-qr-image-wrap {
  width: min(240px, 80vw);
  padding: 12px;
  border-radius: 18px;
  background: #fff;
}

.profile-qr-image {
  display: block;
  width: 100%;
  height: auto;
}

.profile-qr-info {
  display: grid;
  gap: 7px;
  justify-items: center;
}

.profile-qr-info h3,
.profile-qr-info p {
  margin: 0;
}

.profile-qr-info p {
  max-width: 330px;
  color: #9ca3af;
}

.profile-qr-loading {
  color: #9ca3af;
}

.compact-customer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

@media (max-width: 430px) {
  .compact-customer-actions {
    grid-template-columns: 1fr;
  }
}

/* STAFF SCHEDULE */

.schedule-controls {
  display: grid;
  gap: 12px;
}

.schedule-period-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

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

.schedule-day-head h3 {
  margin: 4px 0 0;
  text-transform: capitalize;
}

.schedule-day-staff {
  display: grid;
  gap: 10px;
}

.schedule-person-row {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(210px, 1.2fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}

.schedule-person-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.schedule-person-check input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.schedule-person-check span {
  display: grid;
  gap: 2px;
}

.schedule-person-check strong {
  line-height: 1.25;
}

.schedule-person-check small {
  opacity: .65;
}

.schedule-person-type:disabled {
  opacity: .45;
}

#schedule-show {
  margin-top: 2px;
}

@media (max-width: 560px) {
  .schedule-person-row {
    grid-template-columns: 1fr;
  }

  .schedule-person-type {
    width: 100%;
  }
}


/* =========================================================
   DRIVE BUL — FINAL UI FIXES
   ========================================================= */

/* Compact DRIVE BUL mark instead of Telegram avatar */
.drivebul-header-mark {
  min-width: 72px;
  min-height: 44px;
  padding: 7px 9px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: .95;
  letter-spacing: .05em;
  font-size: 10px;
  font-weight: 950;
  flex-shrink: 0;
}

.drivebul-header-mark strong {
  margin-top: 3px;
  color: var(--yellow);
  font-size: 14px;
  letter-spacing: .08em;
}

/* Inputs must never overflow cards — especially native date field */
.input,
input.input,
select.input,
textarea.input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

input[type="date"].input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Rating */
.rating-tabs {
  justify-content: center;
  overflow-x: visible;
}

.rating-location-field {
  width: min(100%, 390px);
  margin: 14px auto 14px;
}

/* History */
.history-tabs {
  justify-content: center;
  overflow-x: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Profile */
.profile-qr-card {
  margin-top: 14px;
}

/* Work mode header / controls */
.work-topbar,
.compact-work-header {
  min-width: 0;
}

.work-topbar > *,
.compact-work-header > * {
  min-width: 0;
}

.work-topbar .btn,
.compact-work-header .btn,
.compact-work-header button {
  flex-shrink: 0;
}

/* Do not let groups of operational buttons run outside screen */
.compact-work-page .card-row,
.work-page .card-row {
  min-width: 0;
}

@media (max-width: 560px) {
  .rating-tabs,
  .history-tabs {
    justify-content: center;
  }

  .history-tabs .tab {
    flex: 0 1 auto;
    text-align: center;
  }

  .work-topbar {
    align-items: flex-start;
  }

  .compact-work-header {
    flex-wrap: wrap;
    align-items: center;
  }

  .compact-work-header > div {
    min-width: 0;
    flex: 1 1 180px;
  }

  .compact-work-header .btn,
  .compact-work-header button {
    max-width: 100%;
  }

  .work-page .card-row,
  .compact-work-page .card-row {
    flex-wrap: wrap;
  }

  .work-page .card-row > div:first-child,
  .compact-work-page .card-row > div:first-child {
    min-width: 0;
    flex: 1 1 180px;
  }

  .drivebul-header-mark {
    min-width: 66px;
  }
}

@media (max-width: 390px) {
  .rating-tabs {
    gap: 6px;
  }

  .rating-tabs .tab,
  .history-tabs .tab {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
  }

  .work-topbar {
    gap: 8px;
  }

  .work-topbar .logo {
    font-size: 18px;
  }
}

/* ==================================================
   WORK MODE — MOBILE HEADER ACTIONS FIX
   ================================================== */

.compact-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.compact-header-tool {
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .compact-work-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }

  .compact-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .compact-header-tool,
  .compact-header-actions .compact-icon-btn {
    width: 100%;
    min-width: 0;
    height: 42px;
    min-height: 42px;
    padding: 7px 8px;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 350px) {
  .compact-header-tool {
    font-size: 11px;
  }
}



/* ==================================================
   DRIVE BUL — BRANDING / PROFILE / IOS DATE FIX
   ================================================== */

.app-brand-logo {
  display: block;
  width: auto;
  max-width: 92px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 auto;
}

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

.management-logo-preview {
  min-height: 110px;
  display: grid;
  place-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.management-logo-preview img {
  display: block;
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
}

.management-logo-empty {
  color: #6b7280;
  text-align: center;
}

.profile-edit-panel {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.profile-edit-panel[hidden] {
  display: none !important;
}

/* iOS native date controls must not escape their cards */
.schedule-controls,
.schedule-controls > *,
.schedule-controls .field,
.schedule-controls .grid,
.schedule-controls .form-group {
  min-width: 0;
  max-width: 100%;
}

.schedule-controls input[type="date"],
#reports-from,
#reports-to,
#profile-data-form input[type="date"],
#registration-form input[type="date"] {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Report dates: one per row on phone */
@media (max-width: 560px) {
  #reports-from,
  #reports-to {
    min-width: 0;
  }

  .app-brand-logo {
    max-width: 82px;
    height: 42px;
  }
}


/* ==================================================
   HARD IOS DATE INPUT FIX
   ================================================== */

.grid > *,
.grid-2 > *,
.field,
.form-group {
  min-width: 0;
}

.ios-date-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.ios-date-input {
  display: block !important;
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;

  -webkit-appearance: none;
  appearance: none;
}

.ios-date-input::-webkit-date-and-time-value {
  text-align: center;
}

.management-service-locations {
  display: grid;
  gap: 8px;
}

.management-service-location {
  display: flex;
  align-items: center;
  gap: 10px;

  min-height: 46px;
  padding: 10px 12px;

  border: 1px solid var(--line);
  border-radius: 13px;

  background: var(--panel);
  cursor: pointer;
}

.management-service-location input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--yellow);
}

@media (max-width: 560px) {
  .reports-date-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .schedule-controls,
  .schedule-controls .field,
  .reports-date-grid,
  .reports-date-grid .form-group {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}


.topbar-brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.app-brand-logo-main {
  display: block;
  width: auto;
  max-width: 150px;
  height: 38px;
  object-fit: contain;
  object-position: left center;
}


.page {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* NAV_BUILD_20260813_1133 */


/* GLOBAL DATE INPUT FIX */

input[type="date"],
input[type="month"],
.ios-date-input {
  color-scheme: dark !important;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
.ios-date-input::-webkit-calendar-picker-indicator {
  cursor: pointer !important;
  opacity: 1 !important;
  filter: invert(1) brightness(1.9) !important;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value {
  color: inherit !important;
}

/* Firefox / dark form controls */
@supports (-moz-appearance: none) {
  input[type="date"],
  input[type="month"] {
    color-scheme: dark !important;
  }
}

/* END GLOBAL DATE INPUT FIX */


/* DRIVE BUL CUSTOM CALENDAR ICON */

input[type="date"],
input[type="month"],
.ios-date-input {
  color-scheme: dark !important;
  padding-right: 44px !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px 18px !important;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
.ios-date-input::-webkit-calendar-picker-indicator {
  opacity: 0 !important;
  cursor: pointer !important;
  width: 24px !important;
  height: 24px !important;
}

/* END DRIVE BUL CUSTOM CALENDAR ICON */

/* TABLET WORK MODE */

.tablet-body {
  min-height: 100vh;
}


@media (min-width: 800px) {
  .tablet-body .work-page {
    max-width: 1180px;
    margin: 0 auto;
  }

  .tablet-body .work-login-card {
    max-width: 520px;
  }
}


/* =========================================================
   DISABLED HEADER ACTION
   ========================================================= */

.compact-header-tool:disabled {
  opacity: 0.42;
  filter: grayscale(1);
  cursor: not-allowed;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(120, 120, 120, 0.12);
  color: rgba(255, 255, 255, 0.45);
}



/* =========================================================
   MAIN APP FULL-WIDTH LOGO
   ========================================================= */

.topbar-brand {
  width: 100%;
}

.app-brand-logo-main {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: center;
}


/* =========================================================
   DRIVE BUL MAIN LOGO — FULL WIDTH
   ========================================================= */

.topbar-brand {
  width: 100%;
}

.app-brand-logo-main {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: center;
}