@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --app-bg:#f6f8fb;
  --app-card:#ffffff;
  --app-text:#0f172a;
  --app-muted:#64748b;
  --app-border:rgba(15,23,42,.08);
  --app-primary:#0b5ed7;
  --app-accent:#f5c400;
  --app-shadow:0 12px 40px rgba(2,6,23,.08);
  --indicacao-result-bg:#ffffff;
  --app-font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

html[data-theme="dark"]{
  --app-bg:#0b1220;
  --app-card:#0b1220;
  --app-text:#ffffff;
  --app-muted:rgba(255,255,255,.90);
  --app-border:rgba(255,255,255,.14);
  --app-primary:#3b82f6;
  --app-accent:#f5c400;
  --app-shadow:0 18px 60px rgba(0,0,0,.35);
  --app-link:#93c5fd;
  --app-link-hover:#bfdbfe;
  --app-input-bg:rgba(255,255,255,.04);
  --app-row-hover:rgba(96,165,250,.08);
  --indicacao-result-bg:rgb(11 18 32);
}

body{
  background:var(--app-bg);
  color:var(--app-text);
  font-family:var(--app-font);
  font-size:clamp(16px, 0.35vw + 15px, 18px);
  line-height:1.5;
}

html[data-theme="dark"] body{
  background:var(--app-bg) !important;
  color:var(--app-text) !important;
}

html[data-theme="dark"] body *{
  color:var(--app-text) !important;
}

html:not([data-theme="dark"]) body *{
  color:var(--app-text) !important;
}

a{
  color:var(--app-link, var(--app-primary));
}
a:hover{
  color:var(--app-link-hover, var(--app-primary));
}

html[data-theme="dark"] a,
html[data-theme="dark"] a:hover{
  color:var(--app-text) !important;
}

.app-shell{
  min-height:100vh;
  display:flex;
}

.app-sidebar{
  width:280px;
  background:linear-gradient(180deg, rgba(37,99,235,.14), rgba(251,191,36,.08));
  border-right:1px solid var(--app-border);
  padding:18px;
  position:sticky;
  top:0;
  height:100vh;
}

html[data-theme="dark"] .app-sidebar{
  background:var(--app-bg);
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-body,
html[data-theme="dark"] .bg-body-secondary,
html[data-theme="dark"] .bg-body-tertiary{
  background-color:var(--app-bg) !important;
}

html[data-theme="dark"] .text-dark{
  color:var(--app-text) !important;
}

html[data-theme="dark"] .modal-content{
  background:var(--app-bg) !important;
  border-color:var(--app-border) !important;
  color:var(--app-text) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer{
  border-color:var(--app-border) !important;
}

html[data-theme="dark"] .modal .btn-close{
  filter:invert(1) grayscale(100%);
  opacity:.85;
}

.app-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:var(--app-card);
  box-shadow:var(--app-shadow);
}

.app-brand-badge{
  width:38px;height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(37,99,235,.12);
  color:var(--app-primary);
}

.app-logo{
  max-width:220px;
  width:100%;
  height:auto;
}

.app-sidebar-logo{
  width:44px;
  height:44px;
  object-fit:contain;
  border-radius:12px;
  background:rgba(37,99,235,.12);
}

.app-topbar-logo{
  width:34px;
  height:34px;
  object-fit:contain;
  border-radius:10px;
  background:rgba(37,99,235,.12);
}

.app-nav .nav-link{
  border-radius:12px;
  padding:10px 12px;
  color:var(--app-text);
  display:flex;
  align-items:center;
  gap:10px;
  transition:all .15s ease;
}
.app-nav .nav-link:hover{
  background:rgba(37,99,235,.10);
  transform:translateY(-1px);
}
.app-nav .nav-link.active{
  background:rgba(37,99,235,.14);
  color:var(--app-primary);
}

.app-main{
  flex:1;
  padding:22px;
}

.app-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.app-topbar .fw-semibold{
  font-size:1.18rem;
}

.app-auth-card .fw-bold{
  font-size:1.7rem;
  letter-spacing:-.01em;
}

.app-auth-card .fw-semibold{
  font-size:1.2rem;
}

.app-auth-card .text-muted.small{
  font-size:1.02rem;
}

.form-label{
  font-weight:600;
  font-size:1.02rem;
}

.form-control,.form-select{
  font-size:1.06rem;
  padding:.7rem .9rem;
}

.btn{
  font-weight:600;
  letter-spacing:.2px;
  font-size:1.04rem;
  padding:.72rem 1.02rem;
}

.btn-sm{
  font-size:.96rem;
  padding:.45rem .75rem;
}

.card{
  border:1px solid var(--app-border);
  background:var(--app-card);
  box-shadow:var(--app-shadow);
  border-radius:16px;
}


html[data-theme="dark"] .card{
  background:var(--app-bg);
  color:var(--app-text);
}

html[data-theme="dark"] .card .fw-semibold,
html[data-theme="dark"] .card .fw-bold{
  color:var(--app-text);
}
.table{
  color:var(--app-text);
}
.table thead th{
  color:var(--app-muted);
  font-weight:600;
  border-bottom:1px solid var(--app-border);
}
.table td{
  border-top:1px solid var(--app-border);
  vertical-align:middle;
}

html[data-theme="dark"] .table-responsive{
  background:var(--app-bg);
}

html[data-theme="dark"] .table{
  background:var(--app-bg);
  --bs-table-bg: var(--app-bg);
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border);
}

html[data-theme="dark"] .table>:not(caption)>*>*{
  background-color:var(--app-bg) !important;
  color:var(--app-text) !important;
}

html[data-theme="dark"] .table thead th{
  color:#ffffff;
}

html[data-theme="dark"] .table tbody tr:hover > *{
  background:var(--app-row-hover);
}

.btn-primary{
  background:var(--app-primary);
  border-color:var(--app-primary);
}

html[data-theme="dark"] .btn-primary{
  color:#ffffff;
}

html[data-theme="dark"] .btn-outline-secondary{
  color:#ffffff;
  border-color:rgba(255,255,255,.28);
}
html[data-theme="dark"] .btn-outline-secondary:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.36);
}
html[data-theme="dark"] .btn-outline-primary{
  color:#ffffff;
  border-color:rgba(96,165,250,.55);
}
html[data-theme="dark"] .btn-outline-primary:hover{
  background:rgba(96,165,250,.12);
  border-color:rgba(96,165,250,.75);
}

.badge-accent{
  background:rgba(251,191,36,.18);
  color:#a16207;
  border:1px solid rgba(251,191,36,.28);
}

html[data-theme="dark"] .badge-accent{
  color:#fde68a;
  border-color:rgba(251,191,36,.35);
  background:rgba(251,191,36,.14);
}

.app-kpi{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.app-kpi .icon{
  width:44px;height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(37,99,235,.12);
  color:var(--app-primary);
}

.form-control,.form-select{
  border-radius:12px;
  border-color:var(--app-border);
  background:transparent;
  color:var(--app-text);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text{
  background:var(--app-input-bg);
}

html[data-theme="dark"] .form-control::placeholder{
  color:rgba(255,255,255,.65);
}

.form-control:focus,.form-select:focus{
  border-color:rgba(37,99,235,.45);
  box-shadow:0 0 0 .25rem rgba(37,99,235,.12);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus{
  border-color:rgba(96,165,250,.75);
  box-shadow:0 0 0 .25rem rgba(96,165,250,.14);
}

.text-muted{
  color:var(--app-muted) !important;
}

html[data-theme="dark"] .text-muted{
  color:var(--app-text) !important;
}

.app-auth{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.app-auth-card{
  width:100%;
  max-width:440px;
}

#qrcode img,
#qrcode canvas{
  max-width:100%;
  height:auto;
  display:block;
}

.app-qrcode-frame{
  background:#ffffff;
  border:2px solid #ffffff;
  border-radius:14px;
  padding:12px;
  display:inline-block;
}

@media (max-width: 992px){
  .app-sidebar{
    position:fixed;
    left:-300px;
    z-index:1040;
    transition:left .2s ease;
    background:var(--app-card);
    box-shadow:var(--app-shadow);
  }
  .app-sidebar.open{
    left:0;
  }
  .app-main{
    padding:16px;
  }
}