/*
   Madrasati customer portal V4.
   Presentation-only layer: existing Razor routes, forms, handlers, and
   authorization remain unchanged.
*/

.portal-shell-body {
  --pv4-bg: #f4f7f8;
  --pv4-surface: #ffffff;
  --pv4-surface-soft: #f8fafb;
  --pv4-surface-strong: #edf3f3;
  --pv4-line: #dce7e8;
  --pv4-line-strong: #c4d5d6;
  --pv4-ink: #102c2e;
  --pv4-muted: #607476;
  --pv4-subtle: #8b9b9d;
  --pv4-accent: #0f766e;
  --pv4-accent-hover: #0b625b;
  --pv4-accent-soft: #e4f3f0;
  --pv4-gold: #b7792c;
  --pv4-gold-soft: #fff5e5;
  --pv4-danger: #b42318;
  --pv4-success: #18794e;
  --pv4-shadow-1: 0 2px 5px rgba(16, 44, 46, .035), 0 12px 26px rgba(16, 44, 46, .05);
  --pv4-shadow-2: 0 20px 54px rgba(16, 44, 46, .11);
  --pv4-radius-sm: 10px;
  --pv4-radius-md: 14px;
  --pv4-radius-lg: 20px;
  background: var(--pv4-bg);
  color: var(--pv4-ink);
  font-family: Inter, Cairo, sans-serif;
}

html[data-theme="dark"] .portal-shell-body {
  --pv4-bg: #0b1719;
  --pv4-surface: #122325;
  --pv4-surface-soft: #172b2d;
  --pv4-surface-strong: #1d3638;
  --pv4-line: #294548;
  --pv4-line-strong: #3a5b5d;
  --pv4-ink: #eff8f6;
  --pv4-muted: #abc0bd;
  --pv4-subtle: #7f9996;
  --pv4-accent: #35c2ac;
  --pv4-accent-hover: #5ed8c4;
  --pv4-accent-soft: rgba(53, 194, 172, .14);
  --pv4-gold: #e1aa61;
  --pv4-gold-soft: rgba(225, 170, 97, .14);
  --pv4-danger: #ff8e84;
  --pv4-success: #64d59d;
  --pv4-shadow-1: 0 2px 8px rgba(0, 0, 0, .16), 0 14px 30px rgba(0, 0, 0, .12);
  --pv4-shadow-2: 0 24px 64px rgba(0, 0, 0, .28);
}

.portal-shell-body .portal-page {
  width: min(1380px, calc(100% - 64px));
  max-width: none;
  min-height: 100vh;
  margin: 0 auto;
  padding: 24px 0 72px;
  color: var(--pv4-ink);
}

.portal-shell-body .portal-top {
  position: sticky;
  z-index: 20;
  top: 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 70px;
  align-items: center;
  gap: 22px;
  padding: 12px 16px 12px 20px;
  border: 1px solid var(--pv4-line);
  border-radius: var(--pv4-radius-lg);
  background: color-mix(in srgb, var(--pv4-surface) 94%, transparent);
  box-shadow: var(--pv4-shadow-1);
  backdrop-filter: blur(16px);
}

.portal-shell-body .portal-brand { display: inline-flex; min-width: 0; align-items: center; gap: 10px; color: var(--pv4-ink); text-decoration: none; }
.portal-shell-body .portal-brand .brand-mark { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; overflow: hidden; border-radius: 11px; background: var(--pv4-accent-soft); }
.portal-shell-body .portal-brand .brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.portal-shell-body .portal-brand strong { font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.portal-shell-body .portal-top-context { display: flex; min-width: 0; align-items: center; gap: 10px; }
.portal-shell-body .portal-top-context-mark { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--pv4-gold); box-shadow: 0 0 0 4px var(--pv4-gold-soft); }
.portal-shell-body .portal-top-context-copy { display: grid; min-width: 0; gap: 2px; }
.portal-shell-body .portal-top-context-copy small { color: var(--pv4-subtle); font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
.portal-shell-body .portal-top-context-copy strong { overflow: hidden; color: var(--pv4-ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.portal-shell-body .portal-top-actions, .portal-shell-body .portal-user-bar { display: flex; align-items: center; gap: 8px; }
.portal-shell-body .portal-top-actions { justify-content: flex-end; }
.portal-shell-body .portal-language { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--pv4-line); border-radius: 10px; background: var(--pv4-surface-soft); }
.portal-shell-body .portal-language a { display: grid; min-width: 47px; height: 28px; place-items: center; border-radius: 7px; color: var(--pv4-muted); font-size: 10px; font-weight: 750; text-decoration: none; transition: background .16s ease, color .16s ease; }
.portal-shell-body .portal-language a:hover { color: var(--pv4-ink); }
.portal-shell-body .portal-language a.active { background: var(--pv4-surface); color: var(--pv4-accent); box-shadow: 0 1px 4px rgba(16, 44, 46, .08); }
.portal-shell-body .portal-theme-toggle { width: 34px; height: 34px; border-color: var(--pv4-line); background: var(--pv4-surface-soft); color: var(--pv4-muted); }
.portal-shell-body .portal-profile-chip { display: flex; max-width: 190px; min-width: 0; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border: 1px solid var(--pv4-line); border-radius: 10px; background: var(--pv4-surface-soft); color: var(--pv4-ink); text-decoration: none; }
.portal-shell-body .portal-profile-chip:hover { border-color: var(--pv4-accent); background: var(--pv4-accent-soft); }
.portal-shell-body .portal-profile-avatar { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 8px; background: var(--pv4-accent); color: #fff; font-size: 12px; font-weight: 800; }
.portal-shell-body .portal-profile-text { display: grid; min-width: 0; gap: 1px; }
.portal-shell-body .portal-profile-text strong, .portal-shell-body .portal-profile-text small { overflow: hidden; max-width: 130px; text-overflow: ellipsis; white-space: nowrap; }
.portal-shell-body .portal-profile-text strong { font-size: 11px; }
.portal-shell-body .portal-profile-text small { color: var(--pv4-subtle); font-size: 9px; }

.portal-shell-body .portal-page-with-license .portal-app-workspace { display: grid; grid-template-columns: 238px minmax(0, 1fr); align-items: start; gap: 22px; margin-top: 24px; }
.portal-shell-body .portal-workspace-rail { position: sticky; top: 112px; display: flex; min-height: 610px; flex-direction: column; padding: 16px 12px 12px; border: 1px solid #164e4c; border-radius: var(--pv4-radius-lg); background: #103b3d; box-shadow: var(--pv4-shadow-2); }
html[data-theme="dark"] .portal-shell-body .portal-workspace-rail { background: #0c2b2d; }
.portal-shell-body .portal-rail-product { display: flex; align-items: center; gap: 10px; padding: 4px 5px 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #fff; }
.portal-shell-body .portal-rail-product-mark { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; overflow: hidden; border-radius: 11px; background: rgba(255, 255, 255, .12); }
.portal-shell-body .portal-rail-product-mark img { width: 100%; height: 100%; object-fit: contain; }
.portal-shell-body .portal-rail-product span:last-child { display: grid; min-width: 0; gap: 2px; }
.portal-shell-body .portal-rail-product strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.portal-shell-body .portal-rail-product small { color: rgba(255, 255, 255, .58); font-family: "JetBrains Mono", monospace; font-size: 9px; }
.portal-shell-body .portal-rail-label { margin: 22px 8px 8px; color: rgba(255, 255, 255, .48); font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.portal-shell-body .portal-workspace-rail .portal-workspace-tabs { display: grid !important; grid-template-columns: 1fr !important; gap: 3px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.portal-shell-body .portal-workspace-rail .portal-workspace-tabs a { display: flex; min-height: 40px; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; color: rgba(255, 255, 255, .7); font-size: 11px; font-weight: 650; text-align: start; text-decoration: none; transition: background .16s ease, color .16s ease, border-color .16s ease; }
.portal-shell-body .portal-workspace-rail .portal-workspace-tabs a:hover { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .08); color: #fff; }
.portal-shell-body .portal-workspace-rail .portal-workspace-tabs a.is-active { border-color: rgba(74, 214, 190, .28); background: rgba(62, 201, 178, .18); color: #fff; box-shadow: inset 3px 0 0 #48d3bc; }
.portal-shell-body .portal-workspace-rail .portal-nav-icon { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border-radius: 7px; background: rgba(255, 255, 255, .08); }
.portal-shell-body .portal-workspace-rail .portal-nav-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.portal-shell-body .portal-rail-footer { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 12px 7px 4px; border-top: 1px solid rgba(255, 255, 255, .12); color: #fff; }
.portal-shell-body .portal-rail-footer-status { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #51d19a; box-shadow: 0 0 0 4px rgba(81, 209, 154, .13); }
.portal-shell-body .portal-rail-footer span:last-child { display: grid; gap: 3px; min-width: 0; }
.portal-shell-body .portal-rail-footer strong { font-size: 10px; }
.portal-shell-body .portal-rail-footer small { overflow: hidden; color: rgba(255, 255, 255, .55); font-family: "JetBrains Mono", monospace; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.portal-shell-body .portal-workspace-content { display: grid; min-width: 0; gap: 16px; }
.portal-shell-body .portal-workspace-head { display: flex; min-height: 126px; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 28px; border: 1px solid var(--pv4-line); border-radius: var(--pv4-radius-lg); background: var(--pv4-surface); box-shadow: var(--pv4-shadow-1); }
.portal-shell-body .portal-workspace-head h1 { margin: 5px 0 5px; color: var(--pv4-ink); font-size: clamp(25px, 2.5vw, 36px); line-height: 1.05; }
.portal-shell-body .portal-workspace-head p { margin: 0; color: var(--pv4-muted); font-size: 11px; }
.portal-shell-body .portal-status-pill { display: inline-flex; min-height: 27px; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--pv4-line); border-radius: 999px; background: var(--pv4-surface-soft); color: var(--pv4-muted); font-size: 10px; font-weight: 800; white-space: nowrap; }
.portal-shell-body .portal-status-pill::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.portal-shell-body .portal-status-pill.state-active, .portal-shell-body .portal-status-pill.is-active { border-color: rgba(24, 121, 78, .2); background: color-mix(in srgb, var(--pv4-success) 10%, transparent); color: var(--pv4-success); }
.portal-shell-body .portal-status-pill.state-warn, .portal-shell-body .portal-status-pill.is-warn { border-color: rgba(183, 121, 44, .25); background: var(--pv4-gold-soft); color: var(--pv4-gold); }
.portal-shell-body .portal-status-pill.state-danger, .portal-shell-body .portal-status-pill.is-danger { border-color: rgba(180, 35, 24, .2); background: color-mix(in srgb, var(--pv4-danger) 10%, transparent); color: var(--pv4-danger); }

.portal-shell-body .portal-overview-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.portal-shell-body .portal-overview-card { display: grid; min-width: 0; min-height: 116px; grid-template-columns: auto minmax(0, 1fr); align-content: center; column-gap: 10px; padding: 16px; border: 1px solid var(--pv4-line); border-radius: var(--pv4-radius-md); background: var(--pv4-surface); box-shadow: var(--pv4-shadow-1); }
.portal-shell-body .portal-overview-card-featured { border-color: rgba(15, 118, 110, .3); background: var(--pv4-accent-soft); }
.portal-shell-body .portal-overview-icon { display: grid; width: 30px; height: 30px; grid-row: span 3; place-items: center; border-radius: 9px; background: var(--pv4-surface-strong); color: var(--pv4-accent); }
.portal-shell-body .portal-overview-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.portal-shell-body .portal-overview-label { overflow: hidden; color: var(--pv4-muted); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.portal-shell-body .portal-overview-card strong { overflow: hidden; color: var(--pv4-ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.portal-shell-body .portal-overview-card small { overflow: hidden; color: var(--pv4-subtle); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.portal-shell-body .portal-license-panel, .portal-shell-body .portal-machines-panel, .portal-shell-body .portal-releases-panel, .portal-shell-body .portal-requests-panel, .portal-shell-body .portal-action-panel, .portal-shell-body .portal-support-panel, .portal-shell-body .portal-payment-state, .portal-shell-body .portal-account-panel { border: 1px solid var(--pv4-line); border-radius: var(--pv4-radius-lg); background: var(--pv4-surface); box-shadow: var(--pv4-shadow-1); }
.portal-shell-body .portal-license-panel { padding: 24px 28px; }
.portal-shell-body .portal-license-panel > .portal-license-head { display: none; }
.portal-shell-body .portal-key-strip { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 15px; border: 1px dashed var(--pv4-line-strong); border-radius: var(--pv4-radius-md); background: var(--pv4-surface-soft); }
.portal-shell-body .portal-key-strip span { color: var(--pv4-muted); font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.portal-shell-body .portal-key-strip code { color: var(--pv4-accent); font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; letter-spacing: .2px; }
.portal-shell-body .portal-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 18px; overflow: hidden; border: 1px solid var(--pv4-line); border-radius: var(--pv4-radius-md); }
.portal-shell-body .portal-detail-grid > div { display: grid; min-width: 0; gap: 6px; padding: 14px; border-inline-end: 1px solid var(--pv4-line); }
.portal-shell-body .portal-detail-grid > div:last-child { border-inline-end: 0; }
.portal-shell-body .portal-detail-grid span, .portal-shell-body .portal-usage span { color: var(--pv4-muted); font-size: 9px; font-weight: 800; }
.portal-shell-body .portal-detail-grid strong, .portal-shell-body .portal-usage strong { overflow: hidden; color: var(--pv4-ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.portal-shell-body .portal-usage { display: grid; gap: 8px; margin-top: 18px; }
.portal-shell-body .portal-usage > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.portal-shell-body .portal-progress { height: 7px; overflow: hidden; border-radius: 999px; background: var(--pv4-surface-strong); }
.portal-shell-body .portal-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--pv4-accent); }
.portal-shell-body .portal-machines-panel, .portal-shell-body .portal-releases-panel, .portal-shell-body .portal-requests-panel, .portal-shell-body .portal-action-panel, .portal-shell-body .portal-support-panel { padding: 22px; }
.portal-shell-body .portal-request-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.portal-shell-body .portal-request-head strong { color: var(--pv4-ink); font-size: 12px; }
.portal-shell-body .portal-request-head > span { color: var(--pv4-muted); font-size: 10px; font-weight: 750; }
.portal-shell-body .portal-release-row, .portal-shell-body .portal-request-row, .portal-shell-body .portal-machine-row { border-color: var(--pv4-line); background: var(--pv4-surface-soft); }
.portal-shell-body .portal-release-row:hover, .portal-shell-body .portal-request-row:hover, .portal-shell-body .portal-machine-row:hover { border-color: var(--pv4-line-strong); background: var(--pv4-surface-strong); }
.portal-shell-body .portal-action-heading { margin-bottom: 20px; }
.portal-shell-body .portal-action-heading h2 { color: var(--pv4-ink); font-size: 19px; }
.portal-shell-body .portal-action-heading p { color: var(--pv4-muted); }
.portal-shell-body .portal-empty { min-height: 128px; border-color: var(--pv4-line-strong); background: var(--pv4-surface-soft); color: var(--pv4-muted); }
.portal-shell-body .portal-alert { border-radius: var(--pv4-radius-md); box-shadow: var(--pv4-shadow-1); }

.portal-shell-body .portal-account-dashboard { display: grid; gap: 16px; min-width: 0; margin-top: 24px; }
.portal-shell-body .portal-account-welcome { display: flex; min-height: 172px; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 34px; border: 1px solid var(--pv4-line); border-radius: var(--pv4-radius-lg); background: var(--pv4-surface); box-shadow: var(--pv4-shadow-1); }
.portal-shell-body .portal-account-welcome-copy { display: grid; gap: 8px; min-width: 0; }
.portal-shell-body .portal-account-welcome-copy h1 { margin: 0; color: var(--pv4-ink); font-size: clamp(28px, 3vw, 42px); line-height: 1.05; }
.portal-shell-body .portal-account-welcome-copy p { margin: 0; color: var(--pv4-muted); font-size: 12px; }
.portal-shell-body .portal-account-welcome-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.portal-shell-body .portal-account-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.portal-shell-body .portal-account-stat { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 17px; border: 1px solid var(--pv4-line); border-radius: var(--pv4-radius-md); background: var(--pv4-surface); box-shadow: var(--pv4-shadow-1); }
.portal-shell-body .portal-account-stat-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 11px; background: var(--pv4-accent-soft); color: var(--pv4-accent); }
.portal-shell-body .portal-account-stat-copy { display: grid; min-width: 0; gap: 3px; }
.portal-shell-body .portal-account-stat-copy small { color: var(--pv4-muted); font-size: 10px; font-weight: 800; }
.portal-shell-body .portal-account-stat-copy strong { color: var(--pv4-ink); font-size: 15px; }
.portal-shell-body .portal-account-stat-copy > span { overflow: hidden; color: var(--pv4-subtle); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.portal-shell-body .portal-account-panel { padding: 24px; }
.portal-shell-body .portal-account-panel-head h2 { color: var(--pv4-ink); font-size: 20px; }
.portal-shell-body .portal-account-panel-head p { color: var(--pv4-muted); }
.portal-shell-body .portal-account-license-row { border-color: var(--pv4-line); background: var(--pv4-surface-soft); }
.portal-shell-body .portal-security-form { border-color: var(--pv4-line); border-radius: var(--pv4-radius-md); background: var(--pv4-surface-soft); box-shadow: none; }
.portal-shell-body .portal-account-dashboard .portal-field .form-control { min-height: 46px; border-color: var(--pv4-line-strong); border-radius: 10px; background: var(--pv4-surface) !important; color: var(--pv4-ink); }
.portal-shell-body .portal-account-dashboard .portal-field .form-control:focus { border-color: var(--pv4-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pv4-accent) 15%, transparent); }

@media (max-width: 1080px) {
  .portal-shell-body .portal-page { width: min(100% - 36px, 960px); }
  .portal-shell-body .portal-page-with-license .portal-app-workspace { grid-template-columns: 1fr; }
  .portal-shell-body .portal-workspace-rail { position: static; min-height: 0; }
  .portal-shell-body .portal-workspace-rail .portal-workspace-tabs { display: flex !important; overflow-x: auto; }
  .portal-shell-body .portal-workspace-rail .portal-workspace-tabs a { min-width: max-content; }
  .portal-shell-body .portal-rail-footer { display: none; }
}

@media (max-width: 760px) {
  .portal-shell-body .portal-page { width: min(100% - 20px, 620px); padding-top: 10px; }
  .portal-shell-body .portal-top { position: static; grid-template-columns: auto 1fr; gap: 10px; padding: 10px; }
  .portal-shell-body .portal-top-context { display: none; }
  .portal-shell-body .portal-top-actions { grid-column: 1 / -1; justify-content: space-between; width: 100%; }
  .portal-shell-body .portal-profile-text { display: none; }
  .portal-shell-body .portal-profile-chip { padding-inline: 4px; }
  .portal-shell-body .portal-workspace-head, .portal-shell-body .portal-account-welcome { align-items: flex-start; flex-direction: column; padding: 22px; }
  .portal-shell-body .portal-account-welcome-actions { justify-content: flex-start; }
  .portal-shell-body .portal-overview-strip, .portal-shell-body .portal-account-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-shell-body .portal-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-shell-body .portal-detail-grid > div:nth-child(2) { border-inline-end: 0; }
  .portal-shell-body .portal-detail-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--pv4-line); }
}

@media (max-width: 480px) {
  .portal-shell-body .portal-overview-strip, .portal-shell-body .portal-account-stat-grid, .portal-shell-body .portal-detail-grid { grid-template-columns: 1fr; }
  .portal-shell-body .portal-detail-grid > div { border-inline-end: 0; border-bottom: 1px solid var(--pv4-line); }
  .portal-shell-body .portal-detail-grid > div:last-child { border-bottom: 0; }
  .portal-shell-body .portal-language a { min-width: 40px; }
  .portal-shell-body .portal-workspace-rail .portal-workspace-tabs a { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-shell-body *, .portal-shell-body *::before, .portal-shell-body *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}