:root {
  --orange-primary: #ff6200;
  --orange-dark: #e55100;
  --orange-darker: #cc4400;
  --orange-light: #ff8c33;
  --orange-pale: #fff4e5;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #eeeeee;
  --gray-300: #e0e0e0;
  --gray-500: #9e9e9e;
  --gray-700: #616161;
  --gray-900: #212121;
  --text-primary: #212121;
  --text-secondary: #616161;
  --text-on-primary: #ffffff;
  --bg-body: #ffffff;
  --bg-surface: #fafafa;
  --bg-card: #ffffff;
  --border-color: #e0e0e0;
  --success: #4caf50;
  --warning: #ff9800;
  --error: #f44336;
  --info: #2196f3;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.12);

  /* GLOBAL ORANGE GRADIENT OVERLAY — SAME ON EVERY PAGE */
  --hero-overlay: linear-gradient(rgba(255, 98, 0, 0.68), rgba(240, 161, 119, 0.72));
}

.dark {
  --bg-body: #121212;
  --bg-surface: #1e1e1e;
  --bg-card: #252525;
  --text-primary: #ffffff;
  --text-secondary: #aaaaaa;
  --border-color: #333333;
}

body {
  margin: 0;
  font-family: 'Poppins';
  background-color: var(--bg-body);
  color: var(--text-primary);
  line-height: 1.5;
}

/* ========== LINKS ========== */
a { color: var(--orange-primary); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--orange-dark); text-decoration: none; }
.navbar a:hover, .nav-link:hover, .nav-item:hover .nav-link,
.breadcrumb-item a:hover, header a:hover, footer a:hover { text-decoration: none !important; color: inherit !important; }

.breadcrumb-item a { color: #ffe0c2 !important; }
.breadcrumb-item a:hover { color: #ffffff !important; }
.breadcrumb-item.active { color: #ffffff; font-weight: 600; }

/* ========== BUTTONS ========== */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 6px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s ease; border: none; text-decoration: none !important; }
.btn-primary { background-color: var(--orange-primary); color: var(--text-on-primary); }
.btn-primary:hover { background-color: var(--orange-dark); transform: translateY(-1px); color: white; }
.btn-primary:active { background-color: var(--orange-darker); transform: translateY(0); }
.btn-outline { background: transparent; border: 2px solid var(--orange-primary); color: var(--orange-primary); }
.btn-outline:hover { background-color: var(--orange-primary); color: var(--text-on-primary); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }

/* ========== CARDS & FORMS ========== */
.card { background: var(--bg-card); border-radius: 8px; box-shadow: var(--shadow-md); padding: 20px; border: 1px solid var(--border-color); transition: transform 0.2s, box-shadow 0.2s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.input, .select, .textarea { padding: 10px 14px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 14px; width: 100%; transition: border 0.2s; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--orange-primary); box-shadow: 0 0 0 3px rgba(255, 98, 0, 0.15); }

/* ========== TABLE ========== */
.table { width: 100%; border-collapse: collapse; background: var(--bg-card); }
.table th { background: var(--orange-primary); color: #fff; padding: 12px 16px; text-align: left; font-weight: 600; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border-color); }
.table tr:hover { background-color: var(--orange-pale); }

/* ========== SIDEBAR & TOPBAR ========== */
.sidebar { background: #1a1a1a; color: #fff; width: 260px; height: 100vh; padding: 20px 0; }
.sidebar .logo { color: var(--orange-primary); font-size: 24px; font-weight: bold; padding: 0 20px 30px; }
.sidebar a { display: block; padding: 12px 20px; color: #ccc; transition: background 0.2s; }
.sidebar a:hover, .sidebar a.active { background: var(--orange-primary); color: #fff; }

.topbar { background: #fff; border-bottom: 1px solid var(--border-color); padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-sm); }
.topbar .brand { font-size: 20px; font-weight: bold; color: var(--orange-primary); }

/* ========== UTILITIES ========== */
.text-primary { color: var(--orange-primary) !important; }
.bg-primary { background-color: var(--orange-primary) !important; color: #fff; }
.border-primary { border-color: var(--orange-primary) !important; }
.rounded { border-radius: 8px; }
.shadow { box-shadow: var(--shadow-md); }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .sidebar { width: 100%; height: auto; }
}

/* UNIVERSAL HERO SECTION — COVERS EVERY POSSIBLE NAME YOU USE */
.hero-banner,
.page-header,
.inner-banner,
section[class*="hero"],
.hero,
#hero,
.hero-section,
[class*="hero-banner"],
[class*="hero-section"],
[class*="page-header"] {
    background-image: var(--hero-overlay), var(--page-hero-image, transparent) !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    
    min-height: 70vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: white !important;
    border-radius: 0 0 50px 50px !important;
    overflow: hidden !important;
}
/* Hero heading — always beautiful */
.hero-banner h1,
.inner-banner,
.page-header h1,
[class*="hero"] h1,
[class*="Hero"] h1 {
    font-size: 4.5rem !important;
    font-weight: 900 !important;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.7) !important;
}

@media (max-width: 768px) {
    .hero-banner h1,
    .page-header h1,
    [class*="hero"] h1 {
        font-size: 2.9rem !important;
    }
}