/* E27-I — customer portal concept #2.
   Owner refinement 2026-10-01 supersedes the original left-side placement only:
   keep its light cream dashboard and two-card workspace, with RTL/right sidebar. */

:root{
  --pd2-bg:#f5ede2;
  --pd2-sidebar:#efe4d6;
  --pd2-surface:#faf4ec;
  --pd2-card:#fffaf4;
  --pd2-ink:#241c16;
  --pd2-muted:#857568;
  --pd2-gold:#9c6b31;
  --pd2-gold-soft:#c7a77e;
  --pd2-line:#dfd0bd;
  --pd2-line-soft:#eadfd1;
  --pd2-dark:#2a1d14;
  --pd2-shadow:0 12px 30px rgba(67,48,31,.055);
}

body.portal-design2{
  background:var(--pd2-bg);
  color:var(--pd2-ink);
}
.portal-design2 .portal-v2-app{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  min-height:100vh;
  direction:rtl;
  background:var(--pd2-bg);
}
.portal-design2 .portal-v2-sidebar{
  position:sticky;
  top:0;
  height:100vh;
  grid-column:1;
  padding:24px 18px;
  direction:rtl;
  color:var(--pd2-ink);
  background:var(--pd2-sidebar);
  border-inline-end:1px solid var(--pd2-line);
  box-shadow:none;
  gap:14px;
}
.portal-design2 .portal-v2-main{
  grid-column:2;
  direction:rtl;
  min-width:0;
}
.portal-design2 .portal-v2-brand,
.portal-design2 .portal-v2-brand:hover{
  gap:10px;
  padding:0 2px 18px;
  border-bottom:1px solid var(--pd2-line);
  color:var(--pd2-ink);
}
.portal-design2 .portal-design2-logo{
  width:40px;
  height:40px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--pd2-gold);
  box-shadow:none;
  overflow:hidden;
}
.portal-design2 .portal-design2-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.portal-design2 .portal-v2-topbar-brand{display:flex;align-items:center;margin-inline-end:12px}
.portal-design2 .portal-v2-topbar-brand img{display:block;width:92px;height:auto;max-height:48px;object-fit:contain}
.portal-design2 .portal-owner-footer{display:flex;align-items:center;gap:12px;color:var(--pd2-muted);text-decoration:none}
.portal-design2 .portal-owner-footer img{display:block;width:76px;height:auto;max-height:44px;object-fit:contain}
.client-brand .client-owner-wordmark{width:74px;height:48px;border-radius:0;background:transparent;box-shadow:none}
.client-brand .client-owner-wordmark img{width:100%;height:100%;object-fit:contain}
.client-footer .portal-owner-footer{color:var(--pd2-muted)}
.portal-design2 .portal-v2-brand-copy strong{
  color:var(--pd2-gold);
  font-size:.88rem;
  font-weight:700;
}
.portal-design2 .portal-v2-brand-copy small{
  color:var(--pd2-muted);
  font-size:.58rem;
}
.portal-design2 .portal-v2-identity{
  display:none;
}
.portal-design2 .portal-v2-nav{
  gap:4px;
}
.portal-design2 .portal-v2-nav-label{
  padding:11px 9px 4px;
  color:#9d8b7b;
  font-size:.58rem;
  font-weight:500;
  letter-spacing:0;
}
.portal-design2 .portal-v2-nav a,
.portal-design2 .portal-v2-nav button{
  min-height:38px;
  gap:9px;
  padding:7px 9px;
  border-radius:7px;
  color:#5d5045;
  font-size:.69rem;
  font-weight:500;
}
.portal-design2 .portal-v2-nav a:hover,
.portal-design2 .portal-v2-nav button:hover{
  color:var(--pd2-gold);
  background:#f7eee4;
}
.portal-design2 .portal-v2-nav a.is-active,
.portal-design2 .portal-v2-nav a[aria-current="page"]{
  color:#fffaf3;
  background:var(--pd2-gold);
  box-shadow:none;
}
.portal-design2 .portal-v2-nav .nav-icon{
  width:25px;
  height:25px;
  border-radius:6px;
  color:var(--pd2-gold);
  background:transparent;
}
.portal-design2 .portal-v2-nav a.is-active .nav-icon,
.portal-design2 .portal-v2-nav a[aria-current="page"] .nav-icon{
  color:#fffaf3;
  background:rgba(255,255,255,.08);
}
.portal-design2 .portal-v2-nav .nav-icon .portal-icon{
  width:16px;
  height:16px;
  stroke-width:1.55;
}
.portal-design2 .portal-v2-sidebar-footer{
  margin-top:auto;
  border-top:1px solid var(--pd2-line);
}
.portal-design2 .portal-v2-topbar{
  height:54px;
  padding:0 clamp(20px,3vw,36px);
  border:0;
  background:rgba(245,237,226,.94);
  box-shadow:none;
  backdrop-filter:blur(10px);
}
.portal-design2 .portal-v2-topbar-title strong{
  color:#7b6a5b;
  font-size:.68rem;
  font-weight:500;
}
.portal-design2 .portal-v2-topbar-title small{
  display:none;
}
.portal-design2 .portal-v2-user-chip{
  padding:2px;
  border:0;
  background:transparent;
}
.portal-design2 .portal-v2-user-chip-copy{
  display:none;
}
.portal-design2 .portal-v2-user-chip .portal-v2-avatar{
  width:30px;
  height:30px;
  border:1px solid var(--pd2-line);
  border-radius:50%;
  background:#eadbc9;
  color:var(--pd2-dark);
  box-shadow:none;
  font-size:.68rem;
}
.portal-design2 .portal-v2-content{
  width:min(1040px,calc(100% - 54px));
  margin:22px auto 60px;
}
.portal-design2 .portal-v2-content .client-shell{
  width:100%;
  margin:0;
}
.portal-design2 .portal-v2-auth-footer{
  color:var(--pd2-muted);
  font-size:.58rem;
}

.portal-d2-dashboard{
  display:grid;
  gap:18px;
}
.portal-d2-greeting{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:2px 2px 0;
}
.portal-d2-greeting-copy h1{
  margin:0;
  color:var(--pd2-ink);
  font-size:clamp(1.35rem,2.6vw,2rem);
  font-weight:700;
  line-height:1.55;
}
.portal-d2-greeting-copy p{
  margin:5px 0 0;
  color:var(--pd2-muted);
  font-size:.72rem;
}
.portal-d2-profile-avatar{
  display:grid;
  width:54px;
  height:54px;
  place-items:center;
  flex:0 0 54px;
  border:1px solid var(--pd2-line);
  border-radius:50%;
  color:var(--pd2-dark);
  background:#ead9c5;
  font-size:1rem;
  font-weight:700;
}

.portal-d2-feature{
  min-height:330px;
  overflow:hidden;
  border:1px solid var(--pd2-line);
  border-radius:12px;
  background:#e6d7c5;
  box-shadow:var(--pd2-shadow);
}
.portal-d2-feature-link,
.portal-d2-feature-empty{
  position:relative;
  display:grid;
  min-height:330px;
  overflow:hidden;
}
.portal-d2-feature-link img{
  width:100%;
  height:100%;
  min-height:330px;
  object-fit:cover;
}
.portal-d2-feature-caption{
  position:absolute;
  inset-inline:18px auto;
  bottom:18px;
  display:grid;
  gap:2px;
  padding:9px 12px;
  color:#fffaf4;
  background:rgba(31,24,18,.74);
  border-radius:5px;
}
.portal-d2-feature-caption small{font-size:.58rem;opacity:.76}
.portal-d2-feature-caption strong{font-size:.76rem;font-weight:600}
.portal-d2-feature-empty{
  place-content:center;
  gap:7px;
  padding:34px;
  text-align:center;
  color:#5d4b3c;
  background:
    linear-gradient(90deg,rgba(255,250,244,.72),rgba(255,250,244,.28)),
    var(--pd2-sidebar);
}
.portal-d2-feature-empty span{color:var(--pd2-gold);font-size:.67rem}
.portal-d2-feature-empty strong{font-size:1.3rem;font-weight:700}
.portal-d2-feature-empty small{color:var(--pd2-muted);font-size:.66rem}

.portal-d2-primary-grid,
.portal-d2-secondary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.portal-d2-card{
  min-width:0;
  padding:18px;
  border:1px solid var(--pd2-line-soft);
  border-radius:10px;
  background:var(--pd2-card);
  box-shadow:none;
}
.portal-d2-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px;
}
.portal-d2-card-head > div{display:grid;gap:3px}
.portal-d2-card-head small{
  color:var(--pd2-gold);
  font-size:.56rem;
}
.portal-d2-card-head h2,
.portal-d2-card-head > h2{
  margin:0;
  color:var(--pd2-ink);
  font-size:.82rem;
  font-weight:700;
}
.portal-d2-card-head .portal-icon{
  width:18px;
  height:18px;
  color:var(--pd2-gold);
  stroke-width:1.55;
}
.portal-d2-project-name{
  display:block;
  margin-bottom:12px;
  font-size:.76rem;
  font-weight:600;
}
.portal-d2-progress-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.portal-d2-progress-track{
  height:5px;
  flex:1;
  overflow:hidden;
  border-radius:999px;
  background:#e9dccd;
}
.portal-d2-progress-track span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--pd2-gold);
}
.portal-d2-progress-row b{
  min-width:34px;
  color:var(--pd2-gold);
  font-size:.65rem;
}
.portal-d2-project-meta{
  display:grid;
  gap:3px;
  margin-top:10px;
  color:var(--pd2-muted);
  font-size:.6rem;
}
.portal-d2-next > strong{
  display:block;
  color:var(--pd2-ink);
  font-size:.78rem;
  font-weight:600;
}
.portal-d2-next p{
  margin:5px 0 11px;
  color:var(--pd2-muted);
  font-size:.64rem;
  line-height:1.9;
}
.portal-d2-link{
  display:inline-flex;
  min-height:32px;
  align-items:center;
  padding:6px 10px;
  border-radius:5px;
  color:#fffaf4;
  background:var(--pd2-gold);
  font-size:.58rem;
  font-weight:600;
}
.portal-d2-link:hover{color:#fff;background:#805322}

.portal-d2-secondary{
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--pd2-line);
}
.portal-d2-section-head{
  margin-bottom:12px;
}
.portal-d2-section-head small{
  color:var(--pd2-gold);
  font-size:.56rem;
}
.portal-d2-section-head h2{
  margin:3px 0 0;
  color:var(--pd2-ink);
  font-size:.9rem;
  font-weight:700;
}
.portal-d2-list{
  display:grid;
  gap:7px;
}
.portal-d2-list a{
  display:flex;
  min-height:48px;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border:1px solid var(--pd2-line-soft);
  border-radius:6px;
  color:var(--pd2-ink);
  background:#fbf5ed;
}
.portal-d2-list a > span{display:grid;gap:2px}
.portal-d2-list strong{font-size:.65rem;font-weight:600}
.portal-d2-list small{color:var(--pd2-muted);font-size:.52rem}
.portal-d2-list b{color:var(--pd2-gold);font-size:.56rem;font-weight:600}
.portal-d2-empty{
  padding:18px 12px;
  color:var(--pd2-muted);
  font-size:.62rem;
  text-align:center;
}
.portal-d2-quick{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.portal-d2-quick a{
  display:flex;
  min-height:58px;
  align-items:center;
  gap:9px;
  padding:10px;
  border:1px solid var(--pd2-line-soft);
  border-radius:7px;
  color:var(--pd2-ink);
  background:#fbf5ed;
  font-size:.62rem;
  font-weight:600;
}
.portal-d2-quick .portal-icon{
  width:17px;
  height:17px;
  color:var(--pd2-gold);
  stroke-width:1.55;
}

/* Carry the chosen reference language across the rest of the authenticated portal. */
.portal-design2 :is(.portal-v2-hero,.portal-v2-card,.portal-v2-kpi,.portal-project-card){
  border-color:var(--pd2-line-soft);
  border-radius:10px;
  background:var(--pd2-card);
  box-shadow:none;
}
.portal-design2 .portal-v2-hero{
  background:var(--pd2-card);
}
.portal-design2 .portal-v2-kpi-icon{
  color:var(--pd2-gold);
  background:#f0e2d2;
}
.portal-design2 .portal-progress-bar{
  background:var(--pd2-gold);
}
.portal-design2 .portal-status,
.portal-design2 .portal-mini-badge{
  color:#6f4b26;
  background:#efe1d0;
}
.portal-design2 :is(.primary-button,.portal-v2-journey-action){
  border-radius:5px;
  background:var(--pd2-gold);
  box-shadow:none;
}
.portal-design2 .portal-v2-journey{
  border-color:var(--pd2-line-soft);
  border-radius:10px;
  background:var(--pd2-card);
  box-shadow:none;
}

@media(max-width:991.98px){
  .portal-design2 .portal-v2-app{display:block}
  .portal-design2 .portal-v2-sidebar{display:none}
  .portal-design2 .portal-v2-main{display:block}
  .portal-design2 .portal-v2-offcanvas{
    direction:rtl;
    color:var(--pd2-ink);
    background:var(--pd2-sidebar);
  }
  .portal-design2 .portal-v2-offcanvas .btn-close{filter:none}
  .portal-design2 .portal-v2-offcanvas .portal-v2-identity{display:flex}
  .portal-design2 .portal-v2-content{
    width:min(100% - 28px,1040px);
    margin-top:18px;
  }
}
@media(max-width:700px){
  .portal-design2 .portal-v2-topbar-brand{display:none}
  .portal-design2 .portal-owner-footer{align-items:flex-start}
  .portal-design2 .portal-owner-footer span{max-width:220px}
  .portal-d2-primary-grid,
  .portal-d2-secondary-grid{grid-template-columns:1fr}
  .portal-d2-feature,
  .portal-d2-feature-link,
  .portal-d2-feature-empty,
  .portal-d2-feature-link img{min-height:240px}
  .portal-d2-greeting-copy h1{font-size:1.25rem}
  .portal-d2-profile-avatar{width:46px;height:46px;flex-basis:46px}
}
@media(prefers-reduced-motion:reduce){
  .portal-design2 *,
  .portal-design2 *::before,
  .portal-design2 *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}