/* =====================================================
   EMPLOYMENT PORTAL - PROFESSIONAL DESIGN SYSTEM
   Al-Mustaqbal University | 2026
   ===================================================== */

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

/* ── Design Tokens ─────────────────────────────────── */
:root {
  --c-bg:        #f5f7fa;
  --c-surface:   #ffffff;
  --c-border:    #eaecf0;
  --c-primary:   #1a5653;
  --c-primary-d: #123c3a;
  --c-accent:    #10b981;
  --c-text:      #111827;
  --c-muted:     #6b7280;
  --c-danger:    #ef4444;
  --shadow-xs:   0 1px 3px rgba(0,0,0,.06);
  --shadow-sm:   0 4px 12px rgba(0,0,0,.07);
  --shadow-md:   0 12px 32px rgba(0,0,0,.08);
  --shadow-lg:   0 24px 56px rgba(0,0,0,.10);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ── Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { background: var(--c-bg) !important; font-family: 'Almarai', sans-serif !important; }
h1,h2,h3,h4,h5,h6,p,a,span,li,button,div,small,label,input,select,textarea {
  font-family: 'Almarai', sans-serif !important;
}
a { text-decoration: none; }

/* ── Breadcrumb Override ───────────────────────────── */
.breadcumb-wrapper {
  background: linear-gradient(135deg, var(--c-primary) 0%, #0e3734 100%) !important;
  padding: 56px 0 !important;
  border: none !important;
}
.breadcumb-title { color: #fff !important; font-size: 2.4rem !important; font-weight: 800 !important; margin-bottom: .5rem !important; }
.breadcumb-menu { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; list-style:none; padding:0; margin:0; }
.breadcumb-menu li { color:rgba(255,255,255,.65); font-size:.95rem; }
.breadcumb-menu li::before { content:'›'; margin-inline-end:8px; }
.breadcumb-menu li:first-child::before { display:none; }
.breadcumb-menu li a { color:rgba(255,255,255,.85); font-weight:600; transition:color .2s; }
.breadcumb-menu li a:hover { color:#fff; }

/* ── HERO ──────────────────────────────────────────── */
.portal-hero {
  background: var(--c-surface);
  padding: 100px 0 80px;
  border-bottom: 1px solid var(--c-border);
  position: relative;
  overflow: hidden;
}
.portal-hero::before {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(ellipse 70% 60% at 80% 50%, rgba(26,86,83,.06) 0%, transparent 70%);
  pointer-events:none;
}

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(16,185,129,.10); color:var(--c-accent);
  border:1px solid rgba(16,185,129,.25);
  border-radius:100px; padding:6px 18px;
  font-size:.9rem; font-weight:700;
  margin-bottom:28px;
}

.portal-title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}
.portal-title span {
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.portal-subtitle {
  font-size: 1.1rem;
  color: var(--c-muted);
  line-height: 1.8;
  margin-bottom: 2.5rem;
  max-width: 560px;
}

/* ── RTL Global Fix for Employment Portal ──────────── */
[dir="rtl"] .emp-db-row:hover { transform:translateX(4px); }

html[dir="rtl"] .portal-hero .row { direction: rtl; }
html[dir="rtl"] .portal-hero .col-lg-6:first-child { order: 1; text-align: right; }
html[dir="rtl"] .portal-hero .col-lg-6:last-child  { order: 2; }

/* Push chips inside the mockup boundary */
.emp-chip-1 { top:0%; right:-5%; }
.emp-chip-2 { bottom:5%; left:-5%; }

@media (max-width: 991px) {
  .emp-chip-1, .emp-chip-2 { display:none; }
  .emp-dashboard { width:100%; max-width:360px; }
  .portal-hero .col-lg-6:first-child { order: 1; }
  .portal-hero .col-lg-6:last-child  { order: 2; }
}
.btn-portal {
  display:inline-flex; align-items:center; gap:10px;
  background: var(--c-primary); color:#fff !important;
  padding:14px 30px; border-radius:var(--r-md);
  font-weight:700; font-size:1rem;
  box-shadow: 0 4px 16px rgba(26,86,83,.35);
  transition:all .3s var(--ease);
  border:none; cursor:pointer;
}
.btn-portal:hover {
  background: var(--c-primary-d);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(26,86,83,.45);
  color:#fff !important;
}

.btn-alumni {
  display:inline-flex; align-items:center; gap:10px;
  background: var(--c-surface); color:var(--c-primary) !important;
  padding:14px 30px; border-radius:var(--r-md);
  font-weight:700; font-size:1rem;
  border:2px solid var(--c-border);
  transition:all .3s var(--ease);
  cursor:pointer;
}
.btn-alumni:hover {
  border-color: var(--c-primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  color:var(--c-primary) !important;
}

/* ── Hero Visual — Employment Dashboard ────────────── */
.visual-mockup {
  position:relative; height:460px;
  display:flex; align-items:center; justify-content:center;
}

/* Dashboard card container */
.emp-dashboard {
  width:380px;
  background:var(--c-surface);
  border-radius:var(--r-xl);
  box-shadow: 0 24px 64px rgba(26,86,83,.18), 0 4px 16px rgba(0,0,0,.06);
  overflow:hidden;
  border:1px solid var(--c-border);
  animation: floatY 6s ease-in-out infinite alternate;
}

/* Dashboard top bar */
.emp-db-header {
  background:linear-gradient(135deg, var(--c-primary), #0f3a37);
  padding:20px 24px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.emp-db-dots { display:flex; gap:6px; }
.emp-db-dot {
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.3);
}
.emp-db-title { color:#fff; font-size:.85rem; font-weight:700; letter-spacing:.03em; }

/* Stats row */
.emp-db-stats {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--c-border);
  border-bottom:1px solid var(--c-border);
}
.emp-stat {
  background:var(--c-surface); padding:16px 12px; text-align:center;
}
.emp-stat-num {
  font-size:1.5rem; font-weight:800; color:var(--c-primary);
  line-height:1; margin-bottom:4px;
}
.emp-stat-lbl { font-size:.72rem; color:var(--c-muted); font-weight:600; }

/* Job list inside dashboard */
.emp-db-body { padding:16px; }
.emp-db-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  border-radius:var(--r-sm);
  border:1px solid var(--c-border);
  margin-bottom:10px;
  transition:all .3s var(--ease);
  background:var(--c-bg);
}
.emp-db-row:last-child { margin-bottom:0; }
.emp-db-row:hover { border-color:var(--c-primary); background:rgba(26,86,83,.04); transform:translateX(-4px); }
.emp-icon {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; color:#fff;
}
.emp-icon.c1 { background:linear-gradient(135deg,#1a5653,#2d8a7e); }
.emp-icon.c2 { background:linear-gradient(135deg,#10b981,#059669); }
.emp-icon.c3 { background:linear-gradient(135deg,#3b82f6,#1d4ed8); }
.emp-info { flex:1; min-width:0; }
.emp-job-title { font-size:.82rem; font-weight:800; color:var(--c-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.emp-company { font-size:.72rem; color:var(--c-muted); font-weight:600; }
.emp-badge {
  font-size:.68rem; font-weight:700; padding:3px 8px;
  border-radius:100px; white-space:nowrap; flex-shrink:0;
}
.emp-badge.new { background:rgba(16,185,129,.12); color:#059669; }
.emp-badge.hot { background:rgba(239,68,68,.12); color:#dc2626; }
.emp-badge.open { background:rgba(59,130,246,.12); color:#1d4ed8; }

/* Floating stat chips around the dashboard */
.emp-chip {
  position:absolute;
  background:var(--c-surface);
  border-radius:var(--r-md);
  box-shadow: var(--shadow-md);
  padding:12px 16px;
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--c-border);
  white-space:nowrap;
}
.emp-chip-icon {
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.emp-chip-icon.teal { background:rgba(26,86,83,.1); color:var(--c-primary); }
.emp-chip-icon.green { background:rgba(16,185,129,.1); color:var(--c-accent); }
.emp-chip-text { line-height:1.2; }
.emp-chip-num { font-size:1.1rem; font-weight:800; color:var(--c-text); }
.emp-chip-sub { font-size:.72rem; color:var(--c-muted); font-weight:600; }

.emp-chip-1 {
  top:2%; right:-8%;
  animation: floatY 5s ease-in-out infinite alternate;
}
.emp-chip-2 {
  bottom:8%; left:-10%;
  animation: floatY 7s ease-in-out infinite alternate-reverse;
}

/* Legacy classes kept for compatibility */
.mockup-header { display:none; }
.mockup-main, .mockup-body, .mockup-item, .mockup-floating-1, .mockup-floating-2 { display:none; }

@keyframes floatY { from{transform:translateY(0)} to{transform:translateY(-18px)} }
@keyframes rotateRing { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* ── Section Commons ───────────────────────────────── */
.section-label {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.88rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--c-accent);
  background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.2);
  border-radius:100px; padding:5px 16px; margin-bottom:16px;
}
.section-heading {
  font-size:clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight:800; color:var(--c-text); margin-bottom:1rem;
}
.section-sub {
  font-size:1.05rem; color:var(--c-muted); line-height:1.75;
  max-width:600px; margin-inline:auto;
}
.section-divider {
  width:56px; height:4px;
  background:linear-gradient(90deg, var(--c-primary), var(--c-accent));
  border-radius:4px; margin:20px 0;
}
.section-divider.center { margin-inline:auto; }

/* ── JOBS SECTION ──────────────────────────────────── */
.jobs-container {
  padding:96px 0;
  background: var(--c-bg);
}

.job-card {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  padding:28px;
  height:100%;
  display:flex; flex-direction:column;
  transition:all .35s var(--ease);
  position:relative; overflow:hidden;
}
.job-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--c-primary), var(--c-accent));
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.job-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:transparent; }
.job-card:hover::before { transform:scaleX(1); }

.company-logo {
  width:56px; height:56px;
  border-radius:var(--r-sm); object-fit:contain;
  border:1px solid var(--c-border); padding:6px;
  background:var(--c-surface); flex-shrink:0;
}
.company-logo-placeholder {
  width:56px; height:56px;
  border-radius:var(--r-sm);
  background:rgba(26,86,83,.07);
  color:var(--c-primary);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; flex-shrink:0;
}

.job-title {
  font-size:1.15rem; font-weight:800; color:var(--c-text);
  display:block; margin-bottom:4px;
  transition:color .2s;
}
.job-title:hover { color:var(--c-primary); }
.company-name { font-size:.9rem; color:var(--c-muted); font-weight:600; }

.job-meta { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.job-meta span {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--c-bg); color:var(--c-muted);
  border:1px solid var(--c-border);
  border-radius:8px; padding:5px 12px;
  font-size:.83rem; font-weight:600;
}
.job-meta span i { color:var(--c-primary); }

.dep-tag {
  display:inline-block;
  background:rgba(26,86,83,.07); color:var(--c-primary);
  border:1px solid rgba(26,86,83,.15);
  border-radius:6px; padding:3px 10px;
  font-size:.78rem; font-weight:700;
  margin-inline-end:6px; margin-bottom:6px;
}
.departments-tags { margin-bottom:16px; }

.job-desc {
  color:var(--c-muted); font-size:.95rem; line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; flex-grow:1; margin-bottom:1.5rem;
}

.job-footer { border-top:1px solid var(--c-border); padding-top:16px; margin-top:auto; }

.btn-apply {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px;
  background:rgba(26,86,83,.07); color:var(--c-primary) !important;
  border:1px solid rgba(26,86,83,.2);
  border-radius:var(--r-sm); font-weight:700; font-size:.95rem;
  transition:all .3s var(--ease);
}
.btn-apply:hover {
  background:var(--c-primary); color:#fff !important;
  border-color:var(--c-primary);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(26,86,83,.25);
}

.btn-view-all {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; border-radius:var(--r-md);
  background:var(--c-surface); color:var(--c-primary) !important;
  border:2px solid var(--c-border); font-weight:700; font-size:.95rem;
  transition:all .3s var(--ease);
}
.btn-view-all:hover { border-color:var(--c-primary); box-shadow:var(--shadow-sm); transform:translateY(-2px); }

/* ── COURSES SECTION ───────────────────────────────── */
.courses-section {
  padding:96px 0;
  background:linear-gradient(160deg, var(--c-primary) 0%, #0b2e2c 100%);
  position:relative; overflow:hidden;
}
.courses-section::before {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 80% at 90% 20%, rgba(16,185,129,.15) 0%, transparent 60%);
  pointer-events:none;
}

.course-card {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:all .35s var(--ease);
  backdrop-filter:blur(8px);
  height:100%;
  display:flex; flex-direction:column;
}
.course-card:hover { transform:translateY(-10px); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); box-shadow:0 20px 40px rgba(0,0,0,.2); }

.course-img {
  width:100%; height:190px; object-fit:cover;
  transition:transform .4s var(--ease);
}
.course-card:hover .course-img { transform:scale(1.04); }
.course-img-placeholder {
  width:100%; height:190px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.4); font-size:3rem;
}

.course-type {
  position:absolute; top:16px; right:16px;
  background:var(--c-accent); color:#fff;
  border-radius:100px; padding:4px 14px;
  font-size:.78rem; font-weight:700;
}

.course-body { padding:24px; flex:1; display:flex; flex-direction:column; position:relative; }
.course-title { font-size:1.1rem; font-weight:800; color:#fff; margin-bottom:16px; line-height:1.4; }
.course-meta { list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:8px; }
.course-meta li { display:flex; align-items:center; gap:8px; font-size:.88rem; color:rgba(255,255,255,.7); }
.course-meta li i { color:var(--c-accent); width:16px; }

.btn-register {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px;
  background:rgba(255,255,255,.15); color:#fff !important;
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--r-sm); font-weight:700;
  transition:all .3s var(--ease); margin-top:auto;
}
.btn-register:hover { background:var(--c-accent); border-color:var(--c-accent); transform:translateY(-2px); color:#fff !important; }

/* ── COMPANIES SECTION ─────────────────────────────── */
.companies-section {
  padding: 100px 0;
  background: linear-gradient(180deg, rgba(26, 86, 83, 0.04) 0%, #ffffff 100%);
  border-top: 1px solid rgba(26, 86, 83, 0.08);
  position: relative;
}
.companies-section::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 150px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  border-radius: 0 0 4px 4px;
}

.company-partner-card {
  background:var(--c-bg);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  padding:32px 24px;
  text-align:center;
  transition:all .35s var(--ease);
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.company-partner-card:hover { background:var(--c-surface); border-color:var(--c-primary); transform:translateY(-8px); box-shadow:var(--shadow-md); }

.partner-logo {
  width:80px; height:80px; object-fit:contain;
  transition:transform .3s var(--ease);
}
.company-partner-card:hover .partner-logo { transform:scale(1.1); }
.partner-name { font-size:1rem; font-weight:700; color:var(--c-text); margin:0; }

/* ── FILTER SECTION ────────────────────────────────── */
.filter-section { margin-top:-52px; position:relative; z-index:10; }

.filter-card {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  padding:28px;
  box-shadow:var(--shadow-md);
}

.filter-select {
  height:52px; border-radius:var(--r-sm);
  border:1.5px solid var(--c-border);
  background:var(--c-bg); font-size:.98rem;
  transition:border-color .2s, box-shadow .2s;
}
.filter-select:focus {
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(26,86,83,.12);
  outline:none;
}

/* ── DETAILS PAGE ──────────────────────────────────── */
.details-hero {
  background:var(--c-surface);
  padding:60px 0;
  border-bottom:1px solid var(--c-border);
}

.company-logo-large {
  width:96px; height:96px;
  border-radius:var(--r-md); object-fit:contain;
  border:1px solid var(--c-border); padding:10px;
  background:var(--c-surface); box-shadow:var(--shadow-xs);
}
.job-title-large { font-size:2.2rem; font-weight:800; color:var(--c-text); margin-bottom:.5rem; }
.company-title-large { font-size:1.1rem; color:var(--c-muted); font-weight:600; display:flex; align-items:center; gap:8px; }

.btn-back {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:var(--r-sm);
  background:var(--c-bg); color:var(--c-primary) !important;
  border:1.5px solid var(--c-border); font-weight:700;
  transition:all .3s var(--ease);
}
.btn-back:hover { border-color:var(--c-primary); box-shadow:var(--shadow-xs); }

.glass-card-details {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  padding:36px; margin-bottom:24px;
  box-shadow:var(--shadow-xs);
}
.glass-card-details .section-title {
  font-size:1.3rem; font-weight:800; color:var(--c-text);
  margin-bottom:1.25rem;
  display:flex; align-items:center; gap:12px;
}
.glass-card-details .section-title i { color:var(--c-primary); }
.content-text { color:var(--c-muted); font-size:1.03rem; line-height:1.8; }

.dep-tag-large {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:var(--r-sm);
  background:rgba(26,86,83,.07); color:var(--c-primary);
  border:1px solid rgba(26,86,83,.15); font-weight:600; font-size:.95rem;
}
.dep-tag-large i { color:var(--c-accent); }

.info-list { list-style:none; padding:0; margin:0; }
.info-list li { display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--c-border); }
.info-list li:last-child { border-bottom:none; }
.info-icon {
  width:44px; height:44px; border-radius:50%;
  background:rgba(26,86,83,.08); color:var(--c-primary);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.info-content { display:flex; flex-direction:column; }
.info-content .lbl { font-size:.82rem; color:var(--c-muted); margin-bottom:3px; }
.info-content .val { font-size:1rem; font-weight:700; color:var(--c-text); }

.apply-box {
  background:linear-gradient(145deg, var(--c-primary), var(--c-primary-d));
  border-radius:var(--r-lg); padding:36px;
  color:#fff; text-align:center;
  box-shadow:0 16px 40px rgba(26,86,83,.25);
  position:sticky; top:24px;
}
.apply-box h3 { font-size:1.5rem; font-weight:800; margin-bottom:1rem; }
.apply-box p { color:rgba(255,255,255,.75); line-height:1.6; margin-bottom:1.5rem; font-size:.98rem; }

.btn-apply-main {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:15px;
  background:#fff; color:var(--c-primary) !important;
  border-radius:var(--r-sm); font-weight:700; font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  transition:all .3s var(--ease); margin-bottom:12px; border:none;
}
.btn-apply-main:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.2); color:var(--c-primary-d) !important; }

.btn-apply-secondary {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px;
  background:rgba(255,255,255,.12); color:#fff !important;
  border:1px solid rgba(255,255,255,.25); border-radius:var(--r-sm);
  font-weight:700; font-size:.98rem; transition:all .3s var(--ease);
}
.btn-apply-secondary:hover { background:rgba(255,255,255,.22); color:#fff !important; }

/* ── COMPANIES PAGE ────────────────────────────────── */
.companies-hero {
  background:var(--c-surface); padding:80px 0 40px;
  text-align:center; border-bottom:1px solid var(--c-border);
}
.companies-hero-title { font-size:2.6rem; font-weight:800; color:var(--c-text); }

.search-box {
  max-width:580px; margin:0 auto 52px;
  display:flex; align-items:center;
  background:var(--c-surface);
  border:1.5px solid var(--c-border);
  border-radius:var(--r-lg); padding:6px 6px 6px 22px;
  box-shadow:var(--shadow-sm);
  transition:border-color .2s, box-shadow .2s;
}
.search-box:focus-within { border-color:var(--c-primary); box-shadow:0 0 0 4px rgba(26,86,83,.1); }
.search-box i { color:var(--c-muted); font-size:1.1rem; margin-inline-end:12px; }
.search-box input { flex:1; border:none; outline:none; font-size:1rem; background:transparent; color:var(--c-text); padding:8px 0; }
.search-box input::placeholder { color:var(--c-muted); }

/* ── Empty States ──────────────────────────────────── */
.empty-state {
  text-align:center; padding:72px 24px;
  background:var(--c-surface); border-radius:var(--r-lg);
  border:1px dashed var(--c-border);
}
.empty-state i { font-size:4rem; color:var(--c-border); margin-bottom:24px; display:block; }
.empty-state h3 { font-size:1.5rem; font-weight:800; color:var(--c-text); margin-bottom:10px; }
.empty-state p { color:var(--c-muted); font-size:1rem; }
.empty-state.on-dark {
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.15);
}
.empty-state.on-dark i, .empty-state.on-dark h3, .empty-state.on-dark p { color:rgba(255,255,255,.6); }

/* ── Deadline badge ────────────────────────────────── */
.badge-deadline {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(239,68,68,.08); color:var(--c-danger);
  border:1px solid rgba(239,68,68,.2);
  border-radius:6px; padding:4px 10px;
  font-size:.8rem; font-weight:700;
}

/* ── Utility ───────────────────────────────────────── */
.max-w-600 { max-width:600px; }
.fw-800 { font-weight:800 !important; }
.text-primary-c { color:var(--c-primary) !important; }
.text-accent { color:var(--c-accent) !important; }
.bg-primary-c { background:var(--c-primary) !important; }

/* ── Responsive ────────────────────────────────────── */
@media (max-width:991px) {
  .portal-hero { padding:72px 0 60px; }
  .visual-mockup { height:300px; margin-top:40px; }
  .mockup-main { width:260px; height:260px; }
  .filter-section { margin-top:0; }
  .apply-box { position:static; }
}
@media (max-width:575px) {
  .portal-title { font-size:2rem; }
  .section-heading { font-size:1.7rem; }
  .glass-card-details { padding:24px; }
  .apply-box { padding:28px 20px; }
}