/* Trustline Reserve - Portal UI (Staff + Customer) */

:root{
  --rcu-primary:#eb292c;
  --rcu-primary-dark:#c91a22;
  --rcu-primary-soft:#fff2f2;
  --rcu-bg:#f5f7fb;
  --rcu-card:#ffffff;
  --rcu-border:rgba(16,24,40,.10);
  --rcu-text:#0f172a;
  --rcu-muted:#64748b;
  --rcu-sidebar:#08132d;
  --rcu-sidebar-2:#0d1d3f;
  --rcu-link:var(--rcu-primary-dark);
  --rcu-link-hover:var(--rcu-primary);
}

body.portal{
  background: var(--rcu-bg);
  color: var(--rcu-text);
  font-family: 'Manrope', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

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

.portal-sidebar{
  width:280px;
  background: linear-gradient(180deg, var(--rcu-sidebar), var(--rcu-sidebar-2));
  color:#fff;
  position:sticky;
  top:0;
  height:100vh;
  border-right:1px solid rgba(255,255,255,.08);
  overflow-x:hidden;
}

.portal-brand{
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  border-bottom:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.brand-link{ display:block; max-width:100%; }
.brand-logo{ width:min(160px, 100%); height:auto; display:block; }
.portal-brand .logo-dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--rcu-primary);
  box-shadow:0 0 0 6px rgba(235,41,44,.24);
}
.portal-brand .brand-name{ font-weight:800; letter-spacing:.2px; line-height:1.1; }
.portal-brand .brand-sub{
  font-size:12px;
  opacity:.8;
  max-width:100%;
  line-height:1.35;
  word-break:break-word;
}

.portal-nav{ padding:14px 10px; }
.portal-nav a{
  display:flex; align-items:center; gap:12px; padding:10px 12px; margin:4px 6px; border-radius:12px;
  color:rgba(255,255,255,.88); text-decoration:none; transition:all .15s ease;
  min-width:0;
}
.portal-nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.portal-nav a.active{ background:rgba(235,41,44,.24); color:#fff; }
.portal-nav a i{
  width:20px;
  min-width:20px;
  text-align:center;
  font-size:15px;
  line-height:1;
  opacity:.95;
  flex:0 0 20px;
}
.portal-nav .nav-label{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.portal-content{ flex:1; padding:22px; }

.portal-topbar{
  background: var(--rcu-card);
  border:1px solid var(--rcu-border);
  border-radius:18px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 8px 22px rgba(2,6,23,.04);
}
.portal-topbar .title{ font-size:18px; font-weight:800; margin:0; }
.portal-topbar .subtitle{ font-size:12px; color:var(--rcu-muted); }
.portal-topbar-heading{ min-width:0; }
.portal-topbar-brand{
  display:none;
  align-items:center;
  gap:8px;
  text-decoration:none;
  min-width:0;
}
.portal-topbar-brand img{
  width:132px;
  height:auto;
  display:block;
}
.portal-topbar-brand span{
  font-size:12px;
  font-weight:700;
  color:var(--rcu-muted);
  white-space:nowrap;
}
.portal-topbar-actions{ flex-wrap:wrap; justify-content:flex-end; }

.portal-card{
  background: var(--rcu-card);
  border:1px solid var(--rcu-border);
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 26px rgba(2,6,23,.05);
}

.portal-status-banner{
  width:100%;
  border:1px solid var(--rcu-border);
  border-radius:16px;
  padding:14px 16px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  box-shadow:0 10px 22px rgba(2,6,23,.06);
}
.portal-status-banner__content{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.portal-status-banner__icon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex:0 0 34px;
}
.portal-status-banner__title{
  font-weight:800;
  font-size:15px;
  line-height:1.25;
  letter-spacing:.01em;
}
.portal-status-banner__message{
  margin-top:0;
  font-size:14px;
  line-height:1.45;
}
.portal-status-banner--danger{
  background:#fff1f2;
  border-color:#fecdd3;
}
.portal-status-banner--danger .portal-status-banner__icon{
  background:#ffe4e6;
  color:#be123c;
}
.portal-status-banner--warning{
  background:#fffbeb;
  border-color:#fde68a;
  border-left-color:#d97706;
}
.portal-status-banner--warning .portal-status-banner__icon{
  background:#fef3c7;
  color:#b45309;
}
.portal-status-banner--secondary{
  background:#f8fafc;
  border-color:#cbd5e1;
  border-left-color:#475569;
}
.portal-status-banner--secondary .portal-status-banner__icon{
  background:#e2e8f0;
  color:#334155;
}

.portal-profile-summary{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}
.portal-profile-summary .passport-thumb{
  width:72px;
  height:72px;
  border-radius:18px;
  object-fit:cover;
  border:3px solid rgba(8,19,45,.08);
  background:#e2e8f0;
  display:block;
}
.portal-profile-summary .passport-placeholder{
  width:72px;
  height:72px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(8,19,45,.08), rgba(13,29,63,.14));
  color:#334155;
  font-size:26px;
  border:3px solid rgba(8,19,45,.08);
  flex:0 0 72px;
}
.portal-profile-summary .profile-copy{ min-width:0; }
.portal-profile-summary .profile-name{
  font-size:34px;
  font-weight:900;
  line-height:1.1;
  word-break:break-word;
}
.portal-profile-summary .profile-meta{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.portal-status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:var(--rcu-primary-soft);
  color:var(--rcu-primary-dark);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.stat{ display:flex; align-items:flex-start; justify-content:space-between; }
.stat .k{ font-size:12px; color:var(--rcu-muted); }
.stat .v{ font-size:34px; font-weight:900; line-height:1; }

.portal-table{ background:var(--rcu-card); border:1px solid var(--rcu-border); border-radius:18px; overflow:hidden; }
.portal-table table{ margin:0; }
.portal-table thead th{ background:#fff5f5; color:#7f1d1d; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }

.form-help{ font-size:12px; color:var(--rcu-muted); }

.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 16px;
  background:
    radial-gradient(800px 400px at 20% 20%, rgba(235,41,44,.20), transparent 60%),
    radial-gradient(800px 400px at 80% 30%, rgba(201,26,34,.16), transparent 60%),
    var(--rcu-bg);
}
.auth-card{
  width:100%; max-width:520px; background: var(--rcu-card); border:1px solid var(--rcu-border);
  border-radius:22px; padding:22px; box-shadow:0 16px 40px rgba(2,6,23,.08);
}
.auth-card h2{ font-weight:900; margin-bottom:4px; }
.auth-card .brand-chip{
  display:inline-flex; align-items:center; gap:8px; border-radius:999px; background:var(--rcu-primary-soft);
  color:var(--rcu-primary-dark); padding:5px 12px; font-size:12px; font-weight:700;
}
.auth-card .brand-chip i{ color:var(--rcu-primary); }

.portal .content-link,
.portal .portal-card a:not(.btn):not(.page-link):not(.nav-link),
.portal .portal-topbar a:not(.btn) {
  color: var(--rcu-link);
}
.portal .content-link:hover,
.portal .portal-card a:not(.btn):not(.page-link):not(.nav-link):hover,
.portal .portal-topbar a:not(.btn):hover {
  color: var(--rcu-link-hover);
}

.portal .btn-primary{
  background-color:var(--rcu-primary);
  border-color:var(--rcu-primary);
  color:#fff;
}
.portal .btn-primary:hover,
.portal .btn-primary:focus{
  background-color:var(--rcu-primary-dark);
  border-color:var(--rcu-primary-dark);
  color:#fff;
}
.portal .btn-outline-secondary{
  color:var(--rcu-primary-dark);
  border-color:rgba(201,26,34,.35);
}
.portal .btn-outline-secondary:hover{
  background:var(--rcu-primary-soft);
  color:var(--rcu-primary-dark);
  border-color:rgba(201,26,34,.45);
}
.portal .badge.bg-primary{ background-color:var(--rcu-primary) !important; }
.portal .form-control:focus,
.portal .form-select:focus{
  border-color:rgba(235,41,44,.5);
  box-shadow:0 0 0 .2rem rgba(235,41,44,.15);
}
.portal-toggle{
  border: 1px solid var(--rcu-border);
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  line-height: 1;
}

@media (max-width: 991.98px){
  body.portal.sidebar-open{ overflow:hidden; }
  .portal-shell{ display:block; }
  .portal-sidebar{
    position: fixed;
    top:0; left:0;
    height:100vh;
    width:min(84vw, 300px);
    max-width:300px;
    transform: translateX(-105%);
    transition: transform .25s ease;
    z-index: 1200;
  }
  body.portal.sidebar-open .portal-sidebar{ transform: translateX(0); }
  .portal-content{ margin-left:0 !important; padding: 12px; }
  .portal-topbar{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    gap:10px;
    padding:12px;
    background:linear-gradient(180deg, var(--rcu-sidebar), var(--rcu-sidebar-2));
    border-color:rgba(255,255,255,.08);
  }
  .portal-topbar .title,
  .portal-topbar .subtitle{ color:#fff; }
  .portal-topbar .subtitle{ opacity:.75; }
  .portal-topbar-brand{ display:flex; }
  .portal-topbar-brand span{ display:none; }
  .portal-topbar-brand img{ width:120px; }
  .portal-topbar-heading{
    grid-column:1 / -1;
    padding-top:2px;
  }
  .portal-topbar-heading .title{ font-size:16px; }
  .portal-topbar .subtitle{
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.35;
  }
  .portal-topbar-actions{
    grid-column:1 / -1;
    width:100%;
    margin-top:2px;
    justify-content:stretch;
  }
  .portal-topbar-actions .btn{ flex:1 1 100%; min-width:0; }
  .portal-toggle{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.12);
    color:#fff;
    align-self:center;
  }
  .portal-card{ padding:14px; }
  .portal-status-banner{
    padding:12px 13px;
    gap:10px;
  }
  .portal-status-banner__message{ font-size:13px; }
  .portal-profile-summary{ align-items:flex-start; }
  .portal-profile-summary .profile-name{ font-size:26px; }
  body.portal.sidebar-open::before{
    content:'';
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.35);
    z-index: 1100;
  }
}

.auth-logo-wrap{ margin-bottom:18px; }
.auth-logo{ max-width:220px; width:100%; height:auto; display:block; }