/* ================================================================
   LN LAB'S - Client Portal
   ================================================================ */

body.portal,
body.portal.has-banner{
  padding-top:0!important;
  background:
    radial-gradient(circle at 82% 0%,rgba(10,132,255,.13),transparent 30%),
    radial-gradient(circle at 10% 8%,rgba(22,199,183,.08),transparent 26%),
    var(--bg);
}
body.portal .nav,
body.portal .site-banner,
body.portal .footer{
  display:none!important;
}

.portal-wrap{
  min-height:100vh;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  grid-template-rows:auto 1fr;
  overflow-x:hidden;
}

.portal-topbar{
  grid-column:1/-1;
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 18px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(20px) saturate(145%);
  position:sticky;
  top:0;
  z-index:60;
}
html[data-theme="dark"] .portal-topbar{background:rgba(7,13,23,.84)}
.portal-brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text);
  text-decoration:none;
  font-weight:900;
}
.portal-brand-mark{
  width:42px;
  height:42px;
  border-radius:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#0a84ff,#16c7b7);
  color:#fff;
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.04em;
}
.portal-brand-text{
  display:grid;
  line-height:1.15;
}
.portal-brand-text span{font-size:.78rem;color:var(--muted);font-weight:700}
.portal-topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.p-sidebar{
  position:sticky;
  top:70px;
  height:calc(100vh - 70px);
  overflow:auto;
  padding:18px 14px;
  background:rgba(255,255,255,.44);
  border-right:1px solid var(--border);
  backdrop-filter:blur(20px) saturate(145%);
}
html[data-theme="dark"] .p-sidebar{background:rgba(7,13,23,.74)}

.p-sidebar-user{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:12px;
  margin-bottom:12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.44);
}
html[data-theme="dark"] .p-sidebar-user{background:rgba(255,255,255,.04)}

.p-sidebar-avatar{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#0a84ff,#16c7b7);
  color:#fff;
  font-weight:800;
  font-size:1rem;
}
.p-sidebar-name{font-size:.9rem;font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-sidebar-email{font-size:.73rem;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.p-sidebar-section{
  margin:18px 8px 7px;
  font-family:var(--mono);
  font-size:.64rem;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
}
.p-sidebar a{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:9px 10px;
  border-radius:12px;
  color:var(--text-soft);
  text-decoration:none;
  font-size:.86rem;
  font-weight:650;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.p-sidebar a:hover{background:rgba(10,132,255,.07);color:var(--text);transform:translateX(1px)}
.p-sidebar a.active{background:var(--acc-soft);color:var(--acc)}
.p-sidebar a .p-icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.95rem;
}
.p-sidebar-badge{
  margin-left:auto;
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--acc);
  color:#fff;
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:800;
}
.p-sidebar-footer{
  margin-top:18px;
  padding:14px 8px 4px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:.78rem;
}
.p-sidebar-footer a{display:inline;color:inherit;text-decoration:none;padding:0}
.p-sidebar-footer a:hover{color:var(--acc);background:none;transform:none}

.p-main{
  min-width:0;
  padding:28px 28px 52px;
}
.p-header{
  width:min(1180px,100%);
  margin:0 auto 22px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.p-header-title{
  font-family:var(--display);
  font-size:clamp(2rem,3vw,3rem);
  line-height:.98;
  letter-spacing:-.055em;
  color:var(--text);
}
.p-header-sub{margin-top:8px;color:var(--text-soft);font-size:.96rem;line-height:1.6}
.p-content{width:min(1180px,100%);margin:0 auto}

.p-card{
  overflow:hidden;
  margin-bottom:20px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.66);
  box-shadow:0 18px 48px rgba(11,25,44,.07);
}
html[data-theme="dark"] .p-card{background:rgba(255,255,255,.045)}
.p-card-header{
  min-height:58px;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--border);
  font-size:.92rem;
  font-weight:800;
  color:var(--text);
}
.p-card-body{padding:20px}

.p-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}
.p-stat{
  padding:18px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.62);
}
html[data-theme="dark"] .p-stat{background:rgba(255,255,255,.04)}
.p-stat-num{font-family:var(--display);font-size:2.15rem;line-height:1;color:var(--text);letter-spacing:-.05em}
.p-stat-label{margin-top:8px;color:var(--muted);font-size:.78rem}

.p-table-wrap{overflow:auto;-webkit-overflow-scrolling:touch}
table.p-table{width:100%;border-collapse:separate;border-spacing:0}
.p-table th{
  padding:12px 16px;
  text-align:left;
  background:rgba(10,132,255,.035);
  border-bottom:1px solid var(--border);
  color:var(--muted);
  font-family:var(--mono);
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.p-table td{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  color:var(--text-soft);
  font-size:.86rem;
  vertical-align:middle;
}
.p-table tr:last-child td{border-bottom:none}
.p-table tr:hover td{background:rgba(10,132,255,.035)}

.p-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:3px 9px;
  border-radius:999px;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
}
.p-badge-green{background:rgba(22,199,183,.12);color:#128b7f}
.p-badge-cyan{background:rgba(10,132,255,.12);color:var(--acc)}
.p-badge-yellow{background:rgba(255,209,102,.18);color:#9a6a00}
.p-badge-red{background:rgba(255,64,96,.12);color:#c43c56}
.p-badge-gray{background:rgba(91,111,135,.1);color:var(--muted)}

.p-alert{
  margin-bottom:18px;
  padding:13px 15px;
  border-radius:14px;
  border:1px solid var(--border);
  font-size:.88rem;
  line-height:1.6;
}
.p-alert-success{background:rgba(22,199,183,.1);border-color:rgba(22,199,183,.22);color:#128b7f}
.p-alert-error{background:rgba(255,64,96,.1);border-color:rgba(255,64,96,.24);color:#c43c56}
.p-alert-info{background:rgba(10,132,255,.09);border-color:rgba(10,132,255,.2);color:var(--acc)}

.p-form-group{margin-bottom:17px}
.p-label{
  display:block;
  margin-bottom:7px;
  color:var(--muted);
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.p-input,.p-select,.p-textarea{
  width:100%;
  min-height:44px;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.56);
  color:var(--text);
  font:inherit;
  outline:none;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
html[data-theme="dark"] .p-input,
html[data-theme="dark"] .p-select,
html[data-theme="dark"] .p-textarea{background:rgba(255,255,255,.045)}
.p-input:focus,.p-select:focus,.p-textarea:focus{border-color:rgba(10,132,255,.5);box-shadow:0 0 0 4px rgba(10,132,255,.09)}
.p-textarea{min-height:110px;resize:vertical;line-height:1.7}
.p-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

.p-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:10px 16px;
  border-radius:12px;
  border:1px solid transparent;
  font-size:.86rem;
  font-weight:800;
  line-height:1.15;
  text-decoration:none;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
}
.p-btn:hover{transform:translateY(-1px)}
.p-btn-primary{background:linear-gradient(135deg,#0a84ff,#12bff3);color:#fff;box-shadow:0 12px 28px rgba(10,132,255,.18)}
.p-btn-ghost{background:rgba(255,255,255,.42);border-color:var(--border);color:var(--text)}
html[data-theme="dark"] .p-btn-ghost{background:rgba(255,255,255,.055)}
.p-btn-danger{background:rgba(255,64,96,.12);border-color:rgba(255,64,96,.24);color:#c43c56}
.p-btn-sm{min-height:36px;padding:8px 12px;font-size:.8rem}

.p-empty{text-align:center;padding:46px 20px;color:var(--muted)}
.p-empty-icon{font-size:2rem;margin-bottom:10px}
.p-empty h3{font-family:var(--display);font-size:1.6rem;color:var(--text);letter-spacing:-.04em}
.p-empty p{margin-top:6px;font-size:.9rem}
.notif-dot{width:9px;height:9px;border-radius:50%;background:var(--acc);display:inline-block;box-shadow:0 0 0 5px rgba(10,132,255,.12)}

@media(max-width:1020px){
  .portal-wrap{grid-template-columns:1fr}
  .portal-topbar{position:static}
  .p-sidebar{
    position:static;
    height:auto;
    display:grid;
    grid-template-columns:1fr;
    border-right:none;
    border-bottom:1px solid var(--border);
  }
  .p-sidebar a{display:inline-flex;margin:2px 0}
  .p-main{padding:28px 18px 42px}
  .p-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .portal-topbar{align-items:flex-start;flex-direction:column}
  .portal-topbar-actions{width:100%}
  .portal-topbar-actions .p-btn{flex:1 1 100%}
  .p-main{padding:22px 12px 34px}
  .p-header{align-items:flex-start}
  .p-header .p-btn{width:100%}
  .p-card{border-radius:15px}
  .p-card-header,.p-card-body{padding:16px}
  .p-stats,.p-form-row{grid-template-columns:1fr}
  .p-btn{width:100%}
  .p-table th,.p-table td{padding:11px 12px}
}
