/* Brand override styles to align app UI with landing page color scheme */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
  --primary: #4CAF50;
  --primary-dark: #388E3C;
  --primary-light: #A5D6A7;
  --primary-gradient: linear-gradient(135deg, #4CAF50, #2E7D32);
  --accent: #00C853;
  --text-primary: #333333;
  --text-secondary: #666666;
  --bg-light: #ffffff;
  --bg-off-white: #f8f9fa;
  --bg-card: rgba(76, 175, 80, 0.05);
  --border-color: rgba(76, 175, 80, 0.2);
}

[data-theme="dark"] {
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --bg-light: #1a1a1a;
  --bg-off-white: #242424;
  --bg-card: rgba(76, 175, 80, 0.1);
  --border-color: rgba(76, 175, 80, 0.3);
}

/* Body base */
body { background: var(--bg-light); color: var(--text-primary); }
body, .crm_body_bg { font-family: 'Inter', 'Source Sans Pro', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Cards and common containers */
.white_card,
.card,
.panel,
.box {
  background: var(--bg-light) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* Card Hover micro-interaction */
.white_card:hover,
.card:hover,
.panel:hover,
.box:hover { transform: translateY(-1px); transition: all .2s ease; box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important; }

.white_card_header,
.card-header,
.box-header {
  border-bottom: 1px solid var(--border-color) !important;
}

/* Section titles */
.content-header-title h4,
.content-header-title h6,
.section-title h2,
.page-title { color: var(--primary) !important; }

/* Header (top bar) */
.header_iner { background: var(--bg-light); border-bottom: 1px solid var(--border-color); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); }
.header_iner .nav_title span, .header_iner, .header_iner a { color: var(--text-primary); }

/* Sidebar */
.sidebar { background: var(--bg-light); border-right: 1px solid var(--border-color); }
.sidebar .nav_title span { color: var(--text-primary); }
.sidebar a { color: var(--text-secondary); }
.sidebar a.active, .sidebar a:hover { color: var(--primary); background: var(--bg-card); }

/* Form controls */
.form-control,
textarea.form-control,
select.form-control {
  background: var(--bg-off-white) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 10px !important;
}
.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(76,175,80,0.15) !important;
}
::placeholder { color: var(--text-secondary); opacity: .8; }

/* Input groups */
.input-group-text { background: var(--bg-off-white); border: 1px solid var(--border-color); color: var(--text-secondary); }

/* Buttons */
.btn-primary { background: var(--primary) !important; border-color: var(--primary) !important; }
.btn-primary:hover { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; }
.btn-outline-primary { color: var(--primary) !important; border-color: var(--primary) !important; }
.btn-outline-primary:hover { background: var(--primary) !important; color: #fff !important; }
.btn_1, .btn_2 { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.btn_1:hover, .btn_2:hover { background: var(--primary-dark) !important; }
.btn-pill, .btn.btn-pill { border-radius: 9999px !important; }

/* Badges */
.badge-primary, .badge-success { background: var(--primary) !important; color: #fff !important; }
.badge-outline-primary { color: var(--primary) !important; border: 1px solid var(--primary) !important; background: transparent !important; }

/* Tabs */
.nav-tabs .nav-link { color: var(--text-secondary) !important; border: 1px solid var(--border-color) !important; }
.nav-tabs .nav-link.active { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }

/* Tables */
.table thead th { background: var(--bg-card) !important; color: var(--text-primary) !important; border-bottom: 1px solid var(--border-color) !important; }
.table tbody tr { border-bottom: 1px solid var(--border-color) !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(76,175,80,0.03) !important; }
.table-hover tbody tr:hover { background-color: rgba(76,175,80,0.06) !important; }

/* Alerts */
.alert-info { background: rgba(76,175,80,0.1) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }
.alert-success { background: rgba(76,175,80,0.15) !important; border-color: var(--border-color) !important; }

/* Dropdowns & Modals */
.dropdown-menu { background: var(--bg-light); border: 1px solid var(--border-color); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.dropdown-item { color: var(--text-primary); }
.dropdown-item:hover { background: var(--bg-card); color: var(--text-primary); }
.modal-content { background: var(--bg-light); color: var(--text-primary); border: 1px solid var(--border-color); box-shadow: 0 16px 40px rgba(0,0,0,0.2); }
.modal-header, .modal-footer { border-color: var(--border-color); }

/* Links */
a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

/* Theme toggle button */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid rgba(76,175,80,0.3); background:transparent; color:inherit; cursor:pointer; }
.theme-toggle:hover { background: var(--bg-card); }

/* Reserve safe space at the bottom on small screens to avoid fixed bottom nav overlays */
@media (max-width: 768px) {
  /* Apply padding to common content wrappers */
  body,
  .crm_body_bg,
  .container,
  .container-fluid,
  .my-3,
  .my-3.mx-3.my-md-5 {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 88px) !important;
  }
}