/* ═══════════════════════════════════════════════════════════════════
   JiraniSoko Admin — Custom Theme
   Matches jiranisoko.com design system exactly.
   Fonts: Plus Jakarta Sans (headings) · DM Sans (body)
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ─── Design Tokens (from main.css) ─────────────────────────────── */
:root {
  --orange:        #FF6F0F;
  --orange-hover:  #E55A00;
  --orange-light:  #FF9A52;
  --orange-bg:     #FFF5EE;
  --orange-glow:   rgba(255,111,15,0.15);
  --dark:          #141416;
  --dark-2:        #23262F;
  --gray-900:      #353945;
  --gray-700:      #555;
  --gray-500:      #777E90;
  --gray-300:      #C4C4C4;
  --gray-200:      #E6E8EC;
  --gray-100:      #F4F5F6;
  --gray-50:       #FAFAFB;
  --white:         #FFFFFF;
  --green:         #45B26B;
  --green-bg:      #E8F5E9;
  --red:           #EF466F;
  --red-bg:        #FFEBEE;
  --blue:          #3772FF;
  --yellow:        #FFD166;
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.06);
  --shadow:        0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.10);
  --shadow-orange: 0 4px 20px rgba(255,111,15,0.25);
  --transition:    0.2s cubic-bezier(0.4,0,0.2,1);

  /* Sidebar */
  --sb-bg:         #141416;
  --sb-bg-2:       #1e1e21;
  --sb-text:       #9A9FA5;
  --sb-text-hover: #FFFFFF;
  --sb-header:     #777E90;
  --sb-active-bg:  rgba(255,111,15,0.12);
  --sb-width:      260px;
}

/* ─── Global font override ──────────────────────────────────────── */
body,
.content-wrapper,
.main-sidebar,
.main-header,
.main-footer,
select, input, textarea, button {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.content-header h1,
.brand-text,
.card-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════════════════ */

.main-sidebar {
  background-color: var(--sb-bg) !important;
  width: var(--sb-width) !important;
  box-shadow: 2px 0 20px rgba(0,0,0,0.3) !important;
}

/* Brand / Logo strip */
.brand-link {
  background: linear-gradient(135deg, var(--orange), var(--orange-hover)) !important;
  border-bottom: none !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 64px !important;
}

.brand-link .brand-text {
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}

.brand-link img.brand-image,
.brand-link .brand-image-xs {
  display: none !important;
}

/* Fake logo icon matching site's .logo-icon */
.brand-link::before {
  content: 'J';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: rgba(255,255,255,0.25);
  border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  color: #fff;
  backdrop-filter: blur(4px);
}

.brand-link:hover {
  background: linear-gradient(135deg, var(--orange-hover), #CC4700) !important;
}

/* Sidebar inner scroll area */
.sidebar {
  background-color: var(--sb-bg) !important;
  padding: 8px 0 24px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Section headers */
.nav-sidebar .nav-header {
  color: var(--sb-header) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 20px 20px 6px !important;
  margin: 0 !important;
  opacity: 0.7;
}

/* Nav items */
.nav-sidebar .nav-item {
  padding: 0 10px !important;
  margin-bottom: 2px !important;
}

.nav-sidebar > .nav-item {
  padding: 0 10px !important;
}

.nav-sidebar .nav-link {
  color: var(--sb-text) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: background var(--transition), color var(--transition) !important;
  white-space: nowrap;
  overflow: hidden;
}

.nav-sidebar .nav-link:hover {
  background-color: rgba(255,255,255,0.06) !important;
  color: var(--sb-text-hover) !important;
}

/* Active link */
.nav-sidebar .nav-link.active,
.nav-sidebar .menu-open > .nav-link {
  background-color: var(--sb-active-bg) !important;
  color: var(--orange-light) !important;
  font-weight: 600 !important;
}

.nav-sidebar .nav-link.active .nav-icon,
.nav-sidebar .menu-open > .nav-link .nav-icon {
  color: var(--orange) !important;
}

/* Icons */
.nav-sidebar .nav-icon {
  color: var(--sb-header) !important;
  width: 18px !important;
  min-width: 18px !important;
  font-size: 0.95rem !important;
  text-align: center !important;
  transition: color var(--transition) !important;
}

.nav-sidebar .nav-link:hover .nav-icon {
  color: var(--orange-light) !important;
}

/* Child treeview (sub-items) */
.nav-treeview {
  padding: 2px 0 4px !important;
  background: transparent !important;
}

.nav-treeview .nav-item {
  padding: 0 10px 0 22px !important;
}

.nav-treeview .nav-link {
  color: #6b7280 !important;
  font-size: 0.82rem !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  border-left: 2px solid transparent !important;
}

.nav-treeview .nav-link:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #d1d5db !important;
  border-left-color: var(--orange) !important;
}

.nav-treeview .nav-link.active {
  background: rgba(255,111,15,0.1) !important;
  color: var(--orange-light) !important;
  border-left-color: var(--orange) !important;
}

/* Sidebar mini icon mode */
.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link::before,
.sidebar-mini .main-sidebar .brand-link::before {
  width: 28px;
  height: 28px;
  font-size: 0.9rem;
}

/* Arrow icon for expandable groups */
.nav-sidebar .right {
  color: #4b5563 !important;
  transition: transform var(--transition) !important;
}

.nav-sidebar .menu-open .right {
  transform: rotate(90deg) !important;
}

/* ════════════════════════════════════════════════════════════════
   TOP NAV BAR
   ════════════════════════════════════════════════════════════════ */

.main-header.navbar {
  background-color: var(--white) !important;
  border-bottom: 1px solid var(--gray-200) !important;
  box-shadow: var(--shadow-sm) !important;
  height: 64px !important;
  padding: 0 20px !important;
}

.navbar-dark .navbar-nav .nav-link,
.main-header .navbar-nav .nav-link,
.main-header .nav-link {
  color: var(--gray-700) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  transition: background var(--transition), color var(--transition) !important;
}

.main-header .navbar-nav .nav-link:hover {
  background: var(--gray-100) !important;
  color: var(--dark) !important;
}

/* Hamburger toggle */
.main-header .nav-sidebar-toggle,
[data-widget="pushmenu"] {
  color: var(--gray-700) !important;
}

/* Search bar in header */
.main-header .form-control {
  border: 1.5px solid var(--gray-200) !important;
  border-radius: 100px !important;
  font-size: 0.875rem !important;
  padding: 6px 16px !important;
  background: var(--gray-50) !important;
  color: var(--dark) !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}

.main-header .form-control:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px var(--orange-glow) !important;
  background: var(--white) !important;
}

/* ════════════════════════════════════════════════════════════════
   CONTENT WRAPPER
   ════════════════════════════════════════════════════════════════ */

.content-wrapper {
  background-color: var(--gray-50) !important;
}

.content-header {
  padding: 20px 24px 12px !important;
  background: transparent !important;
}

.content-header h1 {
  font-size: 1.4rem !important;
  color: var(--dark) !important;
  font-weight: 700 !important;
}

.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.8rem !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--gray-300) !important;
}

.breadcrumb-item a {
  color: var(--orange) !important;
}

.breadcrumb-item.active {
  color: var(--gray-500) !important;
}

.content {
  padding: 0 24px 24px !important;
}

/* ════════════════════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════════════════════ */

.card,
.card-default,
.card-outline {
  border: 1px solid var(--gray-200) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--white) !important;
  overflow: hidden;
}

.card-header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--gray-200) !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
}

.card-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: var(--dark) !important;
  margin: 0 !important;
}

.card-body {
  padding: 20px !important;
}

/* Module headings (fieldsets) */
.module h2,
fieldset.module h2,
.inline-group h2 {
  background: var(--dark) !important;
  color: var(--white) !important;
  padding: 10px 16px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}

fieldset.module {
  border: 1px solid var(--gray-200) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

fieldset.collapsed h2 {
  background: var(--gray-700) !important;
  cursor: pointer;
  border-radius: 10px !important;
}

fieldset.collapsed h2:hover {
  background: var(--orange-hover) !important;
}

/* ════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════ */

.btn,
input[type="submit"],
input[type="button"] {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 100px !important;
  padding: 8px 20px !important;
  font-size: 0.875rem !important;
  transition: all var(--transition) !important;
  cursor: pointer !important;
  border: none !important;
}

.btn-primary,
input[type="submit"].default,
input[type="submit"][name="_save"],
input[type="submit"][name="_addanother"],
input[type="submit"][name="_continue"] {
  background: linear-gradient(135deg, var(--orange), var(--orange-hover)) !important;
  color: var(--white) !important;
  box-shadow: var(--shadow-orange) !important;
  border: none !important;
}

.btn-primary:hover,
input[type="submit"]:hover {
  background: linear-gradient(135deg, var(--orange-hover), #CC4700) !important;
  box-shadow: 0 6px 24px rgba(255,111,15,0.35) !important;
  transform: translateY(-1px) !important;
  color: var(--white) !important;
}

.btn-secondary {
  background: var(--gray-100) !important;
  color: var(--gray-900) !important;
  border: 1.5px solid var(--gray-200) !important;
}

.btn-secondary:hover {
  background: var(--gray-200) !important;
  color: var(--dark) !important;
}

.btn-success {
  background: var(--green) !important;
  color: var(--white) !important;
  border: none !important;
}

.btn-danger, .deletelink, a.deletelink {
  background: var(--red) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
}

.btn-danger:hover, .deletelink:hover, a.deletelink:hover {
  background: #D63A5E !important;
  color: var(--white) !important;
  transform: translateY(-1px) !important;
}

.btn-warning {
  background: var(--yellow) !important;
  color: var(--dark) !important;
  border: none !important;
}

/* Object tools (Add + History buttons) */
.object-tools {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  gap: 8px !important;
}

.object-tools a,
.object-tools li a {
  background: var(--orange) !important;
  color: var(--white) !important;
  border-radius: 100px !important;
  padding: 7px 18px !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all var(--transition) !important;
  box-shadow: var(--shadow-orange) !important;
}

.object-tools a:hover,
.object-tools li a:hover {
  background: var(--orange-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 24px rgba(255,111,15,0.35) !important;
  color: var(--white) !important;
}

.object-tools a.viewlink,
.object-tools a.golink {
  background: var(--dark) !important;
}

.object-tools a.viewlink:hover,
.object-tools a.golink:hover {
  background: var(--gray-900) !important;
}

/* ════════════════════════════════════════════════════════════════
   FORMS & INPUTS
   ════════════════════════════════════════════════════════════════ */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="tel"],
select,
textarea {
  border: 1.5px solid var(--gray-200) !important;
  border-radius: 10px !important;
  padding: 9px 14px !important;
  font-size: 0.875rem !important;
  color: var(--dark) !important;
  background: var(--white) !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
  width: 100%;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 4px var(--orange-glow) !important;
  outline: none !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1.5px solid var(--gray-200) !important;
  border-radius: 10px !important;
  min-height: 40px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 4px var(--orange-glow) !important;
}

.select2-container--default .select2-results__option--highlighted {
  background-color: var(--orange) !important;
}

/* Form row labels */
.form-row > .field-box > label,
.form-row label,
label {
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  color: var(--gray-700) !important;
}

/* Help text */
.help {
  color: var(--gray-500) !important;
  font-size: 0.78rem !important;
  margin-top: 4px;
}

/* Error messages */
.errorlist li,
.errornote {
  background: var(--red-bg) !important;
  color: var(--red) !important;
  border-left: 3px solid var(--red) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 0.83rem !important;
  font-weight: 500 !important;
  list-style: none !important;
  margin-bottom: 4px;
}

/* ════════════════════════════════════════════════════════════════
   CHANGELIST TABLE
   ════════════════════════════════════════════════════════════════ */

#result_list {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  background: var(--white) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid var(--gray-200) !important;
  box-shadow: var(--shadow-sm) !important;
}

#result_list thead th {
  background: var(--dark) !important;
  color: var(--gray-300) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  border: none !important;
  white-space: nowrap;
}

#result_list thead th a {
  color: var(--gray-300) !important;
  text-decoration: none !important;
}

#result_list thead th a:hover,
#result_list thead th.sorted a {
  color: var(--orange-light) !important;
}

#result_list thead th.sorted {
  background: #1a1a1d !important;
}

/* Sort arrow */
#result_list thead th.sorted .text::after,
#result_list thead th.sorted .text::before {
  color: var(--orange) !important;
}

#result_list tbody tr {
  border-bottom: 1px solid var(--gray-100) !important;
  transition: background var(--transition) !important;
}

#result_list tbody tr:last-child {
  border-bottom: none !important;
}

#result_list tbody td {
  padding: 12px 16px !important;
  color: var(--gray-900) !important;
  font-size: 0.875rem !important;
  vertical-align: middle !important;
  border: none !important;
}

#result_list tbody tr:hover {
  background-color: var(--orange-bg) !important;
}

#result_list tbody tr.selected {
  background-color: #FFF0E6 !important;
}

/* Checkbox column */
#result_list tbody td.action-checkbox,
#result_list thead th.action-checkbox-column {
  width: 40px !important;
  padding: 12px 16px !important;
}

/* Links inside table */
#result_list tbody td a {
  color: var(--orange) !important;
  font-weight: 500 !important;
}

#result_list tbody td a:hover {
  color: var(--orange-hover) !important;
  text-decoration: underline !important;
}

/* ════════════════════════════════════════════════════════════════
   SEARCH & FILTER (CHANGELIST)
   ════════════════════════════════════════════════════════════════ */

#changelist-search {
  background: var(--white) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin-bottom: 16px !important;
  box-shadow: var(--shadow-sm) !important;
}

#changelist-search label {
  color: var(--gray-700) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
}

#toolbar {
  background: var(--white) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
  box-shadow: var(--shadow-sm) !important;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

#toolbar form#changelist-search {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
}

#toolbar form input[name="q"] {
  border: 1.5px solid var(--gray-200) !important;
  border-radius: 100px !important;
  padding: 8px 16px !important;
  font-size: 0.875rem !important;
  min-width: 240px !important;
  background: var(--gray-50) !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}

#toolbar form input[name="q"]:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px var(--orange-glow) !important;
  background: var(--white) !important;
}

#toolbar form input[type="submit"] {
  background: var(--orange) !important;
  color: var(--white) !important;
  border-radius: 100px !important;
  padding: 8px 18px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-orange) !important;
}

/* Filter sidebar */
#changelist-filter {
  background: var(--white) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
}

#changelist-filter h2 {
  background: var(--dark) !important;
  color: var(--white) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  margin: 0 !important;
}

#changelist-filter h3 {
  color: var(--gray-700) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 14px 16px 6px !important;
  margin: 0 !important;
  border-top: 1px solid var(--gray-100) !important;
}

#changelist-filter h3:first-of-type {
  border-top: none !important;
}

#changelist-filter ul {
  list-style: none !important;
  padding: 0 8px 8px !important;
  margin: 0 !important;
}

#changelist-filter li {
  margin: 2px 0 !important;
}

#changelist-filter li a {
  display: block !important;
  color: var(--gray-700) !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  font-size: 0.83rem !important;
  transition: background var(--transition), color var(--transition) !important;
}

#changelist-filter li a:hover {
  background: var(--orange-bg) !important;
  color: var(--orange) !important;
}

#changelist-filter li.selected a {
  background: var(--orange-bg) !important;
  color: var(--orange) !important;
  font-weight: 600 !important;
}

/* ════════════════════════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════════════════════════ */

.paginator {
  background: var(--white) !important;
  border-top: 1px solid var(--gray-100) !important;
  padding: 12px 16px !important;
  font-size: 0.85rem !important;
  color: var(--gray-500) !important;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.paginator a,
.paginator .this-page,
.paginator span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: all var(--transition) !important;
}

.paginator a {
  color: var(--gray-700) !important;
  border: 1.5px solid var(--gray-200) !important;
  background: var(--white) !important;
}

.paginator a:hover {
  background: var(--orange-bg) !important;
  border-color: var(--orange) !important;
  color: var(--orange) !important;
}

.paginator .this-page {
  background: var(--orange) !important;
  color: var(--white) !important;
  border: 1.5px solid var(--orange) !important;
  font-weight: 700 !important;
}

/* ════════════════════════════════════════════════════════════════
   INLINE ADMIN (TabularInline / StackedInline)
   ════════════════════════════════════════════════════════════════ */

.inline-group {
  border: 1px solid var(--gray-200) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
  box-shadow: var(--shadow-sm) !important;
}

.inline-group h2 {
  background: var(--dark-2) !important;
  color: var(--gray-200) !important;
  padding: 10px 16px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.tabular.inline-related thead tr {
  background: var(--gray-50) !important;
}

.tabular.inline-related thead th {
  color: var(--gray-700) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--gray-200) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.tabular.inline-related tbody tr {
  border-bottom: 1px solid var(--gray-100) !important;
}

.tabular.inline-related tbody tr:hover {
  background: var(--orange-bg) !important;
}

/* ════════════════════════════════════════════════════════════════
   MESSAGES & ALERTS
   ════════════════════════════════════════════════════════════════ */

.messagelist {
  margin: 0 24px 16px !important;
  padding: 0 !important;
  list-style: none !important;
}

.messagelist li {
  padding: 12px 16px 12px 48px !important;
  border-radius: 10px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
  position: relative !important;
}

.messagelist li::before {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  font-size: 1rem !important;
}

.messagelist .success {
  background: var(--green-bg) !important;
  color: #2e7d32 !important;
  border-left: 4px solid var(--green) !important;
}

.messagelist .success::before { content: '\f00c' !important; color: var(--green) !important; }

.messagelist .warning {
  background: #FFF8E1 !important;
  color: #7b5800 !important;
  border-left: 4px solid var(--yellow) !important;
}

.messagelist .warning::before { content: '\f071' !important; color: var(--yellow) !important; }

.messagelist .error {
  background: var(--red-bg) !important;
  color: #b71c1c !important;
  border-left: 4px solid var(--red) !important;
}

.messagelist .error::before { content: '\f057' !important; color: var(--red) !important; }

/* ════════════════════════════════════════════════════════════════
   LINKS
   ════════════════════════════════════════════════════════════════ */

a,
a:not(.nav-link):not(.brand-link):not(.btn):not([class*="btn"]) {
  color: var(--orange) !important;
  text-decoration: none !important;
  transition: color var(--transition) !important;
}

a:hover {
  color: var(--orange-hover) !important;
}

/* Don't colour admin nav links orange (handled separately) */
.nav-sidebar .nav-link,
.nav-sidebar .nav-link:hover { color: inherit !important; }

/* ════════════════════════════════════════════════════════════════
   DASHBOARD (index page)
   ════════════════════════════════════════════════════════════════ */

#content-main .module caption,
.app-index .module caption {
  background: var(--dark) !important;
  color: var(--white) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 10px 16px !important;
  text-align: left !important;
}

.app-index .module caption a,
#content-main .module caption a {
  color: var(--orange-light) !important;
}

#content-main .module table {
  background: var(--white) !important;
  border-radius: 0 0 10px 10px !important;
}

#content-main .module th,
#content-main .module td {
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--gray-100) !important;
  font-size: 0.875rem !important;
}

#content-main .module th a { color: var(--orange) !important; }
#content-main .module th a:hover { color: var(--orange-hover) !important; }

/* ════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════ */

.main-footer {
  background: var(--white) !important;
  border-top: 1px solid var(--gray-200) !important;
  color: var(--gray-500) !important;
  font-size: 0.8rem !important;
  padding: 14px 24px !important;
}

/* ════════════════════════════════════════════════════════════════
   LOGIN PAGE
   ════════════════════════════════════════════════════════════════ */

body.login {
  background: linear-gradient(135deg, var(--dark) 0%, #23262F 50%, #2D1A0A 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
}

/* Subtle orange glow behind the card */
body.login::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,111,15,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.login-page,
.login-box {
  width: 100% !important;
  max-width: 420px !important;
  margin: auto !important;
}

.login-logo {
  margin-bottom: 24px !important;
}

.login-logo a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: var(--white) !important;
  letter-spacing: -0.03em !important;
  text-decoration: none !important;
}

.login-logo a::before {
  content: 'J';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--orange), var(--orange-hover));
  border-radius: 14px;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--white);
  box-shadow: var(--shadow-orange);
  flex-shrink: 0;
}

.login-card-body,
.login-box-body {
  background: var(--white) !important;
  border-radius: 20px !important;
  padding: 36px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35) !important;
  border: none !important;
}

.login-card-body .input-group-text {
  background: var(--gray-100) !important;
  border: 1.5px solid var(--gray-200) !important;
  border-right: none !important;
  color: var(--gray-500) !important;
}

.login-card-body .form-control {
  border-left: none !important;
  border-radius: 0 10px 10px 0 !important;
}

.login-card-body .btn-primary,
.login-card-body input[type="submit"] {
  width: 100% !important;
  padding: 12px !important;
  font-size: 1rem !important;
  margin-top: 8px !important;
  border-radius: 100px !important;
  background: linear-gradient(135deg, var(--orange), var(--orange-hover)) !important;
  box-shadow: var(--shadow-orange) !important;
}

/* ════════════════════════════════════════════════════════════════
   MISC POLISH
   ════════════════════════════════════════════════════════════════ */

/* Checkboxes */
input[type="checkbox"] {
  accent-color: var(--orange) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

/* Badges */
.badge-primary { background: var(--orange) !important; }
.badge-success { background: var(--green) !important; }
.badge-danger  { background: var(--red) !important; }
.badge-warning { background: var(--yellow) !important; color: var(--dark) !important; }

/* Add row links in inlines */
.add-row a,
.inline-deletelink {
  border-radius: 100px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
}

.add-row a {
  color: var(--orange) !important;
  border: 1.5px solid var(--orange) !important;
  border-radius: 100px !important;
  padding: 4px 12px !important;
}

.add-row a:hover {
  background: var(--orange-bg) !important;
}

/* Calendar / date picker widget */
.datetimeshortcuts a {
  color: var(--orange) !important;
}

/* Focus ring global */
*:focus-visible {
  outline: 2px solid var(--orange) !important;
  outline-offset: 2px !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--orange-light); }

/* Sidebar scrollbar */
.main-sidebar .sidebar::-webkit-scrollbar-thumb { background: #333; }
.main-sidebar .sidebar::-webkit-scrollbar-thumb:hover { background: var(--orange); }

/* Text selection */
::selection { background: var(--orange-bg); color: var(--orange); }