/* =============== Paleta Base & Tema =============== */
:root{
  --primary:#ff8c00;
  --primary-600:#e57900;
  --primary-700:#c86a00;
  --primary-grad:#ffb347;
  --success:#22c55e;
  --warning:#f8b84a;
  --danger:#ef4444;

  --bg:#f4f5fa;
  --text:#1a1d29;
  --muted:#6c7289;
  --card:#ffffff;
  --border:#e4e7f0;
  --surface-elevated:#ffffff;

  --nav-bg:#191c24;
  --nav-border:#232736;
  --nav-text:#f3f4f9;

  --th-bg:#fff3e0;
  --th-text:#2b2f3c;

  --sidebar-bg:#191c24;
  --sidebar-border:#232736;
  --sidebar-text:#f3f4f9;
  --sidebar-hover:rgba(255,140,0,0.12);
  --sidebar-active:#ff8c00;

  --shadow-soft:0 18px 40px rgba(23,26,37,0.08);
  --shadow-strong:0 32px 60px rgba(15,17,24,0.18);
}

[data-theme="dark"]{
  --bg:#0f1118;
  --text:#f3f4ff;
  --muted:#9da0b5;
  --card:#191c24;
  --border:#242839;
  --surface-elevated:#1d202d;

  --nav-bg:#191c24;
  --nav-border:#242839;
  --nav-text:#f3f4ff;

  --th-bg:#202432;
  --th-text:#f5f6ff;

  --shadow-soft:0 18px 44px rgba(0,0,0,0.25);
  --shadow-strong:0 30px 68px rgba(0,0,0,0.45);
}

/* =============== Base =============== */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: "Open Sans", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}

a{
  color: var(--primary-700);
  transition: color .2s ease;
}
a:hover{
  color: var(--primary);
}
[data-theme="dark"] a{
  color: var(--primary-grad);
}
[data-theme="dark"] a:hover{
  color: rgba(255,208,120,1);
}

/* =============== Navbar =============== */
.navbar{
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--nav-border) !important;
  box-shadow: 0 12px 28px rgba(15,17,24,.08);
  backdrop-filter: blur(12px);
}

body[data-theme="light"] .navbar{
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid rgba(26,29,41,.08) !important;
  box-shadow: 0 18px 40px rgba(26,29,41,.08);
}

body[data-theme="light"] .navbar .navbar-brand,
body[data-theme="light"] .navbar .navbar-brand span,
body[data-theme="light"] .navbar .navbar-nav .nav-link,
body[data-theme="light"] .navbar .btn{
  color: var(--text) !important;
}

body[data-theme="light"] .navbar .btn-icon{
  background: linear-gradient(135deg, rgba(255,140,0,.12), rgba(255,204,128,.32));
  color: var(--primary-700);
}

body[data-theme="light"] .navbar .btn-icon:hover{
  color: var(--primary-700);
}
.app-navbar{
  padding: .85rem 1.75rem;
  min-height: var(--app-navbar-height, 72px);
  position: sticky;
  top: 0;
  z-index: 1200;
}
.navbar .navbar-brand{
  color: var(--nav-text) !important;
  font-weight: 700;
  letter-spacing: .35px;
  gap: 12px;
  min-width: 0;
}
.navbar .navbar-brand span{
  color: inherit;
  white-space: nowrap;
}
.navbar .btn{ font-weight:600; }
.navbar .btn-icon{
  background: linear-gradient(135deg, rgba(255,140,0,.18), rgba(255,179,71,.3));
  border: none;
  color:#fff;
}
.navbar .btn-icon:hover{
  color:#fff;
  transform: translateY(-1px);
}

/* =============== Card =============== */
.card{
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
body[data-theme="dark"] .card{
  box-shadow: var(--shadow-strong);
}
.card-header{
  background: linear-gradient(135deg, rgba(255,140,0,.95), rgba(255,179,71,.93));
  color:#fff;
  font-weight:700;
  border-radius: 18px 18px 0 0 !important;
  letter-spacing:.3px;
  text-transform: uppercase;
  font-size: .95rem;
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.85rem 1.25rem;
}

.card-header-content{
  display:flex;
  align-items:center;
  gap:.85rem;
}

.card-header-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  background: rgba(255,255,255,.2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
}

[data-theme="dark"] .card-header-icon{
  background: rgba(0,0,0,.25);
}

.card-header-text{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}

.card-title{
  margin:0;
  font-size:1rem;
  letter-spacing:.18em;
  text-transform: uppercase;
  color:#fff;
}

.card-subtitle{
  margin:0;
  font-size:.78rem;
  text-transform:none;
  letter-spacing:.02em;
  color: rgba(26,29,41,.72);
}

body[data-theme="dark"] .card-subtitle{
  color: rgba(243,244,255,.78);
}

/* =============== Botões =============== */
.btn{
  border-radius:12px;
  font-weight:600;
  letter-spacing:.2px;
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  padding:.45rem 1.05rem;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15,17,24,.12);
}
.btn:active{ transform: translateY(0); }

.btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary-grad));
  border: none;
  color:#fff;
}
.btn-primary:hover{ background: linear-gradient(135deg, var(--primary-600), var(--primary)); }

.btn-success{ background: var(--success); border:none; }
.btn-success:hover{ filter: brightness(.95); }
.btn-warning{ background: var(--warning); border:none; color:#111827; }
.btn-danger{ background: var(--danger); border:none; }
.btn-secondary{
  background: rgba(25,28,36,.92);
  border: none;
  color: #f3f4f9;
}
.btn-secondary:hover{
  background: rgba(25,28,36,.8);
  color: #fff;
}
[data-theme="dark"] .btn-secondary{
  background: rgba(36,39,52,.92);
}
.btn-outline-danger{
  color: #d54a4a;
  border:1px solid rgba(239,68,68,.45);
}
.btn-outline-danger:hover{
  background: rgba(239,68,68,.1);
  color:#b91c1c;
}
[data-theme="dark"] .btn-outline-danger{
  color: #ff9b9b;
  border-color: rgba(239,68,68,.55);
}
[data-theme="dark"] .btn-outline-danger:hover{
  background: rgba(239,68,68,.2);
  color:#fff;
}
.btn-outline-primary{
  color: var(--primary-700);
  border:1px solid rgba(255,140,0,.45);
}
.btn-outline-primary:hover{
  background: linear-gradient(135deg, rgba(255,140,0,.25), rgba(255,179,71,.35));
  color: var(--primary-700);
  border-color: rgba(255,140,0,.6);
}
[data-theme="dark"] .btn-outline-primary{
  color: rgba(255,210,140,1);
  border-color: rgba(255,179,71,.6);
}
[data-theme="dark"] .btn-outline-primary:hover{
  background: linear-gradient(135deg, rgba(255,179,71,.28), rgba(255,140,0,.35));
  color:#fff;
}

.btn-icon{
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  box-shadow: none;
  line-height: 1;
  font-size: 1.1rem;
}
.btn-icon:hover{
  box-shadow: none;
}

.btn-theme-toggle{
  border-radius: 999px;
  padding: .4rem 1.05rem;
  display: inline-flex;
  align-items: center;
  gap:.4rem;
}
.btn-theme-dark{
  background: linear-gradient(135deg, rgba(255,140,0,.12), rgba(255,197,71,.22));
  color: var(--primary-700);
  border:1px solid rgba(255,140,0,.35);
  box-shadow: 0 18px 36px rgba(255,140,0,.18);
}
.btn-theme-dark:hover{
  background: linear-gradient(135deg, rgba(255,140,0,.22), rgba(255,197,71,.32));
  color: var(--primary-700);
  border-color: rgba(255,140,0,.55);
}
.btn-theme-light{
  background: rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  box-shadow: none;
}
.btn-theme-light:hover{
  background: rgba(255,255,255,.16);
  border-color:#fff;
  color:#fff;
}

/* =============== Forms =============== */
label{
  font-weight:600;
  margin-bottom:6px;
  color: var(--text);
}
.form-control{
  border-radius:12px;
  border:1px solid rgba(26,29,41,.08);
  background: rgba(255,255,255,.9);
  color: var(--text);
  padding: .75rem .95rem;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.form-control::placeholder{ color: var(--muted); }
.form-control:focus{
  border-color: rgba(255,140,0,.6);
  box-shadow: 0 0 0 .18rem rgba(255,140,0,.22);
}
[class*="form-select"],
.form-select{
  border-radius:12px;
  border:1px solid rgba(26,29,41,.08);
  background: rgba(255,255,255,.95);
  color: var(--text);
  padding: .75rem 2.4rem .75rem .95rem;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.form-select:focus{
  border-color: rgba(255,140,0,.6);
  box-shadow: 0 0 0 .18rem rgba(255,140,0,.22);
}
[data-theme="dark"] .form-control{
  background: rgba(33,36,48,.78);
  border-color: rgba(255,255,255,.06);
  color: var(--text);
}
[data-theme="dark"] .form-control:focus{
  border-color: rgba(255,179,71,.7);
  box-shadow: 0 0 0 .18rem rgba(255,179,71,.22);
}
[data-theme="dark"] .form-select{
  background: rgba(33,36,48,.8);
  border-color: rgba(255,255,255,.06);
  color: var(--text);
}
[data-theme="dark"] .form-select:focus{
  border-color: rgba(255,179,71,.7);
  box-shadow: 0 0 0 .18rem rgba(255,179,71,.22);
}
.input-group-text{
  background: var(--th-bg);
  color: var(--th-text);
  border-color: var(--border);
  border-radius: 12px 0 0 12px;
}

/* =============== Alertas =============== */
.alert{
  border-radius: 16px;
  border: none;
  box-shadow: 0 18px 36px rgba(15,17,24,.18);
  padding: .95rem 1.15rem;
}
.alert-danger{ background: rgba(239,68,68,.14); color:#b91c1c; }
.alert-success{ background: rgba(34,197,94,.14); color:#0f9d47; }
.alert-info{ background: rgba(59,130,246,.14); color:#1d4ed8; }
[data-theme="dark"] .alert{
  box-shadow: 0 28px 48px rgba(0,0,0,.45);
}
[data-theme="dark"] .alert-danger{ background: rgba(239,68,68,.18); color:#ffb0b0; }
[data-theme="dark"] .alert-success{ background: rgba(34,197,94,.18); color:#8ef5c0; }
[data-theme="dark"] .alert-info{ background: rgba(59,130,246,.22); color:#c7d9ff; }

/* =============== Tabelas =============== */
.table{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(26,29,41,.08);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.table thead th{
  background: linear-gradient(120deg, rgba(255,255,255,.98), rgba(255,244,224,.94));
  color: #1a1d29;
  border-bottom: 1px solid rgba(26,29,41,.07);
  font-weight:700;
}
.table thead th + th{
  border-left:1px solid rgba(26,29,41,.05);
}
.table tbody td{
  color: var(--text);
  vertical-align: middle;
  border-color: rgba(26,29,41,.08);
}
.table tbody tr{
  background: rgba(255,255,255,.98);
  transition: background .24s ease, transform .18s ease;
}
.table tbody tr:nth-child(even){
  background: rgba(255,244,224,.2);
}
.table-hover tbody tr:hover{
  background: rgba(255,140,0,.16);
  transform: translate3d(0,-1px,0);
}
[data-theme="dark"] .table{
  border-color: rgba(255,255,255,.09);
  background: var(--card);
  box-shadow: var(--shadow-strong);
}
[data-theme="dark"] .table thead th{
  background: linear-gradient(120deg, rgba(41,44,59,.95), rgba(33,36,48,.95));
  border-bottom-color: rgba(255,255,255,.1);
  color:#f5f6ff;
}
[data-theme="dark"] .table thead th + th{
  border-left:1px solid rgba(255,255,255,.05);
}
[data-theme="dark"] .table tbody td{
  border-color: rgba(255,255,255,.08);
  color: rgba(248,249,255,.94);
}
[data-theme="dark"] .table tbody tr{
  background: rgba(28,30,44,.92);
}
[data-theme="dark"] .table tbody tr:nth-child(even){
  background: rgba(36,39,56,.94);
}
[data-theme="dark"] .table-hover tbody tr:hover{
  background: rgba(255,179,71,.18);
  transform: translate3d(0,-1px,0);
}

.table-list thead th{
  text-transform: uppercase;
  font-size:.72rem;
  letter-spacing:.12em;
}

.table-compact thead th,
.table-compact tbody td{
  padding: .6rem .75rem;
}

.table-list tbody tr:nth-child(odd),
.table-crud tbody tr:nth-child(odd){
  background: rgba(255,255,255,.98);
}
.table-list tbody tr:nth-child(even),
.table-crud tbody tr:nth-child(even){
  background: rgba(255,244,224,.24);
}

[data-theme="dark"] .table-list tbody tr:nth-child(odd),
[data-theme="dark"] .table-crud tbody tr:nth-child(odd){
  background: rgba(28,30,44,.92);
}
[data-theme="dark"] .table-list tbody tr:nth-child(even),
[data-theme="dark"] .table-crud tbody tr:nth-child(even){
  background: rgba(36,39,56,.94);
}

.table-list .col-id,
.table-crud .col-id{ width: 54px; white-space: nowrap; }
.table-list .col-name,
.table-crud .col-name{ min-width: 168px; max-width: 240px; }
.table-list .col-client,
.table-crud .col-client{ min-width: 190px; max-width: 280px; }
.table-list .col-product,
.table-crud .col-product{ min-width: 220px; max-width: 320px; }
.table-list .col-email,
.table-crud .col-email{ min-width: 210px; max-width: 300px; }
.table-list .col-company,
.table-crud .col-company{ min-width: 180px; max-width: 260px; }
.table-list .col-phone,
.table-crud .col-phone{ width: 148px; }
.table-list .col-status,
.table-crud .col-status{ width: 126px; }
.table-list .col-date,
.table-crud .col-date{ width: 160px; white-space: nowrap; }
.table-list .col-quantity,
.table-crud .col-quantity{ width: 80px; text-align: center; }
.table-list .col-price,
.table-crud .col-price{ width: 150px; }
.table-list .col-amount,
.table-crud .col-amount{ width: 160px; }
.table-list .col-sku,
.table-crud .col-sku{ width: 148px; white-space: nowrap; }
.table-list .col-version,
.table-crud .col-version{ width: 148px; white-space: nowrap; }
.table-list .col-username,
.table-crud .col-username{ width: 168px; white-space: nowrap; }
.table-list .col-license,
.table-crud .col-license{ min-width: 200px; max-width: 320px; }
.table-list .col-key,
.table-crud .col-key{ min-width: 220px; max-width: 360px; }
.table-list .col-key .truncate,
.table-crud .col-key .truncate,
.table-list .col-license .truncate,
.table-crud .col-license .truncate{
  font-family: "Roboto Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .82rem;
  letter-spacing: .02em;
}
.table-list .col-ip,
.table-crud .col-ip{ width: 176px; white-space: nowrap; }
.table-list .col-actions,
.table-crud .col-actions{
  width: 320px;
  white-space: nowrap;
}
.table-list .col-actions .action-buttons,
.table-crud .col-actions .action-buttons{
  display:flex;
  gap:.65rem;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:nowrap;
}

.table-list .col-actions .btn,
.table-crud .col-actions .btn{
  flex:0 0 auto;
}

.table-crud .valid-ip-list{
  display:inline-block;
  white-space:pre-line;
  word-break:break-word;
  line-height:1.45;
  font-size:.85rem;
}

@media (max-width: 576px){
  .table-list .col-actions,
  .table-crud .col-actions{
    width:auto;
  }
  .table-list .col-actions .action-buttons,
  .table-crud .col-actions .action-buttons{
    flex-wrap:wrap;
  }
}

/* Clientes - contraste aprimorado no modo escuro */
[data-theme="dark"] .table-clients tbody tr{
  position: relative;
  background: rgba(28,30,46,.92);
  overflow: hidden;
}
[data-theme="dark"] .table-clients tbody tr:nth-child(odd){
  background: linear-gradient(110deg, rgba(255,140,0,.22), rgba(33,35,52,.94));
}
[data-theme="dark"] .table-clients tbody tr:nth-child(even){
  background: linear-gradient(110deg, rgba(255,179,71,.18), rgba(40,42,60,.95));
}
[data-theme="dark"] .table-clients tbody tr::after{
  content: "";
  position: absolute;
  inset: 0;
  border-left: 3px solid rgba(255,179,71,.38);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
[data-theme="dark"] .table-clients tbody tr:hover::after{
  opacity: 1;
}
[data-theme="dark"] .table-clients tbody tr:hover{
  transform: translate3d(0,-1px,0);
  box-shadow: 0 18px 28px rgba(0,0,0,.35);
}
[data-theme="dark"] .table-clients tbody td,
[data-theme="dark"] .table-clients tbody td span,
[data-theme="dark"] .table-clients tbody td small{
  color: rgba(252,253,255,.96) !important;
}

.table-list .col-actions .action-buttons{
  display:flex;
  gap:.65rem;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:nowrap;
}

.table-list .col-actions .btn{
  flex:0 0 auto;
}

@media (max-width: 576px){
  .table-list .col-actions{
    width:auto;
  }
  .table-list .col-actions .action-buttons{
    flex-wrap:wrap;
  }
}

.table-list .text-muted small{
  font-weight:500;
}

.truncate{
  display:inline-block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:middle;
}
.truncate-sm{ max-width: 160px; }
.truncate-md{ max-width: 220px; }
.truncate-lg{ max-width: 280px; }
.truncate-xl{ max-width: 360px; }

table .text-muted,
.table .text-muted{
  color: rgba(85,91,115,.78) !important;
}

[data-theme="dark"] table .text-muted,
[data-theme="dark"] .table .text-muted{
  color: rgba(196,202,222,.78) !important;
}

/* =============== Badges / Chips =============== */
.badge{
  border-radius:999px;
  padding:.45em .7em;
  font-weight:700;
  background: rgba(255,140,0,.14);
  color: var(--primary-700);
}
[data-theme="dark"] .badge{
  background: rgba(255,140,0,.22);
  color:#fff;
}

/* =============== Status pills =============== */
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-weight:700;
  border-radius:999px;
  padding:.25rem .75rem;
  text-transform: uppercase;
  font-size:.72rem;
  letter-spacing:.08em;
}
.status-pill::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
  opacity:.7;
}
.status-pill-active{ background: rgba(34,197,94,.14); color:#15803d; }
.status-pill-inactive{ background: rgba(148,163,184,.2); color:#334155; }
.status-pill-revoked,
.status-pill-canceled{ background: rgba(239,68,68,.16); color:#b91c1c; }
.status-pill-pending{ background: rgba(250,204,21,.2); color:#92400e; }
.status-pill-paid{ background: rgba(59,130,246,.18); color:#1d4ed8; }
.status-pill-unpaid{ background: rgba(234,179,8,.22); color:#92400e; }

[data-theme="dark"] .status-pill-active{ background: rgba(34,197,94,.22); color:#86efac; }
[data-theme="dark"] .status-pill-inactive{ background: rgba(148,163,184,.18); color:#e2e8f0; }
[data-theme="dark"] .status-pill-revoked,
[data-theme="dark"] .status-pill-canceled{ background: rgba(239,68,68,.22); color:#fecaca; }
[data-theme="dark"] .status-pill-pending{ background: rgba(250,204,21,.28); color:#fde68a; }
[data-theme="dark"] .status-pill-paid{ background: rgba(59,130,246,.28); color:#bfdbfe; }
[data-theme="dark"] .status-pill-unpaid{ background: rgba(234,179,8,.32); color:#fde68a; }

/* =============== Paginação =============== */
.page-link{
  border-radius:12px !important;
  color: var(--muted);
  border-color: rgba(26,29,41,.08);
  font-weight:600;
}
.page-item.active .page-link{
  background: linear-gradient(135deg, var(--primary), var(--primary-grad));
  border-color: var(--primary);
  color:#fff;
}
.page-link:hover{
  color: var(--primary-700);
  border-color: rgba(255,140,0,.35);
}
[data-theme="dark"] .page-link{
  border-color: rgba(255,255,255,.08);
  color: var(--muted);
}

/* =============== Tooltips (melhor contraste) =============== */
.tooltip .tooltip-inner{
  font-weight:600;
  padding:6px 10px;
}

/* =============== Imagens de gráfico no card =============== */
.card .card-body img{
  max-height: 240px;
  object-fit: contain;
}

/* =============== Utilidades =============== */
.card-link{
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease;
  display:block;
}
.card-link:hover{ transform: scale(1.02); }

.hr-soft{
  height:1px;
  background: var(--border);
  border:0;
  opacity:.6;
}

/* =============== Form actions & Logo switch =============== */
.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:.5rem;
}

[class^="app-logo"] {
  display:inline-block;
  vertical-align:middle;
}

.app-logo {
  height:auto;
  max-height:44px;
  max-width: clamp(140px, 18vw, 240px);
  width:auto;
  margin-right:10px;
  flex-shrink:0;
  object-fit:contain;
}

.app-logo-lg {
  max-height:60px;
  margin:0 6px;
}

#logo-dark{display:none;}
[data-theme="dark"] #logo-light{display:none;}
[data-theme="dark"] #logo-dark{display:inline;}
body:not([data-theme="dark"]) #logo-light{display:inline;}
body:not([data-theme="dark"]) #logo-dark{display:none;}

/* =============== Login =============== */
.auth-wrapper{
  min-height: 100vh;
  padding: 4rem 1rem;
}

.auth-card{
  width: min(420px, 100%);
  border-radius: 24px;
  border: 1px solid rgba(26,29,41,.08);
  background: rgba(255,255,255,.96);
  box-shadow: 0 32px 64px rgba(15,17,24,.18);
}
[data-theme="dark"] .auth-card{
  background: rgba(29,30,44,.92);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 46px 88px rgba(0,0,0,.6);
}
.auth-card .card-header{
  text-align: center;
  font-size: 1rem;
  letter-spacing: .28em;
}