/* Esyelken — visual layer. Existing module layout and interaction hooks are retained. */
:root {
  --font-body: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', sans-serif;
  --font-display: var(--font-body);
  --ink: #1d1d1f; --ink-soft: #515154; --ink-mute: #6e6e73;
  --canvas: #f5f5f7; --surface: #fff; --line: #e5e5e9;
  --brand: #0066cc; --brand-dark: #0055ad; --brand-soft: #eaf3ff;
  --radius: 12px; --radius-lg: 20px; --radius-xl: 24px;
  --shadow-sm: 0 2px 8px #1d1d1f04;
  --shadow-md: 0 8px 28px #1d1d1f08;
  --shadow-lg: 0 24px 72px #1d1d1f1f;
  --ease: cubic-bezier(.22, .68, 0, 1);
}
body { font-size: 14px; line-height: 1.45; background: var(--canvas); }
button, input, select, textarea { font-family: var(--font-body); }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #0071e3 !important; outline-offset: 3px;
}
::selection { background: #cce5ff; color: #1d1d1f; }
.sidebar { background: #fafafc; border-right: 1px solid var(--line); box-shadow: none; scrollbar-width: thin; }
.sb-logo { padding: 25px 20px; gap: 11px; border-color: var(--line); }
.sb-logo-icon, .login-logo { background: #1d1d1f; color: #fff; box-shadow: none; }
.sb-logo-icon { border-radius: 12px; width: 38px; height: 38px; }
.sb-logo-text { color: var(--ink); font-size: 14px; font-weight: 650; letter-spacing: -.4px; }
.sb-logo-sub { color: var(--ink-mute); font-size: 10px; letter-spacing: .07em; margin-top: 4px; }
.sb-section { padding: 12px 0 3px; }
.sb-label { color: var(--ink-mute); font-size: 10px; font-weight: 600; letter-spacing: .08em; padding: 0 23px; margin-bottom: 6px; }
.sb-item { color: var(--ink-soft); font-size: 13px; font-weight: 500; min-height: 42px; padding: 10px 13px; margin: 2px 11px; width: calc(100% - 22px); gap: 11px; }
.sb-item:hover { background: #eeeeF1; color: var(--ink); transform: none; }
.sb-item.active { background: #e6effb; color: #0058b0; box-shadow: none; font-weight: 650; }
.sb-item.active::before { display: none; }
.sb-item .ico { display: inline-flex; flex: 0 0 19px; width: 19px; align-items: center; justify-content: center; }
.ey-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sb-logo-icon .ey-icon { width: 23px; height: 23px; }
.login-logo .ey-icon { width: 32px; height: 32px; }
.sb-bottom { border-color: var(--line); padding: 16px 12px; gap: 7px; }
.sb-uname { color: var(--ink); font-size: 11px; }.sb-urole { color: var(--ink-mute); font-size: 10px; }
.sb-av { box-shadow: none; border-radius: 50%; }
.sb-logout { background: #fff; color: var(--ink-soft); border-color: var(--line); padding: 7px; }
.main { padding: 28px 32px; width: calc(100% - 230px); }
.page-hd { margin-bottom: 24px; gap: 12px; }.page-hd h2 { font-size: 28px; font-weight: 650; letter-spacing: -.9px; }
.dash-hero { background: transparent; color: var(--ink); padding: 20px 0 28px; border-radius: 0; box-shadow: none; margin-bottom: 0; }
.dash-hero-glow { display: none; }
.dash-hero > div:last-child > div:first-child > div:nth-child(2) { font-size: clamp(28px, 3vw, 40px) !important; font-weight: 650 !important; letter-spacing: -1.4px !important; line-height: 1.2; margin: 8px 0 !important; }
.dash-hero > div:last-child > div:first-child > div:first-child,
.dash-hero > div:last-child > div:first-child > div:last-child { color: var(--ink-mute); opacity: 1 !important; font-size: 13px !important; }
.dash-period, .vb, .ulako-view-tabs { background: #eaeaec; border: 1px solid #e5e5e7; border-radius: 12px; padding: 4px; gap: 3px; box-shadow: none; backdrop-filter: none; }
.dash-period button, .vb button { color: var(--ink-soft); font-size: 12px; min-height: 36px; padding: 7px 14px; border: 0; }
.dash-period button:hover, .vb button:hover { color: var(--ink); background: #ffffff70; }
.dash-period button.on, .vb button.on { color: var(--ink); background: #fff; box-shadow: 0 1px 4px #00000012; border-radius: 8px; }
.kpi-grid { gap: 16px; margin-bottom: 24px; }
.kpi { background: #fff !important; color: var(--ink); padding: 24px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); border-radius: 20px; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-lbl { color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 550; opacity: 1; }
.kpi-val { font-size: clamp(24px, 2.5vw, 36px); line-height: 1.16; font-weight: 650; margin-top: 15px; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-sub { color: var(--ink-mute); opacity: 1; font-size: 12px; margin-top: 9px; }
.kpi-ico { opacity: .55; font-size: 20px; filter: grayscale(1); right: 20px; top: 18px; }
.ey-sales-card { border-radius: 20px !important; border-color: var(--line) !important; box-shadow: var(--shadow-sm) !important; padding: 24px !important; }
.ey-sales-summary > div { background: #f5f5f7 !important; border: 1px solid #ececef !important; border-radius: 14px !important; padding: 16px !important; }
.ey-sales-summary > div > div:first-child { color: var(--ink-soft) !important; font-size: 11px !important; font-weight: 550 !important; text-transform: none !important; letter-spacing: 0 !important; }
.ey-sales-summary > div > div:nth-child(2) { font-size: 23px !important; font-weight: 650 !important; letter-spacing: -.5px; }
.ey-sales-summary > div > div:last-child { font-size: 11px !important; font-weight: 400 !important; }
.ey-sales-card input, .ey-sales-card select { min-height: 36px; }
.kpi-spark { opacity: 1; height: 28px; }.kpi-spark span { background: #b8d7f7; }
.kpi-trend { background: var(--brand-soft); color: #0058b0; padding: 4px 8px; }
.dash-grid { gap: 20px; }.dash-card { padding: 24px; }.dash-card h3 { font-size: 16px; font-weight: 600; letter-spacing: -.3px; margin-bottom: 20px; }
.dash-card:hover, .chart-card:hover, .calendar-sync-card:hover, .kpi-card:hover { transform: none; box-shadow: var(--shadow-sm) !important; }
.lead-row { min-height: 44px; }.lead-rank { background: #f0f0f3 !important; color: var(--ink-soft) !important; box-shadow: none; }
.dash-trend { padding: 17px 20px; border-radius: 16px; }.dash-alert { border-width: 1px; border-radius: 16px; }
.sc, .ccard, .detpanel, .report-section, .report-filters, .tbl-wrap, .cal, .alml { border-color: var(--line); box-shadow: var(--shadow-sm); border-radius: 18px; }
.sc { padding: 18px; }.sc .lb { font-size: 12px; color: var(--ink-soft); }.sc .vl { font-size: 26px; letter-spacing: -.7px; font-weight: 650; }.sc .sb { font-size: 11px; color: var(--ink-mute); }
.ccard { padding: 20px; }.ccard:hover { border-color: #bbcce0; box-shadow: var(--shadow-md); }.ccn { font-size: 15px; }.ccj, .ccr { font-size: 12px; }
.dtable th { padding: 15px 16px; font-size: 11px; font-weight: 600; color: var(--ink-soft); background: #fafafa; }
.dtable td { padding: 15px 16px; font-size: 13px; color: var(--ink); border-color: #eeeef0; }
.btn-p, .btn, .login-btn { background: var(--brand); color: #fff; box-shadow: none; border-radius: 10px; font-size: 13px; font-weight: 550; min-height: 40px; letter-spacing: 0; }
.btn-p:hover, .btn:hover, .login-btn:hover { background: var(--brand-dark); color: #fff; box-shadow: none; transform: none; }
.btn-c, .btn-o, .btn-d { border-width: 1px; border-radius: 10px; font-size: 13px; min-height: 40px; }
.btn-p:disabled, .btn:disabled, .login-btn:disabled, .ulako-btn:disabled { opacity: .45; transform: none; box-shadow: none; cursor: not-allowed; }
.fr label, .rf-group label, .lf label { color: var(--ink-soft); font-size: 12px; font-weight: 500; margin-bottom: 6px; }
.fr input, .fr select, .rf-group input, .rf-group select, .lf input { border: 1px solid #c7c7cc; min-height: 42px; padding: 10px 12px; border-radius: 10px; font-size: 14px; background: #fff; }
.modal { border-radius: 22px; box-shadow: var(--shadow-lg); border-color: var(--line); }.mh, .mb { padding: 20px 24px; }.mh h2 { font-size: 19px; font-weight: 600; letter-spacing: -.4px; }
.mcl { min-width: 40px; min-height: 40px; color: var(--ink-soft); border-radius: 50%; }.mcl:hover { background: var(--canvas); }
.mt { font-size: 12px; padding: 12px; }.mtabs { background: #fafafa; }
.login-page::before { background: rgba(10, 25, 45, .38); }
.login-card { border-radius: 28px; padding: 40px; box-shadow: 0 24px 90px #00000026; }.login-title { letter-spacing: -.6px; }.login-btn { min-height: 48px; }
.kanban-col, .ulako-column { background: #eeeef1; border-color: var(--line); border-radius: 16px; }.lead-card, .ulako-card { border-radius: 12px; border-color: var(--line); }
/* Inbox keeps its conversation list, chat and customer drawer arrangement. */
.ulako-inbox, .ulako-shell { --u-ivory: #f5f5f7; --u-soft: #f5f5f7; --u-line: #e5e5e9; --u-ink: #1d1d1f; --u-muted: #6e6e73; --u-orange: #0066cc; }
body.ulako-inbox-active .main { padding: 0; }
#page-ulako-inbox { margin: 0; background: var(--canvas); }
.ulako-pane-head { padding: 24px 18px 14px; }.ulako-inbox-heading { flex-wrap: wrap; }.ulako-inbox-heading h3 { font-size: 20px; font-weight: 650; letter-spacing: -.65px; }
.ulako-search-wrap .ulako-input { background: #f5f5f7; border-color: transparent; font-size: 13px; border-radius: 11px; }
.ulako-view-tabs button { color: var(--ink-soft); font-size: 11px; min-height: 34px; font-weight: 550; }
.ulako-view-tabs button.active { color: var(--ink); background: #fff; box-shadow: 0 1px 4px #00000012; }
.ulako-view-tabs button:hover, .ulako-filter-toggle:hover, .ulako-filter-toggle.active { background: #f0f0f3; color: var(--ink); }
.ulako-filter-panel { background: #fafafa; border-color: var(--line); }
.ulako-conv { margin: 3px 8px; padding: 14px 10px; border: 0; border-radius: 12px; }.ulako-conv:hover { background: #f5f5f7; }.ulako-conv.active { background: #eaf3ff; }.ulako-conv.active::before { display: none; }
.ulako-conv-name { font-size: 13px; font-weight: 600; }.ulako-conv-preview { font-size: 12px; color: var(--ink-mute); }.ulako-conv-line small { font-size: 10px; color: var(--ink-mute); }
.ulako-conv-avatar, .ulako-chat-avatar { background: #edf0f5; color: #515c6e; font-weight: 600; }
.ulako-chat-head { background: #ffffffed; min-height: 76px; }.ulako-chat-title { font-size: 15px; }.ulako-message-list { background: #f5f5f7; padding: 22px; gap: 14px; }
.ulako-message { font-size: 13px; line-height: 1.6; border-radius: 17px; padding: 11px 15px 8px; border-color: #e5e5e9; box-shadow: 0 1px 3px #00000003; }
.ulako-message.outgoing { background: #e8f2ff; border-color: #d3e5fc; color: #173b60; }.ulako-message-footer { font-size: 10px; color: #616a75; }
.ulako-date-divider { color: var(--ink-mute); font-size: 10px; }.ulako-date-divider::before, .ulako-date-divider::after { background: #e2e2e7; }
.ulako-btn { border-color: #d2d2d7; border-radius: 10px; font-weight: 550; }.ulako-btn:hover { border-color: #87b5e7; color: var(--brand); }
.ulako-btn.primary, .ulako-send-button { background: var(--brand); border-color: var(--brand); color: #fff; }.ulako-btn.primary:hover, .ulako-send-button:hover { background: var(--brand-dark); color: #fff; }
.ulako-customer-toggle { color: var(--brand) !important; border-color: #c0d8f3 !important; }
.ulako-composer { padding: 14px; }.ulako-compose-input textarea { font-size: 14px; background: #f9f9fb; border-radius: 12px; }.ulako-compose-input > span { color: var(--ink-mute); }
.ulako-input:focus, .ulako-select:focus, .ulako-textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px #0071e31a; }
.ulako-text-action, .ulako-source-tabs button.active { color: var(--brand); }.ulako-suggestion { background: #f5f5f7; color: var(--ink-soft); }.ulako-suggestion:hover { color: var(--brand); background: var(--brand-soft); border-color: #c0d8f3; }
.ulako-profile-grid span, .ulako-profile-label { font-size: 10px; color: var(--ink-mute); }.ulako-profile-grid b, .ulako-profile-section summary { font-size: 12px; }.ulako-note { background: #f5f5f7; font-size: 12px; }
@media (min-width: 769px) and (max-width: 1100px) {
  .main { padding: 24px; }.kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.dash-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .main { padding: 78px 16px calc(84px + env(safe-area-inset-bottom)) !important; width: 100%; }
  .mob-header, .mob-bottom-nav { background: #fafafaf5; border-color: var(--line); box-shadow: none; backdrop-filter: blur(20px); }
  .mob-header-title { color: var(--ink); }.mob-toggle { background: #f0f0f3; box-shadow: none; top: 7px; }.mob-toggle span { background: var(--ink); }
  .mob-bottom-nav { height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }.mob-nav-btn { color: var(--ink-mute); }.mob-nav-btn.active { color: var(--brand); background: var(--brand-soft); }
  .page-hd h2 { font-size: 25px; }.dash-hero { padding: 8px 0 24px; }.dash-hero > div:last-child > div:first-child > div:nth-child(2) { font-size: 30px !important; letter-spacing: -1px !important; }
  .dash-period { margin-top: 8px; }.dash-period button { min-height: 40px; padding: 8px 15px; }
  .ey-sales-card { padding: 16px !important; }.ey-sales-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ey-sales-summary > div { padding: 12px !important; }.ey-sales-summary > div > div:nth-child(2) { font-size: 19px !important; }
  .ey-sales-card input[type=date] { min-width: 0; width: 112px; }.ey-sales-card input, .ey-sales-card select { font-size: 16px !important; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.kpi { padding: 18px 14px; border-radius: 16px; }.kpi-val { font-size: 25px; letter-spacing: -.8px; }.kpi-lbl, .kpi-sub { font-size: 12px; }.kpi-ico { display: none; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }.dash-card { padding: 20px; }.dash-alerts { grid-template-columns: minmax(0, 1fr); }
  .fr input, .fr select, .rf-group input, .rf-group select, .ulako-input, .ulako-select, .ulako-textarea, .ulako-compose-input textarea { font-size: 16px; }
  .btn, .btn-p, .btn-c, .btn-o, .btn-d { min-height: 44px; }
  body.ulako-inbox-active .main { padding: 58px 0 calc(62px + env(safe-area-inset-bottom)) !important; }
  #page-ulako-inbox { margin: 0; height: calc(100dvh - 120px - env(safe-area-inset-bottom)); }
  .ulako-inbox { grid-template-columns: 1fr; border-left: 0; }
  .ulako-conversation-pane, .ulako-chat-pane { grid-column: 1; grid-row: 1; }
  .ulako-chat-pane { display: none; }
  .ulako-inbox.mobile-chat-active .ulako-conversation-pane { display: none; }
  .ulako-inbox.mobile-chat-active .ulako-chat-pane { display: flex; }
  .ulako-mobile-back { display: grid; }
  .ulako-profile-drawer { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: min(78dvh,650px); border-radius: 20px 20px 0 0; transform: translateY(calc(100% + 20px)); }
  .ulako-inbox.profile-open .ulako-profile-drawer { transform: translateY(0); }
  .ulako-macro-select { width: 70px; font-size: 12px !important; padding-left: 8px; }
  .ulako-status-select { font-size: 12px !important; }
  .login-card { padding: 32px 24px; }
}
@media (max-width: 760px) {
  .ulako-message-list { padding: 14px 12px; }.ulako-message { max-width: 88%; }.ulako-pane-head { padding: 20px 16px 12px; }.ulako-chat-head { min-height: 64px; }.ulako-composer { padding: 10px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  body, .main { background: #fff; }.main { width: 100%; padding: 0; }.kpi, .dash-card { box-shadow: none; break-inside: avoid; }
}

/* Supplied Esyelken brand artwork: keep logos clear of the login form. */
.login-page { position: relative; background-image: url('../assets/login-background-20260915.png'); background-position: center; background-size: cover; background-repeat: no-repeat; background-color: #073e49; justify-content: flex-end; padding: 40px clamp(28px, 5vw, 100px); }
.login-page::before { background: linear-gradient(90deg, transparent 50%, rgba(0, 22, 35, .12)); pointer-events: none; }
.login-card { width: clamp(330px, 27vw, 400px); flex-shrink: 0; }
@media (max-width: 900px) {
  #login-page.login-page { background-size: 100% auto; background-position: center top; justify-content: center; align-items: flex-start; padding: calc(62.5vw + 24px) 16px 32px; min-height: 100svh; }
  .login-page::before { background: none; }
  .login-card { width: 400px; max-width: 100%; }
}

@media (max-width: 768px) {
  #login-page .login-card > div { width: auto; max-width: none; padding: 0; border-radius: 0; }
  #login-page .login-card .login-logo { width: 64px; height: 64px; border-radius: 18px; }
}