/* P24_ADMIN_STYLE_EVERYWHERE_2_3_29
   Только визуальная унификация. Логика и разметка не изменяются. */

:root {
  --bg: #06111f;
  --bg-deep: #030b15;
  --surface: rgba(13, 28, 46, 0.82);
  --surface-strong: rgba(16, 34, 55, 0.97);
  --surface-soft: rgba(21, 40, 62, 0.68);
  --border: rgba(144, 170, 203, 0.20);
  --border-strong: rgba(144, 170, 203, 0.34);
  --text: #f6f8fd;
  --muted: #9aa8c2;
  --muted-2: #6f7f9b;
  --blue: #2482ff;
  --blue-2: #0d55e8;
  --blue-soft: rgba(36, 130, 255, 0.13);
  --green: #2fd05a;
  --orange: #ff8a16;
  --purple: #b54cff;
  --red: #ff5b61;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
  --radius: 18px;

  --cab-bg: #06111f;
  --cab-surface: rgba(13, 28, 46, 0.94);
  --cab-surface-soft: rgba(21, 40, 62, 0.78);
  --cab-text: #f6f8fd;
  --cab-muted: #9aa8c2;
  --cab-border: rgba(144, 170, 203, 0.20);
  --cab-border-strong: rgba(144, 170, 203, 0.34);
  --cab-blue: #2482ff;
  --cab-blue-dark: #0d55e8;
  --cab-blue-soft: rgba(36, 130, 255, 0.13);
  --cab-green: #2fd05a;
  --cab-green-soft: rgba(47, 208, 90, 0.14);
  --cab-orange: #ff8a16;
  --cab-orange-soft: rgba(255, 138, 22, 0.14);
  --cab-purple: #b54cff;
  --cab-purple-soft: rgba(181, 76, 255, 0.14);
  --cab-red: #ff5b61;
  --cab-red-soft: rgba(255, 91, 97, 0.14);
  --cab-cyan: #2482ff;
  --cab-cyan-soft: rgba(36, 130, 255, 0.13);
  --cab-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
  --cab-radius: 18px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #eef5ff;
  --bg-deep: #e4eefb;
  --surface: rgba(255, 255, 255, 0.91);
  --surface-strong: rgba(255, 255, 255, 0.99);
  --surface-soft: rgba(237, 245, 255, 0.96);
  --border: rgba(40, 76, 120, 0.14);
  --border-strong: rgba(40, 76, 120, 0.25);
  --text: #0d1b2e;
  --muted: #60728e;
  --muted-2: #8191a8;
  --blue-soft: rgba(36, 130, 255, 0.10);
  --shadow: 0 18px 45px rgba(43, 79, 122, 0.16);

  --cab-bg: #eef5ff;
  --cab-surface: rgba(255, 255, 255, 0.96);
  --cab-surface-soft: rgba(237, 245, 255, 0.96);
  --cab-text: #0d1b2e;
  --cab-muted: #60728e;
  --cab-border: rgba(40, 76, 120, 0.14);
  --cab-border-strong: rgba(40, 76, 120, 0.25);
  --cab-blue: #2482ff;
  --cab-blue-dark: #0d55e8;
  --cab-blue-soft: rgba(36, 130, 255, 0.10);
  --cab-green-soft: rgba(47, 208, 90, 0.12);
  --cab-orange-soft: rgba(255, 138, 22, 0.12);
  --cab-purple-soft: rgba(181, 76, 255, 0.12);
  --cab-red-soft: rgba(255, 91, 97, 0.12);
  --cab-cyan-soft: rgba(36, 130, 255, 0.10);
  --cab-shadow: 0 18px 45px rgba(43, 79, 122, 0.16);
  color-scheme: light;
}

html,
body {
  color: var(--text) !important;
  background:
    radial-gradient(circle at 86% 18%, rgba(28, 111, 220, 0.16), transparent 34%),
    radial-gradient(circle at 10% 68%, rgba(0, 104, 214, 0.09), transparent 35%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%) !important;
  background-attachment: fixed !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif !important;
}

.panel,
.card,
.security-card,
.profile-card,
.metric-card,
.content-panel,
.control-card,
.document-card,
.password-panel,
.tariff-card,
.limit-card,
.side-card,
.form-card,
.topic-card,
.callback-panel,
.ticket-card,
.support-card {
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
  background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface) 75%, transparent)) !important;
  box-shadow: var(--shadow) !important;
}

:root[data-theme="light"] .panel,
:root[data-theme="light"] .card,
:root[data-theme="light"] .security-card,
:root[data-theme="light"] .profile-card,
:root[data-theme="light"] .metric-card,
:root[data-theme="light"] .content-panel,
:root[data-theme="light"] .control-card,
:root[data-theme="light"] .document-card,
:root[data-theme="light"] .password-panel,
:root[data-theme="light"] .tariff-card,
:root[data-theme="light"] .limit-card,
:root[data-theme="light"] .side-card,
:root[data-theme="light"] .form-card,
:root[data-theme="light"] .topic-card {
  background: var(--surface) !important;
}

.sidebar,
.cabinet-layout > .sidebar {
  border-color: var(--border) !important;
  background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
  backdrop-filter: blur(22px) !important;
}

.topbar,
.admin-topbar,
.client-topbar,
.bottom-nav {
  border-color: var(--border) !important;
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
  backdrop-filter: blur(22px) !important;
}

.sidebar-link,
.nav-link,
.nav-button,
.filter-button,
.tab {
  color: var(--muted) !important;
}

.sidebar-link:hover,
.nav-link:hover,
.filter-button:hover,
.tab:hover {
  color: var(--text) !important;
  background: var(--surface-soft) !important;
}

.sidebar-link.active,
.nav-link.active,
.nav-button.active,
.filter-button.active,
.tab.active {
  color: var(--blue) !important;
  border-color: rgba(36, 130, 255, 0.40) !important;
  background: var(--blue-soft) !important;
}

.input,
.select,
.textarea,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-color: var(--border-strong) !important;
  border-radius: 14px !important;
  color: var(--text) !important;
  background: var(--surface-soft) !important;
  box-shadow: none !important;
}

.input:focus,
.select:focus,
.textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--blue-soft) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted-2) !important;
  opacity: 1 !important;
}

label,
.form-label,
.field-label,
.detail-label,
.help,
.form-note,
.org-code,
.document-meta,
.client-subtitle,
.section-subtitle {
  color: var(--muted) !important;
}

.primary-button,
button[type="submit"].primary-button {
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, var(--blue), var(--blue-2)) !important;
  color: #fff !important;
  box-shadow: 0 12px 25px rgba(36, 130, 255, 0.25) !important;
}

.secondary-button,
.outline-button,
.small-button,
.mini-action,
.table-action,
.icon-button,
.modal-close,
.contact-remove,
.profile-contact-remove,
.admin-refresh-button,
.mini-refresh-button {
  border-color: var(--border-strong) !important;
  border-radius: 12px !important;
  background: var(--surface-soft) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.secondary-button:hover,
.outline-button:hover,
.small-button:hover,
.mini-action:hover,
.table-action:hover,
.icon-button:hover,
.modal-close:hover,
.contact-remove:hover,
.profile-contact-remove:hover {
  border-color: var(--blue) !important;
  color: var(--blue) !important;
  background: var(--blue-soft) !important;
}

.text-link,
.section-link,
a:not(.nav-link):not(.brand):not(.outline-button) {
  color: var(--blue);
}

.table-wrap,
.profile-list,
.contact-editor,
.profile-contact-editor,
.bank-details-editor,
.profile-bank-editor,
.user-card,
.ticket-row,
.callback-panel {
  border-color: var(--border) !important;
  background: var(--surface-soft) !important;
}

th,
td,
.ticket-row,
.tabs,
.table-footer {
  border-color: var(--border) !important;
}

th,
.ticket-head {
  color: var(--muted) !important;
}

tbody tr:hover {
  background: var(--blue-soft) !important;
}

.modal-backdrop {
  background: rgba(1, 8, 16, 0.72) !important;
  backdrop-filter: blur(10px) !important;
}

.modal,
.panel.modal {
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  background: var(--surface-strong) !important;
  box-shadow: var(--shadow) !important;
}

.modal-head,
.modal-header,
.modal-footer {
  border-color: var(--border) !important;
}

.mobile-shell {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 93%, transparent), var(--bg-deep)) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.22) !important;
}

.tariff-icon,
.profile-avatar,
.brand-mark,
.icon-box.active {
  background: linear-gradient(145deg, var(--blue), var(--blue-2)) !important;
  color: #fff !important;
}

.page {
  color: var(--text) !important;
}

.page-title,
.section-title,
.side-title,
.form-title,
.topic-title {
  color: var(--text) !important;
}

.tabs {
  border-bottom-color: var(--border) !important;
}

.tab.active::after {
  background: var(--blue) !important;
}

.topic-card.green,
.topic-card.rose,
.topic-card.sand,
.topic-card.gray {
  background: var(--surface-soft) !important;
}

.topic-card:hover,
.topic-card.active {
  border-color: var(--blue) !important;
}

.topic-desc,
.contact-item,
.faq-answer,
.empty-area,
.table-footer,
.form-note,
.help {
  color: var(--muted) !important;
}

.tag,
.ticket-badge,
.page-dot {
  border-color: rgba(36, 130, 255, 0.35) !important;
  background: var(--blue-soft) !important;
  color: var(--blue) !important;
}

.callback-button,
.chat-button,
.floating-chat-button {
  border-color: rgba(36, 130, 255, 0.45) !important;
  background: linear-gradient(145deg, var(--blue), var(--blue-2)) !important;
  color: #fff !important;
  box-shadow: 0 12px 25px rgba(36, 130, 255, 0.25) !important;
}

.p24-unified-controls-2321 {
  border-color: var(--border-strong) !important;
  background: var(--surface-strong) !important;
}

.p24-unified-controls-2321 .p24-control-2321 {
  border-color: var(--border-strong) !important;
  background: var(--surface-soft) !important;
  color: var(--text) !important;
}

.p24-unified-controls-2321 .p24-control-2321:hover,
.p24-unified-controls-2321 .p24-control-2321.is-active {
  border-color: var(--blue) !important;
  background: var(--blue-soft) !important;
}

@media (max-width: 640px) {
  .modal,
  .panel.modal {
    border-radius: 16px !important;
  }
}