/* ============================================================
   FLOSYS CRM - BRAND STYLES
   Brand Colors:
     Dark Grey:  #3C3C3C  (Sidebar)
     Bright Blue: #00AEEF (Primary, Navbar, Actions)
     Light Green: #B5D334 (Success, Accents)
   ============================================================ */

/* ----- CSS CUSTOM PROPERTIES (Overrides AdminLTE Bootstrap) ----- */
:root,
[data-bs-theme="light"] {
  --bs-primary: #00AEEF;
  --bs-primary-rgb: 0, 174, 239;
  --bs-success: #B5D334;
  --bs-success-rgb: 181, 211, 52;
  --bs-link-color: #00AEEF;
  --bs-link-color-rgb: 0, 174, 239;
  --bs-link-hover-color: #0095CC;
  --bs-link-hover-color-rgb: 0, 149, 204;
  --bs-primary-text-emphasis: #006F9A;
  --bs-primary-bg-subtle: #E6F7FE;
  --bs-primary-border-subtle: #80D9F9;
  --bs-success-text-emphasis: #7A9423;
  --bs-success-bg-subtle: #F0F7D6;
  --bs-success-border-subtle: #DAE99A;
}

/* Dark theme variables */
[data-bs-theme="dark"] {
  --bs-primary: #00AEEF;
  --bs-primary-rgb: 0, 174, 239;
  --bs-success: #B5D334;
  --bs-success-rgb: 181, 211, 52;
  --bs-link-color: #4DC8F5;
  --bs-link-color-rgb: 77, 200, 245;
  --bs-link-hover-color: #80D9F9;
}

/* ===========================================
    LOGIN PAGE ONLY (standalone - no header.php)
    =========================================== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f1 100%);
}

.login-card{
  width:100%;
  max-width:420px;
  border:none;
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
  margin: auto;
}

.login-header{
  background: linear-gradient(135deg, #00AEEF 0%, #0095CC 100%);
  color:#fff;
  text-align:center;
  padding:25px;
}

.login-header h3{
  margin:0;
  font-weight:700;
  color: #ffffff;
}

.crm-logo{
  width:80px;
  height:80px;
  background:#ffffff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:auto;
  margin-bottom:15px;
  font-size:30px;
  font-weight:bold;
  padding: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.crm-logo img {
  max-width: 60px;
  max-height: 60px;
}

.btn-login{
  height:50px;
  font-weight:600;
  border-radius: 8px;
}

.footer-text{
  font-size:13px;
  color:#6c757d;
}

/* ===========================================
   SIDEBAR (#3C3C3C Dark Grey)
   =========================================== */
.app-sidebar {
  background-color: #3C3C3C !important;
  grid-area: lte-app-sidebar;
}

.app-sidebar .sidebar-wrapper {
  grid-area: unset;
}

.app-sidebar .sidebar-brand {
  background-color: #333333;
}

.app-sidebar .brand-link {
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.app-sidebar .brand-link .brand-text {
  color: #ffffff !important;
  font-weight: 600;
}

/* Sidebar menu items */
.app-sidebar .nav-sidebar .nav-link {
  color: rgba(255, 255, 255, 0.75);
  transition: all 0.2s ease;
}

.app-sidebar .nav-sidebar .nav-link:hover {
  color: #ffffff;
  background-color: rgba(0, 174, 239, 0.15);
}

.app-sidebar .nav-sidebar .nav-link.active {
  color: #ffffff;
  background: linear-gradient(90deg, #00AEEF, #0095CC);
  box-shadow: 0 2px 6px rgba(0, 174, 239, 0.3);
}

/* Treeview / submenu */
.app-sidebar .nav-sidebar .nav-treeview .nav-link {
  padding-left: 2.5rem;
}

.app-sidebar .nav-sidebar .nav-treeview .nav-link.active {
  background: rgba(0, 174, 239, 0.2);
  border-left: 3px solid #00AEEF;
  box-shadow: none;
}

/* Sidebar icons — make active icons white */
.app-sidebar .nav-sidebar .nav-link.active .nav-icon {
  color: #ffffff !important;
}

/* Menu open state */
.app-sidebar .nav-sidebar .nav-item.menu-open > .nav-link {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Sidebar nav header */
.app-sidebar .nav-header {
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 1px;
  padding: 0.75rem 1rem 0.25rem;
}

/* Chevron arrows in sidebar */
.app-sidebar .nav-sidebar .nav-arrow {
  transition: transform 0.3s ease;
}

.app-sidebar .nav-sidebar .nav-item.menu-open .nav-arrow {
  transform: rotate(90deg);
}

/* ===========================================
   NAVBAR (#00AEEF Bright Blue)
   =========================================== */
.app-header.navbar {
  background: linear-gradient(135deg, #00AEEF 0%, #0095CC 100%) !important;
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(0, 174, 239, 0.25);
  grid-area: lte-app-header;
}

.app-header.navbar .nav-link {
  color: #ffffff !important;
}

.app-header.navbar .nav-link:hover {
  color: rgba(255, 255, 255, 0.85) !important;
}

.app-header.navbar .navbar-badge {
  background-color: #B5D334 !important;
  color: #3C3C3C !important;
}

/* Keep navbar brand color even in dark mode */
[data-bs-theme="dark"] .app-header.navbar {
  background: linear-gradient(135deg, #00AEEF 0%, #0095CC 100%) !important;
}

[data-bs-theme="dark"] .app-header.navbar .nav-link {
  color: #ffffff !important;
}

/* User dropdown header */
.app-header .user-header.text-bg-primary {
  background: linear-gradient(135deg, #00AEEF, #0095CC) !important;
}

.app-header .user-header.text-bg-primary img {
  border: 3px solid rgba(255, 255, 255, 0.4);
}

/* ===========================================
   BUTTONS
   =========================================== */
.btn-primary {
  background-color: #00AEEF !important;
  border-color: #00AEEF !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #0095CC !important;
  border-color: #0095CC !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 174, 239, 0.35) !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: #6CD0F7 !important;
  border-color: #6CD0F7 !important;
}

.btn-success {
  background-color: #B5D334 !important;
  border-color: #B5D334 !important;
  color: #3C3C3C !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: #A3BD2E !important;
  border-color: #A3BD2E !important;
  color: #3C3C3C !important;
  box-shadow: 0 0 0 0.25rem rgba(181, 211, 52, 0.35) !important;
}

.btn-outline-primary {
  color: #00AEEF !important;
  border-color: #00AEEF !important;
}

.btn-outline-primary:hover {
  background-color: #00AEEF !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 174, 239, 0.35) !important;
}

.btn-outline-success {
  color: #B5D334 !important;
  border-color: #B5D334 !important;
}

.btn-outline-success:hover {
  background-color: #B5D334 !important;
  color: #3C3C3C !important;
  box-shadow: 0 0 0 0.25rem rgba(181, 211, 52, 0.35) !important;
}

/* ===========================================
   BADGES
   =========================================== */
.bg-primary,
.badge.bg-primary,
.text-bg-primary {
  background-color: #00AEEF !important;
}

.bg-success,
.badge.bg-success,
.text-bg-success {
  background-color: #B5D334 !important;
  color: #3C3C3C !important;
}

.badge.text-bg-warning {
  background-color: #B5D334 !important;
  color: #3C3C3C !important;
}

/* ===========================================
   ALERTS
   =========================================== */
.alert-primary {
  background-color: #E6F7FE;
  border-color: #80D9F9;
  color: #006F9A;
}

.alert-success {
  background-color: #F0F7D6;
  border-color: #DAE99A;
  color: #7A9423;
}

/* ===========================================
   PROGRESS BARS
   =========================================== */
.progress-bar.bg-primary {
  background: linear-gradient(90deg, #00AEEF, #0095CC) !important;
}

.progress-bar.bg-success {
  background: linear-gradient(90deg, #B5D334, #A3BD2E) !important;
}

/* ===========================================
   SMALL BOX / INFO BOX (Dashboard widgets)
   =========================================== */
.small-box.bg-primary,
.small-box.text-bg-primary {
  background: linear-gradient(135deg, #00AEEF, #0095CC) !important;
  border-radius: 12px;
}

.small-box.bg-success,
.small-box.text-bg-success {
  background: linear-gradient(135deg, #B5D334, #A3BD2E) !important;
  color: #3C3C3C !important;
  border-radius: 12px;
}

.info-box.bg-primary {
  background: linear-gradient(135deg, #00AEEF, #0095CC) !important;
  border-radius: 10px;
}

/* ===========================================
   FORM CONTROLS
   =========================================== */
.form-control:focus {
  border-color: #00AEEF;
  box-shadow: 0 0 0 0.2rem rgba(0, 174, 239, 0.25);
}

.sidebar-brand .brand-link .brand-image {
  border-radius: 5px;
  background-color: #ffffff;
  padding: 5px;
}

/* ===========================================
   LINKS
   =========================================== */
a {
  color: #00AEEF;
}

a:hover {
  color: #0095CC;
}

[data-bs-theme="dark"] a {
  color: #4DC8F5;
}

[data-bs-theme="dark"] a:hover {
  color: #80D9F9;
}

/* ===========================================
   PAGINATION
   =========================================== */
.page-item.active .page-link {
  background-color: #00AEEF;
  border-color: #00AEEF;
}

.page-link {
  color: #00AEEF;
}

.page-link:hover {
  color: #0095CC;
}

/* ===========================================
   TABLES
   =========================================== */
.table thead.table-primary {
  background-color: #00AEEF;
  color: #ffffff;
}

/* ===========================================
   MODAL HEADER
   =========================================== */
.modal-header.bg-primary {
  background: linear-gradient(135deg, #00AEEF, #0095CC) !important;
  color: #ffffff !important;
}

.modal-header.bg-primary .modal-title {
  color: #ffffff;
}

.modal-header.bg-primary .btn-close {
  filter: brightness(0) invert(1);
}

/* ===========================================
   DROPDOWNS
   =========================================== */
.dropdown-item.active,
.dropdown-item:active {
  background-color: #00AEEF;
}

/* ===========================================
   CHECKBOX & RADIO
   =========================================== */
.form-check-input:checked {
  background-color: #00AEEF;
  border-color: #00AEEF;
}

/* ===========================================
   NAV TABS
   =========================================== */
.nav-tabs .nav-link.active {
  color: #00AEEF;
  border-bottom-color: #00AEEF;
}

.nav-tabs .nav-link:hover {
  border-bottom-color: rgba(0, 174, 239, 0.3);
}

/* ===========================================
   SWITCH / TOGGLE
   =========================================== */
.form-switch .form-check-input:checked {
  background-color: #00AEEF;
  border-color: #00AEEF;
}

/* ===========================================
   THEME TOGGLE (hide caret)
   =========================================== */
.app-header .nav-link.dropdown-toggle::after {
  display: none;
}

/* ===========================================
   TOAST
   =========================================== */
.toast.bg-primary {
  background: linear-gradient(135deg, #00AEEF, #0095CC) !important;
  color: #ffffff !important;
}

/* ===========================================
   FOOTER
   =========================================== */
.app-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  color: #6c757d;
  grid-area: lte-app-footer;
}

/* ===========================================
   RESPONSIVE SIDEBAR
   =========================================== */
@media (max-width: 991.98px) {
  .app-sidebar {
    background-color: #3C3C3C !important;
  }
}