/* ServiceCRM automatic light/dark theme for the whole site */
:root{
  color-scheme:light dark;
}

@media(prefers-color-scheme:dark){
  :root{
    --bg:#061316;
    --card:#0b1f24;
    --ink:#e8fbfb;
    --muted:#9bb4bd;
    --line:rgba(174,244,241,.14);
    --accent:#18c7c5;
    --accent2:#ff7a8b;
    --green:#4ade80;
    --red:#f87171;
    --shadow:0 20px 50px rgba(0,0,0,.38);
  }

  html{background:#061316;color-scheme:dark}
  body{
    color:var(--ink);
    background:
      radial-gradient(circle at 10% 0,rgba(24,199,197,.12),transparent 30rem),
      radial-gradient(circle at 94% 10%,rgba(255,122,139,.11),transparent 28rem),
      linear-gradient(180deg,#071a1f 0%,#061316 64%,#030a0c 100%);
  }
  body::before{background:rgba(8,23,27,.94)}
  a{color:inherit}

  .topbar,
  .site-footer,
  .card,
  .panel,
  .upload-preview,
  .list-row,
  .gallery-grid figure,
  .broadcast-history-section,
  .subtle-panel,
  .favorite-star,
  .service-checkbox-row,
  .broadcast-client-list li,
  .nav-dropdown-menu,
  .nav-admin-menu,
  .nav-dropdown-menu a,
  .nav-dropdown-form button,
  .nav-admin-menu a,
  .map-placeholder,
  .hero-preview-card,
  .business-public-card,
  .master-public-card{
    border-color:var(--line)!important;
    background:rgba(11,31,36,.90)!important;
    color:var(--ink)!important;
    box-shadow:var(--shadow);
  }

  .topbar,
  .main-nav{
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  .site-footer,
  .card,
  .panel,
  .subtle-panel{
    box-shadow:0 18px 46px rgba(0,0,0,.34)!important;
  }

  .brand small,
  .muted,
  .helptext,
  small,
  .nav-dropdown-section-title,
  .nav-dropdown-empty,
  .pagination-current,
  .push-status-muted,
  .recipients-list{
    color:var(--muted)!important;
  }

  .lead,
  .nav a,
  .nav button,
  .nav-dropdown-summary,
  .nav-admin-summary,
  .nav-dropdown-menu a,
  .nav-dropdown-form button,
  .nav-admin-menu a,
  .current-user-pill,
  .branch-switch,
  .business-switch,
  .tab,
  .btn.light{
    color:var(--ink)!important;
  }

  .nav a,
  .nav button,
  .nav-dropdown-summary,
  .nav-admin-summary,
  .mobile-menu-toggle,
  .branch-switch-label,
  .current-user-pill,
  .business-switch,
  .tab,
  .btn.light,
  .favorite-star.inline-star{
    border-color:var(--line)!important;
    background:#102a30!important;
    box-shadow:inset 0 0 0 1px var(--line)!important;
  }

  .nav a:hover,
  .nav button:hover,
  .nav-dropdown-menu a:hover,
  .nav-dropdown-form button:hover,
  .nav-admin-menu a:hover,
  .tab:hover,
  .btn.light:hover{
    background:rgba(24,199,197,.14)!important;
    color:#b8fffd!important;
  }

  .nav a.active,
  .nav-dropdown-summary.active,
  .nav-admin-summary.active,
  .nav-dropdown[open]>.nav-dropdown-summary,
  .nav-admin-dropdown[open] .nav-admin-summary,
  .tab.active,
  .nav-register-link,
  .btn,
  .nav-dropdown-form .active-business-choice{
    border-color:transparent!important;
    background:linear-gradient(135deg,var(--accent),#0fb8b6)!important;
    color:#031416!important;
    box-shadow:0 10px 24px rgba(24,199,197,.18)!important;
  }

  .btn.secondary{background:#020617!important;color:#e8fbfb!important}
  .btn[disabled],.btn.disabled{opacity:.48}

  .input,
  input,
  select,
  textarea,
  select.input,
  select.business-switch,
  select.compact-input,
  .compact-input,
  .compact-textarea{
    border-color:var(--line)!important;
    background-color:#102a30!important;
    color:var(--ink)!important;
  }
  input::placeholder,
  textarea::placeholder{color:#77929c}
  input:focus,
  select:focus,
  textarea:focus,
  select.input:focus,
  select.business-switch:focus,
  select.compact-input:focus{
    border-color:rgba(111,240,237,.58)!important;
    box-shadow:0 0 0 3px rgba(24,199,197,.18)!important;
    outline:none;
  }
  select.input,
  select.business-switch,
  select.compact-input,
  select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%239bb4bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:right 14px center!important;
    background-size:16px 16px!important;
  }

  .table-wrap,
  .clients-table-wrap,
  .appointment-table-wrap{
    border-color:var(--line)!important;
    background:#0b1f24!important;
  }
  table,
  .appointment-table{
    background:#0b1f24!important;
    color:var(--ink)!important;
  }
  th,
  td{
    border-color:rgba(174,244,241,.10)!important;
  }
  th{
    background:#102a30!important;
    color:#9bb4bd!important;
  }
  tr:hover td{background:rgba(24,199,197,.06)}

  .stat,
  .badge,
  .chip,
  .tab-count,
  .notification-card-unread,
  .recipients-list span,
  .client-delivery-line,
  .rating-line,
  .terms-row a,
  .recipients-details summary{
    background:rgba(24,199,197,.12)!important;
    color:#9ffffb!important;
    border-color:rgba(111,240,237,.18)!important;
  }

  .service-line b{
    background:transparent!important;
    border-color:transparent!important;
    color:#9ffffb!important;
  }
  .badge.warning{background:rgba(245,158,11,.14)!important;color:#fbbf24!important}
  .notification-count-badge,
  .menu-count-badge,
  .mobile-bottom-nav__badge{
    background:#ef4444!important;
    color:#fff!important;
  }

  .message{
    border-color:var(--line)!important;
    background:#102a30!important;
    color:var(--ink)!important;
  }
  .message.success{border-color:rgba(74,222,128,.32)!important;background:rgba(22,101,52,.22)!important;color:#dcfce7!important}
  .message.error{border-color:rgba(248,113,113,.34)!important;background:rgba(127,29,29,.24)!important;color:#fee2e2!important}
  .message.warning{border-color:rgba(251,191,36,.30)!important;background:rgba(113,63,18,.24)!important;color:#fef3c7!important}
  .errorlist,.error-text{color:#fca5a5!important}

  .avatar,
  .brand-logo,
  .profile-image-placeholder{
    background:linear-gradient(135deg,var(--accent),#0fb8b6)!important;
    color:#031416!important;
  }
  .brand-logo-img,
  .business-card-logo,
  .master-card-photo,
  .profile-image,
  .business-header-logo,
  .small-logo,
  .upload-preview img{
    background:#102a30!important;
    box-shadow:0 14px 30px rgba(0,0,0,.34)!important;
  }

  .public-review-item{
    border-color:rgba(174,244,241,.10)!important;
  }
  .public-review-rating{
    color:#9ffffb!important;
  }

  .service-line,
  .bot-connect-row,
  .nav-dropdown-divider{
    border-color:rgba(174,244,241,.10)!important;
  }
  .yandex-map,
  .yandex-map-status,
  .map-placeholder{
    border-color:var(--line)!important;
    background:linear-gradient(135deg,#0b1f24,#102a30)!important;
    color:var(--ink)!important;
  }
  .yandex-map-status.error{background:rgba(127,29,29,.88)!important;color:#fee2e2!important}

  @media(max-width:820px){
    .main-nav{
      border-color:var(--line)!important;
      background:rgba(8,23,27,.98)!important;
      box-shadow:0 18px 46px rgba(0,0,0,.42)!important;
    }
    .nav-dropdown-menu{background:#102a30!important}
  }
}

/* Registration form: account type choices and conditional business field */
.register-form .business-name-row[hidden],
.register-form .business-name-row.is-hidden{display:none!important}
.register-form .radio-options ul{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.register-form .radio-options li label{
  min-height:48px;
  padding:12px 14px;
  border:1px solid var(--line,#d8e1e8);
  border-radius:16px;
  background:var(--card,#fff);
  color:var(--ink,#0f172a);
  font-weight:700;
  cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
}
.register-form .radio-options li label:has(input:checked){
  border-color:var(--accent,#009c9b);
  background:rgba(0,156,155,.10);
  color:var(--ink,#0f172a);
  box-shadow:0 0 0 3px rgba(0,156,155,.10);
}
.register-form .radio-options input{accent-color:var(--accent,#009c9b)}

@media(prefers-color-scheme:dark){
  .register-form .radio-options li label{
    border-color:var(--line)!important;
    background:#102a30!important;
    color:var(--ink)!important;
  }
  .register-form .radio-options li label:has(input:checked){
    border-color:rgba(111,240,237,.58)!important;
    background:rgba(24,199,197,.14)!important;
    color:#e8fbfb!important;
    box-shadow:0 0 0 3px rgba(24,199,197,.16)!important;
  }
}

/* User profile photo and city */
.user-profile-preview{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 18px;
}
.user-profile-preview b{display:block;font-size:18px;line-height:1.2}
.user-profile-preview .muted{display:block;margin-top:3px}
.user-profile-avatar{
  width:78px;
  height:78px;
  flex:0 0 78px;
  border-radius:24px;
  object-fit:cover;
  background:var(--card,#fff);
  box-shadow:0 16px 32px rgba(0,121,121,.14);
}
.user-profile-avatar--placeholder{
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--accent,#009c9b),#0fb8b6);
  color:#fff;
  font-size:34px;
  font-weight:800;
}

@media(prefers-color-scheme:dark){
  .user-profile-avatar{background:#102a30!important;box-shadow:0 14px 30px rgba(0,0,0,.34)!important}
  .user-profile-avatar--placeholder{color:#031416!important}
}

@media (prefers-color-scheme: dark){
  .rating-line{
    background:transparent!important;
    border-color:transparent!important;
  }
}

@media(max-width:640px){
  .appointment-table .status{
    display:inline!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:inherit!important;
    font-weight:400!important;
    box-shadow:none!important;
  }
}

@media(prefers-color-scheme:dark) and (max-width:640px){
  .appointment-table tr{
    border-color:var(--line)!important;
    background:rgba(11,31,36,.92)!important;
    color:var(--ink)!important;
    box-shadow:0 10px 26px rgba(0,0,0,.28)!important;
  }
  .appointment-table td,
  .appointment-table strong{
    color:var(--ink)!important;
  }
  .appointment-table td::before{
    color:var(--muted)!important;
  }
  .appointment-table .status{
    background:transparent!important;
    color:inherit!important;
    border-color:transparent!important;
    font-weight:400!important;
  }
}


/* Mobile appointment tables: keep parent wrappers transparent so rounded row corners do not show another background */
@media(max-width:640px){
  .appointment-table-wrap,
  .appointment-table,
  .appointment-table tbody{
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .appointment-table .appointment-empty-row{
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    padding:16px 4px!important;
  }
  .appointment-table .appointment-empty-row td{
    color:var(--muted)!important;
  }
}

@media(prefers-color-scheme:dark) and (max-width:640px){
  .appointment-table-wrap,
  .appointment-table,
  .appointment-table tbody{
    background:transparent!important;
  }
  .appointment-table tr:not(.appointment-empty-row){
    background:var(--card)!important;
  }
  .appointment-table .appointment-empty-row{
    background:transparent!important;
  }
}