:root{--bg0:#050b22;--bg1:#07143a;--card:rgba(255,255,255,.06);--line:rgba(140,180,255,.18);--ink:#eaf2ff;--muted:rgba(234,242,255,.68);--blue:#4aa3ff;--radius:18px;--shadow:0 10px 30px rgba(0,0,0,.35);--blur:14px;--font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:radial-gradient(1200px 700px at 12% 18%, rgba(74,163,255,.22), transparent 55%),radial-gradient(900px 600px at 84% 10%, rgba(47,125,255,.18), transparent 55%),linear-gradient(180deg,var(--bg0),var(--bg1))}
a{color:var(--ink);text-decoration:none}.link{color:var(--blue)}.muted{color:var(--muted)}
.app{display:flex;min-height:100vh}
.sidebar{width:270px;padding:18px 14px;border-right:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));backdrop-filter:blur(var(--blur))}
.brand{display:flex;gap:12px;align-items:center;padding:10px 10px 14px}
.logo{width:42px;height:42px;border-radius:14px;background:radial-gradient(circle at 30% 30%, rgba(74,163,255,.85), rgba(47,125,255,.35));box-shadow:var(--shadow);display:grid;place-items:center;font-weight:800}
.brand-txt .name{font-weight:700;line-height:1.1}.brand-txt .sub{font-size:12px;color:var(--muted)}
.nav{display:flex;flex-direction:column;gap:6px;padding:6px}
.nav-item{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;border:1px solid transparent;color:var(--muted)}
.nav-item:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.nav-item.active{background:linear-gradient(90deg, rgba(74,163,255,.22), rgba(255,255,255,.04));border-color:rgba(74,163,255,.35);color:var(--ink)}
.ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));backdrop-filter:blur(var(--blur));position:sticky;top:0;z-index:50}
.search{position:relative;width:min(680px,60vw);display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;border:1px solid rgba(140,180,255,.22);background:rgba(0,0,0,.15)}
.search input{border:0;outline:0;background:transparent;color:var(--ink);width:100%;font-size:14px}
.search-results{position:absolute;top:48px;left:0;right:0;background:rgba(6,12,34,.92);border:1px solid rgba(140,180,255,.25);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.search-results.hidden{display:none}
.search-results a{display:block;padding:10px 12px}.search-results a:hover{background:rgba(255,255,255,.06)}
.btn{border:1px solid rgba(140,180,255,.25);background:rgba(255,255,255,.06);color:var(--ink);padding:10px 12px;border-radius:16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.btn:hover{border-color:rgba(74,163,255,.45);background:rgba(255,255,255,.08)}
.btn.primary{background:linear-gradient(90deg, rgba(74,163,255,.28), rgba(47,125,255,.18));border-color:rgba(74,163,255,.45)}
.btn.ghost{background:transparent}
.badge{background:rgba(255,92,122,.95);color:#fff;font-size:11px;padding:2px 7px;border-radius:999px;margin-left:6px}
.dropdown{position:relative}.dd-menu{display:none;position:absolute;right:0;top:46px;min-width:220px;background:rgba(6,12,34,.92);border:1px solid rgba(140,180,255,.25);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.dd-menu.wide{min-width:360px}
.dd-menu a{display:block;padding:10px 12px}.dd-menu a:hover{background:rgba(255,255,255,.06)}
.dd-head{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid rgba(140,180,255,.14)}
.dd-body{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.content{padding:18px;max-width:1200px}
.card{background:var(--card);border:1px solid rgba(140,180,255,.18);border-radius:var(--radius);backdrop-filter:blur(var(--blur));box-shadow:var(--shadow);padding:16px}
.hr{height:1px;background:rgba(140,180,255,.14);margin:14px 0}
.grid{display:grid;gap:14px}.grid.kpi{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi .v{font-size:26px;font-weight:900}.kpi .l{font-size:12px;color:var(--muted)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{font-size:12px;color:var(--muted);text-align:left;padding:0 10px 6px}
.table td{padding:12px 10px;background:rgba(255,255,255,.04);border-top:1px solid rgba(140,180,255,.12);border-bottom:1px solid rgba(140,180,255,.12)}
.table tr td:first-child{border-left:1px solid rgba(140,180,255,.12);border-top-left-radius:14px;border-bottom-left-radius:14px}
.table tr td:last-child{border-right:1px solid rgba(140,180,255,.12);border-top-right-radius:14px;border-bottom-right-radius:14px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;border:1px solid rgba(140,180,255,.18);background:rgba(255,255,255,.03)}
.chip.good{border-color:rgba(47,230,166,.35);color:#2fe6a6}
.chip.warn{border-color:rgba(255,204,102,.35);color:#ffcc66}
.chip.bad{border-color:rgba(255,92,122,.35);color:#ff5c7a}
.form{display:grid;gap:10px}.field{display:grid;gap:6px}
.field label{font-size:12px;color:var(--muted)}
.field input,.field select,.field textarea{background:rgba(0,0,0,.18);border:1px solid rgba(140,180,255,.22);color:var(--ink);border-radius:14px;padding:10px 12px;outline:none}
.field textarea{min-height:120px;resize:vertical}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.note{padding:10px 12px;border:1px solid rgba(140,180,255,.18);border-radius:16px;background:rgba(255,255,255,.04)}
.note .t{font-weight:700;font-size:13px}.note .s{font-size:12px;color:var(--muted);margin-top:3px}
.kanban{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:12px;overflow:auto;padding-bottom:8px}
.kcol{border:1px solid rgba(140,180,255,.16);border-radius:16px;background:rgba(255,255,255,.03);padding:10px}
.khead{display:flex;justify-content:space-between;align-items:center;padding:4px 2px 10px}
.klist{display:flex;flex-direction:column;gap:10px;min-height:80px}
.kcard{border:1px solid rgba(140,180,255,.18);border-radius:16px;background:rgba(255,255,255,.05);padding:10px;cursor:grab}
@media(max-width:1000px){.grid.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar{display:none}.content{max-width:none}}

/* Client UI upgrades */
.auth{display:grid;place-items:center;min-height:100vh;padding:18px}
.auth-wrap{width:min(520px,92vw)}
.auth-card{background:rgba(255,255,255,.06);border:1px solid rgba(140,180,255,.18);border-radius:22px;backdrop-filter:blur(16px);box-shadow:0 20px 60px rgba(0,0,0,.45);padding:18px}
.auth-brand{display:flex;gap:12px;align-items:center}
.auth-title{font-weight:900;font-size:20px;letter-spacing:.2px}
.auth-foot{margin-top:14px;font-size:12px}

.client-content{max-width:1280px}
.page-head{display:flex;flex-direction:column;gap:2px}
.page-title{font-weight:900;font-size:18px}
.page-sub{font-size:12px}

.side-card{margin:8px 10px 12px;padding:12px;border:1px solid rgba(140,180,255,.18);border-radius:16px;background:rgba(0,0,0,.14)}
.side-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px}
.hero-title{font-weight:950;font-size:22px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat-card{background:rgba(255,255,255,.06);border:1px solid rgba(140,180,255,.18);border-radius:18px;backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(0,0,0,.35);padding:14px}
.stat-value{font-weight:950;font-size:30px;margin-top:6px}

.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.section-title{font-weight:900;font-size:16px}

@media(max-width:1000px){
  .stat-grid{grid-template-columns:1fr}
  .hero{align-items:flex-start;flex-direction:column}
}

/* Bank-like payments UI */
.pay-list{display:flex;flex-direction:column;gap:12px}
.pay-item{border:1px solid rgba(140,180,255,.16);border-radius:18px;background:rgba(255,255,255,.03);overflow:hidden}
.pay-main{padding:14px}
.pay-title{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-weight:900}
.pay-sub{font-size:12px;margin-top:6px}
.pay-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pix-box{border-top:1px solid rgba(140,180,255,.14);background:rgba(0,0,0,.10);padding:14px}
.pix-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:14px;align-items:start}
.pix-label{font-size:12px}
.pix-payload{margin-top:8px;padding:12px;border-radius:16px;border:1px solid rgba(140,180,255,.18);background:rgba(255,255,255,.04);word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.pix-qr{width:220px;height:220px;border-radius:16px;border:1px solid rgba(140,180,255,.18);background:rgba(255,255,255,.03)}
@media(max-width:1000px){.pix-grid{grid-template-columns:1fr}.pix-qr{width:200px;height:200px}}

/* Icon-only action buttons */
.iconbtn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid rgba(140,180,255,.22);background:rgba(255,255,255,.05);color:var(--ink);cursor:pointer}
.iconbtn:hover{background:rgba(255,255,255,.08);border-color:rgba(74,163,255,.45)}
.iconbtn .ico svg{width:18px;height:18px}
.iconbtn.view{color:#eaf2ff}
.iconbtn.edit{color:#7dd3ff}
.iconbtn.toggle-off{color:#ff5c7a;border-color:rgba(255,92,122,.35)}
.iconbtn.toggle-on{color:#2fe6a6;border-color:rgba(47,230,166,.35)}
.iconbtn.delete{color:#ff5c7a;border-color:rgba(255,92,122,.35)}
.iconbtn.delete:hover{background:rgba(255,92,122,.12)}

/* Dashboard upgraded */
.dash-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.dash-title{font-weight:950;font-size:22px}
.dash-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.select{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:16px;border:1px solid rgba(140,180,255,.22);background:rgba(0,0,0,.14)}
.select label{font-size:12px;color:var(--muted)}
.select select{border:0;outline:0;background:transparent;color:var(--ink)}
.dash-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.kpi-card{grid-column:span 3}
.panel{grid-column:span 6}
.panel.wide{grid-column:span 12}
.panel.third{grid-column:span 4}
.kpi-big{font-weight:950;font-size:28px;margin-top:6px}
.kpi-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.kpi-ico{width:40px;height:40px;border-radius:16px;display:grid;place-items:center;border:1px solid rgba(140,180,255,.18);background:rgba(255,255,255,.05)}
.kpi-ico svg{width:18px;height:18px}
.chart-wrap{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.chart-legend{display:flex;flex-direction:column;gap:8px}
.legend-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:999px;background:rgba(74,163,255,.8);border:1px solid rgba(255,255,255,.25)}
.dot.g{background:rgba(47,230,166,.85)}
.dot.r{background:rgba(255,92,122,.9)}
.dot.y{background:rgba(255,204,102,.9)}
.mini-table{width:100%;border-collapse:collapse}
.mini-table td,.mini-table th{padding:10px 8px;border-bottom:1px solid rgba(140,180,255,.12);font-size:13px}
.mini-table th{color:var(--muted);font-size:12px;text-align:left}
.spark{width:100%;height:90px}
@media(max-width:1100px){
  .kpi-card{grid-column:span 6}
  .panel,.panel.third{grid-column:span 12}
}

/* Font Awesome colored icons */
.ico.fa{display:inline-flex;align-items:center;justify-content:center;width:22px}
.ico.fa i{font-size:16px}
.c-blue{color:rgba(74,163,255,.95)}
.c-cyan{color:rgba(125,211,255,.95)}
.c-green{color:rgba(47,230,166,.95)}
.c-yellow{color:rgba(255,204,102,.95)}
.c-orange{color:rgba(255,149,84,.95)}
.c-purple{color:rgba(186,142,255,.95)}

/* Contrast patch */
:root{
  --muted: rgba(234,242,255,.82);
}
.table th{color:rgba(234,242,255,.80)}
.card{background:rgba(255,255,255,.07)}
.select{background:rgba(0,0,0,.22);border-color:rgba(140,180,255,.30)}
.select select{color:rgba(234,242,255,.92);cursor:pointer}
.field input,.field select,.field textarea{background:rgba(0,0,0,.22);border-color:rgba(140,180,255,.30)}
.field select{cursor:pointer}

/* Month select accent */
.month-select{color:rgba(74,163,255,.95)!important;font-weight:800}

/* Table alignment */
.table-fixed{table-layout:fixed;width:100%}
.table-fixed th,.table-fixed td{vertical-align:middle}
.table-fixed td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-nome{width:18%}
.col-email{width:32%}
.col-telefone{width:14%}
.col-site{width:8%;text-align:center}
.col-mes{width:6%}
.col-status{width:6%}
.col-acoes{width:180px;text-align:right}
.col-acoes .actions{display:flex;justify-content:flex-end;gap:10px}

/* Clientes compact */
.clients-compact .table th,
.clients-compact .table td{padding:8px 10px}
.clients-compact .table th{font-size:12px}
.clients-compact .table td{font-size:13px}
.clients-compact .iconbtn{width:36px;height:36px;border-radius:12px}
.clients-compact .chip{padding:5px 10px;font-size:12px}
.clients-compact .card{padding:14px}
.clients-compact .hr{margin:10px 0}
.clients-compact .flash{margin:8px 0}
.clients-compact .col-acoes{width:150px}
.clients-compact .col-site{width:6%}
.clients-compact .col-mes{width:5%}
.clients-compact .col-status{width:6%}
@media(max-width:1100px){
  .clients-compact .col-email{width:28%}
}

/* Clientes one-line */
.clients-compact .col-status{width:8%}
.clients-compact .col-acoes{width:220px}
.clients-compact .col-acoes .actions{flex-wrap:nowrap}
.clients-compact .col-acoes .iconbtn{flex:0 0 auto}
.clients-compact .col-site{width:6%}
.clients-compact .table td.col-status{overflow:visible}
.clients-compact .table td.col-acoes{overflow:visible}

.clients-compact .table td.col-status{white-space:nowrap;text-overflow:clip}

/* Sparkline */
.sparkline{width:100%;height:120px}

/* Widescreen */
.container{max-width:1600px}
@media(min-width:1500px){
  .container{max-width:1840px}
}
@media(min-width:1900px){
  .container{max-width:96vw}
}

/* Clientes alinhamento */
.table-fixed{table-layout:fixed;width:100%}
.table-fixed th,.table-fixed td{vertical-align:middle}
.table-fixed td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-nome{width:20%}
.col-email{width:34%}
.col-telefone{width:14%}
.col-site{width:6%;text-align:center}
.col-mes{width:6%}
.col-status{width:8%}
.col-acoes{width:220px;text-align:right}
.col-acoes .actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:nowrap}

/* Sidebar buttons */
.sidebar{padding:18px 14px}
.nav{display:flex;flex-direction:column;gap:12px}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(140,180,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 10px 26px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.nav-item:hover{
  transform: translateY(-1px);
  border-color: rgba(140,180,255,.32);
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  box-shadow: 0 12px 30px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-item.active{
  border-color: rgba(74,163,255,.55);
  background:linear-gradient(180deg, rgba(74,163,255,.18), rgba(255,255,255,.03));
}
.nav-item .ico{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(140,180,255,.14);
}
.nav-item .lbl{font-weight:800;letter-spacing:.2px}
.nav-item[href$="logout.php"]{
  border-color: rgba(255,80,120,.25);
  background:linear-gradient(180deg, rgba(255,80,120,.12), rgba(255,255,255,.03));
}
.nav-item[href$="logout.php"] .ico{border-color: rgba(255,80,120,.22)}

/* Sidebar compact */
.nav{gap:8px}
.nav-item{
  padding:9px 12px;
  border-radius:12px;
  text-decoration:none;
  color:inherit;
  transform:none !important;
}
.nav-item:hover{transform:none !important}
.nav-item .ico{
  width:32px;height:32px;border-radius:10px;
}
.nav-item .lbl{font-size:13px; font-weight:800}
.sidebar{padding:14px 12px}

/* Dashboard responsive */
.dash-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.dash-grid .panel{grid-column:span 6}
@media(max-width:1200px){
  .dash-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .dash-grid .panel{grid-column:span 6}
}
@media(max-width:900px){
  .dash-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
  .dash-grid .panel{grid-column:span 1}
}
.chart-wrap{width:100%;overflow-x:auto}
.sparkline{min-width:520px}

/* Month input style */
.select input[type=month]{
  background:rgba(0,0,0,.22);
  border:1px solid rgba(140,180,255,.30);
  border-radius:12px;
  padding:10px 12px;
  color:rgba(234,242,255,.92);
}

/* Dashboard spacing */
.dashboard-wrap{display:flex;flex-direction:column;gap:14px}
.dashboard-wrap .grid{gap:14px}
.dashboard-wrap .card{padding:16px}
.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.section-title{font-size:16px;font-weight:900}
.chart-legend{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.legend-item{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(234,242,255,.72)}
.legend-item .dot{width:10px;height:10px;border-radius:999px;background:rgba(74,163,255,.75)}
.legend-item .dot.g{background:rgba(47,230,166,.78)}
.legend-item .dot.y{background:rgba(255,204,102,.78)}
.legend-item .dot.r{background:rgba(255,80,120,.72)}
.dash-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1200px){ .dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:700px){ .dash-kpis{grid-template-columns:repeat(1,minmax(0,1fr))} }
.kpi-value{font-size:22px;font-weight:900;margin-top:6px}

/* Title case utility for values */
.cap{text-transform:capitalize}

/* Full width + responsive */
html,body{width:100%}
.container{max-width:100% !important;width:100% !important;padding-left:14px;padding-right:14px}
@media(min-width:1200px){.container{padding-left:18px;padding-right:18px}}
@media(max-width:900px){.container{padding-left:10px;padding-right:10px}}

/* Reduce side gutters inside cards/pages */
.card{padding:14px}
@media(min-width:1200px){.card{padding:16px}}
@media(max-width:900px){.card{padding:12px}}

/* Tables: never break layout on mobile */
.table{width:100%}
.table-wrap,.chart-wrap{width:100%;overflow-x:auto}
.table-wrap table{min-width:760px}
@media(max-width:900px){.table-wrap table{min-width:860px}}

/* Forms grids: stack on mobile */
.grid{gap:12px}
@media(max-width:900px){.grid{grid-template-columns:1fr !important}}

/* Main/content spacing */
.main{padding:0 !important}
.content{padding:0 !important}

/* Finance month buttons */
.monthbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  padding:6px 0;
}
.monthbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(140,180,255,.18);
  background:rgba(255,255,255,.04);
  color:rgba(234,242,255,.86);
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  transition: border-color .12s ease, background .12s ease;
}
.monthbtn:hover{
  border-color: rgba(140,180,255,.32);
  background: rgba(255,255,255,.07);
}
.monthbtn.active{
  border-color: rgba(74,163,255,.55);
  background: rgba(74,163,255,.18);
}
@media(max-width:700px){
  .monthbar{justify-content:flex-start}
  .monthbtn{flex:1 0 calc(50% - 8px); text-align:center}
}

/* Index spacing + full width */
.page{width:100%}
.main{width:100%}
.content{width:100%}
.container{max-width:100% !important;width:100% !important}

/* Dashboard grid tighter and consistent */
.dash-grid{gap:10px}
.dash-kpis{gap:10px}
.grid{gap:10px}

/* Avoid cards looking separated unevenly */
.card{margin:0}
.section-head{gap:10px}

/* Increase horizontal use: allow more columns on wide screens */
@media(min-width:1400px){
  .dash-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .dash-grid .panel{grid-column:span 6}
}
@media(min-width:1900px){
  .dash-grid .panel{grid-column:span 4}
}

/* Fix topbar filter wrapping */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Select dark theme */
select, .select select{
  background: rgba(10, 18, 40, .72) !important;
  color: rgba(234,242,255,.92) !important;
  border: 1px solid rgba(140,180,255,.22) !important;
}
select option{
  background: #0b1630;
  color: rgba(234,242,255,.92);
}
select:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(74,163,255,.18);
  border-color: rgba(74,163,255,.55) !important;
}

/* Select dark theme v2 */
:root{ color-scheme: dark; }

.field select,
select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: rgba(10,18,40,.92) !important;
  background-image: none !important;
  color: rgba(234,242,255,.92) !important;
  border: 1px solid rgba(140,180,255,.22) !important;
}
.field select:hover,
select:hover{
  background-color: rgba(10,18,40,.98) !important;
}
.field select:focus,
select:focus{
  background-color: rgba(10,18,40,1) !important;
  color: rgba(234,242,255,.98) !important;
  border-color: rgba(74,163,255,.55) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(74,163,255,.18) !important;
}

.field select option,
select option{
  background-color: #0b1630 !important;
  color: rgba(234,242,255,.92) !important;
}
.field select optgroup,
select optgroup{
  background-color: #0b1630 !important;
  color: rgba(234,242,255,.86) !important;
}
.field select option:checked,
select option:checked{
  background-color: rgba(74,163,255,.30) !important;
  color: rgba(234,242,255,.98) !important;
}

/* Field select width */
.field{min-width:0}
.field select, .field input, .field textarea{width:100%}

/* Sidebar colorful */
.nav-item{position:relative; overflow:hidden}
.nav-item::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .15s ease}
.nav-item:hover::after{opacity:.08}
.nav-item.active::after{opacity:.14}
.nav-item.c-blue::after{background:linear-gradient(90deg, rgba(74,163,255,.9), rgba(74,163,255,0))}
.nav-item.c-green::after{background:linear-gradient(90deg, rgba(47,230,166,.9), rgba(47,230,166,0))}
.nav-item.c-purple::after{background:linear-gradient(90deg, rgba(167,111,255,.9), rgba(167,111,255,0))}
.nav-item.c-pink::after{background:linear-gradient(90deg, rgba(255,80,160,.9), rgba(255,80,160,0))}
.nav-item.c-orange::after{background:linear-gradient(90deg, rgba(255,170,80,.9), rgba(255,170,80,0))}
.nav-item.c-yellow::after{background:linear-gradient(90deg, rgba(255,210,90,.95), rgba(255,210,90,0))}
.nav-item.c-red::after{background:linear-gradient(90deg, rgba(255,80,120,.95), rgba(255,80,120,0))}

/* Dashboard layout grid */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:10px;
}
.kpi-grid .kpi-card{grid-column:span 3}
@media(max-width:1200px){ .kpi-grid .kpi-card{grid-column:span 6} }
@media(max-width:700px){ .kpi-grid .kpi-card{grid-column:span 12} }

.dash-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:10px;
}
.dash-grid .panel{grid-column:span 6}
.dash-grid .panel.w4{grid-column:span 4}
.dash-grid .panel.w8{grid-column:span 8}
.dash-grid .panel.w12{grid-column:span 12}
@media(max-width:1200px){
  .dash-grid .panel, .dash-grid .panel.w4, .dash-grid .panel.w8{grid-column:span 12}
}

/* Dashboard due table no scroll */
.card.panel .table-wrap{overflow:visible !important; max-height:none !important}
.card.panel .table{width:100%}

/* Fix table overflow in panels */
.card.panel{overflow:hidden}
.table{table-layout:fixed}
.table th,.table td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Dashboard spacing fix */
.dash-grid{gap:12px !important}
.kpi-grid{gap:12px !important}
.card.panel{margin:0}

/* Dashboard standard tables */
.card.panel .section-head{padding-bottom:2px}
.card.panel .section-title{font-weight:900}
.table-wrap{width:100%}
.table{width:100%; border-collapse:collapse}
.table thead th{
  font-size:12px;
  color: rgba(234,242,255,.72);
  font-weight:800;
  padding:10px 12px;
}
.table tbody td{
  padding:12px 12px;
}
.table tbody tr{
  background: rgba(255,255,255,.02);
  border:1px solid rgba(140,180,255,.10);
  border-radius:14px;
}
.table tbody tr td:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px}
.table tbody tr td:last-child{border-top-right-radius:14px;border-bottom-right-radius:14px}

/* Dashboard fill layout */
.container,.content,.page,.main{max-width:100% !important;width:100% !important}
.dash-grid{grid-auto-flow:row dense}
.dash-grid .panel{min-width:0}

/* Due table align */
.panel .table-fixed{table-layout:fixed;width:100%}
.panel .table-fixed th:nth-child(1), .panel .table-fixed td:nth-child(1){width:52%}
.panel .table-fixed th:nth-child(2), .panel .table-fixed td:nth-child(2){width:24%}
.panel .table-fixed th:nth-child(3), .panel .table-fixed td:nth-child(3){width:24%}

/* Monthbar buttons */
.monthbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.monthbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(140,180,255,.18);
  color:rgba(234,242,255,.85);
  font-weight:700;
  font-size:12px;
  text-decoration:none;
}
.monthbtn:hover{border-color:rgba(74,163,255,.45);background:rgba(74,163,255,.08)}
.monthbtn.active{background:rgba(74,163,255,.18);border-color:rgba(74,163,255,.55)}
@media(max-width:700px){
  .monthbar{gap:6px}
  .monthbtn{padding:8px 8px;font-size:12px}
}

.sparkline.big{width:100%; height:auto; max-height:320px}

/* Kanban colors */
.kan-legend{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 2px}
.kan-card{position:relative}
.kan-status{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;padding:4px 8px;border-radius:999px;border:1px solid rgba(140,180,255,.18);background:rgba(255,255,255,.04);color:rgba(234,242,255,.78)}
.kan-card.st-todo{border-left:4px solid rgba(74,163,255,.75)}
.kan-card.st-doing{border-left:4px solid rgba(255,210,90,.85)}
.kan-card.st-wait{border-left:4px solid rgba(167,111,255,.85)}
.kan-card.st-done{border-left:4px solid rgba(47,230,166,.85)}
.kan-card.is-over{border-left:4px solid rgba(255,80,120,.95) !important; box-shadow:0 0 0 1px rgba(255,80,120,.20) inset}

/* Modal fix */
.modal{display:none}
.modal[style*="display:block"], .modal.show{display:flex !important;align-items:flex-start;justify-content:center}
.modal-card{width:calc(100% - 24px)}