@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --portal-primary:#98012e;
  --portal-primary-dark:#65001d;
  --portal-accent:#d4a03c;
  --portal-ink:#2f3a40;
  --portal-muted:#6f7d86;
  --portal-border:rgba(47,58,64,.10);
  --portal-card:#ffffff;
  --portal-soft:#fff6f8;
  --portal-bg:#f6f1eb;
  --portal-shadow:0 18px 40px rgba(66,35,42,.08);
  --portal-shadow-soft:0 12px 28px rgba(66,35,42,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.portal-page{margin:0;font-family:'Manrope',sans-serif;background:
  radial-gradient(circle at top left, rgba(212,160,60,.12), transparent 24%),
  radial-gradient(circle at bottom right, rgba(152,1,46,.08), transparent 24%),
  linear-gradient(180deg,#faf7f2 0%,#f4eee7 100%);color:var(--portal-ink)}
body.portal-page a{text-decoration:none;color:inherit}
body.portal-page h1,body.portal-page h2,body.portal-page h3{margin:0;color:#1d1116;letter-spacing:-.03em}
body.portal-page p{margin:0;line-height:1.7}

.portal-container{max-width:1280px;margin:0 auto;padding:28px 16px 34px}
.portal-company-shell{padding-top:24px}
.portal-header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:22px}
.portal-header h1{font-size:clamp(2.25rem,4vw,3.85rem);line-height:1.02;margin:12px 0 10px;max-width:980px}
.portal-header p{max-width:780px;color:#5f707a;font-size:1.03rem}
.portal-header-meta{display:flex;gap:10px;flex-wrap:wrap}
.portal-kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;background:rgba(152,1,46,.08);color:var(--portal-primary);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.portal-chip{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border-radius:999px;background:rgba(212,160,60,.18);color:#6a4700;font-size:.82rem;font-weight:800}

.portal-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.portal-tab{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 17px;border-radius:999px;background:#fff;border:1px solid rgba(152,1,46,.10);color:var(--portal-primary);font-weight:800;box-shadow:var(--portal-shadow-soft)}
.portal-tab.active{background:linear-gradient(135deg,var(--portal-primary),var(--portal-primary-dark));border-color:transparent;color:#fff}

.portal-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:22px;align-items:center;margin-bottom:22px;padding:30px;border-radius:28px;background:linear-gradient(135deg,var(--portal-primary) 0%,#b20c3d 42%,var(--portal-primary-dark) 100%);box-shadow:var(--portal-shadow);color:#fff;position:relative;overflow:hidden}
.portal-hero::before{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%)}
.portal-hero>div{position:relative;z-index:1}
body.portal-page .portal-hero h2{color:#fff;font-size:clamp(2rem,3vw,3.05rem);line-height:1.08;margin:14px 0 10px;max-width:760px}
body.portal-page .portal-hero p{color:rgba(255,255,255,.90);max-width:720px;font-size:1.02rem}
body.portal-page .portal-hero .portal-kicker{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.78)}
body.portal-page .portal-hero .portal-note.compact{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);backdrop-filter:blur(8px)}
body.portal-page .portal-hero .portal-note.compact strong{color:rgba(255,255,255,.78)}
body.portal-page .portal-hero .portal-note.compact span{color:#fff}

.portal-metric-grid,.portal-grid-2{display:grid;gap:18px;margin-bottom:20px}
.portal-metric-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.portal-grid-2{grid-template-columns:1fr 1fr}
.portal-chart-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:18px;margin-bottom:20px}
.portal-chart-card--wide{grid-row:span 2}
.portal-chart-wrap{position:relative;min-height:320px}
.portal-chart-card:not(.portal-chart-card--wide) .portal-chart-wrap{min-height:230px}
.portal-card,.portal-note,.portal-sidebar-note{background:var(--portal-card);border:1px solid var(--portal-border);box-shadow:var(--portal-shadow-soft)}
.portal-card{padding:24px;border-radius:24px}
.portal-card.metric{padding:22px}
.portal-card.metric span{display:block;font-size:.84rem;font-weight:700;color:var(--portal-muted);margin-bottom:10px}
.portal-card.metric strong{display:block;font-size:clamp(1.7rem,3vw,2.7rem);line-height:1;color:var(--portal-primary)}
.portal-card.metric small{display:block;margin-top:10px;color:var(--portal-muted)}
.portal-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.portal-card-head h3{font-size:1.35rem}
.portal-card-head p{color:var(--portal-muted)}

.portal-table-wrap{overflow:auto}
.portal-table{width:100%;border-collapse:collapse;min-width:680px}
.portal-table th,.portal-table td{padding:14px;border-bottom:1px solid rgba(47,58,64,.08);text-align:left;font-size:.94rem}
.portal-table th{color:var(--portal-primary);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.portal-table tbody tr:hover{background:rgba(152,1,46,.03)}
body.portal-page .dataTables_wrapper{width:100%}
body.portal-page .portal-dt-native,
body.portal-page .portal-dt-bottom,
body.portal-page .dataTables_wrapper .dataTables_length,
body.portal-page .dataTables_wrapper .dataTables_filter,
body.portal-page .dataTables_wrapper .dataTables_info,
body.portal-page .dataTables_wrapper .dataTables_paginate{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
body.portal-page .portal-dt-native{margin:0 0 16px}
body.portal-page .portal-dt-bottom{margin:16px 0 0}
body.portal-page .dataTables_wrapper .dataTables_length label,
body.portal-page .dataTables_wrapper .dataTables_filter label{display:flex;align-items:center;gap:10px;color:var(--portal-muted);font-size:.85rem;font-weight:800}
body.portal-page .dataTables_wrapper .dataTables_length select,
body.portal-page .dataTables_wrapper .dataTables_filter input,
body.portal-page .portal-table-filter input,
body.portal-page .portal-table-filter select{min-height:44px;border-radius:14px;border:1px solid rgba(47,58,64,.12);background:#fff;color:var(--portal-ink);padding:10px 14px;box-shadow:none;font:inherit;font-size:.9rem}
body.portal-page .dataTables_wrapper .dataTables_filter input{min-width:260px}
body.portal-page .dataTables_wrapper .dataTables_length select:focus,
body.portal-page .dataTables_wrapper .dataTables_filter input:focus,
body.portal-page .portal-table-filter input:focus,
body.portal-page .portal-table-filter select:focus{outline:none;border-color:rgba(152,1,46,.35);box-shadow:0 0 0 .2rem rgba(152,1,46,.08)}
body.portal-page .dataTables_wrapper .dataTables_info{color:var(--portal-muted);font-size:.85rem;font-weight:800;padding-top:0}
body.portal-page .dataTables_wrapper .dataTables_paginate{padding-top:0}
body.portal-page .dataTables_wrapper .dataTables_paginate .paginate_button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;margin:0 2px;border-radius:999px;border:1px solid rgba(47,58,64,.12)!important;background:#fff!important;color:var(--portal-ink)!important;font-size:.8rem;font-weight:800;box-shadow:none!important}
body.portal-page .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.portal-page .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{border-color:rgba(152,1,46,.28)!important;background:rgba(152,1,46,.10)!important;color:var(--portal-primary)!important}
body.portal-page .dataTables_wrapper .dataTables_paginate .paginate_button:hover{border-color:rgba(152,1,46,.22)!important;background:rgba(152,1,46,.06)!important;color:var(--portal-primary)!important}
body.portal-page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.portal-page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{opacity:.48;color:var(--portal-muted)!important}
body.portal-page table.dataTable.no-footer{border-bottom:none}
body.portal-page table.dataTable thead th,
body.portal-page table.dataTable thead td{border-bottom:1px solid rgba(152,1,46,.12)}
body.portal-page table.dataTable tbody th,
body.portal-page table.dataTable tbody td{border-bottom:1px solid rgba(47,58,64,.08)}
body.portal-page table.dataTable.stripe tbody tr.odd,
body.portal-page table.dataTable.display tbody tr.odd{background:#fff}
body.portal-page table.dataTable.hover tbody tr:hover,
body.portal-page table.dataTable.display tbody tr:hover{background:rgba(152,1,46,.03)}
.portal-table-filterbar{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end;margin:0 0 16px;padding:14px;border:1px solid rgba(152,1,46,.10);border-radius:20px;background:linear-gradient(180deg,#fff 0%,#fff8fb 100%)}
.portal-table-filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.portal-table-filter{display:grid;gap:7px}
.portal-table-filter span{color:var(--portal-primary);font-size:.74rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.portal-table-clear{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(152,1,46,.14);background:#fff;color:var(--portal-primary);font-weight:900;cursor:pointer;box-shadow:var(--portal-shadow-soft)}
.portal-table-clear:hover,.portal-table-clear:focus-visible{border-color:rgba(152,1,46,.28);background:#fff3f7;outline:none}

.portal-list{display:grid;gap:12px}
.portal-list-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:14px 16px;border-radius:18px;background:var(--portal-soft);border:1px solid rgba(152,1,46,.06)}
.portal-list-row strong{display:block}
.portal-list-row small{display:block;color:var(--portal-muted);margin-top:4px}

.portal-note{padding:20px 22px;border-radius:22px}
.portal-note-spaced{margin-top:16px}
.portal-note.compact{display:grid;gap:8px;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14);color:#fff}
.portal-note.compact strong{font-size:.82rem;color:rgba(255,255,255,.76);text-transform:uppercase;letter-spacing:.08em}
.portal-note.compact span{color:#fff;font-weight:700}
.portal-note strong{display:block;margin-bottom:8px;color:var(--portal-primary)}
.portal-note span{display:block;color:var(--portal-muted)}

.portal-status{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;border-radius:999px;font-size:.8rem;font-weight:800}
.portal-status.active{background:rgba(31,139,88,.12);color:#12613d}
.portal-status.review{background:rgba(152,1,46,.08);color:var(--portal-primary)}

.portal-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.portal-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:14px;border:1px solid transparent;background:linear-gradient(135deg,var(--portal-primary),var(--portal-primary-dark));color:#fff;font-weight:800;line-height:1.08;letter-spacing:-.01em;white-space:nowrap;text-decoration:none!important;box-shadow:0 16px 30px rgba(152,1,46,.18);cursor:pointer;user-select:none;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease}
.portal-button.soft{background:linear-gradient(180deg,#fff 0%,#fff7fa 100%);color:var(--portal-primary);border-color:rgba(152,1,46,.12);box-shadow:var(--portal-shadow-soft)}
.portal-button.compact{min-height:36px;padding:0 12px;border-radius:999px;font-size:.82rem}
.portal-button:hover,
.portal-button:focus-visible{transform:translateY(-2px)}
.portal-button:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(152,1,46,.12),0 18px 30px rgba(47,58,64,.12)}
body.portal-page .portal-button,
body.portal-page .portal-button:hover,
body.portal-page .portal-button:focus-visible,
body.portal-page .portal-button:visited{color:#fff}
body.portal-page .portal-button.soft,
body.portal-page .portal-button.soft:hover,
body.portal-page .portal-button.soft:focus-visible,
body.portal-page .portal-button.soft:visited{color:var(--portal-primary)}
body.portal-page .portal-tab,
body.portal-page .portal-tab:hover,
body.portal-page .portal-tab:focus-visible,
body.portal-page .portal-tab:visited{color:var(--portal-primary)}
body.portal-page .portal-tab.active,
body.portal-page .portal-tab.active:hover,
body.portal-page .portal-tab.active:focus-visible,
body.portal-page .portal-tab.active:visited{color:#fff}

.portal-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.portal-field{display:grid;gap:8px}
.portal-field.full{grid-column:1 / -1}
.portal-field label{font-size:.9rem;font-weight:800;color:#1d1116}
.portal-field input,.portal-field select,.portal-field textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:14px;border:1px solid rgba(47,58,64,.14);background:#fff;color:var(--portal-ink);box-shadow:none;font:inherit}
.portal-field input:focus,.portal-field select:focus,.portal-field textarea:focus{outline:none;border-color:rgba(152,1,46,.35);box-shadow:0 0 0 .2rem rgba(152,1,46,.08)}
.portal-field.has-error label{color:var(--portal-primary)}
.portal-field .is-invalid{
  border-color:rgba(152,1,46,.45)!important;
  box-shadow:0 0 0 .2rem rgba(152,1,46,.08)!important;
}
.portal-field .is-valid{border-color:rgba(30,122,87,.35)!important}
.portal-field .field-error-text{
  margin-top:8px;
  color:var(--portal-primary);
  font-size:.82rem;
  font-weight:700;
  line-height:1.5;
}
body.portal-page .select2-container{width:100%!important;font:inherit}
body.portal-page .select2-container--default .select2-selection--single{min-height:48px;display:flex;align-items:center;padding:0 14px;border-radius:14px;border:1px solid rgba(47,58,64,.14);background:#fff;color:var(--portal-ink);box-shadow:none}
body.portal-page .select2-container--default .select2-selection--single .select2-selection__rendered{padding-left:0;padding-right:34px;line-height:1.45;color:var(--portal-ink)}
body.portal-page .select2-container--default .select2-selection--single .select2-selection__placeholder{color:rgba(111,125,134,.72)}
body.portal-page .select2-container--default .select2-selection--single .select2-selection__arrow{right:12px;height:100%}
body.portal-page .select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:var(--portal-primary) transparent transparent transparent}
body.portal-page .select2-container--default.select2-container--open .select2-selection--single,
body.portal-page .select2-container--default .select2-selection--single:focus{border-color:rgba(152,1,46,.35);box-shadow:0 0 0 .2rem rgba(152,1,46,.08)}
body.portal-page .select2-container--default .select2-selection--single.is-invalid{border-color:rgba(152,1,46,.45)!important;box-shadow:0 0 0 .2rem rgba(152,1,46,.08)!important}
body.portal-page .select2-container--default .select2-selection--single.is-valid{border-color:rgba(30,122,87,.35)!important}
body.portal-page .select2-dropdown{border:1px solid rgba(152,1,46,.14);border-radius:16px;overflow:hidden;box-shadow:0 18px 34px rgba(66,35,42,.14)}
body.portal-page .select2-search--dropdown{padding:10px;border-bottom:1px solid rgba(152,1,46,.08);background:#fff8fb}
body.portal-page .select2-container--default .select2-search--dropdown .select2-search__field{min-height:42px;border-radius:12px;border:1px solid rgba(152,1,46,.14);padding:10px 12px;outline:none}
body.portal-page .select2-results__option{padding:10px 14px}
body.portal-page .select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--portal-primary);color:#fff}
body.portal-page .select2-container--default .select2-results__option[aria-selected=true]{background:#fff0f5;color:var(--portal-primary)}

.portal-alert{padding:14px 16px;border-radius:16px;margin-bottom:18px;font-weight:700}
.portal-alert.success{background:rgba(31,139,88,.12);color:#12613d;border:1px solid rgba(31,139,88,.15)}
.portal-alert.error{background:rgba(152,1,46,.08);color:var(--portal-primary);border:1px solid rgba(152,1,46,.10)}

.portal-empty-state{display:grid;gap:6px;padding:18px;border:1px dashed rgba(152,1,46,.22);border-radius:18px;background:#fff7fa;color:var(--portal-muted)}
.portal-empty-state strong{color:var(--portal-primary)}
.portal-empty-state span{line-height:1.6}

.portal-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.portal-detail-grid div{padding:14px 0;border-bottom:1px solid rgba(47,58,64,.08)}
.portal-detail-grid strong{display:block;font-size:.84rem;color:#1d1116;margin-bottom:6px}
.portal-detail-grid span{display:block;color:var(--portal-muted)}

.portal-bullet-list{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--portal-muted)}

.portal-personal-layout{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.portal-sidebar{position:sticky;top:0;align-self:start;min-height:100vh;padding:28px 20px;background:linear-gradient(180deg,#b20c3d 0%,#65001d 100%);color:#fff;box-shadow:12px 0 30px rgba(54,12,20,.10)}
.portal-sidebar-brand{display:flex;align-items:center;gap:14px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:24px}
.portal-brand-mark{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.10);color:#fff;font-weight:800}
.portal-sidebar-brand strong{display:block;font-size:1.25rem;color:#fff}
.portal-sidebar-brand span{display:block;margin-top:4px;color:rgba(255,255,255,.76);font-size:.82rem}
.portal-sidebar-profile{display:flex;align-items:center;gap:14px;padding:16px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);margin-bottom:24px}
.portal-avatar{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(212,160,60,.95),#b77d17);color:#fff;font-size:1.2rem;font-weight:800}
.portal-sidebar-profile strong{display:block;color:#fff}
.portal-sidebar-profile span{display:block;color:rgba(255,255,255,.76);font-size:.82rem;margin-top:4px}
.portal-sidebar-nav{display:grid;gap:10px}
.portal-sidebar-nav a{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;color:rgba(255,255,255,.86);font-weight:700}
.portal-sidebar-nav a.active,.portal-sidebar-nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.portal-sidebar-logout{display:flex;align-items:center;justify-content:center;min-height:46px;margin-top:14px;padding:0 16px;border-radius:16px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.10);color:#fff!important;font-weight:800}
.portal-sidebar-logout:hover,.portal-sidebar-logout:focus-visible{background:#fff;color:var(--portal-primary)!important;outline:none}
.portal-sidebar-note{padding:18px;border-radius:20px;margin-top:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10)}
.portal-sidebar-note strong{display:block;color:#fff;margin-bottom:8px}
.portal-sidebar-note span{display:block;color:rgba(255,255,255,.8);font-size:.9rem;line-height:1.7}
.portal-main{padding:30px}

@media (max-width:1199.98px){
  .portal-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portal-hero,.portal-grid-2,.portal-chart-grid{grid-template-columns:1fr}
  .portal-chart-card--wide{grid-row:auto}
}

@media (max-width:991.98px){
  .portal-personal-layout{grid-template-columns:1fr}
  .portal-sidebar{position:relative;min-height:auto}
  .portal-main{padding:22px 16px 30px}
}

@media (max-width:767.98px){
  .portal-container{padding:20px 14px 28px}
  .portal-header,.portal-card-head{align-items:flex-start}
  .portal-metric-grid,.portal-form-grid,.portal-grid-2,.portal-detail-grid{grid-template-columns:1fr}
  .portal-table{min-width:560px}
  .portal-card,.portal-hero,.portal-note{padding:20px}
  .portal-tabs,.portal-actions,.portal-header-meta{gap:8px}
  .portal-button,.portal-tab{width:100%}
  .portal-list-row{flex-direction:column;align-items:flex-start}
  .portal-table-filterbar{grid-template-columns:1fr}
  .portal-table-clear{width:100%}
  body.portal-page .dataTables_wrapper .dataTables_filter input{min-width:0;width:100%}
  body.portal-page .portal-dt-native,
  body.portal-page .portal-dt-bottom,
  body.portal-page .dataTables_wrapper .dataTables_length,
  body.portal-page .dataTables_wrapper .dataTables_filter,
  body.portal-page .dataTables_wrapper .dataTables_info,
  body.portal-page .dataTables_wrapper .dataTables_paginate{align-items:stretch;justify-content:flex-start}
}