/* PTCPro UI - white professional theme + 3D sidebar */
:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --card:#ffffff;
  --border:#e2e8f0;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --accent1:#4f46e5;
  --accent2:#06b6d4;
}

html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji';
}
a{color:inherit; text-decoration:none;}
.container-xxl{max-width:1200px;}

.topbar{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--border);
}

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

.badgex{
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:.8rem;
}

.btnx{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem 1rem;
  border-radius:12px;
  border:1px solid var(--border);
  background: linear-gradient(135deg, rgba(79,70,229,.10), rgba(6,182,212,.10));
  transition: transform .15s ease, box-shadow .15s ease;
}
.btnx:hover{transform: translateY(-1px); box-shadow:0 12px 28px rgba(2,6,23,.10);}
.btnx.primary{
  border:none;
  color:white;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
}

.layout{
  display:grid;
  grid-template-columns: 280px 1fr;
  min-height:100vh;
}

.sidebar{
  border-right:1px solid var(--border);
  padding:18px;
  position:sticky;
  top:0;
  height:100vh;
  background: linear-gradient(180deg, rgba(79,70,229,.06), rgba(6,182,212,.03));
}

.brand{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:16px;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(2,6,23,.06);
  margin-bottom:16px;
}
.brand .logo{
  width:36px; height:36px; border-radius:12px;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  box-shadow:0 10px 22px rgba(79,70,229,.25);
}
.brand .title{font-weight:800; letter-spacing:.2px;}
.brand .sub{font-size:.85rem; color:var(--muted);}

.nav3d{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}
.nav3d a{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.9);
  transform: perspective(700px) rotateX(0deg) rotateY(0deg) translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  will-change: transform;
}
.nav3d a:hover{
  transform: perspective(700px) rotateX(6deg) rotateY(-6deg) translateY(-2px);
  box-shadow: 0 16px 40px rgba(2,6,23,.10);
  background: rgba(255,255,255,1);
}
.nav3d a.active{
  border:none;
  color:white;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
}
.nav3d .ico{
  width:34px; height:34px; border-radius:12px;
  display:grid; place-items:center;
  background: rgba(15,23,42,.06);
}
.nav3d a.active .ico{background: rgba(255,255,255,.18);}

.main{
  padding:18px 18px 40px;
}

@media (max-width: 992px){
  .layout{grid-template-columns: 1fr;}
  .sidebar{position:relative; height:auto;}
}


/* Dark mode (toggle adds .dark on body) */
body.dark{
  --bg:#0b1220;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --card:#0f172a;
  --border:#22304a;
  --shadow: 0 12px 34px rgba(0,0,0,.35);
}
body.dark .topbar{background:rgba(15,23,42,.75); border-bottom:1px solid var(--border);}
body.dark .sidebar{background: linear-gradient(180deg, rgba(79,70,229,.14), rgba(6,182,212,.06));}


/* Premium Landing + Auth */
.landing-body{
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(79,70,229,.22), transparent 55%),
    radial-gradient(900px 500px at 90% 20%, rgba(6,182,212,.18), transparent 55%),
    linear-gradient(180deg, #ffffff, #f7f8ff 60%, #ffffff);
  color:#0f172a;
}
.landing-hero{
  padding: 64px 0 40px;
}
.landing-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 0;
}
.landing-brand{
  display:flex; gap:12px; align-items:center;
}
.landing-brand .logo{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(79,70,229,.95), rgba(6,182,212,.85));
  box-shadow: 0 18px 40px rgba(79,70,229,.22);
  color:white; font-weight:800;
}
.landing-brand .name{font-weight:800; letter-spacing:.2px;}
.landing-brand .tag{font-size:.85rem; color:#64748b;}

.hero-grid{
  display:grid; grid-template-columns: 1.25fr .75fr; gap: 26px;
}
@media (max-width: 992px){
  .hero-grid{grid-template-columns:1fr; }
}
.hero-card{
  border:1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(15,23,42,.08);
  padding: 28px;
}
.hero-title{
  font-size: 2.35rem;
  line-height:1.12;
  font-weight: 900;
  margin:0 0 10px;
}
.hero-sub{color:#475569; font-size:1.05rem; margin:0 0 18px;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px;}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(79,70,229,.08);
  border:1px solid rgba(79,70,229,.18);
  color:#3730a3;
  font-weight:700;
  font-size:.9rem;
}
.feature-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 16px;
}
@media (max-width: 992px){ .feature-grid{grid-template-columns:1fr;} }
.feature{
  border-radius: 18px;
  padding: 18px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.68);
  box-shadow: 0 18px 44px rgba(15,23,42,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(15,23,42,.10);
}
.feature .ico{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background: rgba(6,182,212,.12);
  border:1px solid rgba(6,182,212,.20);
  font-size:1.2rem;
  margin-bottom: 10px;
}
.pricing{
  border-radius: 22px;
  padding: 22px;
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.92));
  box-shadow: 0 22px 70px rgba(15,23,42,.08);
}
.mini-stat{
  display:flex; justify-content:space-between; align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px dashed rgba(15,23,42,.14);
  color:#334155;
  background: rgba(255,255,255,.65);
  margin-top:10px;
}

/* Auth */
.auth-wrap{
  min-height:100vh; display:grid; place-items:center; padding: 26px 12px;
}
.auth-card{
  width: min(460px, 100%);
  border-radius: 24px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  box-shadow: 0 28px 90px rgba(15,23,42,.12);
  padding: 26px;
}
.auth-card .brand{
  display:flex; gap:12px; align-items:center; margin-bottom: 14px;
}
.auth-card .brand .logo{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(79,70,229,.95), rgba(6,182,212,.85));
  color:white; font-weight:900;
}
.auth-card .brand .name{font-weight:900;}
.auth-card .brand .tag{font-size:.85rem; color:#64748b;}
.auth-card .title{font-weight:900; margin: 6px 0 2px;}
.auth-card .sub{color:#64748b; margin:0 0 16px;}
.auth-footer{margin-top:14px; font-size:.92rem; display:flex; justify-content:space-between;}
.auth-footer .link{color:#4f46e5; text-decoration:none; font-weight:700;}


/* ===== Premium Dashboards ===== */
.dash-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
}
@media (max-width: 992px){
  .dash-grid{grid-template-columns: repeat(6,1fr);}
}
@media (max-width: 576px){
  .dash-grid{grid-template-columns: repeat(2,1fr);}
}
.stat-card{
  grid-column: span 3;
  border-radius: 22px;
  padding: 18px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.80);
  box-shadow: 0 22px 70px rgba(15,23,42,.07);
  position: relative;
  overflow: hidden;
}
.stat-card::before{
  content:"";
  position:absolute; inset:-120px -120px auto auto;
  width:220px; height:220px; border-radius: 60px;
  background: radial-gradient(circle at 30% 30%, rgba(79,70,229,.35), rgba(6,182,212,.10) 55%, transparent 70%);
  transform: rotate(12deg);
  pointer-events:none;
}
.stat-title{color:#64748b; font-weight:800; font-size:.9rem; letter-spacing:.2px;}
.stat-value{font-weight:950; font-size: 1.75rem; margin-top:6px;}
.stat-meta{margin-top:8px; color:#64748b; font-size:.9rem;}
.badge-soft{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(79,70,229,.20);
  background: rgba(79,70,229,.08);
  color:#3730a3;
  font-weight:800;
  font-size:.85rem;
}
.panel-card{
  border-radius: 22px;
  border:1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.78);
  box-shadow: 0 22px 80px rgba(15,23,42,.08);
  overflow:hidden;
}
.panel-head{
  padding: 16px 18px;
  border-bottom:1px solid rgba(15,23,42,.06);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.panel-title{font-weight:950;}
.panel-sub{color:#64748b; font-size:.9rem;}
.panel-body{padding: 16px 18px;}
.quick-actions{display:flex; gap:10px; flex-wrap:wrap;}
.quick-actions .btn{
  border-radius: 14px;
}
.mini-chart{
  width:100%;
  height: 160px;
}
.table-modern thead th{color:#64748b; font-weight:900; font-size:.85rem; text-transform:uppercase; letter-spacing:.3px;}
.table-modern tbody tr{border-top:1px solid rgba(15,23,42,.06);}
.table-modern td{vertical-align:middle;}