:root {

  /* ===============================
     Proghama Brand Core
  =============================== */

  --hs-primary: #DC143C;
  /* Crimson */
  --hs-primary-hover: #B01030;
  /* Darker crimson for hover */
  --hs-primary-light: #FDE8EC;
  /* Soft crimson tint */
  --hs-primary-dark: #8F0C26;
  /* Deep crimson */

  --hs-dark: #00010A;
  /* --hs-dark: #0A1C27; */
  /* Proghama secondary dark */
  --hs-gray-dark: #2E3A45;
  --hs-gray-hover: #3B4750;
  --hs-gray-light: #F5F7FA;
  --hs-border: #E1E6EB;

  --hs-success: #16A34A;
  --hs-warning: #F59E0B;
  --hs-error: #DC2626;
  --hs-info: #0284C7;

  --color-white: #ffffff;

  /* ===============================
     Override Template Brand Tokens
  =============================== */
  --ct-blue: var(--hs-primary);
  /* Primary Crimson */
  --ct-indigo: var(--hs-primary-dark);
  /* Deep Crimson */
  --ct-purple: #5C0A1A;
  /* Dark Crimson variant */
  --ct-pink: #F05272;
  /* Light brand accent */
  --ct-red: var(--hs-primary-hover);
  /* Primary Hover */

  --ct-orange: #F97316;
  /* Keep semantic orange */
  --ct-yellow: var(--hs-warning);
  /* Brand-aligned yellow */

  --ct-green: var(--hs-success) !important;
  /* Success */
  --ct-teal: #0F766E;
  /* Muted professional teal */
  --ct-cyan: #0284C7;
  /* Info tone (balanced) */

  --ct-primary: var(--hs-primary);
  --ct-secondary: var(--hs-gray-dark);
  --ct-success: var(--hs-success) !important;
  --ct-info: var(--hs-info) !important;
  --ct-warning: var(--hs-warning) !important;
  --ct-danger: var(--hs-error) !important;
  /* --ct-light: var(--hs-gray-light); */
  --ct-dark: var(--hs-dark);


  --ct-link-color: var(--hs-primary);
  --ct-link-hover-color: var(--hs-primary-hover);
  --ct-component-active-bg: var(--hs-primary);
  --ct-component-active-color: var(--color-white);

  --ct-input-btn-focus-color: rgba(220, 20, 60, 0.25);

  --ct-progress-bar-bg: var(--hs-primary);

  --ct-menu-item-hover: var(--hs-primary);
  --ct-menu-item-active: var(--hs-primary);

  --ct-accordion-button-active-bg: var(--hs-primary-light);
  --ct-accordion-button-active-color: var(--hs-primary);

  --ct-rightbar-title-bg: var(--hs-primary);
  --ct-rightbar-title-btn-bg: var(--hs-primary-hover);

  --ct-help-box-light-bg: var(--hs-primary-dark);
  --ct-help-box-dark-bg: var(--hs-primary);

  /* Gradients */
  --ct-bg-leftbar-gradient: linear-gradient(135deg,
      var(--hs-primary-dark) 0%,
      var(--hs-dark) 60%) !important;

  --ct-hero-bg: linear-gradient(to bottom,
      var(--hs-primary-dark) 0%,
      var(--hs-primary));
}

body[data-layout-color=dark] {
  --ct-link-color: var(--hs-primary);
  --ct-link-hover-color: var(--hs-primary-hover);
  --ct-component-active-bg: var(--hs-primary);
  --ct-progress-bar-bg: var(--hs-primary);

  --ct-menu-item-hover: var(--hs-primary);
  --ct-menu-item-active: var(--hs-primary);

  --ct-rightbar-title-bg: var(--hs-primary);

  /* Gradients */
  --ct-bg-leftbar-gradient: linear-gradient(135deg,
      var(--hs-primary-dark) 0%,
      var(--hs-dark) 60%) !important;
}

/* Collapsed / icon-only sidebar support */
body[data-sidebar-size=condensed] .side-nav .side-nav-link:hover {
  /* background-color: var(--hs-primary); */
  background-color: rgba(220, 20, 60, 0.18);
}


/* Dark mode alignment (critical) */
body[data-layout-color=dark] .leftside-menu {
  background-color: var(--hs-dark);
}

/* =================================
   HamaSchool – Leftbar & Menu Variables
   ================================= */

/* Dark + Detached layout */
body[data-layout-color=dark][data-layout=detached] {
  --ct-menu-item: #8FAFDB;
  /* default text */
  --ct-menu-item-hover: var(--hs-primary-hover);
  /* hover */
  --ct-menu-item-active: var(--hs-primary);
  /* active */
}

/* Light leftbar */
body[data-leftbar-theme=light] {
  --ct-bg-leftbar: var(--color-white);
  --ct-menu-item: #5f6b7a;
  /* neutral dark text */
  --ct-menu-item-hover: var(--hs-primary-hover);
  --ct-menu-item-active: var(--hs-primary);
}

/* body[data-leftbar-theme=dark] {
  --ct-leftbar-gradient: linear-gradient(180deg,
      var(--hs-primary) 0%,
      var(--hs-primary-hover) 100%);
} */

body[data-leftbar-theme=dark] {
  /* --ct-bg-leftbar: #313a46; */
  --ct-bg-leftbar: var(--hs-dark);
  --ct-dark-menu-item: #8391a2;
  --ct-dark-menu-item-hover: #bccee4;
  --ct-dark-menu-item-active: #fff
}

/* body[data-leftbar-theme=default] {
  --ct-menu-item: #cedce4;
  --ct-menu-item-hover: #fff;
  --ct-menu-item-active: #fff
} */


body {
  --ct-menu-item-hover-bg: rgba(220, 20, 60, 0.15);
  --ct-menu-item-active-bg: rgba(220, 20, 60, 0.12);
}


.badge-primary-lighten {
  color: var(--hs-primary);
  background-color: rgba(220, 20, 60, .18); /* 20% opacity */
}
.badge-success-lighten {
  color: var(--hs-success);
  background-color: rgba(22, 163, 74, .18)
}
.badge-info-lighten {
  color: var(--hs-info);
  background-color: rgba(2, 132, 199, .18)
}
.badge-warning-lighten {
  color: var(--hs-warning);
  background-color: rgba(245, 158, 11, .18)
}
.badge-danger-lighten {
  color: var(--hs-danger);
  background-color: rgba(220, 38, 38, .18)
}


/* Custome HamaSchool.min.css styles */
/* Viewport height utilities */
.vh-25 {
  height: 15vh !important;
}

.vh-30 {
  height: 20vh !important;
}

.vh-40 {
  height: 30vh !important;
}

.vh-50 {
  height: 40vh !important;
}

.vh-60 {
  height: 50vh !important;
}

.vh-70 {
  height: 60vh !important;
}

.vh-75 {
  height: 65vh !important;
}

.vh-80 {
  height: 70vh !important;
}

.min-vh-90 {
  height: 80vh !important;
}

/* Min vh */
.min-vh-25 {
  min-height: 15vh !important;
}

.min-vh-30 {
  min-height: 20vh !important;
}

.min-vh-40 {
  min-height: 30vh !important;
}

.min-vh-50 {
  min-height: 40vh !important;
}

.min-vh-60 {
  min-height: 50vh !important;
}

.min-vh-70 {
  min-height: 60vh !important;
}

.min-vh-75 {
  min-height: 65vh !important;
}

.min-vh-80 {
  min-height: 70vh !important;
}

.min-vh-90 {
  min-height: 80vh !important;
}

/* Border radius system */
.radius-none {
  border-radius: 0;
}

.radius-xs {
  border-radius: 4px;
}

.radius-sm {
  border-radius: 6px;
}

.radius-md {
  border-radius: 10px;
}

.radius-lg {
  border-radius: 14px;
}

.radius-xl {
  border-radius: 20px;
}

.radius-pill {
  border-radius: 999px;
}

.radius-round {
  border-radius: 50%;
}

@media (min-width:576px) {

  /* Viewport height utilities */
  .vh-md-25 {
    height: 25vh !important;
  }

  .vh-md-30 {
    height: 30vh !important;
  }

  .vh-md-40 {
    height: 40vh !important;
  }

  .vh-md-50 {
    height: 50vh !important;
  }

  .vh-md-60 {
    height: 60vh !important;
  }

  .vh-md-70 {
    height: 70vh !important;
  }

  .vh-md-75 {
    height: 75vh !important;
  }

  .vh-md-80 {
    height: 80vh !important;
  }

  .min-vh-md-90 {
    height: 90vh !important;
  }

  /* Min vh */
  .min-vh-md-25 {
    min-height: 25vh !important;
  }

  .min-vh-md-30 {
    min-height: 30vh !important;
  }

  .min-vh-md-40 {
    min-height: 40vh !important;
  }

  .min-vh-md-50 {
    min-height: 50vh !important;
  }

  .min-vh-md-60 {
    min-height: 60vh !important;
  }

  .min-vh-md-70 {
    min-height: 70vh !important;
  }

  .min-vh-md-75 {
    min-height: 75vh !important;
  }

  .min-vh-md-80 {
    min-height: 80vh !important;
  }

  .min-vh-md-90 {
    min-height: 90vh !important;
  }
}

body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item:hover .side-nav-link {
  position: relative;
  width: 260px;
  color: var(--color-white);
  /* background: var(--ct-bg-leftbar-gradient) */
  background: var(--hs-primary)
}
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item:hover .collapse a:hover {
  background-color: rgba(220, 20, 60, 0.18);
}


/* ===============================
   Leftbar – HamaSchool Override
=============================== */
.sidebar {
  background-image: none !important;
}

.leftside-menu {
  background-color: var(--hs-dark);
}

/* If the template uses gradients */
.leftside-menu[data-simplebar] {
  background-image: linear-gradient(180deg,
      #0A1C27 0%,
      #0A1C27 100%);
}

/* Menu items */
.side-nav .side-nav-link {
  color: #A9B4C0;
}

/* Hover */
.side-nav .side-nav-link:hover,
.side-nav .collapse a:hover {
  color: var(--color-white);
  background-color: rgba(220, 20, 60, 0.12);
}

/* Active item */
.side-nav .side-nav-item.mm-active>.side-nav-link,
.side-nav .side-nav-link.active,
.side-nav .collapse a.active {
  color: var(--color-white);
  background-color: rgba(220, 20, 60, 0.3);
}

/* Active indicator (if present) */
.side-nav .side-nav-item.mm-active>.side-nav-link::before {
  background-color: var(--hs-primary);
}

/* Hover */
.leftbar .nav-link:hover,
.sidebar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

.leftbar,
.sidebar {
  background-image: none !important;
  background-color: var(--hs-primary) !important;
}


/* Condensed sidebar container */
.sidebar-condensed .sidebar {
  background-color: var(--hs-primary);
}

/* Hover fly-out menu */
.sidebar-condensed .nav-item:hover>.collapse,
.sidebar-condensed .nav-item:hover>.submenu {
  background-color: var(--hs-primary-hover);
}

/* Hover icon state */
.sidebar-condensed .nav-link:hover i {
  color: var(--color-white);
}

/* Help box */
body[data-leftbar-theme=light] .help-box {
  background-color: var(--ct-help-box-light-bg)
}

body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .logo span.logo-sm {
  display: block;
  line-height: 70px;
  color: var(--hs-primary)
}

body[data-layout-color=dark] .bg-primary {
  background-color: var(--hs-primary) !important
}



/* =========================
    HamaSchool Brand
   ========================= */


/*  */
.btn-primary {
  background-color: var(--hs-primary);
  border-color: var(--hs-primary);
}

.btn-primary:hover {
  background-color: var(--hs-primary-dark);
  border-color: var(--hs-primary-dark);
}

.bg-primary {
  background-color: var(--hs-primary) !important;
}

.text-primary {
  color: var(--hs-primary) !important;
}


/* Alert --------- */
.alert-primary {
  background-color: var(--hs-primary-light);
  color: var(--hs-dark);
  border-color: var(--hs-primary);
}

.alert-success {
  background-color: #ECFDF3;
  color: #065F46;
  border-color: var(--hs-success);
}

.alert-warning {
  background-color: #FFFBEB;
  color: #92400E;
  border-color: var(--hs-warning);
}

.alert-danger {
  background-color: #FEF2F2;
  color: #991B1B;
  border-color: var(--hs-error);
}


/* Badges --------- */
.badge-primary {
  background-color: var(--hs-primary);
}

.badge-success {
  background-color: var(--hs-success);
}

.badge-warning {
  background-color: var(--hs-warning);
  color: #1F2937;
}

.badge-danger {
  background-color: var(--hs-error);
}

.badge-info {
  background-color: var(--hs-info);
}


/* Buttons -------------------- */
/* Primary btn */
.btn-primary {
  background-color: var(--hs-primary);
  border-color: var(--hs-primary);
}

.btn-primary:hover {
  background-color: var(--hs-primary-dark);
}

.btn-outline-primary {
  color: var(--hs-primary);
  border-color: var(--hs-primary);
}

.btn-outline-primary:hover {
  background-color: var(--hs-primary);
  color: var(--color-white);
}

.btn-check:focus+.btn-primary,
.btn-primary:focus {
  background-color: var(--hs-primary);
  border-color: var(--hs-primary-hover)
}

.btn-check:active+.btn-primary,
.btn-check:checked+.btn-primary,
.btn-primary.active,
.btn-primary:active,
.show>.btn-primary.dropdown-toggle {
  background-color: var(--hs-primary);
  border-color: var(--hs-primary-hover)
}

.btn-check:active+.btn-primary:focus,
.btn-check:checked+.btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show>.btn-primary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 .2rem var(--hs-primary-hover);
  box-shadow: 0 0 0 .2rem var(--hs-primary-hover)
}

.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff;
  background-color: var(--hs-primary);
  border-color: var(--hs-primary)
}

/* Secondary btn */
.btn-secondary {
  background-color: var(--hs-gray-dark);
  border-color: var(--hs-gray-dark);
}

.btn-secondary:hover {
  background-color: var(--hs-gray-hover);
}

.btn-outline-secondary {
  color: var(--hs-gray-dark);
  border-color: var(--hs-gray-dark);
}

.btn-outline-secondary:hover {
  background-color: var(--hs-gray-dark);
  color: var(--color-white);
}

.btn-check:focus+.btn-secondary,
.btn-secondary:focus {
  background-color: var(--hs-gray-dark);
  border-color: var(--hs-gray-hover)
}

.btn-check:active+.btn-secondary,
.btn-check:checked+.btn-secondary,
.btn-secondary.active,
.btn-secondary:active,
.show>.btn-secondary.dropdown-toggle {
  background-color: var(--hs-gray-dark);
  border-color: var(--hs-gray-hover)
}

.btn-check:active+.btn-secondary:focus,
.btn-check:checked+.btn-secondary:focus,
.btn-secondary.active:focus,
.btn-secondary:active:focus,
.show>.btn-secondary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 .2rem var(--hs-gray-hover);
  box-shadow: 0 0 0 .2rem var(--hs-gray-hover)
}

.btn-secondary.disabled,
.btn-secondary:disabled {
  color: #fff;
  background-color: var(--hs-gray-dark);
  border-color: var(--hs-gray-dark)
}

/* Card ---------------- */
.card {
  border-color: var(--hs-border);
}

.card-accent {
  border-left: 4px solid var(--hs-primary);
}


/* Form inputs -------------------*/
.form-control:focus {
  border-color: var(--hs-primary);
  box-shadow: 0 0 0 0.2rem rgba(220, 20, 60, 0.15);
}

.form-label {
  color: var(--hs-dark);
}

/* form validation */
.is-valid {
  border-color: var(--hs-success);
}

.is-invalid {
  border-color: var(--hs-error);
}

/* Text and Links ------------------------ */
a {
  color: var(--hs-primary);
}

a:hover {
  color: var(--hs-primary-dark);
}


.input-group .bg-primary {
  background: var(--hs-primary) !important;
}

.horizontal-steps .horizontal-steps-content .step-item.current span {
  color: var(--hs-primary) !important
}

.border-primary {
  border-color: var(--hs-primary) !important;
}

input[data-switch]:checked+label {
  background-color: var(--hs-primary)
}


table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
  background-color: var(--hs-primary) !important;
  -webkit-box-shadow: 0 0 2px 0 var(--hs-primary) !important;
  box-shadow: 0 0 2px 0 var(--hs-primary) !important;
}

tbody>tr th.dtr-control,
tbody>tr>td.dtr-control {
  background-color: revert !important;
  -webkit-box-shadow: 0 0 2px 0 revert !important;
  box-shadow: 0 0 2px 0 revert !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
  background-color: #d33333 !important;
}

.daterangepicker .ranges li.active {
  background-color: var(--hs-primary)
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--hs-primary);
  color: #fff
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background-color: var(--hs-primary);
  color: #fff
}

.datepicker table tr td .active.disabled:hover[disabled],
.datepicker table tr td .active.disabled[disabled],
.datepicker table tr td .active:active,
.datepicker table tr td .active:hover,
.datepicker table tr td .active:hover.active,
.datepicker table tr td .active:hover.disabled,
.datepicker table tr td .active:hover:active,
.datepicker table tr td .active:hover:hover,
.datepicker table tr td .active:hover[disabled],
.datepicker table tr td .active[disabled],
.datepicker table tr td span.active.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active.disabled:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active[disabled],
.datepicker table tr td.active.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.today,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover {
  background-color: var(--hs-primary) !important;
  background-image: none !important;
  color: #fff
}