/* ═══════════════════════════════════════════════════════════
   Flowbook Theme — Navy Blue & Royal Blue with White Text
   Overrides Tiledesk compiled styles with !important
   ═══════════════════════════════════════════════════════════ */

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar,
.sidebar-wrapper,
.sidebar .sidebar-wrapper,
.sidebar-background,
nav.sidebar,
app-sidebar .sidebar,
app-sidebar {
  background: linear-gradient(180deg, #1a237e 0%, #0d1442 100%) !important;
}

.sidebar .nav li a,
.sidebar .nav li .nav-link,
.sidebar-wrapper .nav li a,
.sidebar .nav a,
.sidebar .sidebar-wrapper .nav a {
  color: rgba(255,255,255,0.7) !important;
}

.sidebar .nav li a:hover,
.sidebar .nav li .nav-link:hover,
.sidebar .nav li.active > a,
.sidebar .nav li.active > .nav-link,
.sidebar .nav li a.active,
.sidebar .nav a.active {
  background-color: #1565c0 !important;
  color: #ffffff !important;
}

.sidebar .logo,
.sidebar-wrapper .logo,
.sidebar .logo-container {
  background: #0d1442 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.sidebar .logo a,
.sidebar .logo span,
.sidebar .logo p,
.sidebar .logo-container * {
  color: #ffffff !important;
}

/* ── Top Navbar ──────────────────────────────────────────── */
.navbar,
.main-panel .navbar,
nav.navbar,
.navbar-default {
  background: #ffffff !important;
  border-bottom: 2px solid #e3f2fd !important;
  box-shadow: 0 1px 4px rgba(26,35,126,0.08) !important;
}

/* ── Primary Buttons — Navy → Royal Blue gradient ────────── */
.btn-primary,
button.btn-primary,
a.btn-primary,
.btn-primary:active,
.btn-primary:focus {
  background: linear-gradient(135deg, #1a237e 0%, #1565c0 100%) !important;
  border-color: #1565c0 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(21,101,192,0.3) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%) !important;
  border-color: #1976d2 !important;
  box-shadow: 0 4px 12px rgba(21,101,192,0.4) !important;
}

.btn-outline-primary {
  color: #1565c0 !important;
  border-color: #1565c0 !important;
}

.btn-outline-primary:hover {
  background: #1565c0 !important;
  color: #ffffff !important;
}

/* Override the green #4CAF50 brand with royal blue */
.btn-success,
button.btn-success {
  background: #1565c0 !important;
  border-color: #1565c0 !important;
}

/* ── Login / Signup / Auth Pages ─────────────────────────── */
.login-page,
.signup-container,
.auth-container,
.auth-wrapper,
.signin-wrapper,
.signup-wrapper,
.centered-page,
.register-page,
app-signin,
app-signup {
  background: linear-gradient(135deg, #0d1442 0%, #1a237e 40%, #1565c0 100%) !important;
}

.login-page .card,
.signup-container .card,
.auth-container .card,
.centered-page .card,
.login-card,
.auth-card {
  border-radius: 16px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Auth page buttons */
#go-to-signup-btn,
.auth-btn,
.signin-btn,
.signup-btn {
  background: linear-gradient(135deg, #1a237e 0%, #1565c0 100%) !important;
  border-color: #1565c0 !important;
  color: #ffffff !important;
}

/* Auth page links */
.login-page a,
.signup-container a,
.auth-container a {
  color: #42a5f5 !important;
}

/* ── Recent Projects Page ────────────────────────────────── */
.recent-project-card,
.project-card,
.recent-project {
  border: 1px solid #e3f2fd !important;
  transition: all 0.2s ease !important;
}

.recent-project-card:hover,
.project-card:hover,
.recent-project:hover {
  border-color: #1565c0 !important;
  box-shadow: 0 4px 16px rgba(21,101,192,0.15) !important;
  transform: translateY(-2px) !important;
}

/* ── Active/Selected States — Royal Blue ─────────────────── */
.active,
.selected,
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
  background-color: #1565c0 !important;
  color: #ffffff !important;
}

/* ── Angular Material Overrides ──────────────────────────── */
.mat-primary,
.mat-flat-button.mat-primary,
.mat-raised-button.mat-primary,
.mat-fab.mat-primary,
.mat-mini-fab.mat-primary,
.mat-mdc-raised-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary,
button[color="primary"] {
  background-color: #1565c0 !important;
  color: #ffffff !important;
}

.mat-checkbox-checked .mat-checkbox-background,
.mat-checkbox-checked.mat-primary .mat-checkbox-background,
.mat-radio-checked .mat-radio-outer-circle,
.mat-mdc-checkbox.mat-primary .mdc-checkbox__background {
  background-color: #1565c0 !important;
  border-color: #1565c0 !important;
}

.mat-tab-label-active,
.mat-tab-label:focus,
.mat-mdc-tab.mdc-tab--active {
  color: #1a237e !important;
}

.mat-ink-bar,
.mat-mdc-tab-header .mdc-tab-indicator__content--underline {
  background-color: #1565c0 !important;
}

.mat-slide-toggle.mat-checked .mat-slide-toggle-bar,
.mat-mdc-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__track {
  background-color: rgba(21,101,192,0.5) !important;
}

.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb,
.mat-mdc-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__handle {
  background-color: #1565c0 !important;
}

/* Material menu and dialogs */
.mat-menu-panel,
.mat-mdc-menu-panel {
  border: 1px solid #e3f2fd !important;
}

/* ── Links ───────────────────────────────────────────────── */
a:not(.btn):not(.nav-link):not(.sidebar a) {
  color: #1565c0;
}

a:not(.btn):not(.nav-link):not(.sidebar a):hover {
  color: #1a237e;
}

/* ── Cards & Panels ──────────────────────────────────────── */
.card .card-header,
.panel .panel-heading {
  border-bottom: 2px solid #e3f2fd !important;
}

/* ── Badges ──────────────────────────────────────────────── */
.badge-primary,
.chip-primary,
.badge-success {
  background-color: #1565c0 !important;
  color: #ffffff !important;
}

/* ── Progress Bars ───────────────────────────────────────── */
.progress-bar,
.mat-progress-bar-fill::after {
  background: linear-gradient(90deg, #1a237e, #1565c0) !important;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px !important;
}

::-webkit-scrollbar-thumb {
  background: #1565c0 !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-track {
  background: #e3f2fd !important;
}

/* ── Focus States ────────────────────────────────────────── */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: #1565c0 !important;
  box-shadow: 0 0 0 3px rgba(21,101,192,0.15) !important;
}

/* ── Selection ───────────────────────────────────────────── */
::selection {
  background: #42a5f5 !important;
  color: #ffffff !important;
}

/* ── Override ALL green (#4CAF50) brand colors ────────────── */
/* These target the CoachAI green that Tiledesk source uses */
[style*="background-color: rgb(76, 175, 80)"],
[style*="background-color:#4CAF50"],
[style*="background-color: #4CAF50"],
[style*="background: #4CAF50"] {
  background-color: #1565c0 !important;
  background: #1565c0 !important;
}

[style*="color: rgb(76, 175, 80)"],
[style*="color:#4CAF50"],
[style*="color: #4CAF50"] {
  color: #1565c0 !important;
}

[style*="border-color: rgb(76, 175, 80)"],
[style*="border-color:#4CAF50"],
[style*="border-color: #4CAF50"] {
  border-color: #1565c0 !important;
}

/* Override Tiledesk salmon/orange accent (#f0806f) */
[style*="background-color: rgb(240, 128, 111)"],
[style*="background-color:#f0806f"],
[style*="background: #f0806f"] {
  background-color: #1a237e !important;
  background: #1a237e !important;
}

/* Override the Neo-Kyoto green (#3ecf8e) */
[style*="background-color:#3ecf8e"],
[style*="background-color: #3ecf8e"],
[style*="background: #3ecf8e"] {
  background-color: #42a5f5 !important;
  background: #42a5f5 !important;
}

/* Override Tiledesk blue (#3ea9f5) with our royal blue */
[style*="background-color:#3ea9f5"],
[style*="background-color: #3ea9f5"],
[style*="background: #3ea9f5"] {
  background-color: #1565c0 !important;
  background: #1565c0 !important;
}

/* ── Chat Widget Bubble ──────────────────────────────────── */
.chat-btn,
.launcher-btn,
.widget-launcher,
#chat21-button {
  background: #1565c0 !important;
}

/* ── Header Project Name ─────────────────────────────────── */
.project-name,
.header-project-name {
  color: #1a237e !important;
  font-weight: 600 !important;
}

/* ── Remove Tiledesk branding remnants ───────────────────── */
[class*="tiledesk-brand"],
.powered-by-tiledesk,
.tiledesk-footer-brand,
[class*="powered-by"] {
  display: none !important;
}

/* ── Tooltips ────────────────────────────────────────────── */
.tooltip .tooltip-inner,
.mat-tooltip {
  background-color: #1a237e !important;
  color: #ffffff !important;
}

/* ── Snackbar / Toast ────────────────────────────────────── */
.mat-snack-bar-container,
.mat-mdc-snack-bar-container {
  background: #1a237e !important;
  color: #ffffff !important;
}

/* ── FAB / Floating Action Button ────────────────────────── */
.fab-button,
.mat-fab,
.mat-mini-fab {
  background-color: #1565c0 !important;
  color: #ffffff !important;
}

/* ── Chip / Tag ──────────────────────────────────────────── */
.mat-chip.mat-primary,
.mat-mdc-chip.mat-primary {
  background-color: #e3f2fd !important;
  color: #1a237e !important;
}