/* ================================================================
   Moroccan Red Crescent — Unified Portal Design System V1
   Reference: Finance Accountant V2.1
   Scope: operational portals, member self-service, portal auth,
          registration and verification surfaces.
   Loaded after page CSS so it can normalize legacy branches.
================================================================ */

:root{
  --mrc-red:#b42318;
  --mrc-red-strong:#912018;
  --mrc-red-soft:#fef3f2;
  --mrc-red-soft-2:#fff8f7;
  --mrc-green:#027a48;
  --mrc-green-soft:#ecfdf3;
  --mrc-blue:#175cd3;
  --mrc-blue-soft:#eef4ff;
  --mrc-amber:#c4320a;
  --mrc-amber-soft:#fff6ed;
  --mrc-violet:#5925dc;
  --mrc-violet-soft:#f4f3ff;
  --mrc-ink:#101828;
  --mrc-text:#344054;
  --mrc-muted:#667085;
  --mrc-muted-2:#98a2b3;
  --mrc-line:#eaecf0;
  --mrc-line-strong:#d0d5dd;
  --mrc-surface:#fff;
  --mrc-surface-soft:#f9fafb;
  --mrc-canvas:#f6f7f9;
  --mrc-radius-sm:9px;
  --mrc-radius:14px;
  --mrc-radius-lg:18px;
  --mrc-shadow:0 10px 30px rgba(16,24,40,.055);
  --mrc-shadow-hover:0 14px 30px rgba(16,24,40,.08);
}

/* ------------------------- Portal shell ------------------------- */
.h27-portal:not(.finance-accountant-page){
  --h27-red:var(--mrc-red);
  --h27-red-dark:var(--mrc-red-strong);
  --h27-red-deep:#761b16;
  --h27-red-soft:var(--mrc-red-soft);
  --h27-red-soft-2:var(--mrc-red-soft-2);
  --h27-green:var(--mrc-green);
  --h27-green-soft:var(--mrc-green-soft);
  --h27-blue:var(--mrc-blue);
  --h27-blue-soft:var(--mrc-blue-soft);
  --h27-text:var(--mrc-text);
  --h27-muted:var(--mrc-muted);
  --h27-border:var(--mrc-line);
  --h27-bg:var(--mrc-canvas);
  --h27-card:var(--mrc-surface);
  --h27-shadow:var(--mrc-shadow);
  background:var(--mrc-canvas);
}

.h27-portal:not(.finance-accountant-page) .h27-hero{
  padding:138px 0 34px;
  background:
    radial-gradient(circle at 10% 22%,rgba(255,255,255,.12),transparent 28%),
    linear-gradient(125deg,#781813 0%,#9c1f19 46%,#bd2820 100%);
}
.h27-portal:not(.finance-accountant-page) .h27-hero::before{
  width:230px;height:230px;bottom:-150px;border-width:34px;opacity:.75;
}
.h27-portal:not(.finance-accountant-page) .h27-hero::after{
  width:150px;height:150px;top:-74px;opacity:.8;
}
.h27-portal:not(.finance-accountant-page) .h27-hero>.container,
.h27-portal:not(.finance-accountant-page) .h27-content-section>.container{
  width:min(96%,1540px);
  max-width:1540px;
}
.h27-portal:not(.finance-accountant-page) .h27-hero-grid{
  grid-template-columns:minmax(0,1fr) 285px;
  gap:26px;
}
.h27-portal:not(.finance-accountant-page) .h27-kicker{
  margin-bottom:9px;padding:5px 11px;font-size:.73rem;
}
.h27-portal:not(.finance-accountant-page) .h27-title{
  margin-bottom:7px;font-size:clamp(1.65rem,2.8vw,2.35rem);font-weight:850;
}
.h27-portal:not(.finance-accountant-page) .h27-subtitle{
  max-width:900px;font-size:.84rem;line-height:1.7;
}
.h27-portal:not(.finance-accountant-page) .h27-user-card{
  gap:11px;padding:13px 14px;border-radius:14px;box-shadow:0 10px 24px rgba(56,5,8,.11);
}
.h27-portal:not(.finance-accountant-page) .h27-user-icon{
  width:42px;height:42px;flex-basis:42px;border-radius:11px;
}
.h27-portal:not(.finance-accountant-page) .h27-user-card strong{font-size:.82rem}
.h27-portal:not(.finance-accountant-page) .h27-user-card small{font-size:.68rem;line-height:1.45}
.h27-portal:not(.finance-accountant-page) .h27-content-section{
  min-height:620px;padding:24px 0 58px;
  background:linear-gradient(180deg,#f2f4f7 0,var(--mrc-canvas) 160px,#fff 100%);
}
.h27-portal:not(.finance-accountant-page) .h27-layout{
  grid-template-columns:205px minmax(0,1fr);gap:18px;
}
.h27-portal:not(.finance-accountant-page) .h27-sidebar{
  top:100px;border-color:var(--mrc-line);border-radius:16px;box-shadow:var(--mrc-shadow);
}
.h27-portal:not(.finance-accountant-page) .h27-sidebar-title{
  padding:14px 15px;font-size:.84rem;background:linear-gradient(135deg,#8f1d17,#b42318);
}
.h27-portal:not(.finance-accountant-page) .h27-sidebar-title svg{width:20px;height:20px}
.h27-portal:not(.finance-accountant-page) .h27-sidebar-actions{padding:8px 8px 0}
.h27-portal:not(.finance-accountant-page) .h27-sidebar-action{
  min-height:38px;padding:7px 9px;border-radius:9px;font-size:.76rem;
}
.h27-portal:not(.finance-accountant-page) .h27-nav{gap:3px;padding:8px}
.h27-portal:not(.finance-accountant-page) .h27-nav a{
  min-height:40px;padding:7px 9px;border-radius:9px;font-size:.78rem;font-weight:750;
}
.h27-portal:not(.finance-accountant-page) .h27-nav-icon{
  width:25px;height:25px;flex-basis:25px;border-radius:7px;font-size:.76rem;
}
.h27-portal:not(.finance-accountant-page) .h27-sidebar-note{
  margin:0 9px 10px;padding:10px;border-radius:10px;
}
.h27-portal:not(.finance-accountant-page) .h27-sidebar-note strong{font-size:.75rem}
.h27-portal:not(.finance-accountant-page) .h27-sidebar-note p{font-size:.68rem;line-height:1.6}

/* ------------------------- Cards / sections ------------------------- */
.h27-portal:not(.finance-accountant-page) .h27-card,
.h27-portal:not(.finance-accountant-page) .ops-card,
.h27-portal:not(.finance-accountant-page) .att-card,
.h27-portal:not(.finance-accountant-page) .ga-card,
.h27-portal:not(.finance-accountant-page) .corr-card,
.h27-portal:not(.finance-accountant-page) .projects-form-card{
  border:1px solid var(--mrc-line)!important;
  border-radius:var(--mrc-radius-lg)!important;
  background:var(--mrc-surface);
  box-shadow:var(--mrc-shadow)!important;
}
.h27-portal:not(.finance-accountant-page) .h27-card{margin-bottom:16px}
.h27-portal:not(.finance-accountant-page) .h27-card-header{
  gap:16px;padding-bottom:12px;margin-bottom:13px;border-bottom:1px solid var(--mrc-line);
}
.h27-portal:not(.finance-accountant-page) .h27-card-header h2,
.h27-portal:not(.finance-accountant-page) .h27-card-header h3,
.h27-portal:not(.finance-accountant-page) .h27-page-intro h2,
.h27-portal:not(.finance-accountant-page) .h27-page-intro h3{
  color:var(--mrc-ink);font-weight:850;
}
.h27-portal:not(.finance-accountant-page) .h27-card-header h3{font-size:1rem}
.h27-portal:not(.finance-accountant-page) .h27-card-header p,
.h27-portal:not(.finance-accountant-page) .h27-page-intro p{
  color:var(--mrc-muted);font-size:.76rem;line-height:1.6;
}
.h27-portal:not(.finance-accountant-page) .h27-page-intro{
  padding:18px 20px;margin-bottom:16px;border:1px solid var(--mrc-line);border-radius:var(--mrc-radius-lg);
  background:linear-gradient(135deg,#fff 0%,#fff9f9 100%);box-shadow:var(--mrc-shadow);
}
.h27-portal:not(.finance-accountant-page) .h27-eyebrow{
  color:var(--mrc-red);font-size:.72rem;font-weight:850;
}

/* ------------------------- Tables ------------------------- */
.h27-portal:not(.finance-accountant-page) :is(.projects-table-wrap,.ops-table-wrap,.att-table-wrap,.ga-table-wrap,.corr-table-wrap){
  overflow:auto;border:1px solid var(--mrc-line);border-radius:13px;background:#fff;
}
.h27-portal:not(.finance-accountant-page) :is(.projects-table,.ops-table,.att-table,.ga-table,.corr-table){
  width:100%;border-collapse:collapse;background:#fff;
}
.h27-portal:not(.finance-accountant-page) :is(.projects-table,.ops-table,.att-table,.ga-table,.corr-table) th{
  padding:9px 10px!important;background:var(--mrc-surface-soft)!important;color:var(--mrc-muted)!important;
  border-bottom:1px solid var(--mrc-line)!important;font-size:.69rem!important;font-weight:850!important;white-space:nowrap;
}
.h27-portal:not(.finance-accountant-page) :is(.projects-table,.ops-table,.att-table,.ga-table,.corr-table) td{
  padding:10px!important;border-bottom:1px solid #f2f4f7!important;color:var(--mrc-text);font-size:.76rem;vertical-align:middle;
}
.h27-portal:not(.finance-accountant-page) :is(.projects-table,.ops-table,.att-table,.ga-table,.corr-table) tbody tr:last-child td{border-bottom:0!important}
.h27-portal:not(.finance-accountant-page) :is(.projects-table,.ops-table,.att-table,.ga-table,.corr-table) tbody tr:hover{background:#fcfcfd}
.h27-portal:not(.finance-accountant-page) :is(.projects-table,.ops-table,.att-table,.ga-table,.corr-table) td strong{color:var(--mrc-ink)}

/* ------------------------- Form controls ------------------------- */
.h27-portal:not(.finance-accountant-page) :is(.h27-control,.form-control,.form-select,input[type="text"],input[type="number"],input[type="date"],input[type="datetime-local"],input[type="email"],input[type="search"],input[type="url"],input[type="tel"],select,textarea){
  border-color:var(--mrc-line-strong);border-radius:10px;min-height:40px;font-size:.82rem;box-shadow:none;
}
.h27-portal:not(.finance-accountant-page) textarea{min-height:96px}
.h27-portal:not(.finance-accountant-page) :is(.h27-control,.form-control,.form-select,input,select,textarea):focus{
  border-color:#e7a6a1;box-shadow:0 0 0 3px rgba(180,35,24,.08);outline:0;
}
.h27-portal:not(.finance-accountant-page) label{color:#475467;font-size:.76rem;font-weight:780}
.h27-portal:not(.finance-accountant-page) :is(.finance-form-grid,.projects-form-grid,.procurement-form-grid,.ga-form-grid,.corr-form-grid,.h28-form-grid){gap:12px}

/* ------------------------- Buttons / actions ------------------------- */
.h27-portal:not(.finance-accountant-page) :is(.h27-button,.att-button,.ga-button,.corr-btn,.btn){
  border-radius:9px;font-weight:800;box-shadow:none;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,background-color .14s ease;
}
.h27-portal:not(.finance-accountant-page) :is(.h27-button,.att-button,.ga-button,.corr-btn,.btn):hover{transform:translateY(-1px)}
.h27-portal:not(.finance-accountant-page) :is(.h27-button-primary,.att-button.primary,.ga-button.primary,.corr-btn-primary,.btn-primary){
  background:var(--mrc-red)!important;border-color:var(--mrc-red)!important;color:#fff!important;
}
.h27-portal:not(.finance-accountant-page) :is(.h27-button-primary,.att-button.primary,.ga-button.primary,.corr-btn-primary,.btn-primary):hover{
  background:var(--mrc-red-strong)!important;border-color:var(--mrc-red-strong)!important;box-shadow:0 8px 18px rgba(180,35,24,.14)!important;
}
.h27-portal:not(.finance-accountant-page) :is(.btn-outline-primary,.h27-button-outline){
  color:var(--mrc-red)!important;border-color:#f1b4af!important;background:#fff!important;
}
.h27-portal:not(.finance-accountant-page) :is(.btn-outline-primary,.h27-button-outline):hover{
  background:var(--mrc-red-soft)!important;color:var(--mrc-red-strong)!important;
}

/* ------------------------- KPI / stats ------------------------- */
.h27-portal:not(.finance-accountant-page) :is(.projects-kpi-grid,.ops-stat-grid,.finance-kpi-grid,.finance-kpis,.ga-summary-grid,.h28-stats-grid){gap:10px}
.h27-portal:not(.finance-accountant-page) :is(.projects-kpi,.ops-stat,.finance-kpi,.ga-summary-grid>*,.h28-stat){
  border:1px solid var(--mrc-line)!important;border-radius:14px!important;background:#fff!important;box-shadow:0 7px 20px rgba(16,24,40,.04)!important;
}
.h27-portal:not(.finance-accountant-page) :is(.projects-kpi,.ops-stat,.finance-kpi,.h28-stat) small{color:var(--mrc-muted);font-size:.7rem}
.h27-portal:not(.finance-accountant-page) :is(.projects-kpi,.ops-stat,.finance-kpi,.h28-stat) strong{color:var(--mrc-ink)}

/* ------------------------- Badges / statuses ------------------------- */
.h27-portal:not(.finance-accountant-page) :is(.h27-chip,.h27-status,.ops-badge,.ops-status,.att-status,.ga-status,.ga-substatus,.corr-badge,.finance-status-pill,.h28-badge){
  border-radius:999px;font-weight:800;box-shadow:none;
}
.h27-portal:not(.finance-accountant-page) .h27-alert{
  padding:10px 13px;border-radius:10px;font-size:.78rem;
}
.h27-portal:not(.finance-accountant-page) .h27-empty,
.h27-portal:not(.finance-accountant-page) :is(.ga-empty,.portal-empty){
  padding:24px;color:var(--mrc-muted);border:1px dashed var(--mrc-line-strong);border-radius:13px;background:#fcfcfd;text-align:center;
}

/* ------------------------- App-specific normalization ------------------------- */
.h27-portal:not(.finance-accountant-page) .ops-office-tabs,
.h27-portal:not(.finance-accountant-page) .finance-accounting-tabs{
  gap:6px;padding:7px;border:1px solid var(--mrc-line);border-radius:14px;background:#fff;box-shadow:0 7px 20px rgba(16,24,40,.035);
}
.h27-portal:not(.finance-accountant-page) .ops-office-tab,
.h27-portal:not(.finance-accountant-page) .finance-accounting-tab{
  min-height:42px;border-radius:9px;font-size:.75rem;
}
.h27-portal:not(.finance-accountant-page) .ops-office-tab.is-active,
.h27-portal:not(.finance-accountant-page) .finance-accounting-tab.is-active{
  background:var(--mrc-red-soft)!important;border-color:#f7c4c0!important;color:var(--mrc-red)!important;
}
.h27-portal:not(.finance-accountant-page) .corr-stat,
.h27-portal:not(.finance-accountant-page) .att-big-number,
.h27-portal:not(.finance-accountant-page) .att-live-count{
  border-radius:14px!important;box-shadow:0 7px 20px rgba(16,24,40,.04)!important;
}
.h27-portal:not(.finance-accountant-page) :is(.h28-operation-card,.projects-matrix-item,.ops-management-link,.finance-management-grid>a){
  border-color:var(--mrc-line)!important;border-radius:13px!important;box-shadow:none!important;
}
.h27-portal:not(.finance-accountant-page) :is(.h28-operation-card,.projects-matrix-item,.ops-management-link,.finance-management-grid>a):hover{
  border-color:#e7b4b0!important;box-shadow:var(--mrc-shadow-hover)!important;transform:translateY(-1px);
}
.h27-portal:not(.finance-accountant-page) details{
  border-color:var(--mrc-line);border-radius:13px;
}

/* ------------------------- Pagination ------------------------- */
.h27-portal:not(.finance-accountant-page) :is(.pagination,.h27-pagination,.member-pagination){gap:5px}
.h27-portal:not(.finance-accountant-page) .page-link{
  min-width:34px;min-height:34px;display:grid;place-items:center;border-radius:8px!important;border-color:var(--mrc-line);color:var(--mrc-text);
}
.h27-portal:not(.finance-accountant-page) .page-item.active .page-link{background:var(--mrc-red);border-color:var(--mrc-red);color:#fff}

/* ------------------------- Member self-service ------------------------- */
.member-dashboard,
.member-linked-dashboard{
  --member-red:var(--mrc-red);
  --member-ink:var(--mrc-ink);
  --member-muted:var(--mrc-muted);
  background:var(--mrc-canvas);
}
.member-dashboard .member-dashboard-hero,
.member-linked-dashboard .member-dashboard-hero,
.member-linked-dashboard .member-linked-hero{
  padding-top:138px!important;padding-bottom:34px!important;
  background:linear-gradient(125deg,#781813 0%,#9c1f19 46%,#bd2820 100%)!important;
}
.member-dashboard :is(.member-dashboard-body,.member-linked-body)>.container,
.member-linked-dashboard :is(.member-dashboard-body,.member-linked-body)>.container{
  width:min(96%,1540px);max-width:1540px;
}
.member-dashboard :is(.member-modern-card,.member-quick-card),
.member-linked-dashboard :is(.member-modern-card,.member-quick-card){
  border:1px solid var(--mrc-line)!important;border-radius:16px!important;box-shadow:var(--mrc-shadow)!important;background:#fff!important;
}
.member-dashboard .member-dashboard-stats,
.member-linked-dashboard .member-dashboard-stats{gap:10px}
.member-dashboard .member-stat,
.member-linked-dashboard .member-stat{
  min-height:100px;border:1px solid var(--mrc-line)!important;border-radius:15px!important;box-shadow:0 7px 20px rgba(16,24,40,.04)!important;
}
.member-dashboard .member-dashboard-tabs,
.member-linked-dashboard .member-dashboard-tabs{
  gap:5px;padding:7px;border:1px solid var(--mrc-line);border-radius:14px;background:#fff;box-shadow:0 7px 20px rgba(16,24,40,.035);
}
.member-dashboard .member-dashboard-tabs a,
.member-linked-dashboard .member-dashboard-tabs a{border-radius:9px;font-size:.76rem}
.member-dashboard .member-dashboard-tabs a.is-active,
.member-linked-dashboard .member-dashboard-tabs a.is-active{background:var(--mrc-red-soft)!important;color:var(--mrc-red)!important}
.member-dashboard .member-table-wrap,
.member-linked-dashboard .member-table-wrap{overflow:auto;border:1px solid var(--mrc-line);border-radius:13px}
.member-dashboard .member-table th,
.member-linked-dashboard .member-table th{background:var(--mrc-surface-soft)!important;color:var(--mrc-muted)!important;font-size:.69rem!important}
.member-dashboard .member-table td,
.member-linked-dashboard .member-table td{font-size:.76rem;border-color:#f2f4f7!important}
.member-dashboard :is(.member-btn,.member-primary-button),
.member-linked-dashboard :is(.member-btn,.member-primary-button){border-radius:9px!important;font-weight:800}

/* Portal login / password screens */
.member-self-hero{background:linear-gradient(180deg,#f2f4f7 0,#fff 100%)!important;padding-top:150px!important;padding-bottom:70px!important}
.member-self-hero .member-login-card{max-width:520px!important;border:1px solid var(--mrc-line)!important;border-radius:20px!important;box-shadow:var(--mrc-shadow)!important}
.member-self-hero .member-login-icon{background:var(--mrc-red-soft)!important;color:var(--mrc-red)!important;border-radius:14px!important}
.member-self-hero .member-primary-button{background:var(--mrc-red)!important;border-radius:10px!important}
.member-self-hero .member-form-group input{border:1px solid var(--mrc-line-strong)!important;border-radius:10px!important;min-height:43px!important}

/* Registration surfaces: preserve wizard behavior while aligning visuals. */
.mrc-registration-section,
.registration-success-section{background:linear-gradient(180deg,#f2f4f7 0,#fff 100%)!important}
.mrc-registration-section .registration-wizard,
.registration-success-section .registration-success-card{border:1px solid var(--mrc-line)!important;border-radius:20px!important;box-shadow:var(--mrc-shadow)!important;background:#fff!important}
.mrc-registration-section .registration-kicker,
.registration-success-section .registration-kicker{color:var(--mrc-red)!important}
.mrc-registration-section .progress-bar{background:var(--mrc-red)!important}

/* ------------------------- Responsive ------------------------- */
@media(max-width:1300px){
  .h27-portal:not(.finance-accountant-page) .h27-layout{grid-template-columns:185px minmax(0,1fr)}
  .h27-portal:not(.finance-accountant-page) .h27-hero-grid{grid-template-columns:minmax(0,1fr) 255px}
}
@media(max-width:991px){
  .h27-portal:not(.finance-accountant-page) .h27-hero{padding-top:125px}
  .h27-portal:not(.finance-accountant-page) .h27-hero-grid{grid-template-columns:1fr}
  .h27-portal:not(.finance-accountant-page) .h27-user-card{max-width:420px}
  .h27-portal:not(.finance-accountant-page) .h27-layout{grid-template-columns:1fr}
  .h27-portal:not(.finance-accountant-page) .h27-sidebar{position:static}
  .h27-portal:not(.finance-accountant-page) .h27-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
  .h27-portal:not(.finance-accountant-page) .h27-nav a{justify-content:center;text-align:center}
  .h27-portal:not(.finance-accountant-page) .h27-sidebar-note{display:none}
}
@media(max-width:700px){
  .h27-portal:not(.finance-accountant-page) .h27-hero>.container,
  .h27-portal:not(.finance-accountant-page) .h27-content-section>.container{width:100%;padding-inline:12px}
  .h27-portal:not(.finance-accountant-page) .h27-hero{padding-top:116px;padding-bottom:26px}
  .h27-portal:not(.finance-accountant-page) .h27-title{font-size:1.55rem}
  .h27-portal:not(.finance-accountant-page) .h27-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h27-portal:not(.finance-accountant-page) :is(.projects-kpi-grid,.ops-stat-grid,.finance-kpi-grid,.finance-kpis,.ga-summary-grid,.h28-stats-grid){grid-template-columns:1fr!important}
  .h27-portal:not(.finance-accountant-page) :is(.finance-form-grid,.projects-form-grid,.procurement-form-grid,.ga-form-grid,.corr-form-grid,.h28-form-grid){grid-template-columns:1fr!important}
  .member-dashboard :is(.member-dashboard-body,.member-linked-body)>.container,
  .member-linked-dashboard :is(.member-dashboard-body,.member-linked-body)>.container{width:100%;padding-inline:12px}
}

@media print{
  .h27-sidebar,.member-dashboard-tabs,.member-quick-card{display:none!important}
  .h27-layout{display:block!important}
  .h27-hero{padding:12px 0!important;background:#fff!important;color:#000!important}
  .h27-title,.h27-subtitle,.h27-kicker{color:#000!important}
  .h27-card,.member-modern-card{box-shadow:none!important}
}