/* ───────────────────────────────────────────────
   Brand colors
─────────────────────────────────────────────── */
:root {
    /* Your palette */
    --brand-orange:      #f97316;
    --brand-orange-dark: #ea580c;     /* good hover/active shade */
    --brand-orange-darker: #c2410c;   /* optional - even darker pressed state */
    --brand-gray-900:    #111827;
    --brand-gray-700:    #374151;
    --brand-gray-200:    #e5e7eb;
    --brand-white:       #ffffff;
  
    /* Tell Tabler to use orange as primary */
    --tblr-primary:      var(--brand-orange);
    --tblr-primary-rgb:  249, 115, 22;
    --tblr-primary-fg:   #ffffff;     /* white text on orange usually looks best */
  
    /* Optional: influence link colors more globally */
    --tblr-link-color:       var(--brand-orange);
    --tblr-link-hover-color: var(--brand-orange-dark);
  }
  
  /* ───────────────────────────────────────────────
     Body / general page feel
  ─────────────────────────────────────────────── */
  body {
    background: #f8fafc;          /* very light gray – clean & modern */
    color: var(--brand-gray-900);
  }
  
  /* ───────────────────────────────────────────────
     Buttons – primary
  ─────────────────────────────────────────────── */
  .btn-primary {
    --tblr-btn-bg:            var(--brand-orange);
    --tblr-btn-border-color:  var(--brand-orange);
    --tblr-btn-color:         #ffffff;
  
    --tblr-btn-hover-bg:           var(--brand-orange-dark);
    --tblr-btn-hover-border-color: var(--brand-orange-dark);
    --tblr-btn-hover-color:        #ffffff;
  
    --tblr-btn-active-bg:           var(--brand-orange-darker);
    --tblr-btn-active-border-color: var(--brand-orange-darker);
    --tblr-btn-active-color:        #ffffff;
  }
  
  /* Belt-and-suspenders fallback (some older Tabler/Bootstrap code ignores btn variables) */
  .btn-primary,
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active,
  .btn-primary:not(:disabled):not(.disabled):active,
  .btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--brand-orange) !important;
    border-color:     var(--brand-orange) !important;
    color:            #fff !important;
  }
  
  .btn-primary:hover,
  .btn-primary:focus-visible,
  .btn-primary:active {
    background-color: var(--brand-orange-dark) !important;
    border-color:     var(--brand-orange-dark) !important;
  }
  
  /* Outline primary button */
  .btn-outline-primary {
    color: var(--brand-orange);
    border-color: var(--brand-orange);
  }
  
  .btn-outline-primary:hover,
  .btn-outline-primary:focus-visible,
  .btn-outline-primary:active {
    background-color: var(--brand-orange);
    border-color:     var(--brand-orange);
    color:            #fff;
  }
  
  /* ───────────────────────────────────────────────
     Links (global + Tabler-specific)
  ─────────────────────────────────────────────── */
  a,
  .text-primary,
  .text-primary-hover:hover {
    color: var(--brand-orange) !important;
  }
  
  a:hover,
  .text-primary-hover:hover {
    color: var(--brand-orange-dark) !important;
  }
  
  /* ───────────────────────────────────────────────
     Badges, pills, status dots, etc.
  ─────────────────────────────────────────────── */
  .bg-primary,
  .badge.bg-primary,
  .status-dot.status-primary,
  .alert-primary,
  .progress-bar.bg-primary {
    background-color: var(--brand-orange) !important;
    color: #fff !important;
  }
  
  /* ───────────────────────────────────────────────
     Tabs – active tab indicator
  ─────────────────────────────────────────────── */
  .nav-tabs .nav-link.active,
  .nav-tabs .nav-item.show .nav-link {
    color: var(--brand-orange);
    border-color: var(--brand-orange) var(--brand-orange) transparent !important;
  }
  
  /* Optional: active tab background if your theme uses filled tabs */
  .nav-tabs .nav-link.active {
    background: rgba(249, 115, 22, 0.08); /* very light orange tint */
  }
  
  /* ───────────────────────────────────────────────
     Navbar / header bottom border
  ─────────────────────────────────────────────── */
  .navbar,
  .navbar.navbar-light {
    border-bottom: 1px solid var(--brand-gray-200);
  }