/* ==========================================================================
   Upraj Solutions — Component Layer
   Buttons, Cards, Tables, Forms, Modals, Alerts, Badges, KPI, Charts
   All rules layered on top of existing Bootstrap without breaking classes.
   ========================================================================== */

/* -------------------------------------------------- BUTTONS */
.btn {
  font-family: var(--u-font-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--u-radius-sm);
  padding: 0.55rem 1.15rem;
  transition:
    transform var(--u-dur-fast) var(--u-ease),
    box-shadow var(--u-dur) var(--u-ease),
    background-color var(--u-dur) var(--u-ease),
    border-color var(--u-dur) var(--u-ease),
    color var(--u-dur) var(--u-ease);
  will-change: transform;
  border-width: 1px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, var(--u-blue-500) 0%, var(--u-blue-600) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(0, 68, 255, .55);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--u-blue-600) 0%, var(--u-blue-700) 100%);
  box-shadow: 0 14px 28px -8px rgba(0, 68, 255, .65);
  color: #fff;
}

.btn-outline-primary {
  color: var(--u-blue-500);
  border-color: var(--u-blue-500);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--u-blue-500);
  border-color: var(--u-blue-500);
  color: #fff;
  box-shadow: 0 10px 22px -8px rgba(0, 68, 255, .45);
}

.btn-warning {
  background: linear-gradient(135deg, #fbbf24, var(--u-accent));
  border-color: transparent;
  color: #1a1300;
  box-shadow: 0 8px 20px -8px rgba(245, 179, 1, .5);
}
.btn-warning:hover { color: #1a1300; box-shadow: 0 12px 26px -8px rgba(245, 179, 1, .6); }

.btn-success { background: linear-gradient(135deg, #10b981, #059669); border-color: transparent; color: #fff; }
.btn-danger  { background: linear-gradient(135deg, #ef4444, #dc2626); border-color: transparent; color: #fff; }
.btn-secondary { background: var(--u-surface-2); color: var(--u-text); border-color: var(--u-border); }
.btn-outline-secondary { color: var(--u-text-soft); border-color: var(--u-border-strong); background: transparent; }
.btn-outline-secondary:hover { background: var(--u-surface-2); color: var(--u-text); border-color: var(--u-border-strong); }

.btn-outline-light {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(6px);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, .2); color: #fff; border-color: #fff; }

.btn-sm { padding: 0.35rem 0.8rem; font-size: 0.85rem; }
.btn-lg { padding: 0.8rem 1.5rem; font-size: 1.05rem; }

/* Custom pill CTA for landing (used by class .btn-learn) */
.btn-learn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border-radius: var(--u-radius-pill);
  background: linear-gradient(135deg, #fff, #eef4ff);
  color: var(--u-blue-600);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgba(0, 68, 255, .4);
  transition: transform var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}
.btn-learn:hover { transform: translateY(-2px); color: var(--u-blue-700); box-shadow: 0 16px 32px -10px rgba(0, 68, 255, .55); }

/* -------------------------------------------------- CARDS */
.card {
  background: var(--u-surface) !important;
  border: 1px solid var(--u-border) !important;
  border-radius: var(--u-radius-md) !important;
  box-shadow: var(--u-shadow-sm);
  transition: transform var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease), border-color var(--u-dur) var(--u-ease);
  color: var(--u-text);
}
.card:hover, .card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--u-shadow-md);
  border-color: var(--u-blue-200);
}
.card-body { color: var(--u-text); }
.card-title { color: var(--u-text); font-family: var(--u-font-display); font-weight: 700; }
.card-text { color: var(--u-text-soft); }
.card-header {
  background: var(--u-surface-2);
  border-bottom: 1px solid var(--u-border);
  font-weight: 600;
  color: var(--u-text);
}

/* Glass card variant */
.u-glass {
  background: var(--u-glass-bg) !important;
  backdrop-filter: blur(var(--u-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--u-glass-blur)) saturate(140%);
  border: 1px solid var(--u-glass-border) !important;
  box-shadow: var(--u-shadow-md);
}
.u-glass-strong {
  background: var(--u-glass-bg-strong) !important;
  backdrop-filter: blur(calc(var(--u-glass-blur) + 6px)) saturate(160%);
  -webkit-backdrop-filter: blur(calc(var(--u-glass-blur) + 6px)) saturate(160%);
  border: 1px solid var(--u-glass-border) !important;
}

/* -------------------------------------------------- KPI CARDS (dashboard) */
.u-kpi {
  position: relative;
  padding: 1.25rem 1.25rem;
  border-radius: var(--u-radius-md);
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  overflow: hidden;
  isolation: isolate;
}
.u-kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 68, 255, .06), transparent 60%);
  z-index: -1;
  transition: opacity var(--u-dur) var(--u-ease);
}
.u-kpi__label { color: var(--u-text-muted); font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.u-kpi__value { color: var(--u-text); font-family: var(--u-font-display); font-size: 2rem; font-weight: 800; line-height: 1.1; margin-top: .35rem; }
.u-kpi__delta { display: inline-flex; align-items: center; gap: .25rem; margin-top: .5rem; font-size: .85rem; font-weight: 600; }
.u-kpi__delta.up { color: var(--u-success); }
.u-kpi__delta.down { color: var(--u-danger); }
.u-kpi__icon {
  position: absolute; top: 1rem; right: 1rem;
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--u-blue-500), var(--u-cyan-400));
  color: #fff; font-size: 1.15rem;
  box-shadow: 0 8px 18px -6px rgba(0, 68, 255, .5);
}

/* -------------------------------------------------- TABLES */
.table {
  --bs-table-bg: transparent;
  color: var(--u-text);
  border-color: var(--u-border);
  border-collapse: separate;
  border-spacing: 0;
}
.table > :not(caption) > * > * {
  background: transparent;
  color: var(--u-text);
  border-color: var(--u-border);
  padding: 0.85rem 1rem;
}
.table thead th,
.table > thead > tr > th {
  background: var(--u-surface-2) !important;
  color: var(--u-text-soft) !important;
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--u-border-strong) !important;
  position: sticky;
  top: 0;
  z-index: 2;
}
.table tbody tr {
  transition: background var(--u-dur-fast) var(--u-ease);
}
.table tbody tr:hover td { background: var(--u-blue-50) !important; }
html[data-theme="dark"] .table tbody tr:hover td { background: rgba(0, 183, 255, 0.06) !important; }

.table-light > :not(caption) > * > * {
  background: var(--u-surface-2) !important;
  color: var(--u-text-soft) !important;
}
.table-bordered > :not(caption) > * > * { border-color: var(--u-border) !important; }

/* Wrap tables in .u-table-wrap for glass container + rounded corners */
.u-table-wrap {
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius-md);
  overflow: hidden;
  box-shadow: var(--u-shadow-sm);
}
.u-table-wrap > .table { margin: 0; }

/* -------------------------------------------------- FORMS */
.form-label { color: var(--u-text-soft); font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.form-control,
.form-select {
  background: var(--u-surface) !important;
  color: var(--u-text) !important;
  border: 1px solid var(--u-border-strong) !important;
  border-radius: var(--u-radius-sm) !important;
  padding: 0.6rem 0.85rem;
  font-size: .95rem;
  transition: border-color var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease), background var(--u-dur) var(--u-ease);
}
.form-control::placeholder { color: var(--u-text-muted); opacity: .7; }
.form-control:focus, .form-select:focus {
  background: var(--u-surface) !important;
  color: var(--u-text) !important;
  border-color: var(--u-blue-500) !important;
  box-shadow: var(--u-shadow-glow) !important;
}
.form-control:disabled, .form-select:disabled {
  background: var(--u-surface-2) !important;
  color: var(--u-text-muted) !important;
  cursor: not-allowed;
}
textarea.form-control { min-height: 92px; }

/* Input group */
.input-group-text {
  background: var(--u-surface-2);
  border: 1px solid var(--u-border-strong);
  color: var(--u-text-soft);
}

/* Search-style input */
.u-search {
  position: relative;
}
.u-search input {
  padding-left: 2.4rem;
}
.u-search::before {
  content: "\F52A"; /* bi-search */
  font-family: 'bootstrap-icons';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--u-text-muted);
  pointer-events: none;
}

/* -------------------------------------------------- BADGES / CHIPS */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: var(--u-radius-pill); padding: .35em .7em; }
.badge.bg-primary   { background: var(--u-blue-500) !important; }
.badge.bg-secondary { background: var(--u-text-muted) !important; }
.badge.bg-success   { background: var(--u-success) !important; }
.badge.bg-danger    { background: var(--u-danger) !important; }
.badge.bg-warning   { background: var(--u-warning) !important; color: #1a1300; }
.badge.bg-info      { background: var(--u-info) !important; }

.u-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  border-radius: var(--u-radius-pill);
  background: var(--u-blue-50);
  color: var(--u-blue-700);
  border: 1px solid var(--u-blue-100);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--u-dur) var(--u-ease);
  user-select: none;
}
.u-chip:hover { background: var(--u-blue-100); }
.u-chip.active { background: var(--u-blue-500); color: #fff; border-color: var(--u-blue-500); box-shadow: 0 6px 14px -6px rgba(0, 68, 255, .5); }
html[data-theme="dark"] .u-chip { background: rgba(0, 183, 255, .08); color: var(--u-cyan-300); border-color: rgba(0, 183, 255, .18); }
html[data-theme="dark"] .u-chip.active { background: var(--u-blue-500); color: #fff; }

/* -------------------------------------------------- ALERTS */
.alert {
  border-radius: var(--u-radius-sm);
  border: 1px solid transparent;
  padding: 0.85rem 1rem;
  font-weight: 500;
}
.alert-success { background: rgba(16, 185, 129, .1); color: #065f46; border-color: rgba(16, 185, 129, .25); }
.alert-danger  { background: rgba(239, 68, 68, .1);  color: #7f1d1d; border-color: rgba(239, 68, 68, .25); }
.alert-warning { background: rgba(245, 158, 11, .12); color: #78350f; border-color: rgba(245, 158, 11, .3); }
.alert-info    { background: rgba(14, 165, 233, .1); color: #075985; border-color: rgba(14, 165, 233, .25); }
html[data-theme="dark"] .alert-success { color: #6ee7b7; }
html[data-theme="dark"] .alert-danger  { color: #fca5a5; }
html[data-theme="dark"] .alert-warning { color: #fcd34d; }
html[data-theme="dark"] .alert-info    { color: #7dd3fc; }

/* -------------------------------------------------- MODALS */
.modal-content {
  background: var(--u-surface) !important;
  color: var(--u-text) !important;
  border: 1px solid var(--u-border) !important;
  border-radius: var(--u-radius-lg) !important;
  box-shadow: var(--u-shadow-lg);
  /* Do not clip dropdowns, date pickers, autocomplete panels, or close
     controls rendered inside ordinary Bootstrap modals. */
  overflow: visible;
}
.modal-header {
  background: linear-gradient(135deg, var(--u-blue-500), var(--u-cyan-400));
  color: #fff;
  border-bottom: 0 !important;
  padding: 1rem 1.25rem;
}
.modal-header .modal-title { color: #fff; font-family: var(--u-font-display); font-weight: 700; }
.modal-header .btn-close { filter: brightness(0) invert(1); opacity: .85; }
.modal-header .btn-close:hover { opacity: 1; }

/* Reset the ones that already had bg-primary */
.modal-header.bg-primary { background: linear-gradient(135deg, var(--u-blue-500), var(--u-cyan-400)) !important; }

.modal-body { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--u-border); background: var(--u-surface-2); }

/* Modal geometry and scrolling intentionally remain owned by Bootstrap. */

/* Dark mode modal */
html[data-theme="dark"] .modal-content { background: var(--u-surface) !important; }

/* Popup stacking remains owned by Bootstrap/style.min.css. Page-specific
   viewers may opt into a higher layer without placing their backdrop above
   the popup itself. */

/* -------------------------------------------------- DROPDOWNS (glass) */
.dropdown-menu {
  background: var(--u-glass-bg-strong) !important;
  backdrop-filter: blur(var(--u-glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--u-glass-blur)) saturate(160%);
  border: 1px solid var(--u-glass-border) !important;
  border-radius: var(--u-radius-md) !important;
  box-shadow: var(--u-shadow-md);
  padding: .35rem;
  color: var(--u-text) !important;
}
.dropdown-item {
  color: var(--u-text) !important;
  border-radius: var(--u-radius-xs);
  padding: .55rem .75rem;
  font-weight: 500;
  transition: background var(--u-dur-fast) var(--u-ease), color var(--u-dur-fast) var(--u-ease);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--u-blue-500) !important;
  color: #fff !important;
  text-shadow: none;
}
.dropdown-item.text-dark { color: var(--u-text) !important; }
.dropdown-item.text-danger:hover { background: var(--u-danger) !important; color: #fff !important; }
.dropdown-divider { border-color: var(--u-border); }
.dropdown-header { color: var(--u-text-muted); font-weight: 700; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }

/* -------------------------------------------------- NAV TABS */
.nav-tabs { border-bottom: 1px solid var(--u-border); }
.nav-tabs .nav-link {
  color: var(--u-text-muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: .75rem 1rem;
  font-weight: 600;
  background: transparent !important;
  transition: color var(--u-dur) var(--u-ease), border-color var(--u-dur) var(--u-ease);
}
.nav-tabs .nav-link:hover { color: var(--u-text) !important; }
.nav-tabs .nav-link.active {
  color: var(--u-blue-500) !important;
  border-bottom-color: var(--u-blue-500) !important;
  background: transparent !important;
}
/* Preserve the black-tab #accountTabs / #accessTabs styling if the app expects it */
#accountTabs .nav-link, #accessTabs .nav-link { color: var(--u-text) !important; }
#accountTabs .nav-link.active, #accessTabs .nav-link.active { color: var(--u-blue-500) !important; }

/* -------------------------------------------------- LIST GROUP */
.list-group-item {
  background: transparent;
  border-color: var(--u-border);
  color: var(--u-text);
}
.list-group-item:hover { background: var(--u-blue-50); color: var(--u-blue-700); }
html[data-theme="dark"] .list-group-item:hover { background: rgba(0, 183, 255, .08); color: var(--u-cyan-300); }

/* -------------------------------------------------- ACCORDION (CRM sidebar uses this) */
.accordion-item { background: transparent !important; }
.accordion-button {
  background: transparent !important;
  color: var(--u-text) !important;
  font-weight: 600;
  border-radius: var(--u-radius-sm) !important;
  padding: .7rem .85rem !important;
}
.accordion-button:not(.collapsed) {
  background: linear-gradient(90deg, rgba(0, 68, 255, .12), transparent) !important;
  color: var(--u-blue-500) !important;
  box-shadow: none !important;
}
.accordion-button:focus { box-shadow: var(--u-shadow-glow) !important; }
.accordion-button::after {
  filter: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23334155'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3e%3c/svg%3e");
}
html[data-theme="dark"] .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c6d0ea'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3e%3c/svg%3e");
}

/* -------------------------------------------------- CHART CONTAINER */
.u-chart-card {
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius-md);
  padding: 1.25rem;
  box-shadow: var(--u-shadow-sm);
}
.u-chart-card h5 { font-family: var(--u-font-display); font-weight: 700; margin-bottom: .35rem; }
.u-chart-card .u-chart-sub { color: var(--u-text-muted); font-size: .85rem; }
.u-chart-canvas { position: relative; margin-top: 1rem; height: 260px; }

/* Chart.js overrides — best-effort, since colors are set in JS. Provide CSS var hooks */
canvas { max-width: 100%; }

/* -------------------------------------------------- ACTIVITY FEED */
.u-feed { display: flex; flex-direction: column; gap: .85rem; }
.u-feed__item {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .75rem;
  border-radius: var(--u-radius-sm);
  border: 1px solid var(--u-border);
  background: var(--u-surface);
  transition: border-color var(--u-dur) var(--u-ease), transform var(--u-dur) var(--u-ease);
}
.u-feed__item:hover { border-color: var(--u-blue-200); transform: translateX(2px); }
.u-feed__dot {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--u-blue-500), var(--u-cyan-400));
  color: #fff; font-size: 1rem;
  box-shadow: 0 4px 10px -3px rgba(0, 68, 255, .5);
}
.u-feed__body { flex: 1 1 auto; min-width: 0; }
.u-feed__title { color: var(--u-text); font-weight: 600; }
.u-feed__meta { color: var(--u-text-muted); font-size: .8rem; }

/* -------------------------------------------------- TOASTS */
.toast {
  border-radius: var(--u-radius-md) !important;
  border: 1px solid var(--u-glass-border) !important;
  background: var(--u-glass-bg-strong) !important;
  color: var(--u-text) !important;
  backdrop-filter: blur(var(--u-glass-blur));
  -webkit-backdrop-filter: blur(var(--u-glass-blur));
  box-shadow: var(--u-shadow-lg) !important;
}
.toast.bg-dark { background: rgba(15, 23, 42, .92) !important; color: #fff !important; }

/* -------------------------------------------------- CAROUSEL CAPTION (landing) */
#homeCarousel .carousel-caption {
  background: var(--u-glass-bg-strong);
  border: 1px solid var(--u-glass-border);
  color: var(--u-text) !important;
  backdrop-filter: blur(var(--u-glass-blur));
  -webkit-backdrop-filter: blur(var(--u-glass-blur));
  box-shadow: var(--u-shadow-lg);
  bottom: 2rem;
  max-width: 720px;
  left: 5%;
  right: auto;
  text-align: left;
}
#homeCarousel .carousel-caption h2 { color: var(--u-text) !important; font-family: var(--u-font-display); }
#homeCarousel .carousel-caption p  { color: var(--u-text-soft) !important; }

/* -------------------------------------------------- ANIMATIONS */
@keyframes uFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.u-anim-fade-up { animation: uFadeUp .6s var(--u-ease) both; }

@keyframes uPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 68, 255, .35); }
  50%      { box-shadow: 0 0 0 12px rgba(0, 68, 255, 0); }
}
.u-pulse { animation: uPulse 2s infinite; }

/* Card zoom-img hover (landing "Our Core Services") */
.zoom-img { transition: transform .6s var(--u-ease); }
.card-hover:hover .zoom-img,
.card:hover .zoom-img { transform: scale(1.08); }