/*
 * DealProject visual layer
 * A shared, deliberately light-touch skin for the dashboard, Bitrix widgets,
 * and client-facing spaces. It only enhances existing components, so portal
 * branding and feature-specific styles remain in charge of their content.
 */

:root {
  --dp-glass: rgb(255 255 255 / .72);
  --dp-glass-strong: rgb(255 255 255 / .9);
  --dp-edge: rgb(255 255 255 / .78);
  --dp-shadow: 0 18px 45px rgb(38 25 78 / .09);
  --dp-shadow-hover: 0 22px 54px rgb(38 25 78 / .15);
  --dp-orbit-a: rgb(109 40 217 / .18);
  --dp-orbit-b: rgb(13 148 136 / .15);
  --dp-soft-corner: 28px;
  --dp-corner-orb: rgb(109 40 217 / .11);
}

@keyframes dp-float {
  50% { transform: translate3d(0, -10px, 0) scale(1.03); }
}

@keyframes dp-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .dashboard-page .shell > *, .widget-page #app > *, .client-journey-page .journey-page > *, .client-report-page .report-page > * {
    animation: dp-rise .42s both;
  }
  .dashboard-page .shell > *:nth-child(2), .client-journey-page .journey-page > *:nth-child(2), .client-report-page .report-page > *:nth-child(2) { animation-delay: .06s; }
  .dashboard-page .shell > *:nth-child(3), .client-journey-page .journey-page > *:nth-child(3), .client-report-page .report-page > *:nth-child(3) { animation-delay: .12s; }
}

/* Dashboard — a calm operational canvas instead of an endless white sheet. */
.dashboard-page {
  background:
    radial-gradient(ellipse 52% 31% at 94% -8%, var(--dp-orbit-a), transparent 72%),
    radial-gradient(ellipse 45% 30% at 2% 14%, var(--dp-orbit-b), transparent 74%),
    linear-gradient(145deg, #f9fbff, #f4f2fb 55%, #f2faf9);
  background-attachment: fixed;
}
.dashboard-page .shell { position: relative; }
.dashboard-page .hdr {
  position: sticky; top: 10px; z-index: 20; min-height: 66px; margin: 0 -10px 16px; padding: 10px 14px;
  border: 1px solid var(--dp-edge); border-radius: 22px; background: var(--dp-glass);
  box-shadow: 0 10px 34px rgb(24 30 58 / .07); backdrop-filter: blur(18px) saturate(1.2);
}
.dashboard-page .hdr::after {
  content: ''; position: absolute; inset-inline-end: 170px; top: -32px; z-index: -1; width: 94px; height: 94px;
  border: 1px solid rgb(109 40 217 / .15); border-radius: 38% 62% 55% 45%; background: rgb(109 40 217 / .06);
  animation: dp-float 8s ease-in-out infinite;
}
.dashboard-page .hdr .brand-logo { width: 166px; margin-block: -18px; }
.dashboard-page .header-actions { gap: 8px; }
.dashboard-page .app-fullscreen-button, .dashboard-page .app-fullscreen-badge {
  border-radius: 999px; box-shadow: 0 5px 15px rgb(109 40 217 / .08);
}
.dashboard-page .tabbar {
  position: sticky; top: 92px; z-index: 15; flex-wrap: nowrap; overflow-x: auto; margin: 0 -10px 24px; padding: 7px 10px;
  border: 1px solid var(--dp-edge); border-radius: 18px; background: rgb(255 255 255 / .58); box-shadow: 0 7px 22px rgb(24 30 58 / .04); backdrop-filter: blur(15px);
  scrollbar-width: none;
}
.dashboard-page .tabbar::-webkit-scrollbar { display: none; }
.dashboard-page .tab-btn { flex: 0 0 auto; margin: 0; border: 0; border-radius: 11px; padding: 8px 12px; transition: background .2s ease, color .2s ease, transform .2s ease; }
.dashboard-page .tab-btn:hover { background: rgb(109 40 217 / .08); transform: translateY(-1px); }
.dashboard-page .tab-btn.active { border: 0; color: #fff; background: linear-gradient(135deg, var(--violet), #8b5cf6); box-shadow: 0 7px 16px rgb(109 40 217 / .22); }
.dashboard-page .stat-tile, .dashboard-page .card, .dashboard-page .analytics-intro,
.dashboard-page .account-action-center, .dashboard-page .empty-panel, .dashboard-page .portfolio-toolbar {
  border-color: var(--dp-edge); background: var(--dp-glass); box-shadow: var(--dp-shadow); backdrop-filter: blur(13px) saturate(1.15);
}
.dashboard-page .stat-tile, .dashboard-page .card, .dashboard-page .analytics-intro,
.dashboard-page .account-action-center, .dashboard-page .empty-panel, .dashboard-page .portfolio-toolbar {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--dp-soft-corner);
}
.dashboard-page .stat-tile { min-height: 92px; transition: transform .22s ease, box-shadow .22s ease; }
.dashboard-page .stat-tile::before, .dashboard-page .card::before, .dashboard-page .analytics-intro::before,
.dashboard-page .account-action-center::before, .dashboard-page .empty-panel::before {
  content: ''; position: absolute; z-index: -1; width: 108px; height: 108px; inset-inline-start: -42px; bottom: -48px;
  border-radius: 50%; background: var(--dp-corner-orb); pointer-events: none;
}
.dashboard-page .stat-tile::after { content: ''; position: absolute; z-index: -1; inset-inline-start: 26px; bottom: 17px; width: 28px; height: 28px; border: 1px solid rgb(109 40 217 / .17); border-radius: 50%; }
.dashboard-page .stat-tile:hover, .dashboard-page .card:hover { transform: translateY(-3px); box-shadow: var(--dp-shadow-hover); }
.dashboard-page .card { border-radius: var(--dp-soft-corner); }
.dashboard-page .deal-card { overflow: hidden; }
.dashboard-page .deal-card:nth-of-type(3n + 1)::before { background: rgb(13 148 136 / .10); }
.dashboard-page .deal-card:nth-of-type(3n + 2)::before { background: rgb(2 132 199 / .09); }
.dashboard-page .progress-bar { height: 8px; background: rgb(15 27 45 / .09); }
.dashboard-page .progress-fill { border-radius: inherit; background: linear-gradient(90deg, var(--violet), #9d65f7 70%, var(--aqua)); }
.dashboard-page .analytics-intro { border-radius: var(--dp-soft-corner); }
.dashboard-page .analytics-intro::after { content: '✦'; position: absolute; inset-inline-end: 24px; bottom: 9px; color: rgb(109 40 217 / .13); font-size: 92px; line-height: 1; pointer-events: none; }
.dashboard-page button:not(.tab-btn), .dashboard-page .secondary { transition: transform .18s ease, box-shadow .18s ease; }
.dashboard-page button:not(:disabled):hover, .dashboard-page .secondary:hover { transform: translateY(-1px); }

/* Embedded Bitrix spaces — compact glass cockpit, deliberately restrained. */
.widget-page {
  min-height: 100%; padding: 16px; background:
    radial-gradient(circle at 100% 0, rgb(109 40 217 / .11), transparent 30%),
    linear-gradient(145deg, #fafcff, #f6f3fc 58%, #f4fbf9);
}
.widget-page .widget-brand {
  position: sticky; top: 0; z-index: 10; min-height: 48px; margin: -4px 0 16px; padding: 7px 10px;
  border: 1px solid rgb(255 255 255 / .8); border-radius: 15px; background: rgb(255 255 255 / .78);
  box-shadow: 0 8px 25px rgb(23 31 60 / .08); backdrop-filter: blur(14px);
}
.widget-page .widget-brand img { width: 122px; }
.widget-page .workspace-fullscreen-button { border-radius: 999px; background: rgb(255 255 255 / .72); }
.widget-page #app > .linked, .widget-page #app > .setup-wizard, .widget-page #app > .task-delivery-label,
.widget-page #app > .admin-access-denied, .widget-page #app > .panel, .widget-page #app > .empty {
  border-radius: 18px;
}
.widget-page .linked, .widget-page .panel, .widget-page .task-command-card, .widget-page .task-delivery-label,
.widget-page .setup-section, .widget-page .project-client-brief, .widget-page .project-link-choice {
  position: relative; overflow: hidden; isolation: isolate; border-color: rgb(255 255 255 / .85); border-radius: var(--dp-soft-corner);
  box-shadow: 0 12px 32px rgb(31 25 67 / .08); backdrop-filter: blur(10px);
}
.widget-page .linked::before, .widget-page .panel::before, .widget-page .task-command-card::before,
.widget-page .task-delivery-label::before, .widget-page .setup-section::before, .widget-page .project-client-brief::before {
  content: ''; position: absolute; z-index: -1; width: 84px; height: 84px; inset-inline-start: -32px; bottom: -38px;
  border-radius: 50%; background: var(--dp-corner-orb); pointer-events: none;
}
.widget-page .tab-bar { gap: 5px; padding: 5px; border: 1px solid rgb(109 40 217 / .1); border-radius: 14px; background: rgb(255 255 255 / .6); }
.widget-page .tab-btn { border: 0; border-radius: 10px; }
.widget-page .tab-btn.active { color: #fff; background: linear-gradient(135deg, var(--primary), #8b5cf6); box-shadow: 0 5px 12px rgb(109 40 217 / .2); }
.widget-page .task-command-card { transition: transform .18s ease, box-shadow .18s ease; }
.widget-page .task-command-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgb(31 25 67 / .13); }
.widget-page .project-client-hero, .widget-page .setup-hero { overflow: hidden; position: relative; }
.widget-page .project-client-hero::after, .widget-page .setup-hero::after {
  content: ''; position: absolute; width: 120px; height: 120px; inset-inline-end: -44px; bottom: -54px;
  border: 20px solid rgb(109 40 217 / .1); border-radius: 50%; pointer-events: none;
}
.widget-page .progress-orbit { box-shadow: inset 0 0 0 8px rgb(255 255 255 / .55), 0 10px 22px rgb(109 40 217 / .12); }
.task-label-page.widget-page { padding: 12px; }

/* External client report and journey — editorial cards with a very subtle glow. */
.client-journey-page, .client-report-page {
  background:
    radial-gradient(ellipse 50% 35% at 95% -5%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    radial-gradient(ellipse 36% 24% at 0% 18%, color-mix(in srgb, var(--brand-accent, var(--brand)) 10%, transparent), transparent 75%),
    var(--brand-surface, var(--canvas));
  background-attachment: fixed;
}
.client-journey-page .journey-hero, .client-report-page .report-hero {
  border-color: rgb(255 255 255 / .85); border-top-color: var(--brand-base, var(--brand));
  border-radius: var(--dp-soft-corner); box-shadow: 0 20px 55px color-mix(in srgb, var(--brand) 10%, transparent); backdrop-filter: blur(12px);
}
.client-journey-page .journey-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--soft) 92%, white), rgb(255 255 255 / .88) 60%); }
.client-report-page .report-hero { border-radius: var(--dp-soft-corner); }
.client-journey-page .journey-step article, .client-journey-page .journey-feedback,
.client-report-page .section, .client-report-page .intro, .client-report-page .conclusion, .client-report-page .stat {
  position: relative; overflow: hidden; isolation: isolate; border-color: rgb(255 255 255 / .88); border-radius: var(--dp-soft-corner);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--brand) 7%, transparent);
}
.client-journey-page .journey-step article::before, .client-report-page .section::before, .client-report-page .stat::before {
  content: ''; position: absolute; z-index: -1; width: 92px; height: 92px; inset-inline-start: -37px; bottom: -43px;
  border-radius: 50%; background: color-mix(in srgb, var(--brand) 9%, transparent);
}
.client-journey-page .journey-step article { transition: transform .2s ease, box-shadow .2s ease; }
.client-journey-page .journey-step article:hover { transform: translateY(-2px); box-shadow: 0 18px 34px color-mix(in srgb, var(--brand) 14%, transparent); }
.client-journey-page .journey-step-index { box-shadow: 0 0 0 6px rgb(255 255 255 / .55), 0 8px 18px color-mix(in srgb, var(--brand) 18%, transparent); }
.client-report-page .report-contents a, .client-report-page .section-count { border-radius: 999px; }
.client-report-page .stat { border-radius: 18px; transition: transform .2s ease; }
.client-report-page .stat:hover { transform: translateY(-3px); }
.client-report-page .section { border-radius: 20px; }

/* Client request portal — turn a form into a friendly, guided handoff. */
.client-request-page {
  min-height: 100vh; background:
    radial-gradient(ellipse 60% 30% at 100% 0, color-mix(in srgb, var(--brand, #6d28d9) 18%, transparent), transparent 72%),
    linear-gradient(145deg, #fff, var(--soft, #f7f2ff) 58%, var(--brand-surface, #f1faf8));
}
.client-request-page main { max-width: 900px; }
.client-request-page .hero, .client-request-page .card {
  border-color: rgb(255 255 255 / .86); box-shadow: 0 18px 46px rgb(41 28 83 / .10); backdrop-filter: blur(14px);
}
.client-request-page .hero { position: relative; overflow: hidden; border-radius: var(--dp-soft-corner); }
.client-request-page .hero::after { content: '✦'; position: absolute; inset-inline-end: 25px; bottom: -32px; color: rgb(255 255 255 / .35); font-size: 130px; line-height: 1; }
.client-request-page .card { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--dp-soft-corner); }
.client-request-page .card::before { content: ''; position: absolute; z-index: -1; width: 112px; height: 112px; inset-inline-start: -44px; bottom: -54px; border-radius: 50%; background: var(--dp-corner-orb); }
.client-request-page .request-types { padding: 6px; border: 1px solid rgb(255 255 255 / .8); border-radius: 17px; background: rgb(255 255 255 / .6); box-shadow: 0 9px 22px rgb(41 28 83 / .06); }
.client-request-page .request-types button { border-radius: 11px; }
.client-request-page .request-types button.active { box-shadow: 0 7px 15px color-mix(in srgb, var(--brand, #6d28d9) 20%, transparent); }
.client-request-page .booking-day, .client-request-page .time-slot { transition: transform .18s ease, box-shadow .18s ease; }
.client-request-page .booking-day:hover, .client-request-page .time-slot:hover { transform: translateY(-2px); box-shadow: 0 8px 15px rgb(31 41 55 / .10); }

/* Operations console — preserve its intentional green identity, with depth. */
.operator-page { background: radial-gradient(ellipse 55% 35% at 95% -10%, rgb(36 150 109 / .15), transparent 72%), var(--canvas); }
.operator-page .sidebar { background: linear-gradient(160deg, #123c2d, #0a2d22); box-shadow: 10px 0 40px rgb(8 45 34 / .11); }
.operator-page .topbar { padding: 16px 18px; border: 1px solid rgb(255 255 255 / .7); border-radius: 20px; background: rgb(255 255 255 / .58); box-shadow: 0 10px 28px rgb(20 52 41 / .06); backdrop-filter: blur(14px); }
.operator-page .metric-card, .operator-page .panel, .operator-page .plan-card { position: relative; overflow: hidden; isolation: isolate; border-color: rgb(255 255 255 / .8); border-radius: var(--dp-soft-corner); box-shadow: 0 12px 32px rgb(20 52 41 / .07); }
.operator-page .metric-card { transition: transform .2s ease, box-shadow .2s ease; }
.operator-page .metric-card::before, .operator-page .panel::before, .operator-page .plan-card::before { content: ''; position: absolute; z-index: -1; width: 94px; height: 94px; left: -36px; bottom: -44px; border-radius: 50%; background: rgb(23 107 75 / .09); }
.operator-page .metric-card::after { content: ''; position: absolute; width: 26px; height: 26px; left: 21px; bottom: 17px; border: 1px solid rgb(23 107 75 / .18); border-radius: 50%; }
.operator-page .metric-card:hover, .operator-page .plan-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgb(20 52 41 / .12); }
.operator-page .nav-item { border: 1px solid transparent; transition: transform .18s ease, background .18s ease; }
.operator-page .nav-item:hover { transform: translateX(-3px); }
.operator-page .nav-item.active { border-color: rgb(255 255 255 / .10); box-shadow: inset 0 1px rgb(255 255 255 / .09); }
.operator-page .login-card { border-color: rgb(255 255 255 / .9); backdrop-filter: blur(16px); }

/* Workflow guide — retains its narrative page, but gives navigation and stages a tactile finish. */
.workflow-page .topbar { border-bottom-color: rgb(255 255 255 / .72); box-shadow: 0 8px 28px rgb(24 30 58 / .06); }
.workflow-page .navlinks a { border-radius: 999px; padding: 6px 10px; }
.workflow-page .navlinks a:hover { border-color: transparent; background: rgb(109 40 217 / .08); }
.workflow-page .metastrip, .workflow-page .stage, .workflow-page .callout, .workflow-page .principle {
  position: relative; overflow: hidden; isolation: isolate; border-color: rgb(255 255 255 / .75); border-radius: var(--dp-soft-corner);
  box-shadow: 0 12px 30px rgb(27 29 69 / .07); backdrop-filter: blur(10px);
}
.workflow-page .metastrip::before, .workflow-page .stage::before, .workflow-page .callout::before, .workflow-page .principle::before {
  content: ''; position: absolute; z-index: -1; width: 100px; height: 100px; inset-inline-start: -40px; bottom: -46px;
  border-radius: 50%; background: var(--dp-corner-orb); pointer-events: none;
}
.workflow-page .metastrip { border-radius: var(--dp-soft-corner); }
.workflow-page .stage { transition: transform .2s ease, box-shadow .2s ease; }
.workflow-page .stage:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgb(27 29 69 / .12); }

/* Support chat — support-chat.js pins the Bitrix24 site button over this
   reserved header slot, so it never floats over buttons or text. */
.support-chat-dock { flex: none; width: 34px; height: 34px; }
.widget-brand > img { margin-inline-end: auto; }
.widget-brand > .support-chat-dock { margin-inline-start: 8px; }
.b24-widget-button-wrapper.dp-support-chat-docked {
  top: var(--dp-support-chat-top) !important; left: var(--dp-support-chat-left) !important;
  right: auto !important; bottom: auto !important; margin: 0 !important;
  flex-direction: column !important; align-items: flex-start !important;
  z-index: 30; /* over the sticky headers, under drawers and modals */
}
/* While its channel list is open it must clear Bitrix's own backdrop. */
.b24-widget-button-wrapper.dp-support-chat-docked.b24-widget-button-top { z-index: 10150; }
.dp-support-chat-docked .b24-widget-button-inner-container { transform: scale(.5) !important; }
.dp-support-chat-docked .b24-widget-button-social { order: 1; height: auto !important; margin-top: -12px; }

@media (max-width: 650px) {
  .dashboard-page .shell { padding-inline: 14px; }
  .dashboard-page .hdr { top: 5px; margin-inline: -4px; border-radius: 17px; }
  .dashboard-page .hdr .sub { display: none; }
  .dashboard-page .tabbar { top: 78px; margin-inline: -4px; border-radius: 14px; }
  .widget-page { padding: 10px; }
  .widget-page .widget-brand { margin-bottom: 12px; }
  .dashboard-page .stat-tile, .dashboard-page .card, .dashboard-page .analytics-intro, .dashboard-page .account-action-center,
  .widget-page .linked, .widget-page .panel, .widget-page .task-command-card, .widget-page .task-delivery-label,
  .client-journey-page .journey-hero, .client-report-page .report-hero, .client-request-page .hero,
  .client-journey-page .journey-step article, .client-report-page .section, .client-report-page .stat,
  .operator-page .metric-card, .operator-page .panel, .operator-page .plan-card { border-radius: 20px; }
  .operator-page .topbar { padding: 12px; border-radius: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}