/* ===========================================================
   MLM HelpDesk theme - matches https://mlmhd.matjhabeng.co.za
   =========================================================== */
:root{
  --brand-green:#1e4d2b;
  --brand-green-dark:#123018;
  --brand-green-light:#2f6e3f;
  --brand-gold:#d4af37;
  --brand-gold-light:#f1d97a;
  --brand-black:#14120f;
  --brand-wood:#6b4226;
  --brand-wood-light:#8a5a34;
  --brand-cream:#faf6ee;

  /* legacy aliases used throughout shared pages/components */
  --bg:var(--brand-cream);
  --surface:#ffffff;
  --muted:#6c757d;
  --accent:var(--brand-gold);
  --accent-2:var(--brand-gold-light);
  --text:var(--brand-black);
  --danger:#b02a37;

  /* Override Bootstrap's theme variables so bg-primary/text-primary/btn-outline-primary
     and *-subtle utility classes use the brand palette instead of Bootstrap's default blue */
  --bs-primary:var(--brand-green);
  --bs-primary-rgb:30,77,43;
  --bs-primary-bg-subtle:rgba(30,77,43,.12);
  --bs-primary-border-subtle:rgba(30,77,43,.35);
  --bs-primary-text-emphasis:var(--brand-green);

  --bs-success:var(--brand-green);
  --bs-success-rgb:30,77,43;

  --bs-warning:var(--brand-gold);
  --bs-warning-rgb:212,175,55;

  --bs-info:var(--brand-wood);
  --bs-info-rgb:107,66,38;

  --bs-danger:var(--danger);
  --bs-danger-rgb:176,42,55;
}

.bg-primary{background-color:var(--brand-green)!important}
.text-primary{color:var(--brand-green)!important}
.border-primary{border-color:var(--brand-green)!important}
.bg-primary-subtle{background-color:rgba(30,77,43,.12)!important}
.text-primary-emphasis{color:var(--brand-green)!important}
.btn-outline-primary{color:var(--brand-green);border-color:var(--brand-green)}
.btn-outline-primary:hover{background-color:var(--brand-green);border-color:var(--brand-green);color:#fff}

.bg-warning-subtle{background-color:rgba(212,175,55,.15)!important}
.text-warning{color:#8a6d1d!important}
.bg-info-subtle{background-color:rgba(107,66,38,.12)!important}
.text-info{color:var(--brand-wood)!important}
.bg-success-subtle{background-color:rgba(30,77,43,.12)!important}
.text-success{color:var(--brand-green)!important}
.bg-danger-subtle{background-color:rgba(176,42,55,.12)!important}
.text-danger{color:var(--danger)!important}

body{background:var(--brand-cream);color:var(--brand-black);font-family:Inter,Segoe UI,Roboto,system-ui;font-weight:300;}
h1,h2,h3,h4,h5,h6{font-weight:500;}
.fw-bold{font-weight:500 !important;}

.page{display:flex;min-height:100vh}

/* ---------- Sidebar / nav (dark green + gold, mirrors .mlm-navbar) ---------- */
.sidebar{
  width:260px;
  background:linear-gradient(180deg,var(--brand-black) 0%,var(--brand-green-dark) 100%);
  border-right:3px solid var(--brand-gold);
  padding:0;
  display:flex;
  flex-direction:column;
}
.nav-link{color:#eee;display:block;padding:.6rem .9rem;border-radius:6px;margin:.15rem .75rem;transition:background .15s ease-in-out,color .15s ease-in-out}
.nav-link .bi{color:var(--brand-gold-light);margin-right:.5rem}
.nav-link.active,.nav-link:hover{background:rgba(212,175,55,.15);color:var(--brand-gold)!important}
.nav-link.active .bi,.nav-link:hover .bi{color:var(--brand-gold)}
.nav-scrollable{padding-top:.5rem;padding-bottom:1rem}
.top-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem}

/* ---------- Top navbar (mlm-navbar) ---------- */
.mlm-navbar{
  background:linear-gradient(90deg,var(--brand-black) 0%,var(--brand-green-dark) 100%);
  border-bottom:3px solid var(--brand-gold);
  padding:.5rem 1rem;
}
.mlm-navbar .container-fluid{padding:0}
.mlm-nav-action{
  color:#eee;
  text-decoration:none;
  font-size:.9rem;
  padding:.35rem .75rem;
  border-radius:6px;
  transition:background .15s ease-in-out,color .15s ease-in-out;
}
.mlm-nav-action:hover{background:rgba(212,175,55,.15);color:var(--brand-gold)}
.mlm-nav-action .bi{color:var(--brand-gold)}

.content{max-width:1100px;margin:0 auto}

/* ---------- Page wrapper (replaces Bootstrap container/container-fluid on pages) ---------- */
.mlm-page-container{width:100%;max-width:none;margin:0;padding-left:10px;padding-right:10px}

/* ---------- Global page padding applied to the layout content wrapper ---------- */
.mlm-page-padding{padding-left:10px!important;padding-right:10px!important}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);
  border:1px solid rgba(107,66,38,.2);
  border-top:4px solid var(--brand-green);
  border-radius:.75rem;
  padding:1rem;
  margin-bottom:1rem;
  box-shadow:0 .5rem 1.5rem rgba(20,18,15,.08);
  color:var(--brand-black);
}
.card h3, .card h4{color:var(--brand-black);font-weight:700}

/* ---------- Buttons ---------- */
.btn-primary{
  background:var(--brand-green);
  border:1px solid var(--brand-green);
  color:#fff;
  padding:.5rem .75rem;
  border-radius:6px;
  transition:background .15s ease-in-out;
}
.btn-primary:hover{background:var(--brand-green-dark);border-color:var(--brand-green-dark)}
.btn-gold{
  background:var(--brand-gold);
  border:1px solid var(--brand-gold);
  color:var(--brand-black);
  padding:.5rem .75rem;
  border-radius:6px;
}
.btn-gold:hover{background:var(--brand-gold-light);border-color:var(--brand-gold-light)}

.ticket-list .list-group{list-style:none;padding:0}
.list-group-item{padding:.75rem;border-bottom:1px solid rgba(107,66,38,.12)}
.muted{color:var(--muted)}
.badge{background:var(--brand-gold);color:var(--brand-black);padding:.25rem .5rem;border-radius:4px}
.header-brand{color:var(--brand-gold-light);font-weight:600}
.small{font-size:.85rem;color:var(--muted)}

a{color:var(--brand-green)}
a:hover{color:var(--brand-gold)}

/* ---------- Logo / brand space in the nav top row ---------- */
.mlm-brand{display:flex;align-items:center}
.mlm-logo-space{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.mlm-logo{height:2rem;width:2rem;padding-right:4px;padding-left:4px;border-radius:6px;background:var(--brand-gold-light);object-fit:fill}

/* ---------- Home hero ---------- */
.mlm-hero{
  background:linear-gradient(135deg, var(--brand-black) 0%, var(--brand-green-dark) 55%, var(--brand-wood) 130%);
  border:1px solid var(--brand-gold);
  color:#fff;
  border-radius:1rem;
  padding:2rem;
}
.mlm-hero .display-5{color:var(--brand-gold-light)}

.mlm-feature-card{
  border:1px solid rgba(107,66,38,.25);
  border-top:4px solid var(--brand-green);
  transition:transform .15s ease, box-shadow .15s ease;
}
.mlm-feature-card:hover{transform:translateY(-4px);box-shadow:0 .75rem 1.5rem rgba(20,18,15,.15)}

/* ---------- Info icon bubble (used on Create Ticket / Profile help cards) ---------- */
.info-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.75rem;
  height:2.75rem;
  min-width:2.75rem;
  border-radius:50%;
  font-size:1.25rem;
}

/* ---------- Profile picture avatar ---------- */
.profile-picture{
  width:4rem;
  height:4rem;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--brand-gold);
}

.mlm-feature-card i{color:var(--brand-green)}
.mlm-feature-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3.25rem;
  height:3.25rem;
  border-radius:50%;
  background:rgba(30,77,43,.1);
  margin:0 auto .75rem;
}
.mlm-feature-icon i{margin:0;color:var(--brand-green)}
.mlm-feature-icon.icon-sm{width:2.5rem;height:2.5rem}

/* ---------- AI chat widget ---------- */
.mlm-chat-widget{border-top-color:var(--brand-green);width:100%;max-width:none}
.mlm-chat-widget h4{color:var(--brand-green);margin-bottom:.5rem}
.chat-msg-user{color:var(--brand-black)}
.chat-msg-bot{color:var(--brand-wood)}

/* ---------- KPI / KPA cards used on Performance and Dashboard pages ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.kpi-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:992px){.kpi-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:576px){.kpi-grid-4{grid-template-columns:1fr}}
.kpi-card{
  background:#fff;
  border:1px solid rgba(107,66,38,.2);
  border-left:4px solid var(--brand-gold);
  border-radius:.75rem;
  padding:1rem;
  box-shadow:0 .35rem 1rem rgba(20,18,15,.06);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
}
.kpi-card .kpi-value{font-size:1.6rem;font-weight:600;color:var(--brand-green)}
.kpi-card .kpi-label{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;font-weight:400}
.kpi-card .kpi-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.75rem;
  height:2.75rem;
  min-width:2.75rem;
  border-radius:50%;
  background:rgba(212,175,55,.15);
  color:var(--brand-gold);
  font-size:1.1rem;
  order:2;
}

/* Dashboard summary stat cards (mirrors .mlm-stat-card on the live site) */
.mlm-stat-card{border:none;color:#fff;border-radius:.75rem;padding:1rem}
.mlm-stat-card.stat-total{background:var(--brand-black)}
.mlm-stat-card.stat-open{background:var(--brand-green)}
.mlm-stat-card.stat-progress{background:var(--brand-wood)}
.mlm-stat-card.stat-resolved{background:var(--brand-gold);color:var(--brand-black)!important}

.role-badge{display:inline-block;padding:.2rem .6rem;border-radius:999px;background:var(--brand-gold);color:var(--brand-black);font-weight:600;font-size:.8rem}

.status-dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;margin-right:.35rem}
.status-new{background:var(--brand-green)}
.status-inprogress{background:var(--brand-wood)}
.status-resolved{background:var(--brand-gold)}
.status-closed{background:#8f8f8f}
.status-escalated{background:var(--danger)}

.profile-picture{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--brand-gold)}

.comparison-table{width:100%;border-collapse:collapse}
.comparison-table th,.comparison-table td{padding:.5rem .75rem;text-align:left;border-bottom:1px solid rgba(107,66,38,.12)}
.comparison-table th{color:var(--brand-green);text-transform:uppercase;font-size:.75rem}

/* ---------- Alert / notice banners ---------- */
.mlm-alert-banner{
  background:#fdf1cf;
  border:1px solid var(--brand-gold);
  border-left:4px solid var(--brand-gold);
  color:var(--brand-black);
  border-radius:.5rem;
  padding:.85rem 1rem;
}
.mlm-notice-banner{
  background:#e7f6fb;
  border:1px solid #b6e3ef;
  border-left:4px solid #17a2b8;
  color:var(--brand-black);
  border-radius:.5rem;
  padding:.85rem 1rem;
}

/* ---------- Footer ---------- */
footer.footer{background-color:var(--brand-black);color:#cfcfcf!important;border-top:3px solid var(--brand-gold)!important}
footer.footer a{color:var(--brand-gold-light)}

/* responsive */
@media(max-width:800px){.sidebar{display:none}.page{flex-direction:column}}