/* Kutcar visual system — loaded after each application's existing styles.
   Presentation only: retain layout breakpoints, visibility and state classes.
   Neutral surfaces; #8bc53d is reserved for primary actions and small accents.
   Brand color is separate from success / warning / danger colors. */
:root {
  color-scheme: dark;
  --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bg-main: #000000;
  --bg-secondary: #171717;
  --bg-card: #232323;
  --bg-card-hover: #2c2c2c;
  --bg-hover: rgba(255, 255, 255, .04);
  --bg-input: #141414;
  --border: #353535;
  --border-light: #4b4b4b;
  --text-primary: #e0e0e0;
  --text-secondary: #b8b8b8;
  --text-heading: #f2f2f2;
  --text-muted: #a3a3a3;
  --accent: #8bc53d;
  --accent-hover: #aad66b;
  --accent-light: rgba(255, 255, 255, .055);
  --action-bg: #8bc53d;
  --action-hover: #9ed054;
  --on-action: #011207;
  --on-accent: #011207;
  --success: #68b78a;
  --success-bg: rgba(104, 183, 138, .12);
  --danger: #ed8b83;
  --danger-bg: rgba(237, 139, 131, .12);
  --warning: #d9b16a;
  --warning-bg: rgba(217, 177, 106, .12);
  --info: #80afce;
  --info-bg: rgba(128, 175, 206, .12);
  --radius: 9px;
  --radius-sm: 6px;
  --radius-xs: 4px;
  --shadow: 0 2px 4px rgba(0, 0, 0, .12);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .28);
  --transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
  /* Aliases used by the supplier portal and dynamically rendered modules. */
  --primary: var(--accent);
  --primary-hover: var(--accent-hover);
  --bg: var(--bg-main);
  --text: var(--text-primary);
  --surface: var(--bg-secondary);
  --card-bg: var(--bg-card);
  --border-hover: var(--border-light);
  /* Customer portal tokens. */
  --cp-primary: var(--accent);
  --cp-primary-hover: var(--accent-hover);
  --cp-primary-glow: transparent;
  --cp-primary-soft: var(--accent-light);
  --cp-accent: var(--warning);
  --cp-accent-hover: #c59d55;
  --cp-bg: var(--bg-main);
  --cp-bg-card: var(--bg-card);
  --cp-bg-card-solid: var(--bg-card);
  --cp-bg-card-hover: var(--bg-card-hover);
  --cp-bg-input: var(--bg-input);
  --cp-bg-elevated: var(--bg-secondary);
  --cp-border: var(--border);
  --cp-border-hover: var(--border-light);
  --cp-text: var(--text-primary);
  --cp-text-heading: var(--text-heading);
  --cp-text-muted: var(--text-muted);
  --cp-text-secondary: var(--text-secondary);
  --cp-success: var(--success);
  --cp-danger: var(--danger);
  --cp-warning: var(--warning);
  --cp-info: var(--info);
  --cp-radius: 10px;
  --cp-radius-sm: 7px;
  --cp-radius-xs: 5px;
  --cp-shadow: var(--shadow-lg);
  --cp-shadow-sm: var(--shadow);
  --cp-shadow-glow: none;
  --cp-bg-header: var(--bg-secondary);
  --cp-bg-nav: var(--bg-secondary);
  --cp-bg-sidebar: var(--bg-secondary);
  --cp-border-nav: var(--border);
  --cp-shadow-nav: none;
  --cp-text-nav-inactive: var(--text-muted);
  --cp-header-btn-hover: var(--bg-hover);
  --cp-badge-bg: var(--bg-input);
  --cp-bg-body-grad-1: transparent;
  --cp-bg-body-grad-2: transparent;
}

body.light-theme, :root.light-mode {
  color-scheme: light;
  --bg-main: #d6d6d3;
  --bg-secondary: #c5c5c2;
  --bg-card: #e5e5e1;
  --bg-card-hover: #deded9;
  --bg-hover: rgba(0, 0, 0, .045);
  --bg-input: #ddddd8;
  --border: #b6b6b0;
  --border-light: #92928c;
  --text-primary: #292929;
  --text-secondary: #525252;
  --text-heading: #171717;
  --text-muted: #50504c;
  --accent: #012f13;
  --accent-hover: #011207;
  --accent-light: #b9b9b3;
  --on-accent: #e2f0cc;
  --success: #287349;
  --success-bg: #e8f2eb;
  --danger: #b6453f;
  --danger-bg: #faeeeb;
  --warning: #8d631d;
  --warning-bg: #f8f0df;
  --info: #376f97;
  --info-bg: #eaf1f7;
  --shadow: 0 1px 3px rgba(24, 40, 31, .04);
  --shadow-lg: 0 14px 40px rgba(24, 40, 31, .12);
  --primary: var(--accent);
  --primary-hover: var(--accent-hover);
  --bg: var(--bg-main);
  --text: var(--text-primary);
  --surface: var(--bg-secondary);
  --card-bg: var(--bg-card);
  --border-hover: var(--border-light);
}

/* Override the customer portal's explicit light-mode tokens. */
:root.light-mode {
  --cp-bg: var(--bg-main);
  --cp-bg-card: var(--bg-card);
  --cp-bg-card-solid: var(--bg-card);
  --cp-bg-card-hover: var(--bg-card-hover);
  --cp-bg-input: var(--bg-input);
  --cp-bg-elevated: var(--bg-secondary);
  --cp-border: var(--border);
  --cp-border-hover: var(--border-light);
  --cp-text: var(--text-primary);
  --cp-text-muted: var(--text-muted);
  --cp-text-secondary: var(--text-secondary);
  --cp-text-heading: var(--text-heading);
  --cp-shadow: var(--shadow-lg);
  --cp-shadow-sm: var(--shadow);
  --cp-shadow-glow: none;
  --cp-bg-header: var(--bg-card);
  --cp-bg-nav: var(--bg-card);
  --cp-border-nav: var(--border);
  --cp-shadow-nav: none;
  --cp-text-nav-inactive: var(--text-muted);
  --cp-header-btn-hover: var(--bg-hover);
  --cp-bg-body-grad-1: transparent;
  --cp-bg-body-grad-2: transparent;
  --cp-badge-bg: var(--bg-secondary);
  --cp-bg-sidebar: var(--bg-card);
}

body {
  font-family: var(--font-stack);
  background-image: none;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea { accent-color: var(--accent); }
::selection { background: var(--action-bg); color: var(--on-action); }
:is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Application frame. Keep the existing navigation and responsive geometry. */
.header { background: var(--bg-secondary); box-shadow: none; }
.sidebar { background: var(--bg-secondary); }
.sidebar-logo h1 { font-weight: 700; letter-spacing: -.04em; }
.sidebar-logo span { color: var(--text-secondary); font-size: .68rem; }
.logo-icon, .loader-logo, .login-logo-icon {
  background: var(--action-bg);
  color: var(--on-action);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  box-shadow: none;
  font-weight: 700;
  letter-spacing: -.04em;
}
.nav-section-title { letter-spacing: .09em; font-size: .65rem; }
.nav-item { color: var(--text-secondary); font-size: .82rem; border-radius: 5px; }
.nav-item svg { width: 18px; height: 18px; stroke-width: 1.7; }
.nav-item:hover { background: var(--bg-hover); transform: none; }
.nav-item.active { color: var(--text-heading); background: var(--accent-light); }
.nav-item.active svg { color: var(--text-heading); }
.nav-item.active:not(.nav-sub-item)::before { width: 2px; }
.nav-badge { color: var(--on-action); background: var(--action-bg); border-radius: 4px; font-weight: 600; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); }
.header-tab.active, body.light-theme .header-tab.active { color: var(--text-heading); }
.header-tab:hover { border-bottom-color: var(--border-light); }
.header-profile-btn, .hpd-avatar, .sp-header-avatar, .cp-header-avatar {
  background: var(--action-bg);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--on-action);
}
.header-profile-btn:hover, .sp-header-avatar:hover, .cp-header-avatar:hover {
  transform: none;
  box-shadow: none;
  background: var(--action-hover);
}
.header-actions .notif-bell { border: 1px solid transparent; border-radius: 6px; }
.header-actions .notif-bell:hover { border-color: var(--border); }
.ui-icon { width: 18px; height: 18px; flex-shrink: 0; vertical-align: middle; }
.notif-badge { box-shadow: none; }

/* Keep identity blocks and reference labels quiet; reserve lime for actions. */
.logo-icon, .loader-logo, .login-logo-icon,
.header-profile-btn, .hpd-avatar, .sp-header-avatar, .cp-header-avatar,
.login-wrap .login-logo, .cp-login-card .cp-login-logo {
  background: var(--bg-card-hover);
  color: var(--text-heading);
  border-color: var(--border-light);
}
.header-profile-btn:hover, .sp-header-avatar:hover, .cp-header-avatar:hover {
  background: var(--bg-card-hover);
  border-color: var(--text-muted);
}
.kanban-card .kanban-card-kontak { color: var(--text-secondary); }

/* One action hierarchy across forms, lists and portals. !important is limited
   to paint properties where module templates ship their own inline styling. */
.btn, .cp-btn, .sp-action-btn { font-weight: 600; box-shadow: none; }
.btn-primary, .login-btn, .cp-btn-primary, .sp-action-btn.primary {
  background: var(--action-bg) !important;
  color: var(--on-action) !important;
  border-color: var(--action-bg) !important;
  box-shadow: none !important;
}
.btn-primary:hover, .login-btn:hover, .cp-btn-primary:hover, .sp-action-btn.primary:hover {
  background: var(--action-hover) !important;
  box-shadow: none;
  transform: none;
}
.btn-secondary, .btn-ghost, .cp-btn-secondary {
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.btn-secondary:hover, .btn-ghost:hover, .cp-btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-light);
  transform: none;
}
.btn-danger, .sp-action-btn.danger {
  background: #9e413c;
  border-color: #9e413c;
  color: #fff;
  box-shadow: none;
}
.btn-success, .sp-action-btn.success { background: #326c4b; color: #fff; box-shadow: none; }
.sp-action-btn.warning { background: #835c20; color: #fff; box-shadow: none; }
.btn-primary:disabled, .login-btn:disabled, .cp-btn-primary:disabled {
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
}
.form-input, .form-select, .form-textarea, .form-control,
.cp-form-input, .cp-form-select, .cp-form-textarea, .cp-input {
  background: var(--bg-input);
  border-color: var(--border);
  border-width: 1px;
  color: var(--text-primary);
}
.form-input:focus, .form-select:focus, .form-textarea:focus, .form-control:focus,
.cp-form-input:focus, .cp-form-select:focus, .cp-form-textarea:focus, .cp-input:focus {
  background: var(--bg-input);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
select option, select.form-input option, select.form-select option, select.form-control option {
  background: var(--bg-card);
  color: var(--text-primary);
}
.form-group label, .cp-form-group label {
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* Filled accent states need dark text on lime and light text in light mode. */
.time-opt.sel, .wizard-step-indicator.active .wizard-step-circle,
.cw-step-dot.active, .pm-add-btn, .archive-filter-btn.active,
.sync-tab.active, .sync-group-count, .chat-item-badge, .chat-bubble.mine,
.card-chat-header-btn:hover, .card-chat-trigger-btn:hover, .sp-vtl-dot.current,
.sp-step-dot.active, .sp-jobs-tab.active, .wizard-dot.active, .toast-info,
.sp-tl-dot.current, .sp-detail-tab.active, .sp-tab-scroll-btn:hover,
.cp-booking-step.active .dot, .cp-cal-day.selected, .cp-jobs-tab.active,
.cp-advisor-contact-btn.phone:hover { color: var(--on-accent); }

/* Data surfaces. Color carries status; boundaries and type carry hierarchy. */
.stat-card { box-shadow: none; }
.stat-card:hover { transform: none; box-shadow: none; }
.stat-icon { border-radius: 6px; }
.stat-icon.purple { background: var(--accent-light); }
.stat-info h3 { font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.section-header h2 { font-weight: 650; letter-spacing: -.02em; }
th { color: var(--text-secondary); text-transform: none; letter-spacing: 0; font-size: .75rem; }
td { font-variant-numeric: tabular-nums; }
.status-badge { border-radius: 5px; font-weight: 500; }
.kanban-column { background: var(--bg-secondary); border-radius: 7px; }
.kanban-column-header { padding: 13px 14px; }
.kanban-column-header h3 { font-weight: 600; letter-spacing: -.01em; }
.kanban-count { border-radius: 4px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.kanban-card { border-color: var(--border); border-radius: 7px; box-shadow: var(--shadow); }
.kanban-card:hover { border-color: var(--border-light); box-shadow: var(--shadow); transform: none; }
.kanban-card.dragging { opacity: .5; transform: rotate(2deg); }
.kanban-card-plate { font-weight: 650; letter-spacing: .025em; font-variant-numeric: tabular-nums; }
.kanban-card-people { border-top-style: solid; border-top-color: var(--border); }
.kanban-card-vehicle { color: var(--text-secondary); }
.kanban-card-description {
  background: var(--bg-input) !important;
  border-color: var(--border) !important;
}
.kanban-card-related { background: var(--accent-light); color: var(--text-secondary); }
.kanban-card-related:hover { background: var(--bg-card-hover); }
.kanban-card-days { box-shadow: none; }
/* Portal status labels share this existing title prefix in full/compact cards.
   Override only their inline presentation; keep status logic and click actions. */
.kanban-card span[title^="Durum:"] {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  padding: 2px 7px !important;
  font-size: .68rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  box-shadow: none;
  transform: none !important;
  opacity: 1 !important;
  transition: var(--transition) !important;
}
.kanban-card span[title^="Durum:"]:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-light) !important;
  color: var(--text-heading) !important;
}
.kanban-group-tab { border-radius: 5px; }
.kanban-group-tab.active { background: var(--accent-light); color: var(--text-heading); border-color: var(--border-light); }
.modal, .header-profile-dropdown, .notif-panel { box-shadow: var(--shadow-lg); }
/* Detail tabs use a quiet dark green; primary action buttons retain lime. */
.modal-tab.active, .modal-tab.active:hover {
  background: #012f13;
  box-shadow: inset 0 0 0 1px #294c2c;
  transform: none;
}
.modal-tab.active .tab-label { color: #e2f0cc; }
.initial-loader-card { animation: none; box-shadow: none; backdrop-filter: none; }
.loader-progress-line { background: var(--accent); }
/* Increased specificity also covers styles injected by the management module. */
body .mng-title { font-weight: 650; font-size: 1.5rem; }
body .mng-toolbar, body .mng-mode-switch { border-radius: var(--radius); box-shadow: none; }
body .mng-mode-btn { font-size: .85rem; border-radius: var(--radius-sm); }

/* Sign-in surfaces: quiet background, clear form and a restrained wordmark. */
body:has(> .login-container) { background: var(--bg-main); overflow-y: auto; }
.login-bg { background: none; }
.login-bg::before, .login-bg::after,
.cp-login-wrap::before, .cp-login-wrap::after { content: none; }
.login-wrap, .cp-login-wrap { background: var(--bg-main); }
.login-container { max-width: 460px; }
.login-card, .cp-login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 9px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none;
}
.login-card h1, .cp-login-card h1 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text-heading);
  font-weight: 650;
  letter-spacing: -.035em;
}
.login-logo h1 { font-size: 1.8rem; }
.login-card .login-subtitle, .login-footer { color: var(--text-muted); }
.login-form-group label { color: var(--text-secondary); font-weight: 500; letter-spacing: 0; }
.login-input {
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  border-radius: 6px;
  font-size: .9rem;
}
.login-input::placeholder { color: var(--text-muted); opacity: .8; }
.login-input:focus { border-color: var(--accent); background: var(--bg-input); box-shadow: 0 0 0 3px var(--accent-light); }
.login-btn { border-radius: 6px; font-size: .9rem; font-weight: 600; letter-spacing: 0; }
.password-toggle { color: var(--text-muted); filter: grayscale(1); }
.portal-login-tabs, .cp-login-tabs { border: 1px solid var(--border); background: var(--bg-input); }
.portal-login-tab.active, .cp-login-tab.active {
  background: var(--bg-card-hover);
  color: var(--text-heading);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.login-wrap .login-logo, .cp-login-logo {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card-hover);
  color: var(--text-heading);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 7px;
  color: var(--text-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.04em;
  filter: none;
}

/* Customer / supplier portal cards and navigation. */
.cp-header, .sp-header { background: var(--cp-bg-header); backdrop-filter: none; box-shadow: none; }
.sp-bottom-nav { background: var(--bg-secondary); border-color: var(--border); backdrop-filter: none; }
.sp-nav-item.active { background: var(--accent-light); }
.cp-brand-name, .sp-brand-name {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text-heading);
}
.cp-brand-badge, .sp-brand-badge { background: var(--action-bg); box-shadow: none; color: var(--on-action); }
.cp-nav-item.active .nav-icon svg, .sp-nav-item.active .nav-icon svg { filter: none; }
.cp-nav-item.active .nav-icon, .sp-nav-item.active .nav-icon { transform: none; }
.cp-vehicle-card, .cp-appt-card, .sp-plate-hero { background: var(--bg-card); border-color: var(--border); box-shadow: none; }
.cp-vehicle-card:hover, .cp-appt-card:hover, .sp-type-card:hover { transform: none; border-color: var(--border-light); }
.cp-vehicle-card::before { background: var(--accent); }
.cp-hero-cta { color: var(--on-action); background: var(--action-bg); border-radius: var(--cp-radius); box-shadow: none; }
.cp-hero-cta::before { content: none; }
.cp-hero-cta-title, .cp-hero-cta-desc { color: var(--on-action); }
.cp-hero-cta:hover { background: var(--action-hover); transform: none; box-shadow: none; }
.sp-type-card.selected { background: var(--accent-light); border-color: var(--accent); box-shadow: none; }
.sp-action-btn:hover { box-shadow: none; }

@media (max-width: 480px) {
  .login-container { padding: 16px; }
  .login-card, .cp-login-card { padding: 30px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .animate-in, .cp-page, .cp-login-card { animation: none; }
  .btn, .cp-btn, .nav-item, .kanban-card { transition: none; }
}