/* =========================================================
   AxenPay Theme (Bootstrap 5.x)
   - Load AFTER bootstrap.min.css
   - Objetivo: “virar AxenPay” sem criar mil classes novas
   ========================================================= */

/* =========================================================
   Fonts (Opcional)
   - Se preferir self-host, remova e sirva localmente
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Roboto+Slab:wght@400&display=swap');


/* =========================================================
   1) Brand Tokens + Bootstrap Overrides
   ========================================================= */
:root{
  /* -----------------------------
     AxenPay Brand Tokens
     ----------------------------- */
  --ax-primary: #FFB000 !important;      /* dourado AxenPay */
  --ax-secondary: #54595F !important;    /* cinza institucional */
  --ax-text: #7A7A7A !important;         /* texto padrão */

  --ax-dark: #111111 !important;
  --ax-light: #F6F6F6 !important;
  --ax-white: #ffffff !important;

  --ax-border: rgba(0,0,0,.12) !important;
  --ax-border-soft: rgba(0,0,0,.08) !important;

  --ax-font-primary: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  --ax-font-secondary: "Roboto Slab", Georgia, "Times New Roman", serif !important;

  --ax-radius: 14px !important;
  --ax-radius-sm: 10px !important;
  --ax-radius-lg: 18px !important;

  /* -----------------------------
     Bootstrap: Fonts / Body
     ----------------------------- */
  --bs-font-sans-serif: var(--ax-font-primary) !important;
  --bs-font-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;

  --bs-body-font-family: var(--ax-font-primary) !important;
  --bs-body-color: var(--ax-text) !important;
  --bs-body-bg: var(--ax-white) !important;

  --bs-heading-color: var(--ax-dark) !important;
  --bs-emphasis-color: var(--ax-dark) !important;

  --bs-secondary-color: rgba(17,17,17,.68) !important;
  --bs-tertiary-color: rgba(17,17,17,.52) !important;
  --bs-secondary-bg: #fafafa !important;
  --bs-tertiary-bg: #f3f4f6 !important;

  /* Links */
  --bs-link-color: var(--ax-primary) !important;
  --bs-link-hover-color: #e09b00 !important;

  /* Borders + radius */
  --bs-border-color: var(--ax-border) !important;
  --bs-border-color-translucent: var(--ax-border-soft) !important;

  --bs-border-radius: var(--ax-radius) !important;
  --bs-border-radius-sm: var(--ax-radius-sm) !important;
  --bs-border-radius-lg: var(--ax-radius-lg) !important;
  --bs-border-radius-xl: 20px !important;
  --bs-border-radius-xxl: 24px !important;
  --bs-border-radius-pill: 50rem !important;

  /* Focus */
  --bs-focus-ring-color: rgba(255,176,0,.35) !important;
  --bs-focus-ring-width: 0.25rem !important;

  /* Shadow */
  --bs-box-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.06) !important;
  --bs-box-shadow: 0 .5rem 1rem rgba(0,0,0,.08) !important;
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0,0,0,.10) !important;

  /* -----------------------------
     Bootstrap: Colors (AxenPay)
     ----------------------------- */
  --bs-primary: var(--ax-primary) !important;
  --bs-secondary: var(--ax-secondary) !important;

  --bs-success: #22c55e !important;
  --bs-info: #0dcaf0 !important;
  --bs-warning: #f59e0b !important;
  --bs-danger: #dc3545 !important;

  --bs-light: var(--ax-light) !important;
  --bs-dark: var(--ax-dark) !important;

  /* RGB (muitos componentes usam) */
  --bs-primary-rgb: 255,176,0 !important;
  --bs-secondary-rgb: 84,89,95 !important;
  --bs-success-rgb: 34,197,94 !important;
  --bs-info-rgb: 13,202,240 !important;
  --bs-warning-rgb: 245,158,11 !important;
  --bs-danger-rgb: 220,53,69 !important;
  --bs-light-rgb: 246,246,246 !important;
  --bs-dark-rgb: 17,17,17 !important;

  /* Subtle tokens */
  --bs-primary-text-emphasis: #7a5400 !important;
  --bs-primary-bg-subtle: rgba(255,176,0,.12) !important;
  --bs-primary-border-subtle: rgba(255,176,0,.28) !important;

  --bs-secondary-text-emphasis: #2f3337 !important;
  --bs-secondary-bg-subtle: rgba(84,89,95,.10) !important;
  --bs-secondary-border-subtle: rgba(84,89,95,.22) !important;

  --bs-success-text-emphasis: #0f5132 !important;
  --bs-success-bg-subtle: rgba(34,197,94,.12) !important;
  --bs-success-border-subtle: rgba(34,197,94,.28) !important;

  --bs-info-text-emphasis: #055160 !important;
  --bs-info-bg-subtle: rgba(13,202,240,.12) !important;
  --bs-info-border-subtle: rgba(13,202,240,.28) !important;

  --bs-warning-text-emphasis: #664d03 !important;
  --bs-warning-bg-subtle: rgba(245,158,11,.14) !important;
  --bs-warning-border-subtle: rgba(245,158,11,.30) !important;

  --bs-danger-text-emphasis: #842029 !important;
  --bs-danger-bg-subtle: rgba(220,53,69,.12) !important;
  --bs-danger-border-subtle: rgba(220,53,69,.28) !important;

  --bs-light-text-emphasis: var(--ax-dark) !important;
  --bs-light-bg-subtle: #ffffff !important;
  --bs-light-border-subtle: rgba(0,0,0,.10) !important;

  --bs-dark-text-emphasis: var(--ax-dark) !important;
  --bs-dark-bg-subtle: rgba(17,17,17,.06) !important;
  --bs-dark-border-subtle: rgba(17,17,17,.14) !important;

  /* -----------------------------
     Component overrides
     ----------------------------- */

  /* Forms */
  --bs-form-control-bg: var(--ax-white) !important;
  --bs-form-control-color: var(--ax-dark) !important;
  --bs-form-control-border-color: var(--bs-border-color) !important;
  --bs-form-control-focus-border-color: rgba(255,176,0,.55) !important;
  --bs-form-control-focus-box-shadow: 0 0 0 .25rem rgba(255,176,0,.18) !important;

  /* Cards */
  --bs-card-bg: var(--ax-white) !important;
  --bs-card-color: var(--ax-dark) !important;
  --bs-card-border-color: var(--bs-border-color) !important;
  --bs-card-cap-bg: rgba(0,0,0,.02) !important;

  /* Tables */
  --bs-table-color: var(--ax-dark) !important;
  --bs-table-bg: transparent !important;
  --bs-table-border-color: var(--bs-border-color) !important;
  --bs-table-striped-bg: rgba(0,0,0,.02) !important;
  --bs-table-hover-bg: rgba(255,176,0,.06) !important;

  /* Dropdown */
  --bs-dropdown-bg: var(--ax-white) !important;
  --bs-dropdown-border-color: var(--bs-border-color) !important;
  --bs-dropdown-link-hover-bg: rgba(255,176,0,.10) !important;
  --bs-dropdown-link-active-bg: var(--ax-primary) !important;
  --bs-dropdown-link-active-color: #111111 !important;

  /* Navbar */
  --bs-navbar-color: rgba(17,17,17,.72) !important;
  --bs-navbar-hover-color: rgba(17,17,17,.92) !important;
  --bs-navbar-active-color: rgba(17,17,17,1) !important;
  --bs-navbar-brand-color: rgba(17,17,17,1) !important;
  --bs-navbar-brand-hover-color: rgba(17,17,17,1) !important;
  --bs-navbar-toggler-border-color: var(--bs-border-color) !important;

  /* Pagination */
  --bs-pagination-color: rgba(17,17,17,.72) !important;
  --bs-pagination-hover-color: rgba(17,17,17,.92) !important;
  --bs-pagination-focus-color: rgba(17,17,17,1) !important;
  --bs-pagination-active-bg: var(--ax-primary) !important;
  --bs-pagination-active-border-color: var(--ax-primary) !important;
  --bs-pagination-active-color: #111111 !important;

  /* Modal / Offcanvas */
  --bs-modal-bg: var(--ax-white) !important;
  --bs-modal-border-color: var(--bs-border-color) !important;
  --bs-offcanvas-bg: var(--ax-white) !important;
  --bs-offcanvas-border-color: var(--bs-border-color) !important;

  /* Toast */
  --bs-toast-bg: var(--ax-white) !important;
  --bs-toast-border-color: var(--bs-border-color) !important;

  /* Popover / Tooltip */
  --bs-popover-bg: var(--ax-white) !important;
  --bs-popover-border-color: var(--bs-border-color) !important;
  --bs-tooltip-bg: var(--ax-dark) !important;
  --bs-tooltip-color: #ffffff !important;
}


/* =========================================================
   2) Base Typography + A11y
   ========================================================= */
h1,h2,h3,h4,h5,h6,
.ax-title{
  font-family: var(--ax-font-secondary);
  font-weight: 400;
  color: var(--ax-dark);
}

body{
  font-family: var(--ax-font-primary);
  font-weight: 400;
  color: var(--bs-body-color);
}

:focus-visible{
  outline: 3px solid rgba(255,176,0,.35);
  outline-offset: 2px;
}


/* =========================================================
   3) Buttons / Badges / Forms polish
   ========================================================= */
.btn-primary{
  --bs-btn-bg: var(--ax-primary);
  --bs-btn-border-color: var(--ax-primary);
  --bs-btn-hover-bg: #e09b00;
  --bs-btn-hover-border-color: #e09b00;
  --bs-btn-active-bg: #c78900;
  --bs-btn-active-border-color: #c78900;
  --bs-btn-color: #111; /* contraste melhor no dourado */
}

.btn-outline-primary{
  --bs-btn-color: var(--ax-primary);
  --bs-btn-border-color: var(--ax-primary);
  --bs-btn-hover-bg: var(--ax-primary);
  --bs-btn-hover-border-color: var(--ax-primary);
  --bs-btn-hover-color: #111;
}

.badge.bg-primary{ color:#111; }

.form-control:focus,
.form-select:focus{
  border-color: rgba(255,176,0,.55);
  box-shadow: 0 0 0 .25rem rgba(255,176,0,.18);
}


/* =========================================================
   4) Cards / Generic surfaces
   ========================================================= */
.ax-card,
.card{
  border-radius: var(--ax-radius);
  border-color: var(--bs-border-color);
}
.card{
  background-color: var(--bs-card-bg);
  color: var(--bs-card-color);
}


/* =========================================================
   5) Layout Helpers (Premium App UI)
   - usados no layout/app.php + páginas
   ========================================================= */

/* Fundo do app com depth */
.ax-app-bg{
  background:
    radial-gradient(1200px 600px at 12% 0%, rgba(255,176,0,.16), transparent 60%),
    radial-gradient(900px 500px at 92% 10%, rgba(17,17,17,.10), transparent 62%),
    linear-gradient(180deg, #f7f7f7 0%, #ffffff 40%, #ffffff 100%) !important;
}

/* Shell branco premium (área principal do conteúdo) */
.ax-shell{
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow:
    0 16px 40px rgba(17,17,17,.10),
    0 1px 0 rgba(255,176,0,.25) inset !important;
  padding: 18px !important;
}
@media (min-width: 992px){
  .ax-shell{ padding: 22px !important; }
}

/* Header premium da página */
.ax-hero{
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(900px 300px at 20% 0%, rgba(255,176,0,.26), transparent 60%),
    radial-gradient(800px 250px at 90% 10%, rgba(255,176,0,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.80)) !important;
  box-shadow:
    0 14px 34px rgba(17,17,17,.10),
    0 1px 0 rgba(255,176,0,.28) inset !important;
}

/* Divider suave */
.ax-divider{
  height:1px;
  background: rgba(0,0,0,.08);
}

/* Selo/ícone do header */
.ax-seal{
  width: 52px;
  height: 52px;
  border-radius: 16px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#111 !important;
  background: rgba(255,176,0,.26) !important;
  border: 1px solid rgba(255,176,0,.55) !important;
  box-shadow:
    0 10px 24px rgba(17,17,17,.12),
    0 1px 0 rgba(255,255,255,.80) inset !important;
}

/* Chips de status */
.ax-chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .65rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.86);
  color:#111;
  font-size:.80rem;
  box-shadow: 0 10px 20px rgba(17,17,17,.06);
}
.ax-chip i{ opacity:.8; }

/* Metric cards */
.ax-metric{
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 14px 30px rgba(17,17,17,.08) !important;
  position: relative;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ax-metric:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(17,17,17,.12) !important;
}
.ax-metric::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 6px;
  background: rgba(255,176,0,.75);
}
.ax-metric.ax-metric--sec::before{ background: rgba(84,89,95,.55); }
.ax-metric.ax-metric--warn::before{ background: rgba(245,158,11,.55); }

.ax-metric .ax-metric-icon{
  width: 46px;
  height: 46px;
  border-radius: 16px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#111 !important;
  background: rgba(255,176,0,.20) !important;
  border: 1px solid rgba(255,176,0,.45) !important;
}

.ax-amount{ letter-spacing: -0.02em; }

/* Table wrapper (premium) */
.ax-table{
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 18px !important;
  overflow: hidden;
  background: #fff !important;
  box-shadow: 0 14px 30px rgba(17,17,17,.08) !important;
}
.ax-table .table thead th{
  background: rgba(0,0,0,.02) !important;
  border-bottom: 1px solid rgba(0,0,0,.10) !important;
  font-weight: 600 !important;

  /* sticky header (bom para listas grandes) */
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(10px);
}
.ax-table .table tbody tr{
  border-top: 1px solid rgba(0,0,0,.06);
}
.ax-table .table tbody tr:hover{
  background: rgba(255,176,0,.08) !important;
}
.ax-table .table td,
.ax-table .table th{
  padding-top:.65rem;
  padding-bottom:.65rem;
}
.ax-table code{
  background: rgba(0,0,0,.04);
  padding: .18rem .4rem;
  border-radius: 10px;
}


/* =========================================================
   6) Topbar / Navbar “banco”
   ========================================================= */
.navbar.ax-navbar{
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 24px rgba(17,17,17,.06) !important;
}
.ax-brand-badge{
  border-radius: 12px !important;
  letter-spacing: .04em;
}
.ax-status-pill{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  border-radius: 999px;
  padding:.35rem .65rem;
  font-size:.80rem;
  color:#111;
}


/* =========================================================
   7) Sidebar Navigation (ax-nav)
   - Estilo premium “card” (opcional)
   ========================================================= */
.ax-nav{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.ax-nav-section{
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(17,17,17,.55);
  margin: .35rem .35rem .15rem;
}

.ax-nav-link{
  position:relative;
  text-decoration:none;
  padding: .70rem .75rem;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 20px rgba(17,17,17,.05);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.ax-nav-link:hover{
  background: rgba(255,176,0,.10);
  border-color: rgba(255,176,0,.25);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(17,17,17,.08);
}

.ax-nav-link.active{
  background:
    radial-gradient(900px 220px at 0% 0%, rgba(255,176,0,.22), transparent 55%),
    rgba(255,255,255,.92);
  border-color: rgba(255,176,0,.35);
  box-shadow:
    0 18px 40px rgba(17,17,17,.10),
    0 1px 0 rgba(255,176,0,.22) inset;
}

.ax-nav-link.active::before{
  content:"";
  position:absolute;
  left:0; top:10px; bottom:10px;
  width: 5px;
  border-radius: 999px;
  background: rgba(255,176,0,.85);
}

.ax-nav-ico{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#111;
  background: rgba(255,176,0,.16);
  border: 1px solid rgba(255,176,0,.28);
  box-shadow: 0 10px 20px rgba(17,17,17,.06);
}

.ax-nav-link:hover .ax-nav-ico{
  background: rgba(255,176,0,.22);
  border-color: rgba(255,176,0,.35);
}

.ax-nav-link.active .ax-nav-ico{
  background: rgba(255,176,0,.28);
  border-color: rgba(255,176,0,.45);
}

.ax-nav-title{
  font-weight: 600;
  color: #111;
  line-height: 1.15;
}

.ax-nav-hint{
  font-size:.78rem;
  color: rgba(17,17,17,.55);
  margin-top: .15rem;
  line-height: 1.1;
}

.ax-nav-arrow{
  color: rgba(17,17,17,.35);
  transition: transform .12s ease, color .12s ease;
}

.ax-nav-link:hover .ax-nav-arrow{
  color: rgba(17,17,17,.55);
  transform: translateX(2px);
}

.ax-nav-link.active .ax-nav-arrow{
  color: rgba(17,17,17,.55);
}


/* =========================================================
   8) Menu.php (list-group) HOTFIX
   - Seu menu atual usa list-group-item.
   - Este bloco garante visual premium + não quebra cores.
   ========================================================= */
.list-group.list-group-flush{
  --ax-menu-radius: 14px;
}

.list-group.list-group-flush > a.list-group-item{
  border-radius: var(--ax-menu-radius) !important;
  margin-bottom: .35rem !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  background: rgba(255,255,255,.92) !important;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease !important;
}

.list-group.list-group-flush > a.list-group-item:hover{
  background: rgba(255,176,0,.08) !important;
  box-shadow: 0 10px 22px rgba(17,17,17,.08) !important;
  transform: translateY(-1px) !important;
}

.list-group.list-group-flush > a.list-group-item.bg-primary-subtle{
  background: rgba(255,176,0,.18) !important;
  border-color: rgba(255,176,0,.35) !important;
  box-shadow: 0 12px 26px rgba(17,17,17,.10) !important;
}

.list-group.list-group-flush > a.list-group-item > span.rounded.bg-light{
  background: rgba(0,0,0,.03) !important;
  border-color: rgba(0,0,0,.10) !important;
  color: var(--ax-secondary) !important;
}

.list-group.list-group-flush > a.list-group-item .badge.bg-primary{
  color: #111 !important;
}

.list-group.list-group-flush > a.list-group-item .text-muted{
  color: rgba(84,89,95,.75) !important;
}