/* =====================================================================
   Hi Learner — Application Stylesheet
   MatDash-inspired layout · PRD color palette · Poppins typography
   Built on top of Bootstrap 5
   ===================================================================== */

:root {
  /* PRD 9. UI/UX Guideline — Color Palette */
  --hl-primary:        #2563EB;
  --hl-primary-dark:   #1d4ed8;
  --hl-primary-subtle: #e8effd;
  --hl-secondary:      #0F172A;
  --hl-success:        #16A34A;
  --hl-success-subtle: #e3f5ea;
  --hl-warning:        #F59E0B;
  --hl-warning-subtle: #fdf2dc;
  --hl-danger:         #DC2626;
  --hl-danger-subtle:  #fbe6e6;
  --hl-info:           #0ea5e9;
  --hl-info-subtle:    #e1f4fc;
  --hl-bg:             #F8FAFC;
  --hl-card:           #ffffff;
  --hl-border:         #eaeef4;
  --hl-text:           #2a3547;
  --hl-muted:          #5a6a85;

  --hl-sidebar-w:      260px;
  --hl-radius:         14px;
  --hl-radius-sm:      10px;
  --hl-shadow:         0 6px 24px rgba(15, 23, 42, .06);
  --hl-shadow-sm:      0 2px 8px rgba(15, 23, 42, .05);

  /* Bootstrap overrides */
  --bs-primary:        #2563EB;
  --bs-primary-rgb:    37, 99, 235;
  --bs-body-bg:        #F8FAFC;
  --bs-body-color:     #2a3547;
  --bs-body-font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  --bs-border-color:   #eaeef4;
}

* { -webkit-font-smoothing: antialiased; }

body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  background-color: var(--hl-bg);
  color: var(--hl-text);
  font-size: .875rem;
  font-weight: 400;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-weight: 600; color: var(--hl-secondary); }
a { text-decoration: none; }

/* ---- Bootstrap color helpers using PRD palette ---- */
.btn-primary {
  --bs-btn-bg: var(--hl-primary); --bs-btn-border-color: var(--hl-primary);
  --bs-btn-hover-bg: var(--hl-primary-dark); --bs-btn-hover-border-color: var(--hl-primary-dark);
  --bs-btn-active-bg: var(--hl-primary-dark); --bs-btn-focus-shadow-rgb: 37,99,235;
}
.btn-outline-primary {
  --bs-btn-color: var(--hl-primary); --bs-btn-border-color: var(--hl-primary);
  --bs-btn-hover-bg: var(--hl-primary); --bs-btn-hover-border-color: var(--hl-primary);
}
.text-primary { color: var(--hl-primary) !important; }
.bg-primary   { background-color: var(--hl-primary) !important; }
.text-success { color: var(--hl-success) !important; }
.text-warning { color: var(--hl-warning) !important; }
.text-danger  { color: var(--hl-danger) !important; }
.text-info    { color: var(--hl-info) !important; }
.text-muted   { color: var(--hl-muted) !important; }

.bg-primary-subtle   { background-color: var(--hl-primary-subtle) !important; }
.bg-success-subtle   { background-color: var(--hl-success-subtle) !important; }
.bg-warning-subtle   { background-color: var(--hl-warning-subtle) !important; }
.bg-danger-subtle    { background-color: var(--hl-danger-subtle) !important; }
.bg-info-subtle      { background-color: var(--hl-info-subtle) !important; }
.bg-secondary-subtle { background-color: #eef1f6 !important; }
.bg-dark-subtle      { background-color: #e9edf2 !important; }
.text-secondary      { color: var(--hl-muted) !important; }
.text-dark           { color: var(--hl-secondary) !important; }

/* =====================================================================
   Layout shell
   ===================================================================== */
#main-wrapper { display: flex; min-height: 100vh; }

.left-sidebar {
  width: var(--hl-sidebar-w);
  background: var(--hl-card);
  border-right: 1px solid var(--hl-border);
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 1030;
  display: flex; flex-direction: column;
  transition: transform .25s ease;
}
.page-wrapper {
  flex: 1;
  margin-left: var(--hl-sidebar-w);
  display: flex; flex-direction: column;
  min-width: 0;
  transition: margin .25s ease;
}

/* ---- Brand ---- */
.brand-logo {
  height: 70px; display: flex; align-items: center; gap: .65rem;
  padding: 0 1.5rem; border-bottom: 1px solid var(--hl-border);
}
.brand-logo .brand-mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, var(--hl-primary), #4f86f7);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.1rem; flex-shrink:0;
  box-shadow: 0 4px 12px rgba(37,99,235,.35);
}
.brand-logo .brand-text { font-weight: 700; font-size: 1.15rem; color: var(--hl-secondary); line-height:1; }
.brand-logo .brand-text small { display:block; font-weight:500; font-size:.62rem; letter-spacing:.06em; color: var(--hl-muted); text-transform: uppercase; margin-top:3px;}

.brand-img { height: 36px; width: auto; display: block; }
.auth-card .brand-logo { margin-bottom: 1.6rem; }
.auth-card .brand-img { height: 46px; margin: 0 auto; }

/* ---- Sidebar nav ---- */
.sidebar-nav { padding: 1rem .85rem; overflow-y: auto; flex: 1; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: #dce1ea; border-radius: 6px; }
.nav-caption {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--hl-muted); padding: 1rem .85rem .4rem;
}
.sidebar-nav .nav-link {
  display: flex; align-items: center; gap: .8rem;
  padding: .62rem .85rem; border-radius: var(--hl-radius-sm);
  color: var(--hl-text); font-weight: 500; font-size: .85rem;
  margin-bottom: 2px; transition: all .15s ease;
}
.sidebar-nav .nav-link iconify-icon,
.sidebar-nav .nav-link .ti { font-size: 1.2rem; flex-shrink: 0; color: var(--hl-muted); }
.sidebar-nav .nav-link:hover { background: var(--hl-bg); color: var(--hl-primary); }
.sidebar-nav .nav-link:hover iconify-icon,
.sidebar-nav .nav-link:hover .ti { color: var(--hl-primary); }
.sidebar-nav .nav-link.selected {
  background: var(--hl-primary); color: #fff;
  box-shadow: 0 6px 16px rgba(37,99,235,.32);
}
.sidebar-nav .nav-link.selected iconify-icon,
.sidebar-nav .nav-link.selected .ti { color: #fff; }
.sidebar-nav .nav-link .badge { margin-left: auto; }

/* ---- Sidebar profile footer ---- */
.sidebar-user {
  border-top: 1px solid var(--hl-border); padding: .9rem 1.1rem;
  display: flex; align-items: center; gap: .7rem;
}

/* =====================================================================
   Topbar
   ===================================================================== */
.topbar {
  height: 70px; background: var(--hl-card);
  border-bottom: 1px solid var(--hl-border);
  position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center;
  padding: 0 1.5rem; gap: 1rem;
}
.topbar .nav-icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--hl-muted); border: none; background: transparent;
  transition: background .15s ease;
}
.topbar .nav-icon-btn:hover { background: var(--hl-bg); color: var(--hl-primary); }
.topbar .nav-icon-btn iconify-icon { font-size: 1.35rem; }

.avatar-circle {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--hl-primary-subtle); color: var(--hl-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .8rem; flex-shrink: 0;
}
.avatar-circle.sm { width: 32px; height: 32px; font-size: .72rem; }
.avatar-circle.lg { width: 56px; height: 56px; font-size: 1.05rem; }

/* =====================================================================
   Content & cards
   ===================================================================== */
.body-wrapper { padding: 1.75rem; flex: 1; }
.page-header { margin-bottom: 1.4rem; }
.page-header h4 { margin: 0; font-size: 1.3rem; }
.breadcrumb { font-size: .8rem; margin: 0; }
.breadcrumb a { color: var(--hl-muted); }

.card {
  background: var(--hl-card);
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius);
  box-shadow: var(--hl-shadow-sm);
  margin-bottom: 1.75rem;
}
.card-body { padding: 1.4rem; }

/* Vertical rhythm: kill Bootstrap's negative gutter pull, then give each
   top-level row its own bottom margin. This is required because cards with
   .h-100 don't let their own margin-bottom create the gap below the row. */
.body-wrapper .row { --bs-gutter-y: 0; margin-top: 0; }
.body-wrapper > .row { margin-bottom: 1.75rem; }
.body-wrapper > .row:last-child { margin-bottom: 0; }
.card-title { font-size: 1.05rem; font-weight: 600; margin-bottom: .25rem; }
.card-subtitle { color: var(--hl-muted); font-size: .82rem; }

/* rounded icon tile (MatDash round-48) */
.round-48 {
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.round-48 iconify-icon { font-size: 1.5rem; }
.round-40 { width: 40px; height: 40px; border-radius: 10px;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }

/* Stat widget card */
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; color: var(--hl-secondary); line-height: 1.1; }
.stat-card .stat-label { color: var(--hl-muted); font-size: .82rem; font-weight: 500; }

/* Welcome / hero card */
.welcome-card {
  background: linear-gradient(135deg, var(--hl-primary), #4f86f7);
  color: #fff; border: none; border-radius: var(--hl-radius);
}
.welcome-card .card-body { padding: 1.6rem; }

/* =====================================================================
   Tables
   ===================================================================== */
.table { --bs-table-color: var(--hl-text); margin: 0; }
.table thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--hl-muted); font-weight: 600; border-bottom: 1px solid var(--hl-border);
  padding: .85rem 1rem; background: #fbfcfe;
}
.table tbody td { padding: .85rem 1rem; vertical-align: middle; border-color: var(--hl-border); }
.table tbody tr:hover { background: #fafbfe; }
/* Table sits edge-to-edge as a direct child of .card; the header card-body
   keeps its normal padding so its text aligns with the first column's inset. */
.table-card .table thead th:first-child,
.table-card .table tbody td:first-child { padding-left: 1.4rem; }
.table-card .table thead th:last-child,
.table-card .table tbody td:last-child { padding-right: 1.4rem; }

/* =====================================================================
   Badges
   ===================================================================== */
.badge {
  font-weight: 500; font-size: .72rem; padding: .4em .7em;
  border-radius: 7px; letter-spacing: .01em;
}
.badge.rounded-pill { border-radius: 30px; }

/* =====================================================================
   Forms
   ===================================================================== */
.form-label { font-weight: 500; font-size: .82rem; color: var(--hl-secondary); margin-bottom: .4rem; }
.form-control, .form-select {
  border: 1px solid #e3e8f0; border-radius: var(--hl-radius-sm);
  padding: .58rem .85rem; font-size: .85rem; color: var(--hl-text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--hl-primary);
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.12);
}
.input-group-text { background: var(--hl-bg); border: 1px solid #e3e8f0; color: var(--hl-muted); }
.form-text { font-size: .76rem; }

/* =====================================================================
   Auth pages
   ===================================================================== */
.auth-wrapper {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: radial-gradient(circle at 15% 20%, #eaf0fe 0, transparent 45%),
              radial-gradient(circle at 85% 80%, #e6f6ef 0, transparent 45%),
              var(--hl-bg);
}
.auth-card {
  width: 100%; max-width: 420px; background: #fff;
  border-radius: 18px; box-shadow: var(--hl-shadow); border: 1px solid var(--hl-border);
  padding: 2.2rem;
}
.auth-card .brand-logo { border: none; height: auto; padding: 0; margin-bottom: 1.6rem; justify-content:center; }
.auth-demo {
  background: var(--hl-bg); border: 1px dashed #d6deea; border-radius: var(--hl-radius-sm);
  padding: .85rem 1rem; font-size: .76rem; color: var(--hl-muted); margin-top: 1.3rem;
}
.auth-demo code { color: var(--hl-primary); font-weight: 600; }

/* =====================================================================
   Ticket discussion thread
   ===================================================================== */
.thread-item { display: flex; gap: .9rem; margin-bottom: 1.1rem; }
.thread-bubble {
  background: var(--hl-bg); border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-sm); padding: .85rem 1rem; flex: 1;
}
.thread-bubble.staff { background: var(--hl-primary-subtle); border-color: #d4e1fc; }
.thread-bubble.internal { background: var(--hl-warning-subtle); border-color: #f3e2bf; }
.thread-meta { font-size: .76rem; color: var(--hl-muted); }
.timeline-pill {
  display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem;
  padding:.25rem .6rem; border-radius:30px; background: var(--hl-bg); color: var(--hl-muted);
}

/* status workflow rail */
.workflow-rail { display:flex; flex-wrap:wrap; gap:.4rem; }
.workflow-step {
  font-size:.72rem; padding:.35rem .7rem; border-radius:30px;
  background: var(--hl-bg); color: var(--hl-muted); border:1px solid var(--hl-border);
}
.workflow-step.active { background: var(--hl-primary); color:#fff; border-color: var(--hl-primary); }
.workflow-step.done { background: var(--hl-success-subtle); color: var(--hl-success); border-color:#cdedd8; }

/* attachment chip */
.attach-chip {
  display:flex; align-items:center; gap:.6rem; padding:.55rem .75rem;
  border:1px solid var(--hl-border); border-radius: var(--hl-radius-sm);
  background:#fff; font-size:.8rem; margin-bottom:.5rem;
}

/* rating stars */
.rating-input { direction: rtl; display: inline-flex; gap: .15rem; }
.rating-input input { display: none; }
.rating-input label { font-size: 1.5rem; color: #d6deea; cursor: pointer; }
.rating-input input:checked ~ label,
.rating-input label:hover, .rating-input label:hover ~ label { color: var(--hl-warning); }

/* =====================================================================
   Misc
   ===================================================================== */
.empty-state { text-align:center; padding: 3rem 1rem; color: var(--hl-muted); }
.empty-state iconify-icon { font-size: 3rem; color: #c4cedd; }
.sidebar-backdrop { display:none; }
.sidebar-toggle { display: none; }

/* Responsive (PRD 9: Desktop / Tablet / Mobile) */
@media (max-width: 991.98px) {
  .left-sidebar { transform: translateX(-100%); box-shadow: var(--hl-shadow); }
  body.sidebar-open .left-sidebar { transform: translateX(0); }
  .page-wrapper { margin-left: 0; }
  .sidebar-toggle { display: inline-flex; }
  body.sidebar-open .sidebar-backdrop {
    display:block; position: fixed; inset:0; background: rgba(15,23,42,.4); z-index: 1029;
  }
  .body-wrapper { padding: 1.1rem; }
}

@media print {
  .left-sidebar, .topbar, .no-print { display: none !important; }
  .page-wrapper { margin: 0; }
  .body-wrapper { padding: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}