/*
 * Deepa AI — SQLAdmin Theme
 * Drop this file into your static directory and wire it up via layout.html
 * Targets Tabler UI (the framework SQLAdmin ships with)
 */

/* ─── 1. DESIGN TOKENS ─────────────────────────────────────────────────── */
:root {
  --deepa-green:       #0fba62;
  --deepa-green-dk:    #0a8f4a;
  --deepa-green-xdk:   #065c30;
  --deepa-green-lt:    #e8f7ef;
  --deepa-green-xlt:   #f3fbf6;
  --deepa-dark:        #0a1f14;
  --deepa-body:        #1a2e22;
  --deepa-muted:       #5a7568;
  --deepa-bg:          #f6faf7;
  --deepa-white:       #ffffff;
  --deepa-border:      rgba(15, 186, 98, 0.14);
  --deepa-border-hard: rgba(0, 0, 0, 0.07);
  --deepa-radius:      10px;
  --deepa-font:        'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── 2. GOOGLE FONT ────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Syne:wght@700;800&display=swap');

/* ─── 3. TABLER VARIABLE OVERRIDES ─────────────────────────────────────── */
:root {
  --tblr-primary:            var(--deepa-green);
  --tblr-primary-rgb:        15, 186, 98;
  --tblr-primary-lt:         var(--deepa-green-lt);
  --tblr-primary-fg:         #fff;
  --tblr-link-color:         var(--deepa-green-dk);
  --tblr-link-hover-color:   var(--deepa-green);
  --tblr-body-bg:            var(--deepa-bg);
  --tblr-body-color:         var(--deepa-body);
  --tblr-border-color:       var(--deepa-border-hard);
  --tblr-card-border-color:  var(--deepa-border-hard);
  --tblr-card-bg:            var(--deepa-white);
  --tblr-font-family-sans-serif: var(--deepa-font);
  --tblr-sidebar-bg:         var(--deepa-dark);
  --tblr-sidebar-color:      rgba(255, 255, 255, 0.65);
  --tblr-sidebar-border-color: rgba(255, 255, 255, 0.06);
  --tblr-sidebar-icon-color: rgba(255, 255, 255, 0.4);
  --tblr-sidebar-nav-link-color: rgba(255, 255, 255, 0.65);
  --tblr-sidebar-nav-link-hover-color: #fff;
  --tblr-sidebar-nav-link-hover-bg: rgba(15, 186, 98, 0.12);
  --tblr-sidebar-nav-link-active-color: #fff;
  --tblr-sidebar-nav-link-active-bg: rgba(15, 186, 98, 0.18);
}

/* ─── 4. GLOBAL BASE ────────────────────────────────────────────────────── */
body {
  font-family: var(--deepa-font);
  background: var(--deepa-bg);
  color: var(--deepa-body);
  -webkit-font-smoothing: antialiased;
}

/* ─── 5. SIDEBAR ────────────────────────────────────────────────────────── */
.navbar-vertical {
  background: var(--deepa-dark) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Logo area */
.navbar-brand {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar-brand-image {
  display: none; /* hide default logo image — we use text */
}

.navbar-brand-autodark .navbar-brand-image {
  display: none;
}

/* Sidebar nav links */
.navbar-vertical .navbar-nav > .nav-item > .nav-link {
  border-radius: 8px;
  margin: 1px 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  transition: background 0.2s, color 0.2s;
}

.navbar-vertical .navbar-nav > .nav-item > .nav-link:hover {
  background: rgba(15, 186, 98, 0.1);
  color: #fff;
}

.navbar-vertical .navbar-nav > .nav-item > .nav-link.active {
  background: rgba(15, 186, 98, 0.16);
  color: #fff;
}

.navbar-vertical .navbar-nav > .nav-item > .nav-link .nav-link-icon {
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.2s;
}

.navbar-vertical .navbar-nav > .nav-item > .nav-link:hover .nav-link-icon,
.navbar-vertical .navbar-nav > .nav-item > .nav-link.active .nav-link-icon {
  color: var(--deepa-green);
}

/* Sidebar section labels */
.navbar-vertical .navbar-nav .nav-link-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.25);
}

/* ─── 6. TOP NAV / HEADER ───────────────────────────────────────────────── */
.navbar-expand-md.navbar-light,
.navbar.navbar-light {
  background: var(--deepa-white) !important;
  border-bottom: 1px solid var(--deepa-border-hard);
  box-shadow: 0 1px 12px rgba(10, 31, 20, 0.04);
}

/* ─── 7. CARDS ──────────────────────────────────────────────────────────── */
.card {
  border: 1.5px solid var(--deepa-border-hard);
  border-radius: var(--deepa-radius);
  box-shadow: 0 2px 12px rgba(10, 31, 20, 0.05);
  background: var(--deepa-white);
}

.card-header {
  background: transparent;
  border-bottom: 1.5px solid var(--deepa-border-hard);
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--deepa-dark);
}

.card-body {
  padding: 20px;
}

/* ─── 8. BUTTONS ────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--deepa-green);
  border-color: var(--deepa-green);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(15, 186, 98, 0.22);
  transition: all 0.2s;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--deepa-green-dk);
  border-color: var(--deepa-green-dk);
  box-shadow: 0 6px 20px rgba(15, 186, 98, 0.3);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-outline-primary {
  color: var(--deepa-green-dk);
  border-color: var(--deepa-green);
}

.btn-outline-primary:hover {
  background: var(--deepa-green);
  color: #fff;
}

.btn-danger {
  border-radius: 8px;
}

.btn-secondary {
  border-radius: 8px;
  background: var(--deepa-bg);
  border-color: var(--deepa-border-hard);
  color: var(--deepa-body);
}

.btn-secondary:hover {
  background: var(--deepa-green-lt);
  border-color: var(--deepa-border);
  color: var(--deepa-dark);
}

/* ─── 9. TABLES ─────────────────────────────────────────────────────────── */
.table {
  font-size: 14px;
  color: var(--deepa-body);
}

.table thead th {
  background: var(--deepa-bg);
  color: var(--deepa-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1.5px solid var(--deepa-border-hard);
  padding: 12px 16px;
}

.table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--deepa-border-hard);
  vertical-align: middle;
}

.table-hover tbody tr:hover {
  background: var(--deepa-green-xlt);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(15, 186, 98, 0.025);
}

/* ─── 10. BADGES ────────────────────────────────────────────────────────── */
.badge.bg-primary {
  background: var(--deepa-green) !important;
}

.badge.bg-success {
  background: var(--deepa-green-dk) !important;
}

/* ─── 11. FORMS ─────────────────────────────────────────────────────────── */
.form-control,
.form-select {
  border: 1.5px solid var(--deepa-border-hard);
  border-radius: 8px;
  font-size: 14px;
  padding: 9px 13px;
  color: var(--deepa-body);
  background: var(--deepa-white);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--deepa-green);
  box-shadow: 0 0 0 3px rgba(15, 186, 98, 0.12);
  outline: none;
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--deepa-dark);
  margin-bottom: 6px;
}

.form-check-input:checked {
  background-color: var(--deepa-green);
  border-color: var(--deepa-green);
}

/* ─── 12. PAGINATION ────────────────────────────────────────────────────── */
.page-link {
  color: var(--deepa-green-dk);
  border-color: var(--deepa-border-hard);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
}

.page-link:hover {
  background: var(--deepa-green-lt);
  border-color: var(--deepa-border);
  color: var(--deepa-dark);
}

.page-item.active .page-link {
  background: var(--deepa-green);
  border-color: var(--deepa-green);
  color: #fff;
}

/* ─── 13. ALERTS ────────────────────────────────────────────────────────── */
.alert-success {
  background: var(--deepa-green-lt);
  border-color: rgba(15, 186, 98, 0.3);
  color: var(--deepa-green-xdk);
}

.alert-warning {
  border-radius: var(--deepa-radius);
}

/* ─── 14. DROPDOWNS ─────────────────────────────────────────────────────── */
.dropdown-menu {
  border: 1.5px solid var(--deepa-border-hard);
  border-radius: var(--deepa-radius);
  box-shadow: 0 8px 32px rgba(10, 31, 20, 0.1);
  font-size: 14px;
  padding: 6px;
}

.dropdown-item {
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--deepa-body);
  font-weight: 500;
  transition: background 0.15s;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--deepa-green-lt);
  color: var(--deepa-dark);
}

.dropdown-divider {
  border-color: var(--deepa-border-hard);
  margin: 4px 0;
}

/* ─── 15. PAGE HEADER ───────────────────────────────────────────────────── */
.page-header {
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--deepa-border-hard);
  margin-bottom: 24px;
}

.page-title {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--deepa-dark);
  letter-spacing: -0.5px;
}

/* ─── 16. SEARCH BAR ────────────────────────────────────────────────────── */
.input-group .input-group-text {
  border: 1.5px solid var(--deepa-border-hard);
  background: var(--deepa-bg);
  color: var(--deepa-muted);
}

/* ─── 17. SCROLLBAR ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15, 186, 98, 0.25); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15, 186, 98, 0.45); }

/* ─── 18. SELECTION ─────────────────────────────────────────────────────── */
::selection {
  background: rgba(15, 186, 98, 0.18);
  color: var(--deepa-dark);
}

/* ─── 19. MISC UTILITIES ────────────────────────────────────────────────── */
.text-primary { color: var(--deepa-green) !important; }
.bg-primary    { background: var(--deepa-green) !important; }
.border-primary { border-color: var(--deepa-green) !important; }

.avatar {
  border-radius: 8px;
}

/* Action icon buttons in tables */
.btn-icon {
  border-radius: 7px;
  width: 32px; 
  height: 32px;
}

/* Empty state */
.empty-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  color: var(--deepa-dark);
}