/**
 * Trusted Proxies WHMCS Theme - overrides.css
 *
 * Glass design style matching trustedproxies.com brand
 * Parent theme: Six (Bootstrap 3)
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */

:root {
  --baseline-950: #21252C;
  --baseline-900: #343B46;
  --baseline-700: #687A8F;
  --baseline-600: #536276;
  --baseline-500: #7A8A9C;
  --baseline-200: #D6DAE1;
  --baseline-100: #ECEFF2;
  --baseline-50: #F6F7F9;

  --accent-700: #118366;
  --accent-400: #45E394;
  --accent-300: #82F3B1;

  --success-500: #3DAA3F;
  --success-100: #DDFADE;
  --warning-500: #E89D11;
  --warning-100: #FFF5D6;
  --error-500: #FE3635;
  --error-100: #FFE6E6;
  --info-500: #3B82F6;
  --info-100: #E8F1FD;

  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-strong: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-blur: blur(10px);

  --shadow-lg: 0 8px 32px rgba(33, 37, 44, 0.08);
  --shadow-xl: 0 8px 40px rgba(33, 37, 44, 0.08);
  --shadow-accent: 0 4px 12px rgba(130, 243, 177, 0.3);
}


/* ============================================
   BASE & BODY - Purple Gradient Background
   ============================================ */

html body,
body.antialiased {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  background: linear-gradient(180deg, #F6F7F9 0%, #ECEFF2 40%, #E1E3FE 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
  color: #1f2937 !important;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================
   MAIN LAYOUT
   ============================================ */

html body #main-body {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* ============================================
   BREADCRUMB POSITIONING STRATEGY
   
   Goal: Make breadcrumb appear inside the main-content card seamlessly
   Approach: Use CSS Grid to position both breadcrumb and main-content in same row,
             then use negative margin to pull main-content up and overlap breadcrumb on top
   ============================================ */

/* Breadcrumb/title block defaults (mobile/tablet): keep in flow above main content */
html body #main-body .col-md-9.pull-md-right:not(.main-content) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin-bottom: 6px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 0 6px 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

@media (min-width: 1025px) {
  /* Desktop: Breadcrumb stays in grid row 1, but positioned to overlay main-content top */
  html body #main-body .col-md-9.pull-md-right:not(.main-content) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    /* Position relative to allow z-index stacking */
    position: relative !important;
    z-index: 10 !important;
    /* Remove from normal flow height calculation */
    margin-bottom: -140px !important;
  }

  /* Inner container gets the actual padding */
  html body #main-body .col-md-9.pull-md-right:not(.main-content) .header-lined {
    padding: 40px 40px 0 40px !important;
  }

  /* Style the H1 page title nicely above breadcrumb */
  html body #main-body .col-md-9.pull-md-right:not(.main-content) .header-lined h1 {
    font-size: 28px !important;
    font-weight: 600 !important;
    margin: 0 0 12px 0 !important;
    color: var(--body-color) !important;
  }

  /* Style breadcrumb nav below the title */
  html body #main-body .col-md-9.pull-md-right:not(.main-content) .breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }
}


/* CSS Grid container - sidebar column LEFT, content column RIGHT */
html body #main-body > .container > .row {
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  grid-template-rows: auto auto 1fr !important;
  gap: 0 32px !important;
  align-items: start !important;
}

/* Primary sidebar (Categories) - LEFT column, row 1 */
html body #main-body .col-md-3.sidebar:not(.sidebar-secondary) {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  float: none !important;
  margin: 0 !important;
}

/* Secondary sidebar (Tag Cloud + Support) - LEFT column, row 2 */
html body #main-body .col-md-3.sidebar.sidebar-secondary {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  float: none !important;
  margin: 0 !important;
}

/* Main content - RIGHT column */
html body #main-body .col-md-9.main-content {
  grid-column: 2 !important;
  grid-row: 2 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 8px 40px rgba(33, 37, 44, 0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 18px 40px 40px 40px !important;
  float: none !important;
  margin: 0 !important;
}

/* Desktop: Override main-content to start at row 1 to overlap with breadcrumb */
@media (min-width: 1025px) {
  html body #main-body .col-md-9.main-content {
    grid-row: 1 / -1 !important;
    padding: 140px 40px 40px 40px !important;
  }
}

/* Hide clearfix in grid */
html body #main-body > .container > .row > .clearfix {
  display: none !important;
}


/* ============================================
   PAGE HEADER - Inside Main Content
   ============================================ */

/* Add title inside main-content via pseudo-element or we need TPL change */
/* For now, style the header that exists */

html body .header-lined {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

html body .header-lined h1 {
  font-size: 36px !important;
  font-weight: 300 !important;
  color: #21252C !important;
  margin-bottom: 8px !important;
  margin-top: 0 !important;
}

html body .breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 32px !important;
  font-size: 14px !important;
  border-radius: 0 !important;
}

/* Breadcrumb inside main-content card at desktop gets proper bottom margin */
@media (min-width: 1025px) {
  html body #main-body .col-md-9.pull-md-right:not(.main-content) .breadcrumb {
    margin-bottom: 32px !important;
  }
}

html body .breadcrumb > li {
  color: #4b5563;
  font-weight: 450;
}

html body .breadcrumb > li a {
  color: #118366 !important;
  text-decoration: none;
}

html body .breadcrumb > li a:hover {
  text-decoration: underline;
}

html body .breadcrumb > li + li:before {
  color: #9ca3af;
  content: "/ ";
  padding: 0 5px;
}


/* ============================================
   SIDEBAR PANELS - Glass Effect
   ============================================ */

html body .panel.panel-sidebar {
  background: rgba(255, 255, 255, 0.7) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 8px 32px rgba(33, 37, 44, 0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  overflow: hidden;
  margin-bottom: 12px !important;
}

html body .panel.panel-sidebar .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid rgba(236, 239, 242, 0.8) !important;
  padding: 16px 20px !important;
}

html body .panel.panel-sidebar .panel-heading .panel-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #21252C !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body .panel.panel-sidebar .panel-heading .panel-title i:not(.panel-minimise) {
  color: #687A8F !important;
  font-size: 14px !important;
}

html body .panel.panel-sidebar .panel-heading .panel-minimise {
  color: #536276 !important;
}

/* Sidebar list items */
html body .panel.panel-sidebar .list-group {
  margin-bottom: 0 !important;
}

html body .panel.panel-sidebar .list-group-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(236, 239, 242, 0.6) !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  color: #374151 !important;
  font-size: 14px !important;
  font-weight: 450 !important;
  transition: background-color 0.2s !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
}

html body .panel.panel-sidebar .list-group-item:last-child {
  border-bottom: none !important;
}

html body .panel.panel-sidebar .list-group-item:hover {
  background: rgba(130, 243, 177, 0.1) !important;
  text-decoration: none !important;
  color: #374151 !important;
}

html body .panel.panel-sidebar .list-group-item.active,
html body .panel.panel-sidebar .list-group-item.active:hover,
html body .panel.panel-sidebar .list-group-item.active:focus {
  background: rgba(130, 243, 177, 0.15) !important;
  border-left: 3px solid #82F3B1 !important;
  color: #118366 !important;
}

/* Sidebar badges - pushed to right with margin-left: auto */
html body .panel.panel-sidebar .list-group-item .badge {
  background: rgba(236, 239, 242, 0.8) !important;
  color: #4b5563 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 2px 10px !important;
  border-radius: 12px !important;
  float: none !important;
  margin-left: auto !important;
  order: 99 !important;
}

/* Sidebar icons - keep at start */
html body .panel.panel-sidebar .list-group-item i.sidebar-menu-item-icon {
  color: #4b5563 !important;
  margin-right: 2px !important;
  width: 18px !important;
  order: -1 !important;
}

/* Tag Cloud panel body */
html body .panel.panel-sidebar .panel-body {
  padding: 16px 20px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html body .panel.panel-sidebar .panel-body a {
  display: inline-block !important;
  font-size: 12px !important;
  color: #4b5563 !important;
  font-weight: 450 !important;
  padding: 4px 10px !important;
  background: rgba(236, 239, 242, 0.6) !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}

html body .panel.panel-sidebar .panel-body a:hover {
  background: rgba(130, 243, 177, 0.3) !important;
  color: #118366 !important;
  text-decoration: none !important;
}


/* ============================================
   KNOWLEDGEBASE - Search Bar
   ============================================ */

html body .input-group.kb-search {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 40px !important;
}

html body .input-group.kb-search .form-control {
  flex: 1 !important;
  padding: 16px 24px !important;
  font-size: 15px !important;
  border: 1px solid rgba(214, 218, 225, 0.8) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  color: #21252C !important;
  outline: none !important;
  transition: all 0.2s !important;
  height: auto !important;
  box-shadow: none !important;
  width: auto !important;
}

html body .input-group.kb-search .form-control:focus {
  border-color: #82F3B1 !important;
  box-shadow: 0 0 0 3px rgba(130, 243, 177, 0.2) !important;
}

html body .input-group.kb-search .input-group-btn {
  display: flex !important;
  width: auto !important;
}

html body .input-group.kb-search .input-group-btn .btn {
  padding: 16px 32px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #21252C !important;
  background: #82F3B1 !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 4px 12px rgba(130, 243, 177, 0.3) !important;
  height: auto !important;
}

html body .input-group.kb-search .input-group-btn .btn:hover {
  background: #45E394 !important;
  transform: translateY(-1px);
}


/* ============================================
   KNOWLEDGEBASE - Section Titles
   ============================================ */

html body .main-content h2 {
  font-size: 24px !important;
  font-weight: 500 !important;
  color: #21252C !important;
  margin: 32px 0 24px !important;
}

html body .main-content h2:first-of-type {
  margin-top: 0 !important;
}


/* ============================================
   KNOWLEDGEBASE - Categories Grid (3 columns)
   ============================================ */

html body .row.kbcategories {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
}

html body .row.kbcategories::before,
html body .row.kbcategories::after {
  display: none !important;
}

/* Remove gap between consecutive kbcategories rows */
html body .row.kbcategories + .row.kbcategories {
  margin-top: 0 !important;
}

/* Category card container */
html body .row.kbcategories .col-sm-4 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}

/* Category card link - the actual card */
html body .row.kbcategories .col-sm-4 > a:first-of-type {
  display: block !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(236, 239, 242, 0.8) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  text-decoration: none !important;
  color: #118366 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  transition: all 0.2s ease !important;
  flex: 1 !important;
  position: relative !important;
  z-index: 1 !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
}

/* Make entire card clickable with pseudo-element overlay */
html body .row.kbcategories .col-sm-4 > a:first-of-type::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2 !important;
  border-radius: 14px !important;
}

html body .row.kbcategories .col-sm-4 > a:first-of-type:hover {
  background: rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(33, 37, 44, 0.08) !important;
  text-decoration: none !important;
}

/* Hover effect on entire card including description */
html body .row.kbcategories .col-sm-4:has(> a:first-of-type:hover) > p {
  background: rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-2px);
}

html body .row.kbcategories .col-sm-4 > a:first-of-type i {
  color: #118366 !important;
  margin-right: 8px !important;
}

/* Category description - move inside card visually as single unit */
html body .row.kbcategories .col-sm-4 > p {
  margin: 0 !important;
  padding: 8px 24px 24px 24px !important;
  background: transparent !important;
  border: none !important;
  color: #687A8F !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  position: absolute !important;
  top: 52px !important;
  left: 0 !important;
  right: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Make the link container taller to contain both title and description */
html body .row.kbcategories .col-sm-4 > a:first-of-type:has(+ .admin-inline-edit + p),
html body .row.kbcategories .col-sm-4 > a:first-of-type:has(+ p) {
  min-height: 140px !important;
  padding-bottom: 60px !important;
}

/* Make sure the col-sm-4 container is relative for absolute positioning */
html body .row.kbcategories .col-sm-4 {
  position: relative !important;
}

/* Hide admin edit links */
html body a.admin-inline-edit {
  display: none !important;
}


/* ============================================
   KNOWLEDGEBASE - Articles List
   ============================================ */

html body div.kbarticles {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

html body div.kbarticles > a:not(.admin-inline-edit) {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 16px 0 6px !important;
  color: #118366 !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

html body div.kbarticles > a:not(.admin-inline-edit):hover {
  color: #45E394 !important;
  text-decoration: underline !important;
}

html body div.kbarticles > a span.glyphicon {
  color: #82F3B1 !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

html body div.kbarticles > p {
  padding: 0 0 16px 28px !important;
  margin: 0 !important;
  color: #536276 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border-bottom: 1px solid rgba(236, 239, 242, 0.8) !important;
}

html body div.kbarticles > p:last-of-type {
  border-bottom: none !important;
}


/* ============================================
   BUTTONS
   ============================================ */

html body .btn {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.2s !important;
}

html body .btn-primary {
  background: #82F3B1 !important;
  border-color: #82F3B1 !important;
  color: #21252C !important;
  box-shadow: 0 4px 12px rgba(130, 243, 177, 0.3) !important;
}

html body .btn-primary:hover,
html body .btn-primary:focus {
  background: #45E394 !important;
  border-color: #45E394 !important;
  color: #21252C !important;
}

html body .btn-default {
  background: transparent !important;
  border-color: #D6DAE1 !important;
  color: #536276 !important;
}

html body .btn-default:hover,
html body .btn-default:focus {
  background: #F6F7F9 !important;
  border-color: #D6DAE1 !important;
  color: #21252C !important;
}


/* ============================================
   FORMS
   ============================================ */

html body .form-control {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  border: 1px solid #D6DAE1 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  color: #21252C !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

html body .form-control:focus {
  border-color: #82F3B1 !important;
  box-shadow: 0 0 0 3px rgba(130, 243, 177, 0.2) !important;
  outline: none !important;
}


/* ============================================
   ALERTS
   ============================================ */

html body .alert {
  border-radius: 12px !important;
  border: 1px solid !important;
}

html body .alert-info {
  background: #E8F1FD !important;
  color: #3B82F6 !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
}


/* ============================================
   LABELS & BADGES
   ============================================ */

html body .label,
html body .badge {
  font-weight: 500 !important;
  border-radius: 12px !important;
  padding: 4px 10px !important;
}


/* ============================================
   GENERAL PANELS
   ============================================ */

html body .panel {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 8px 32px rgba(33, 37, 44, 0.08) !important;
  overflow: hidden;
}

html body .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid rgba(236, 239, 242, 0.8) !important;
  padding: 16px 20px !important;
}

html body .panel-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #21252C !important;
}


/* ============================================
   LINKS
   ============================================ */

html body a {
  color: #118366;
  text-decoration: none;
  transition: color 0.2s;
}

html body a:hover {
  color: #45E394;
  text-decoration: underline;
}


/* Proxy Management panel - shows when logged in, keep visible */


/* ============================================
   RESPONSIVE - Tablet (max-width: 1024px) - includes iPad Pro
   ============================================ */

@media (max-width: 1024px) {
  html body #main-body {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  /* Switch from 2-column grid to single column on tablet */
  html body #main-body > .container > .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  html body #main-body .col-md-9.main-content {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 32px !important;
    margin-bottom: 0 !important;
  }

  html body #main-body .col-md-3.sidebar,
  html body #main-body .col-md-3.sidebar-secondary {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 0 !important;
  }

  html body #main-body .col-md-3.sidebar .panel.panel-sidebar,
  html body #main-body .col-md-3.sidebar-secondary .panel.panel-sidebar {
    flex: 1 !important;
    min-width: 280px !important;
    margin-bottom: 0 !important;
  }

  html body .header-lined h1 {
    font-size: 28px !important;
  }

  html body .row.kbcategories {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  html body .input-group.kb-search {
    margin-bottom: 32px !important;
  }
}


/* ============================================
   RESPONSIVE - Mobile (max-width: 767px)
   ============================================ */

@media (max-width: 767px) {
  html body #main-body {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  html body #main-body > .container > .row {
    gap: 20px !important;
  }

  html body #main-body .col-md-3.sidebar,
  html body #main-body .col-md-3.sidebar-secondary {
    flex-direction: column !important;
  }

  html body #main-body .col-md-3.sidebar .panel.panel-sidebar,
  html body #main-body .col-md-3.sidebar-secondary .panel.panel-sidebar {
    min-width: 100% !important;
    width: 100% !important;
  }

  /* Merge breadcrumb section into main card on mobile */
  html body #main-body .col-md-9.pull-md-right:not(.main-content) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
  }

  html body #main-body .col-md-9.main-content {
    padding: 24px 20px !important;
    border-radius: 16px !important;
    padding-top: 20px !important;
  }

  html body #main-body .col-md-9.pull-md-right:not(.main-content) .header-lined,
  html body #main-body .col-md-9.pull-md-right:not(.main-content) .breadcrumb {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 8px 32px rgba(33, 37, 44, 0.08) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px !important;
    margin: 0 !important;
  }

  html body #main-body .col-md-9.pull-md-right:not(.main-content) .breadcrumb {
    border-top: none !important;
    border-radius: 0 !important;
    padding-top: 0 !important;
    box-shadow: none !important;
  }

  html body .header-lined h1 {
    font-size: 24px !important;
  }

  html body .breadcrumb {
    font-size: 13px !important;
    margin-bottom: 20px !important;
  }

  html body .input-group.kb-search {
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 28px !important;
  }

  html body .input-group.kb-search .form-control {
    padding: 14px 18px !important;
    font-size: 14px !important;
  }

  html body .input-group.kb-search .input-group-btn .btn {
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 14px !important;
  }

  html body .main-content h2 {
    font-size: 20px !important;
    margin: 24px 0 16px !important;
  }

  html body .row.kbcategories {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
  }

  html body .row.kbcategories .col-sm-4 > a:first-of-type {
    padding: 20px !important;
    font-size: 14px !important;
  }

  html body .row.kbcategories .col-sm-4 > p {
    padding: 0 20px 20px 20px !important;
    font-size: 13px !important;
  }

  html body div.kbarticles > a:not(.admin-inline-edit) {
    font-size: 14px !important;
  }

  html body div.kbarticles > p {
    font-size: 13px !important;
    padding: 0 0 14px 28px !important;
  }

  html body .panel.panel-sidebar .panel-heading {
    padding: 14px 16px !important;
  }

  html body .panel.panel-sidebar .panel-heading .panel-title {
    font-size: 11px !important;
  }

  html body .panel.panel-sidebar .list-group-item {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }

  html body .panel.panel-sidebar .panel-body {
    padding: 14px 16px !important;
  }
}


/* ============================================
   RESPONSIVE - Small Mobile (max-width: 480px)
   ============================================ */

@media (max-width: 480px) {
  html body #main-body {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  html body #main-body .col-md-9.main-content {
    padding: 20px 16px !important;
    border-radius: 14px !important;
  }

  html body .header-lined h1 {
    font-size: 22px !important;
  }

  html body .row.kbcategories .col-sm-4 > a:first-of-type {
    padding: 16px !important;
  }

  html body .row.kbcategories .col-sm-4 > p {
    padding: 0 16px 16px 16px !important;
  }
}

/* Fix Categories dropdown text cutoff on mobile */
@media (max-width: 767px) {
  .sidebar select {
    font-size: 13px !important;
    padding: 8px 10px !important;
  }
}


/* ============================================
   KNOWLEDGE BASE ARTICLE VIEW
   ============================================ */

/* Article title section */
html body .kb-article-title {
  margin-bottom: 32px !important;
  padding-bottom: 24px !important;
  border-bottom: 1px solid rgba(236, 239, 242, 0.8) !important;
  position: relative !important;
}

html body .kb-article-title h2 {
  font-size: 36px !important;
  font-weight: 600 !important;
  color: #21252C !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  padding-right: 60px !important;
}

html body .kb-article-title .btn-print {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  padding: 10px 16px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(236, 239, 242, 0.8) !important;
  border-radius: 8px !important;
  color: #687A8F !important;
  transition: all 0.2s !important;
}

html body .kb-article-title .btn-print:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(33, 37, 44, 0.1) !important;
  text-decoration: none !important;
}

/* Article content */
html body .kb-article-content {
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: #1f2937 !important;
  font-weight: 450 !important;
  margin-bottom: 32px !important;
}

html body .kb-article-content p {
  margin-bottom: 20px !important;
}

html body .kb-article-content strong {
  font-weight: 600 !important;
  color: #118366 !important;
}

html body .kb-article-content h1,
html body .kb-article-content h2,
html body .kb-article-content h3,
html body .kb-article-content h4 {
  margin-top: 32px !important;
  margin-bottom: 16px !important;
  font-weight: 600 !important;
  color: #21252C !important;
}

html body .kb-article-content h2 {
  font-size: 28px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid rgba(130, 243, 177, 0.3) !important;
}

html body .kb-article-content h3 {
  font-size: 22px !important;
}

html body .kb-article-content h4 {
  font-size: 18px !important;
}

html body .kb-article-content ul,
html body .kb-article-content ol {
  margin: 20px 0 !important;
  padding-left: 24px !important;
}

html body .kb-article-content li {
  margin-bottom: 8px !important;
}

html body .kb-article-content pre {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  background: rgba(33, 37, 44, 0.05) !important;
  border: 1px solid rgba(236, 239, 242, 0.8) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin: 24px 0 !important;
  overflow-x: auto !important;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  max-width: 100% !important;
}

html body .kb-article-content code {
  background: rgba(130, 243, 177, 0.15) !important;
  color: #118366 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace !important;
  font-size: 14px !important;
}

html body .kb-article-content pre code {
  background: transparent !important;
  color: #21252C !important;
  padding: 0 !important;
}

/* Article details (tags, rating) */
html body .kb-article-details {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 32px 0 !important;
  display: flex !important;
  gap: 20px !important;
  font-size: 14px !important;
  color: #687A8F !important;
  flex-wrap: wrap !important;
}

html body .kb-article-details li {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

html body .kb-article-details li i {
  width: 16px !important;
  color: #687A8F !important;
}

/* Rate article section */
html body .kb-rate-article {
  text-align: center !important;
  margin-bottom: 32px !important;
  padding: 32px !important;
  background: rgba(236, 239, 242, 0.3) !important;
  border-radius: 12px !important;
  border: none !important;
}

html body .kb-rate-article h3,
html body .kb-rate-article form h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #21252C !important;
  margin-bottom: 12px !important;
}

html body .kb-rate-article p {
  font-size: 14px !important;
  color: #687A8F !important;
  margin-bottom: 16px !important;
}

html body .kb-rate-article form {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
}

html body .kb-rate-article button {
  padding: 12px 28px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(236, 239, 242, 0.8) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
}

html body .kb-rate-article button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(33, 37, 44, 0.1) !important;
}

html body .kb-rate-article button[value="yes"] {
  color: #118366 !important;
  border-color: rgba(17, 131, 102, 0.3) !important;
}

html body .kb-rate-article button[value="yes"]:hover {
  background: rgba(130, 243, 177, 0.15) !important;
  border-color: #118366 !important;
}

html body .kb-rate-article button[value="no"] {
  color: #687A8F !important;
}

html body .kb-rate-article button[value="no"]:hover {
  background: rgba(236, 239, 242, 0.5) !important;
}

/* Related articles section */
html body .kb-also-read {
  margin-top: 32px !important;
}

html body .kb-also-read h3 {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #21252C !important;
  margin-bottom: 20px !important;
}

html body .kb-also-read .kbarticles {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}

html body .kb-also-read .kbarticles > div {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(236, 239, 242, 0.8) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  transition: all 0.2s !important;
}

html body .kb-also-read .kbarticles > div:hover {
  background: rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(33, 37, 44, 0.1) !important;
}

html body .kb-also-read .kbarticles > div > a {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #118366 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

html body .kb-also-read .kbarticles > div > a:hover {
  text-decoration: none !important;
  color: #0d6850 !important;
}

html body .kb-also-read .kbarticles > div > a .glyphicon {
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

html body .kb-also-read .kbarticles > div > p {
  font-size: 14px !important;
  color: #687A8F !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Mobile responsive for articles */
@media (max-width: 768px) {
  html body .kb-article-title h2 {
    font-size: 24px !important;
    padding-right: 0 !important;
    margin-bottom: 16px !important;
  }

  html body .kb-article-title .btn-print {
    position: static !important;
    display: inline-flex !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
  }

  html body .kb-article-content {
    font-size: 15px !important;
  }

  html body .kb-article-content h2 {
    font-size: 24px !important;
  }

  html body .kb-article-content h3 {
    font-size: 20px !important;
  }

  html body .kb-article-content pre {
    padding: 16px !important;
    font-size: 13px !important;
    margin: 16px -16px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  html body .kb-article-content pre code {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  html body .kb-article-content code {
    font-size: 13px !important;
    word-break: break-word !important;
  }

  html body .kb-also-read .kbarticles {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   SUPPORT TICKETS
   ============================================ */

/* DataTables wrapper */
html body .dataTables_wrapper {
  margin-bottom: 32px !important;
}

/* Listtable container - holds info, filter, and table */
html body .dataTables_wrapper .listtable {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 0 !important;
}

/* Make table take full width on its own row */
html body .dataTables_wrapper .listtable > table {
  order: 3 !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  margin-top: 20px !important;
}

/* DataTables info text - blue background, on the LEFT */
html body div.dataTables_wrapper div.dataTables_info {
  order: 1 !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  background: rgba(59, 130, 246, 0.08) !important;
  border: 1px solid rgba(59, 130, 246, 0.15) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: #3B82F6 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* DataTables search box - on the RIGHT */
html body .dataTables_filter {
  order: 2 !important;
  margin: 0 !important;
  flex: 0 0 300px !important;
}

html body .dataTables_filter label {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 0 !important; /* Hide "Search:" text */
}

html body div.dataTables_wrapper div.dataTables_filter input[type="search"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  border: 1px solid rgba(214, 218, 225, 0.8) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  color: #21252C !important;
  outline: none !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
}

html body div.dataTables_wrapper div.dataTables_filter input[type="search"]::placeholder {
  color: #7A8A9C !important;
  opacity: 1 !important;
}

html body div.dataTables_wrapper div.dataTables_filter input[type="search"]:focus {
  border-color: #82F3B1 !important;
  box-shadow: 0 0 0 3px rgba(130, 243, 177, 0.2) !important;
  background: rgba(255, 255, 255, 0.8) !important;
}

/* Bottom pagination area - flex row with info, pagination, and length */
html body div.dataTables_wrapper > div.dataTables_paginate,
html body div.dataTables_wrapper > div.dataTables_length {
  display: inline-flex !important;
  vertical-align: middle !important;
}

/* Create pagination footer container using CSS */
html body div.dataTables_wrapper {
  position: relative !important;
}

/* Pagination footer - flex row: length on left, pagination on right */
html body div.dataTables_wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
}

/* Pagination controls container - RIGHT side */
html body div.dataTables_wrapper div.dataTables_paginate {
  margin-top: 24px !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  order: 2 !important;
}

/* Pagination list styling */
html body div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body div.dataTables_wrapper div.dataTables_paginate .paginate_button,
html body div.dataTables_wrapper div.dataTables_paginate li.paginate_button {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

html body div.dataTables_wrapper div.dataTables_paginate .paginate_button a,
html body div.dataTables_wrapper div.dataTables_paginate li.paginate_button a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(214, 218, 225, 0.8) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  color: #536276 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}

html body div.dataTables_wrapper div.dataTables_paginate .paginate_button:hover:not(.disabled) a,
html body div.dataTables_wrapper div.dataTables_paginate li.paginate_button:hover:not(.disabled) a {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: #82F3B1 !important;
  color: #118366 !important;
  text-decoration: none !important;
}

html body div.dataTables_wrapper div.dataTables_paginate .paginate_button.active a,
html body div.dataTables_wrapper div.dataTables_paginate li.paginate_button.active a {
  background: #82F3B1 !important;
  border-color: #82F3B1 !important;
  color: #21252C !important;
  font-weight: 600 !important;
}

html body div.dataTables_wrapper div.dataTables_paginate .paginate_button.disabled a,
html body div.dataTables_wrapper div.dataTables_paginate li.paginate_button.disabled a {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Length dropdown (entries per page) - LEFT side */
html body div.dataTables_wrapper div.dataTables_length {
  margin-top: 24px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  order: 1 !important;
  background: transparent !important;
}

html body div.dataTables_wrapper div.dataTables_length label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  font-size: 14px !important;
  color: #536276 !important;
  font-weight: 400 !important;
}

html body div.dataTables_wrapper div.dataTables_length select {
  padding: 8px 32px 8px 12px !important;
  font-size: 14px !important;
  border: 1px solid rgba(214, 218, 225, 0.8) !important;
  border-radius: 8px !important;
  background-color: white !important;
  color: #21252C !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23536276' d='M6 8L2 4h8z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

/* Pagination footer row - info left, buttons center, dropdown right */
html body div.dataTables_wrapper::after {
  content: '' !important;
  display: table !important;
  clear: both !important;
}

/* Create flex container for bottom controls */
html body #tableTicketsList_wrapper > .dataTables_paginate,
html body #tableTicketsList_wrapper > .dataTables_length {
  float: none !important;
}

/* Footer info text (duplicate at bottom) */
html body div.dataTables_wrapper .dataTables_paginate + .dataTables_length + .dataTables_info,
html body div.dataTables_wrapper > .dataTables_info:last-of-type {
  display: none !important; /* Hide if there's a duplicate */
}

/* Tickets list table */
html body .table-container {
  margin-bottom: 32px !important;
}

html body table.table-list {
  width: 100% !important;
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid rgba(236, 239, 242, 0.8) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

html body table.table-list thead th {
  background: rgba(236, 239, 242, 0.5) !important;
  padding: 16px 20px !important;
  padding-right: 30px !important; /* Room for sort icon */
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #536276 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 2px solid rgba(236, 239, 242, 0.8) !important;
  text-align: left !important;
  position: relative !important;
}

/* Sort icons - position close to text */
html body table.table-list thead th.sorting::after,
html body table.table-list thead th.sorting_asc::after,
html body table.table-list thead th.sorting_desc::after {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Column widths: Department smaller, Subject larger, Status & Last Updated smaller */
html body table.table-list thead th:nth-child(1),
html body table.table-list tbody td:nth-child(1) {
  width: 12% !important;
  min-width: 100px !important;
}

html body table.table-list thead th:nth-child(2),
html body table.table-list tbody td:nth-child(2) {
  width: 50% !important;
}

html body table.table-list thead th:nth-child(3),
html body table.table-list tbody td:nth-child(3) {
  width: 12% !important;
  min-width: 90px !important;
}

html body table.table-list thead th:nth-child(4),
html body table.table-list tbody td:nth-child(4) {
  width: 18% !important;
  min-width: 130px !important;
}

html body table.table-list thead th:first-child {
  border-top-left-radius: 12px !important;
}

html body table.table-list thead th:last-child {
  border-top-right-radius: 12px !important;
}

html body table.table-list tbody tr {
  border-bottom: 1px solid rgba(236, 239, 242, 0.6) !important;
  transition: background-color 0.2s !important;
  cursor: pointer !important;
}

html body table.table-list tbody tr:hover {
  background: rgba(130, 243, 177, 0.05) !important;
}

html body table.table-list tbody td {
  padding: 16px 20px !important;
  font-size: 14px !important;
  color: #21252C !important;
  vertical-align: middle !important;
}

html body table.table-list tbody tr:last-child td {
  border-bottom: none !important;
}

html body table.table-list tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px !important;
}

html body table.table-list tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px !important;
}

html body table.table-list a.border-left {
  border-left: 3px solid transparent !important;
  padding-left: 12px !important;
  display: inline-block !important;
  text-decoration: none !important;
  color: inherit !important;
}

html body table.table-list a.border-left:hover {
  text-decoration: none !important;
}

html body table.table-list .ticket-number {
  font-weight: 600 !important;
  color: #687A8F !important;
  margin-right: 8px !important;
  display: inline !important;
}

html body table.table-list .ticket-subject {
  color: #21252C !important;
  font-weight: 400 !important;
  display: inline !important;
}

html body table.table-list .ticket-subject.unread {
  font-weight: 600 !important;
  color: #21252C !important;
}

html body table.table-list tr:has(.unread) a.border-left {
  border-left-color: #82F3B1 !important;
}

/* Status labels */
html body table.table-list .label.status,
html body .label.status {
  display: inline-block !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: 1.5px solid !important;
}

html body table.table-list .label.status-active,
html body table.table-list .label.status-open,
html body .label.status-active,
html body .label.status-open {
  background: rgba(130, 243, 177, 0.15) !important;
  color: #118366 !important;
  border-color: #82F3B1 !important;
}

html body table.table-list .label.status-answered,
html body .label.status-answered {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #3B82F6 !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

html body table.table-list .label.status-closed,
html body .label.status-closed {
  background: rgba(104, 122, 143, 0.15) !important;
  color: #687A8F !important;
  border-color: rgba(104, 122, 143, 0.3) !important;
}

html body table.table-list .label.status-customer-reply,
html body table.table-list .label.status-customerreply,
html body .label.status-customer-reply,
html body .label.status-customerreply {
  background: rgba(255, 193, 7, 0.15) !important;
  color: #E89D11 !important;
  border-color: rgba(255, 193, 7, 0.3) !important;
}

html body table.table-list .label.status-on-hold,
html body table.table-list .label.status-onhold,
html body .label.status-on-hold,
html body .label.status-onhold {
  background: rgba(254, 54, 53, 0.15) !important;
  color: #FE3635 !important;
  border-color: rgba(254, 54, 53, 0.3) !important;
}

html body table.table-list .label.status-custom,
html body .label.status-custom {
  background: rgba(255, 255, 255, 0.5) !important;
}

/* Ticket reply form panel */
html body .panel.panel-collapsable {
  margin-bottom: 32px !important;
}

html body .panel.panel-collapsable .panel-heading {
  cursor: pointer !important;
  user-select: none !important;
}

html body .panel.panel-collapsable .panel-heading .collapse-icon {
  transition: transform 0.2s !important;
}

html body .panel.panel-collapsable.panel-collapsed .panel-heading .collapse-icon {
  transform: rotate(180deg) !important;
}

/* Let WHMCS control panel-body visibility via inline styles - don't override */
/* html body .panel.panel-collapsable .panel-body-collapsed {
  display: none !important;
} */

/* Ticket replies/messages */
html body .ticket-reply {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(236, 239, 242, 0.8) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
}

html body .ticket-reply.staff {
  background: rgba(130, 243, 177, 0.1) !important;
  border-color: rgba(130, 243, 177, 0.3) !important;
}

html body .ticket-reply .date {
  font-size: 13px !important;
  color: #687A8F !important;
  margin-bottom: 12px !important;
}

html body .ticket-reply .user {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(236, 239, 242, 0.6) !important;
  background: transparent !important;
}

html body .ticket-reply .user .name {
  font-weight: 600 !important;
  color: #21252C !important;
  font-size: 15px !important;
}

html body .ticket-reply .user .type {
  color: #687A8F !important;
  font-size: 13px !important;
  margin-left: auto !important;
}

html body .ticket-reply .message {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #21252C !important;
}

html body .ticket-reply.markdown-content .message {
  font-size: 15px !important;
  line-height: 1.7 !important;
}

html body .ticket-reply .attachments {
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(236, 239, 242, 0.6) !important;
}

html body .ticket-reply .attachments strong {
  font-size: 13px !important;
  color: #536276 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

html body .ticket-reply .attachments ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 0 0 !important;
}

html body .ticket-reply .attachments li {
  padding: 8px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body .ticket-reply .attachments li i {
  color: #687A8F !important;
}

html body .ticket-reply .attachments a {
  color: #118366 !important;
  text-decoration: none !important;
}

html body .ticket-reply .attachments a:hover {
  text-decoration: underline !important;
}

/* Requestor type labels */
html body .label.requestor-type-operator,
html body .label.requestor-type-owner {
  background: rgba(130, 243, 177, 0.2) !important;
  color: #118366 !important;
  border: 1px solid #82F3B1 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-left: 6px !important;
}

html body .label.requestor-type-authorizeduser,
html body .label.requestor-type-subaccount {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #3B82F6 !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-left: 6px !important;
}

html body .label.requestor-type-registereduser,
html body .label.requestor-type-guest {
  background: rgba(104, 122, 143, 0.15) !important;
  color: #687A8F !important;
  border: 1px solid rgba(104, 122, 143, 0.3) !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-left: 6px !important;
}

/* Ticket rating */
html body .rating,
html body .rating-done {
  margin-top: 16px !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

html body .rating .star,
html body .rating-done .star {
  width: 24px !important;
  height: 24px !important;
  display: inline-block !important;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23D6DAE1" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>') !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

html body .rating .star:hover,
html body .rating .star.active,
html body .rating-done .star.active {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2382F3B1" stroke="%23118366" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>') !important;
}

html body .rated {
  font-size: 13px !important;
  color: #118366 !important;
  font-weight: 500 !important;
  margin-left: 8px !important;
}

/* ===== TICKET VIEW PAGE STYLING ===== */

/* Alert banner for closed/open ticket status */
html body .alert.alert-warning {
  background: rgba(59, 130, 246, 0.1) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  color: #3B82F6 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  font-size: 14px !important;
  margin-bottom: 24px !important;
}

html body .alert.alert-success {
  background: rgba(61, 170, 63, 0.1) !important;
  border: 1px solid rgba(61, 170, 63, 0.2) !important;
  color: #3DAA3F !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  font-size: 14px !important;
}

/* Staff badge styling */
html body .ticket-reply .user .type {
  background: #82F3B1 !important;
  color: #21252C !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-left: auto !important;
}

/* User avatar icon */
html body .ticket-reply .user > i.fas.fa-user {
  width: 44px !important;
  height: 44px !important;
  background: rgba(214, 218, 225, 0.5) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #687A8F !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

/* Reply panel toggle styling */
html body .panel.panel-info.panel-collapsable {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 24px !important;
}

html body .panel.panel-info.panel-collapsable .panel-heading {
  background: rgba(130, 243, 177, 0.1) !important;
  border: 1px solid rgba(130, 243, 177, 0.25) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

html body .panel.panel-info.panel-collapsable .panel-heading:hover {
  background: rgba(130, 243, 177, 0.18) !important;
}

html body .panel.panel-info.panel-collapsable .panel-heading .panel-title {
  color: #118366 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

html body .panel.panel-info.panel-collapsable .panel-heading .panel-title i {
  color: #118366 !important;
}

html body .panel.panel-info.panel-collapsable .panel-heading .collapse-icon {
  color: #118366 !important;
}

html body .panel.panel-info.panel-collapsable .panel-body {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(236, 239, 242, 0.8) !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  padding: 24px !important;
  margin-top: -1px !important;
}

/* Reply form styling */
html body .panel.panel-info.panel-collapsable .form-control,
html body #frmReply .form-control {
  border: 1px solid rgba(214, 218, 225, 0.8) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.2s !important;
}

html body .panel.panel-info.panel-collapsable .form-control:focus,
html body #frmReply .form-control:focus {
  border-color: #82F3B1 !important;
  box-shadow: 0 0 0 3px rgba(130, 243, 177, 0.2) !important;
  background: white !important;
  outline: none !important;
}

html body #frmReply textarea.form-control {
  min-height: 150px !important;
  resize: vertical !important;
}

/* ===== TICKET REPLY CARD - MATCHING PROTOTYPE ===== */

html body .ticket-reply {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(236, 239, 242, 0.8) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
}

html body .ticket-reply.staff {
  background: rgba(130, 243, 177, 0.08) !important;
  border-color: rgba(130, 243, 177, 0.25) !important;
}

/* Header row with avatar, user info, and date */
html body .ticket-reply .user {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: calc(100% - 150px) !important; /* Leave room for absolute positioned date */
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid rgba(236, 239, 242, 0.6) !important;
  background: transparent !important;
}

html body .ticket-reply.staff .user {
  border-bottom-color: rgba(130, 243, 177, 0.2) !important;
}

/* Avatar icon - circle with user icon */
html body .ticket-reply .user > i.fas.fa-user,
html body .ticket-reply .user > i.fa-user {
  width: 44px !important;
  height: 44px !important;
  background: rgba(214, 218, 225, 0.6) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #687A8F !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

html body .ticket-reply.staff .user > i.fas.fa-user,
html body .ticket-reply.staff .user > i.fa-user {
  background: rgba(130, 243, 177, 0.3) !important;
  color: #118366 !important;
}

/* Author name */
html body .ticket-reply .user .name {
  font-weight: 600 !important;
  color: #21252C !important;
  font-size: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* Staff badge - green pill - ONLY for staff replies */
/* Flows next to name/Operator badge, NOT pushed to right (to avoid overlapping date) */
html body .ticket-reply.staff .user .type {
  background: #82F3B1 !important;
  color: #21252C !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  margin-left: 0 !important; /* Don't push to right - stay next to name */
  flex-shrink: 0 !important;
}

/* For non-staff replies, .type contains email - hide it */
html body .ticket-reply:not(.staff) .user .type {
  display: none !important;
}

/* Date - position in top right of card */
html body .ticket-reply .date {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  font-size: 13px !important;
  color: #687A8F !important;
  order: -1 !important; /* Keep it first in DOM but visually positioned */
}

/* Message content - below header */
html body .ticket-reply .message {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Message content formatting */
html body .ticket-reply .message p {
  margin-bottom: 16px !important;
  line-height: 1.7 !important;
  color: #21252C !important;
}

html body .ticket-reply .message p:last-child {
  margin-bottom: 0 !important;
}

html body .ticket-reply .message a {
  color: #118366 !important;
}

html body .ticket-reply .message h4,
html body .ticket-reply .message h5 {
  margin: 20px 0 12px 0 !important;
  font-weight: 600 !important;
  color: #21252C !important;
}

html body .ticket-reply .message h4:first-child,
html body .ticket-reply .message h5:first-child {
  margin-top: 0 !important;
}

/* ===== SIDEBAR PANELS - COMPREHENSIVE STYLING ===== */

/* Base panel styling */
html body .panel.panel-sidebar {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(236, 239, 242, 0.8) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(33, 37, 44, 0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}

/* Panel header */
html body .panel.panel-sidebar .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid rgba(236, 239, 242, 0.8) !important;
  padding: 16px 20px !important;
}

html body .panel.panel-sidebar .panel-heading .panel-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #21252C !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body .panel.panel-sidebar .panel-heading .panel-title i:first-child {
  color: #687A8F !important;
  font-size: 14px !important;
}

html body .panel.panel-sidebar .panel-heading .panel-minimise {
  color: #687A8F !important;
  font-size: 12px !important;
}

/* List group (used for menu items and ticket details) */
html body .panel.panel-sidebar .list-group {
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

html body .panel.panel-sidebar .list-group-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(236, 239, 242, 0.6) !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  color: #536276 !important;
  transition: background 0.2s !important;
}

html body .panel.panel-sidebar .list-group-item:last-child {
  border-bottom: none !important;
}

html body .panel.panel-sidebar .list-group-item:hover {
  background: rgba(130, 243, 177, 0.08) !important;
  color: #21252C !important;
}

html body .panel.panel-sidebar .list-group-item.active {
  background: rgba(130, 243, 177, 0.15) !important;
  color: #118366 !important;
}

html body .panel.panel-sidebar .list-group-item i.sidebar-menu-item-icon {
  color: #687A8F !important;
  width: 20px !important;
  margin-right: 10px !important;
}

/* Ticket details children (info rows) */
html body .panel.panel-sidebar .list-group-item.ticket-details-children {
  padding: 12px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

html body .panel.panel-sidebar .list-group-item.ticket-details-children:hover {
  background: transparent !important;
}

html body .panel.panel-sidebar .list-group-item .title {
  font-size: 11px !important;
  color: #687A8F !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 500 !important;
  display: block !important;
  margin-bottom: 4px !important;
  width: 100% !important;
}

/* Hide the br tags that separate title from value */
html body .panel.panel-sidebar .list-group-item.ticket-details-children br {
  display: none !important;
}

/* Value text styling */
html body .panel.panel-sidebar .ticket-requestor-name {
  font-size: 14px !important;
  color: #21252C !important;
  font-weight: 500 !important;
}

/* Generic value text in ticket details */
html body .panel.panel-sidebar .list-group-item.ticket-details-children {
  font-size: 14px !important;
  color: #21252C !important;
  line-height: 1.4 !important;
}

/* Sidebar action buttons - stacked vertically like prototype */
/* Override Bootstrap grid to stack buttons */
html body .panel.panel-sidebar .row:has(.col-button-left) {
  display: flex !important;
  flex-direction: column !important;
  padding: 16px 20px !important;
  gap: 12px !important;
}

html body .panel.panel-sidebar .col-6.col-button-left,
html body .panel.panel-sidebar .col-6.col-button-right,
html body .panel.panel-sidebar .col-xs-6.col-button-left,
html body .panel.panel-sidebar .col-xs-6.col-button-right {
  width: 100% !important;
  padding: 0 !important;
  flex: none !important;
}

html body .panel.panel-sidebar .btn.btn-block,
html body .col-md-3 > .btn.btn-block {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
}

/* Reply button (green - primary style) */
html body .btn.btn-success.btn-block {
  background: #82F3B1 !important;
  border: none !important;
  color: #21252C !important;
  box-shadow: 0 4px 12px rgba(130, 243, 177, 0.3) !important;
}

html body .btn.btn-success.btn-block:hover {
  background: #45E394 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(130, 243, 177, 0.4) !important;
}

/* Close button (gray outline - secondary style) */
html body .btn.btn-danger.btn-block {
  background: transparent !important;
  border: 1px solid rgba(214, 218, 225, 0.8) !important;
  color: #536276 !important;
  box-shadow: none !important;
}

html body .btn.btn-danger.btn-block:hover {
  background: rgba(246, 247, 249, 0.8) !important;
  border-color: rgba(214, 218, 225, 1) !important;
}

/* Disabled state for Close/Closed button */
html body .btn.btn-danger.btn-block[disabled] {
  background: rgba(236, 239, 242, 0.5) !important;
  border: 1px solid rgba(214, 218, 225, 0.6) !important;
  color: #8797A9 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Status badges in sidebar */
html body .label.status-closed {
  background: rgba(236, 239, 242, 0.8) !important;
  color: #536276 !important;
  border: none !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

html body .label.status-open {
  background: rgba(61, 170, 63, 0.15) !important;
  color: #3DAA3F !important;
  border: none !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

html body .label.status-answered {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #3B82F6 !important;
}

/* Priority badges */
html body .label.priority-low {
  background: rgba(61, 170, 63, 0.15) !important;
  color: #3DAA3F !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

html body .label.priority-medium {
  background: rgba(232, 157, 17, 0.15) !important;
  color: #E89D11 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

html body .label.priority-high {
  background: rgba(254, 54, 53, 0.15) !important;
  color: #FE3635 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* Operator/Owner badge - green outline style */
html body .label.requestor-type-operator,
html body .label.requestor-type-owner {
  background: transparent !important;
  color: #118366 !important;
  border: 1.5px solid #82F3B1 !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  margin-left: 8px !important;
}

/* CC Recipients section */

/* Hide the template/clone row that shows remove icon when empty */
html body #ccCloneRow,
html body .w-hidden,
html body .list-group-item.ticket-cc-item.w-hidden,
html body [menuitemname="emptyTicketCCRow"] {
  display: none !important;
}

/* Hide the delete icon link when there are no actual CC recipients */
html body .panel.panel-sidebar .panel-footer #ccCloneRow {
  display: none !important;
}

html body .panel.panel-sidebar .list-group-item .cc-email-remove,
html body .panel.panel-sidebar .delete-cc-email {
  color: #FE3635 !important;
  font-size: 16px !important;
}

html body .panel.panel-sidebar .input-group {
  display: flex !important;
  gap: 8px !important;
  padding: 0 20px 16px 20px !important;
}

html body .panel.panel-sidebar .input-group .form-control {
  flex: 1 !important;
  border: 1px solid rgba(214, 218, 225, 0.8) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  background: rgba(255, 255, 255, 0.6) !important;
}

html body .panel.panel-sidebar .input-group .form-control:focus {
  border-color: #82F3B1 !important;
  box-shadow: 0 0 0 3px rgba(130, 243, 177, 0.2) !important;
  outline: none !important;
  background: white !important;
}

html body .panel.panel-sidebar .input-group .input-group-btn {
  width: auto !important;
}

html body .panel.panel-sidebar .input-group .btn,
html body #btnAddCcEmail {
  background: #82F3B1 !important;
  color: #21252C !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

html body .panel.panel-sidebar .input-group .btn:hover,
html body #btnAddCcEmail:hover {
  background: #45E394 !important;
}

/* Mobile responsive for tickets */
@media (max-width: 768px) {
  html body table.table-list {
    display: block !important;
    overflow-x: auto !important;
  }

  html body table.table-list thead th,
  html body table.table-list tbody td {
    padding: 12px 14px !important;
    font-size: 13px !important;
  }

  html body .ticket-reply {
    padding: 16px !important;
    flex-direction: column !important;
  }

  html body .ticket-reply .date {
    position: static !important;
    margin-bottom: 12px !important;
  }

  html body .ticket-reply .message {
    font-size: 14px !important;
  }

  /* Mobile ticket reply - user section alignment */
  html body .ticket-reply .user {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
    background: transparent !important;
  }

  html body .ticket-reply .user .user-details {
    flex: 1 !important;
    min-width: 0 !important;
  }

  html body .ticket-reply .user .user-details .name {
    font-size: 14px !important;
  }

  /* Staff/Owner badges on mobile */
  html body .ticket-reply .user .type,
  html body .ticket-reply .user .label.requestor-type-operator {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }

  /* Avatar smaller on mobile */
  html body .ticket-reply .user .media-object,
  html body .ticket-reply .user img {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ============================================
   MOBILE - Ticket List Table Fixes (768px)
   Override DataTables responsive JS inline styles
   ============================================ */

@media (max-width: 768px) {
  /* Hide the "+" expand icon from DataTables responsive */
  html body #tableTicketsList tbody td:first-child::before {
    display: none !important;
    content: none !important;
  }

  /* DataTables wrapper - tight layout, no gaps */
  html body .dataTables_wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Search box - full width at top */
  html body .dataTables_filter {
    order: 1 !important;
    width: 100% !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    text-align: left !important;
    float: none !important;
  }

  html body .dataTables_filter label {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
  }

  html body .dataTables_filter input[type="search"] {
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(214, 218, 225, 0.8) !important;
    background: rgba(255, 255, 255, 0.8) !important;
    margin: 0 !important;
  }

  html body .dataTables_filter input[type="search"]:focus {
    border-color: #82F3B1 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(130, 243, 177, 0.2) !important;
  }

  /* Info text (Showing X to Y) - compact */
  html body .dataTables_info {
    order: 2 !important;
    font-size: 11px !important;
    color: #687A8F !important;
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
    float: none !important;
    text-align: left !important;
  }

  /* Table container - no extra margins */
  html body .table-container {
    order: 3 !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* FORCE column visibility - override DataTables JS inline styles */
  /* Show: Department, Subject, Status */
  /* Hide: Last Updated */
  html body #tableTicketsList thead th:nth-child(1),
  html body #tableTicketsList tbody td:nth-child(1) {
    display: table-cell !important;
    width: 22% !important;
  }

  html body #tableTicketsList thead th:nth-child(2),
  html body #tableTicketsList tbody td:nth-child(2) {
    display: table-cell !important;
    width: 53% !important;
  }

  html body #tableTicketsList thead th:nth-child(3),
  html body #tableTicketsList tbody td:nth-child(3) {
    display: table-cell !important;
    width: 25% !important;
  }

  html body #tableTicketsList thead th:nth-child(4),
  html body #tableTicketsList tbody td:nth-child(4) {
    display: none !important;
    width: 0 !important;
  }

  /* Table itself - fit to container, no overflow */
  html body #tableTicketsList {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 12px !important;
    table-layout: fixed !important;
  }

  /* Table headers - compact */
  html body #tableTicketsList thead th {
    padding: 8px 6px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  /* Table cells - compact */
  html body #tableTicketsList tbody td {
    padding: 8px 6px !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Department cell - smaller text */
  html body #tableTicketsList tbody td:first-child {
    font-size: 10px !important;
  }

  /* Ticket number and subject - stacked */
  html body #tableTicketsList tbody td a.border-left {
    padding-left: 0 !important;
    border-left: none !important;
    display: block !important;
  }

  html body #tableTicketsList tbody td .ticket-number {
    font-size: 10px !important;
    display: block !important;
    margin-bottom: 1px !important;
    color: #687A8F !important;
  }

  html body #tableTicketsList tbody td .ticket-subject {
    font-size: 11px !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Status badge - compact */
  html body #tableTicketsList .label.status {
    font-size: 8px !important;
    padding: 2px 4px !important;
    white-space: nowrap !important;
  }

  /* Pagination - compact, minimal margin */
  html body .dataTables_paginate {
    order: 4 !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    margin: 8px 0 6px 0 !important;
    padding: 0 !important;
    float: none !important;
    text-align: center !important;
  }

  html body .dataTables_paginate .paginate_button {
    padding: 5px 8px !important;
    font-size: 11px !important;
    min-width: 28px !important;
    margin: 0 !important;
  }

  /* Show entries dropdown - compact */
  html body .dataTables_length {
    order: 5 !important;
    font-size: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    text-align: left !important;
  }

  html body .dataTables_length label {
    margin: 0 !important;
  }

  html body .dataTables_length select {
    padding: 3px 6px !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    margin: 0 3px !important;
  }
}

/* ============================================
   MOBILE - Small screens (max-width: 480px)
   Just Subject + Status columns
   ============================================ */

@media (max-width: 480px) {
  /* FORCE: Hide Department (1st) and Last Updated (4th) */
  /* FORCE: Show Subject (2nd) and Status (3rd) */
  html body #tableTicketsList thead th:nth-child(1),
  html body #tableTicketsList tbody td:nth-child(1) {
    display: none !important;
    width: 0 !important;
  }

  html body #tableTicketsList thead th:nth-child(2),
  html body #tableTicketsList tbody td:nth-child(2) {
    display: table-cell !important;
    width: 70% !important;
  }

  html body #tableTicketsList thead th:nth-child(3),
  html body #tableTicketsList tbody td:nth-child(3) {
    display: table-cell !important;
    width: 30% !important;
  }

  html body #tableTicketsList thead th:nth-child(4),
  html body #tableTicketsList tbody td:nth-child(4) {
    display: none !important;
    width: 0 !important;
  }

  /* Table - fit within screen */
  html body #tableTicketsList {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  /* Cells - tighter */
  html body #tableTicketsList tbody td {
    padding: 6px 4px !important;
  }

  /* Ticket subject - allow wrapping */
  html body #tableTicketsList tbody td .ticket-number {
    font-size: 9px !important;
  }

  html body #tableTicketsList tbody td .ticket-subject {
    font-size: 11px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  /* Smaller status badges */
  html body #tableTicketsList .label.status {
    font-size: 7px !important;
    padding: 2px 4px !important;
  }

  /* Pagination - tighter */
  html body .dataTables_paginate {
    margin: 6px 0 4px 0 !important;
  }

  html body .dataTables_paginate .paginate_button {
    padding: 4px 6px !important;
    font-size: 10px !important;
    min-width: 24px !important;
  }

  /* Ticket detail - compact */
  html body .ticket-reply {
    padding: 14px !important;
  }

  html body .ticket-reply .date {
    font-size: 11px !important;
  }

  html body .ticket-reply .user .user-details .name {
    font-size: 13px !important;
  }

  html body .ticket-reply .message {
    font-size: 13px !important;
  }
}


/* ============================================
   YOUR RECENT TICKETS - Sidebar Panel Fix
   ============================================ */

/* Recent tickets panel - contain overflow */
html body .sidebar .panel.panel-sidebar .list-group {
  overflow: hidden !important;
}

html body .sidebar .panel.panel-sidebar .list-group a.list-group-item {
  overflow: hidden !important;
  max-width: 100% !important;
}

/* Recent ticket item container - MUST be constrained */
html body .sidebar .panel.panel-sidebar .list-group a.list-group-item div.recent-ticket {
  overflow: hidden !important;
  width: 100% !important;
  max-width: 230px !important;
  box-sizing: border-box !important;
}

/* Ticket subject - truncate with ellipsis */
html body .sidebar .panel.panel-sidebar .list-group a.list-group-item div.recent-ticket div.truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Status/time row */
html body .sidebar .panel.panel-sidebar .list-group a.list-group-item div.recent-ticket small {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Fallback - direct class targeting */
div.recent-ticket {
  overflow: hidden !important;
  max-width: 230px !important;
}


/* ============================================
   ACCOUNT PAGES - Forms & Inputs
   ============================================ */

/* Form inputs and selects - glass style */
html body .form-control,
html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="tel"],
html body input[type="number"],
html body input[type="url"],
html body select.form-control,
html body textarea.form-control {
  padding: 12px 16px !important;
  font-size: 14px !important;
  border: 1px solid #D6DAE1 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  color: #1f2937 !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
  height: auto !important;
}

html body .form-control:focus,
html body input[type="text"]:focus,
html body input[type="email"]:focus,
html body input[type="password"]:focus,
html body input[type="tel"]:focus,
html body input[type="number"]:focus,
html body input[type="url"]:focus,
html body select.form-control:focus,
html body textarea.form-control:focus {
  border-color: #82F3B1 !important;
  box-shadow: 0 0 0 3px rgba(130, 243, 177, 0.2) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  outline: none !important;
}

html body .form-control::placeholder {
  color: #7A8A9C !important;
}

/* Select dropdown arrow */
html body select.form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23536276'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;
  padding-right: 40px !important;
  cursor: pointer !important;
}

/* Form labels */
html body .control-label,
html body label.control-label,
html body .form-group label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #4b5563 !important;
  margin-bottom: 8px !important;
}

html body .control-label .required,
html body .form-group label .required {
  color: #FE3635 !important;
}

/* Form groups */
html body .form-group {
  margin-bottom: 20px !important;
}

/* Section titles in forms */
html body .panel-default > .panel-heading,
html body .panel-body h3,
html body .client-home-panels h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #D6DAE1 !important;
}

/* Input groups (phone with country code, etc) */
html body .input-group {
  display: flex !important;
  gap: 8px !important;
}

html body .input-group .input-group-addon {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid #D6DAE1 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  color: #4b5563 !important;
}

/* International Phone Input (intl-tel-input) - older version class names */
html body .intl-tel-input {
  display: block !important;
  width: 100% !important;
}

html body .intl-tel-input .flag-container {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
}

html body .intl-tel-input .selected-flag {
  background: transparent !important;
  border-radius: 12px 0 0 12px !important;
  padding: 0 8px 0 12px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

html body .intl-tel-input .selected-flag:hover,
html body .intl-tel-input .selected-flag:focus {
  background: rgba(130, 243, 177, 0.1) !important;
}

html body .intl-tel-input input[type="tel"],
html body .intl-tel-input .form-control,
html body .intl-tel-input input#inputPhone {
  padding-left: 105px !important;
  width: 100% !important;
}

/* Fix the country code display */
html body .intl-tel-input .selected-dial-code {
  margin-left: 6px !important;
  color: #4b5563 !important;
}

html body .intl-tel-input .country-list {
  background: white !important;
  border: 1px solid #D6DAE1 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(33, 37, 44, 0.12) !important;
  margin-top: 4px !important;
  max-height: 250px !important;
  z-index: 1000 !important;
}

html body .intl-tel-input .country {
  padding: 10px 12px !important;
  transition: background 0.2s !important;
}

html body .intl-tel-input .country:hover,
html body .intl-tel-input .country.active {
  background: rgba(130, 243, 177, 0.1) !important;
}

html body .intl-tel-input .divider {
  border-color: #ECEFF2 !important;
}

/* ============================================
   BUTTONS - Account Pages
   ============================================ */

html body .btn-primary,
html body .btn-success,
html body button[type="submit"].btn {
  background: #82F3B1 !important;
  color: #21252C !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(130, 243, 177, 0.3) !important;
  transition: all 0.2s !important;
}

html body .btn-primary:hover,
html body .btn-success:hover,
html body button[type="submit"].btn:hover {
  background: #45E394 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(130, 243, 177, 0.4) !important;
}

html body .btn-default,
html body .btn-secondary {
  background: transparent !important;
  color: #4b5563 !important;
  border: 1px solid #D6DAE1 !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
}

html body .btn-default:hover,
html body .btn-secondary:hover {
  background: #F6F7F9 !important;
  border-color: #9ca3af !important;
}

html body .btn-danger {
  background: #FE3635 !important;
  color: white !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

html body .btn-danger:hover {
  background: #E52F2E !important;
}

/* Small buttons */
html body .btn-sm,
html body .btn-xs {
  padding: 8px 12px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

/* ============================================
   USER MANAGEMENT PAGE
   ============================================ */

/* User cards */
html body .user-list .user-item,
html body .client-users-list .panel,
html body .account-users .user-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid #ECEFF2 !important;
  border-radius: 12px !important;
  margin-bottom: 16px !important;
  transition: all 0.2s !important;
}

html body .user-list .user-item:hover,
html body .client-users-list .panel:hover,
html body .account-users .user-row:hover {
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 8px 32px rgba(33, 37, 44, 0.08) !important;
}

/* User badges/labels */
html body .label.requestor-type-owner,
html body .badge-owner {
  background: #D4FCDF !important;
  color: #118366 !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(130, 243, 177, 0.3) !important;
}

html body .label.requestor-type-authorizeduser,
html body .badge-admin {
  background: #E8F1FD !important;
  color: #3B82F6 !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html body .label.requestor-type-operator,
html body .badge-operator {
  background: #FFF5D6 !important;
  color: #E89D11 !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ============================================
   TABLES - Payment Methods, etc
   ============================================ */

html body .table-responsive {
  border-radius: 12px !important;
  border: 1px solid #D6DAE1 !important;
  overflow: hidden !important;
}

html body .table {
  margin-bottom: 0 !important;
}

html body .table > thead > tr > th {
  background: #F6F7F9 !important;
  padding: 16px !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
  border-bottom: 1px solid #D6DAE1 !important;
  font-size: 14px !important;
}

html body .table > tbody > tr > td {
  padding: 16px !important;
  border-bottom: 1px solid #ECEFF2 !important;
  color: #1f2937 !important;
  vertical-align: middle !important;
}

html body .table > tbody > tr:last-child > td {
  border-bottom: none !important;
}

html body .table > tbody > tr:hover > td {
  background: rgba(130, 243, 177, 0.05) !important;
}

/* Status badges in tables */
html body .label.status-active,
html body .status.status-active {
  background: #DDFADE !important;
  color: #3DAA3F !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

html body .label.status-expired,
html body .status.status-expired {
  background: #FFE6E6 !important;
  color: #FE3635 !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

html body .label.badge-default,
html body .badge-default {
  background: #D4FCDF !important;
  color: #118366 !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* ============================================
   RADIO & CHECKBOX OPTIONS
   ============================================ */

html body .radio label,
html body .checkbox label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  transition: background-color 0.2s !important;
  margin: 0 !important;
}

html body .radio label:hover,
html body .checkbox label:hover {
  background: rgba(130, 243, 177, 0.1) !important;
}

html body .radio input[type="radio"],
html body .checkbox input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #118366 !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

/* ============================================
   ALERTS & NOTIFICATIONS
   ============================================ */

html body .alert {
  padding: 16px 20px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}

html body .alert-info {
  background: #E8F1FD !important;
  color: #3B82F6 !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

html body .alert-success {
  background: #DDFADE !important;
  color: #3DAA3F !important;
  border: 1px solid rgba(61, 170, 63, 0.2) !important;
}

html body .alert-warning {
  background: #FFF5D6 !important;
  color: #E89D11 !important;
  border: 1px solid rgba(232, 157, 17, 0.2) !important;
}

html body .alert-danger {
  background: #FFE6E6 !important;
  color: #FE3635 !important;
  border: 1px solid rgba(254, 54, 53, 0.2) !important;
}

/* ============================================
   CONTACT SELECTOR
   ============================================ */

html body .contact-selector,
html body .sub-nav-container {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 32px !important;
  padding: 20px !important;
  background: rgba(255, 255, 255, 0.4) !important;
  border: 1px solid #D6DAE1 !important;
  border-radius: 12px !important;
  align-items: center !important;
}

/* ============================================
   PANEL STYLING FOR ACCOUNT PAGES
   ============================================ */

html body .main-content .panel.panel-default {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html body .main-content .panel.panel-default > .panel-heading {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
}

html body .main-content .panel.panel-default > .panel-body {
  padding: 0 !important;
}

div.recent-ticket div.truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}


/* ============================================
   SUBMIT TICKET - Step One (Department Selection)
   ============================================ */

/* Department cards container - 3 column grid */
html body .main-content > .row > .col-sm-10 > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin: 0 !important;
  justify-content: center !important;
}

/* Department card - compact square style */
html body .main-content > .row > .col-sm-10 > .row > .col-md-6.margin-bottom {
  flex: 0 0 160px !important;
  width: 160px !important;
  max-width: 160px !important;
  padding: 20px 16px !important;
  margin: 0 !important;
  float: none !important;
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(33, 37, 44, 0.06) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
}

html body .main-content > .row > .col-sm-10 > .row > .col-md-6.margin-bottom:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 6px 24px rgba(33, 37, 44, 0.1), 0 4px 12px rgba(130, 243, 177, 0.15) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(130, 243, 177, 0.4) !important;
}

/* Department name - stacked vertically */
html body .main-content > .row > .col-sm-10 > .row > .col-md-6.margin-bottom p:first-child {
  margin: 0 0 8px 0 !important;
}

html body .main-content > .row > .col-sm-10 > .row > .col-md-6.margin-bottom p:first-child strong a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--baseline-950) !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  transition: color 0.2s ease !important;
}

html body .main-content > .row > .col-sm-10 > .row > .col-md-6.margin-bottom p:first-child strong a:hover {
  color: var(--accent-700) !important;
}

/* Department icon - centered */
html body .main-content > .row > .col-sm-10 > .row > .col-md-6.margin-bottom p:first-child strong a i {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--accent-300) 0%, var(--accent-400) 100%) !important;
  border-radius: 10px !important;
  color: var(--baseline-950) !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

/* Department description - centered below */
html body .main-content > .row > .col-sm-10 > .row > .col-md-6.margin-bottom p:last-child {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--baseline-600) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

/* Hide the Bootstrap clearfix */
html body .main-content > .row > .col-sm-10 > .row > .clearfix {
  display: none !important;
}

/* Mobile responsive - 2 columns on small screens */
@media (max-width: 540px) {
  html body .main-content > .row > .col-sm-10 > .row > .col-md-6.margin-bottom {
    flex: 0 0 140px !important;
    width: 140px !important;
    max-width: 140px !important;
  }
}


/* ============================================
   SUBMIT TICKET - Step Two (Ticket Form)
   ============================================ */

/* Form row spacing */
html body .main-content form[action*="submitticket.php"] .row {
  margin-bottom: 16px !important;
}

html body .main-content form[action*="submitticket.php"] .row:last-child {
  margin-bottom: 0 !important;
}

/* Form group styling */
html body .main-content form[action*="submitticket.php"] .form-group {
  margin-bottom: 0 !important;
}

/* Labels */
html body .main-content form[action*="submitticket.php"] label {
  font-weight: 500 !important;
  color: var(--baseline-700) !important;
  font-size: 13px !important;
  margin-bottom: 6px !important;
}

/* Text inputs and selects glass styling enhancement */
html body .main-content form[action*="submitticket.php"] .form-control {
  background: rgba(255, 255, 255, 0.8) !important;
  height: auto !important;
  min-height: 44px !important;
}

/* Disabled inputs */
html body .main-content form[action*="submitticket.php"] .form-control.disabled,
html body .main-content form[action*="submitticket.php"] .form-control:disabled,
html body .main-content form[action*="submitticket.php"] .form-control[disabled] {
  background: rgba(246, 247, 249, 0.8) !important;
  color: var(--baseline-600) !important;
  cursor: not-allowed !important;
}

/* Textarea message box */
html body .main-content form[action*="submitticket.php"] textarea.form-control {
  min-height: 200px !important;
  resize: vertical !important;
}

/* File upload styling */
html body .main-content form[action*="submitticket.php"] input[type="file"].form-control {
  padding: 10px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border-style: dashed !important;
}

/* Attachments helper text */
html body .main-content form[action*="submitticket.php"] .ticket-attachments-message {
  font-size: 12px !important;
  color: var(--baseline-500) !important;
  margin-top: 8px !important;
}

/* Add more attachment button */
html body .main-content form[action*="submitticket.php"] button[onclick="extraTicketAttachment()"] {
  height: 44px !important;
}

/* Auto answer suggestions well */
html body .main-content #autoAnswerSuggestions {
  background: rgba(232, 241, 253, 0.6) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

/* Submit button section */
html body .main-content form[action*="submitticket.php"] p.text-center {
  margin-top: 24px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(214, 218, 225, 0.5) !important;
}

/* Submit button enhancement */
html body .main-content form[action*="submitticket.php"] #openTicketSubmit {
  padding: 12px 32px !important;
  font-size: 15px !important;
  min-width: 160px !important;
}

/* Cancel button spacing */
html body .main-content form[action*="submitticket.php"] .btn-default {
  margin-left: 12px !important;
}


/* ============================================
   CLIENT AREA HOME PAGE
   ============================================ */

/* ===== STATS TILES ===== */
html body .tiles {
  margin-bottom: 24px !important;
}

html body .tiles .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -8px !important;
}

html body .tiles .tile {
  padding: 0 8px !important;
  margin-bottom: 16px !important;
  width: 25% !important;
  float: none !important;
  background: transparent !important;
}

html body .tiles .tile a {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  background: white !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  border: 1px solid var(--baseline-100) !important;
  box-shadow: 0 2px 8px rgba(33, 37, 44, 0.04) !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
  min-height: 80px !important;
}

html body .tiles .tile a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(33, 37, 44, 0.08) !important;
}

/* Stat number - top left */
html body .tiles .tile .stat {
  grid-column: 1 !important;
  grid-row: 1 !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  color: var(--baseline-950) !important;
  line-height: 1 !important;
}

/* Stat title - bottom left */
html body .tiles .tile .title {
  grid-column: 1 !important;
  grid-row: 2 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--baseline-600) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-top: 4px !important;
}

/* Icon - spans both rows on right */
html body .tiles .tile .icon {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .tiles .tile .icon i {
  font-size: 32px !important;
  color: var(--baseline-400) !important;
  opacity: 0.5 !important;
}

/* Highlight bar at bottom */
html body .tiles .tile .highlight {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  border-radius: 0 0 12px 12px !important;
  grid-column: 1 / -1 !important;
}

/* Color accents for highlight bars */
html body .tiles .tile .highlight.bg-color-blue {
  background: var(--accent-300) !important;
}

html body .tiles .tile .highlight.bg-color-green {
  background: var(--warning-500) !important;
}

html body .tiles .tile .highlight.bg-color-red {
  background: var(--info-500) !important;
}

html body .tiles .tile .highlight.bg-color-gold {
  background: var(--success-500) !important;
}

/* ===== KNOWLEDGE BASE SEARCH ===== */
html body .home-kb-search {
  position: relative !important;
  margin-bottom: 24px !important;
}

html body .home-kb-search .form-control {
  width: 100% !important;
  padding: 16px 20px !important;
  padding-left: 48px !important;
  font-size: 15px !important;
  border: 1px solid var(--baseline-200) !important;
  border-radius: 12px !important;
  background: white !important;
  color: var(--baseline-950) !important;
  box-shadow: 0 2px 8px rgba(33, 37, 44, 0.04) !important;
  height: auto !important;
  transition: all 0.2s ease !important;
}

html body .home-kb-search .form-control::placeholder {
  color: var(--baseline-500) !important;
}

html body .home-kb-search .form-control:focus {
  border-color: var(--accent-300) !important;
  box-shadow: 0 0 0 3px rgba(130, 243, 177, 0.2) !important;
  outline: none !important;
}

/* Search icon - position existing <i> element inside input */
html body .home-kb-search {
  position: relative !important;
}

html body .home-kb-search i.fa-search,
html body .home-kb-search i.fas.fa-search {
  position: absolute !important;
  left: 33px !important; /* 15px Bootstrap col padding + 18px from input edge */
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 16px !important;
  color: var(--baseline-400) !important;
  pointer-events: none !important;
  z-index: 10 !important;
  margin: 0 !important; /* Reset theme's -30px top margin and 20px left margin */
}

/* ===== CLIENT HOME PANELS ===== */
/* Remove card-like styling from the container - VERY SPECIFIC to override theme */
html body .main-content .client-home-panels,
html body .col-md-9 .client-home-panels,
html body div.client-home-panels,
.client-home-panels {
  margin-top: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Row wrapper - flex layout, no styling */
html body .client-home-panels > .row,
html body .client-home-panels .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -10px !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html body .client-home-panels .col-sm-6 {
  padding: 0 10px !important;
  margin-bottom: 20px !important;
  width: 50% !important;
  flex: 0 0 50% !important;
}

/* Make col-sm-12 with Services panel behave like col-sm-6 (side by side with tickets) */
html body .client-home-panels .col-sm-12:has(.panel) {
  padding: 0 10px !important;
  margin-bottom: 20px !important;
  width: 50% !important;
  flex: 0 0 50% !important;
}

/* Hide empty col-sm-6 (no panel inside) */
html body .client-home-panels .col-sm-6:not(:has(.panel)) {
  display: none !important;
}

html body .client-home-panels .col-sm-12 {
  padding: 0 10px !important;
}

/* Panel card styling - explicit colors for reliability */
html body .client-home-panels .panel,
html body .client-home-panels .panel.panel-default,
html body .client-home-panels #servicesPanel,
html body .client-home-panels #ticketsPanel {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #ECEFF2 !important;
  box-shadow: 0 2px 8px rgba(33, 37, 44, 0.06) !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
  height: 100% !important;
}

/* Panel header */
html body .client-home-panels .panel-heading,
html body .client-home-panels .panel.panel-default .panel-heading {
  background: #F6F7F9 !important;
  border-bottom: 1px solid #ECEFF2 !important;
  padding: 12px 16px !important;
  margin: 0 !important; /* Remove bottom margin that causes white space */
}

/* Panel title - use flex with proper ordering */
html body .client-home-panels .panel-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* Title icon */
html body .client-home-panels .panel-title > i {
  color: #687A8F !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
}

/* Pull-right button - push to end using flex order */
html body .client-home-panels .panel-title .pull-right {
  float: none !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  order: 1 !important; /* Push to end regardless of DOM order */
}

html body .client-home-panels .panel-title .btn {
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #118366 !important;
  border: none !important;
  white-space: nowrap !important;
}

html body .client-home-panels .panel-title .btn:hover {
  background: rgba(130, 243, 177, 0.1) !important;
}

html body .client-home-panels .panel-title .btn i {
  margin-right: 4px !important;
}

/* Panel body - minimal padding, content should fill space */
html body .client-home-panels .panel-body {
  padding: 0 !important;
  color: #4B5563 !important;
  font-size: 14px !important;
}

/* Panel body when it contains text (no services message) */
html body .client-home-panels .panel-body > p {
  padding: 16px !important;
  margin: 0 !important;
}

html body .client-home-panels .panel-body a {
  color: #118366 !important;
  text-decoration: none !important;
}

html body .client-home-panels .panel-body a:hover {
  text-decoration: underline !important;
}

/* Services table - remove extra spacing */
html body .client-home-panels .panel-body > .table-responsive,
html body .client-home-panels .panel-body > table {
  margin: 0 !important;
}

html body .client-home-panels .panel-body table {
  margin: 0 !important;
  width: 100% !important;
}

html body .client-home-panels .panel-body table td,
html body .client-home-panels .panel-body table th {
  padding: 12px 16px !important;
  vertical-align: middle !important;
}

/* Services table column widths - status badge should fit content, title expands */
html body .client-home-panels .panel-body table td:first-child {
  width: 1% !important; /* Shrink to fit content (status badge) */
  white-space: nowrap !important;
  padding-right: 8px !important;
}

html body .client-home-panels .panel-body table td:nth-child(2) {
  width: auto !important; /* Product name - take remaining space */
}

html body .client-home-panels .panel-body table td:last-child {
  width: 1% !important; /* Shrink to fit content (View Details button) */
  white-space: nowrap !important;
  text-align: right !important;
}

/* Panel list group (tickets, etc) - FULL WIDTH */
html body .client-home-panels .list-group {
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* List items - block display, full width, proper layout */
html body .client-home-panels .list-group-item {
  display: block !important;
  width: 100% !important;
  padding: 12px 16px !important;
  border: none !important;
  border-bottom: 1px solid #ECEFF2 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1F2937 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
  box-sizing: border-box !important;
}

html body .client-home-panels .list-group-item:last-child {
  border-bottom: none !important;
}

html body .client-home-panels .list-group-item:hover {
  background: rgba(130, 243, 177, 0.05) !important;
}

html body .client-home-panels .list-group-item i {
  color: #687A8F !important;
  margin-right: 8px !important;
  width: 16px !important;
}

/* Ticket badges in list - explicit colors */
html body .client-home-panels .list-group-item .badge,
html body .client-home-panels .list-group-item .label {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  margin-left: 8px !important;
  float: right !important;
}

/* Status badge colors - explicit hex values */
html body .client-home-panels .label-default,
html body .client-home-panels .label.status-closed {
  background: #E5E7EB !important;
  color: #4B5563 !important;
}

html body .client-home-panels .label-success,
html body .client-home-panels .label.status-active {
  background: #D4FCDF !important;
  color: #118366 !important;
}

html body .client-home-panels .label-info,
html body .client-home-panels .label.status-answered {
  background: #DBEAFE !important;
  color: #1D4ED8 !important;
}

html body .client-home-panels .label-warning,
html body .client-home-panels .label.status-customer-reply {
  background: #FEF3C7 !important;
  color: #D97706 !important;
}

html body .client-home-panels .label-danger {
  background: #FEE2E2 !important;
  color: #DC2626 !important;
}

/* Panel footer - hide completely on home panels */
html body .client-home-panels .panel-footer {
  display: none !important;
}

/* List group within panel body - also scrollable */
html body .client-home-panels .list-group {
  max-height: 220px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: #D6DAE1 transparent !important;
}

html body .client-home-panels .list-group::-webkit-scrollbar {
  width: 6px !important;
}

html body .client-home-panels .list-group::-webkit-scrollbar-track {
  background: transparent !important;
}

html body .client-home-panels .list-group::-webkit-scrollbar-thumb {
  background: #D6DAE1 !important;
  border-radius: 3px !important;
}

html body .client-home-panels .list-group::-webkit-scrollbar-thumb:hover {
  background: #B8BFC9 !important;
}

/* ===== MOBILE RESPONSIVE - CLIENT HOME PANELS ===== */
@media (max-width: 767px) {
  /* Stack cards vertically on mobile */
  html body .client-home-panels .row {
    flex-direction: column !important;
  }

  html body .client-home-panels .col-sm-6,
  html body .client-home-panels .col-sm-12:has(.panel) {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 16px !important;
  }

  /* Slightly smaller max-height on mobile */
  html body .client-home-panels .panel-body,
  html body .client-home-panels .list-group {
    max-height: 200px !important;
  }
}

/* ===== MOBILE RESPONSIVE - TILES ===== */
@media (max-width: 767px) {
  html body .tiles .tile {
    width: 50% !important;
  }

  html body .tiles .tile a {
    padding: 12px 16px !important;
    min-height: 70px !important;
  }

  html body .tiles .tile .stat {
    font-size: 24px !important;
  }

  html body .tiles .tile .icon i {
    font-size: 24px !important;
  }
}

@media (max-width: 480px) {
  html body .tiles .tile .title {
    font-size: 10px !important;
  }
}

/* ============================================
   USER MANAGEMENT PAGE - Enhanced Styling
   ============================================ */

/* User count text */
html body .main-content > div > p:first-of-type {
  font-size: 14px !important;
  color: #4b5563 !important;
  margin-bottom: 16px !important;
}

/* User management table - card style */
html body .main-content table.table {
  background: rgba(255, 255, 255, 0.5) !important;
  border-radius: 12px !important;
  border: 1px solid #ECEFF2 !important;
  overflow: hidden !important;
}

html body .main-content table.table thead tr th {
  background: rgba(246, 247, 249, 0.8) !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #687A8F !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid #D6DAE1 !important;
}

html body .main-content table.table tbody tr td {
  padding: 16px 20px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid rgba(236, 239, 242, 0.6) !important;
  background: transparent !important;
}

html body .main-content table.table tbody tr:hover td {
  background: rgba(130, 243, 177, 0.05) !important;
}

html body .main-content table.table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Owner badge - green pill style */
html body .label-success,
html body span.label-success {
  background: #D4FCDF !important;
  color: #118366 !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  border: 1px solid rgba(130, 243, 177, 0.3) !important;
}

/* 2FA icon styling */
html body .main-content table.table td .fa-unlock,
html body .main-content table.table td .fa-lock {
  font-size: 14px !important;
  color: #687A8F !important;
  margin-left: 8px !important;
}

/* Last login text */
html body .main-content table.table td small,
html body .main-content table.table td .text-muted {
  display: block !important;
  font-size: 13px !important;
  color: #687A8F !important;
  margin-top: 4px !important;
}

/* Action links in user table */
html body .main-content table.table td a:not(.btn) {
  color: #118366 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s !important;
}

html body .main-content table.table td a:not(.btn):hover {
  color: #0d6b52 !important;
  text-decoration: underline !important;
}

/* Remove Access button - danger style */
html body .main-content table.table td a.btn-danger,
html body .main-content table.table td .btn-danger {
  background: #FE3635 !important;
  color: white !important;
  border: none !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.2s !important;
}

html body .main-content table.table td a.btn-danger:hover,
html body .main-content table.table td .btn-danger:hover {
  background: #E52F2E !important;
  transform: translateY(-1px) !important;
}

/* Invite New User section heading */
html body .main-content h2 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #21252C !important;
  margin: 32px 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #D6DAE1 !important;
}

/* Invite form container - exclude client-home-panels */
html body .main-content > div:last-of-type:not(.client-home-panels):not(.tiles) {
  background: rgba(255, 255, 255, 0.4) !important;
  border: 1px solid #D6DAE1 !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-top: 16px !important;
}

/* Email input in invite form */
html body .main-content input[type="email"],
html body .main-content input[placeholder*="@example"] {
  width: 100% !important;
  max-width: 400px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  border: 1px solid #D6DAE1 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 20px !important;
  transition: all 0.2s !important;
}

html body .main-content input[type="email"]:focus,
html body .main-content input[placeholder*="@example"]:focus {
  border-color: #82F3B1 !important;
  box-shadow: 0 0 0 3px rgba(130, 243, 177, 0.2) !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

/* Send Invite button specific styling */
html body .main-content button.btn-primary,
html body .main-content .btn-send-invite {
  background: #82F3B1 !important;
  color: #21252C !important;
  border: none !important;
  padding: 12px 28px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(130, 243, 177, 0.3) !important;
  transition: all 0.2s !important;
}

html body .main-content button.btn-primary:hover,
html body .main-content .btn-send-invite:hover {
  background: #45E394 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(130, 243, 177, 0.4) !important;
}

/* ============================================
   GLOBAL MOBILE RESPONSIVE FIXES
   ============================================ */

/* ===== 1. GLOBAL TABLE/LIST HORIZONTAL OVERFLOW ===== */
@media (max-width: 767px) {
  /* Prevent horizontal overflow on main containers */
  html body .main-content,
  html body .dataTables_wrapper,
  html body .table-responsive {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* Table constraints */
  html body table.table-list,
  html body .dataTable {
    max-width: 100% !important;
    table-layout: fixed !important;
    word-wrap: break-word !important;
  }

  /* Card/panel overflow prevention */
  html body .panel,
  html body .panel-default,
  html body .panel-body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* ===== 2. GLOBAL PAGINATION FIX ===== */
@media (max-width: 767px) {
  /* DataTables pagination - left align, no wrap */
  html body .dataTables_paginate,
  html body .dataTables_paginate .pagination {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    max-width: 100% !important;
  }

  /* Bootstrap pagination - left align */
  html body ul.pagination {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 8px 0 !important;
  }

  /* Pagination buttons - compact on mobile */
  html body .pagination > li > a,
  html body .pagination > li > span,
  html body .paginate_button {
    min-width: 24px !important;
    height: 26px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Force pagination container to stay within bounds */
  html body .pagination,
  html body .dataTables_paginate {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Ensure pagination button borders are visible */
  html body .pagination > li > a,
  html body .pagination > li > span {
    border: 1px solid #ddd !important;
    margin: 0 !important;
  }

  /* Stack Show entries and pagination vertically */
  html body .dataTables_wrapper .dataTables_length,
  html body .dataTables_wrapper .dataTables_paginate {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 8px !important;
  }

  /* Hide "Previous" button on mobile */
  html body .pagination > li:first-child,
  html body .pagination > .paginate_button:first-child,
  html body .dataTables_paginate .paginate_button.previous {
    display: none !important;
  }

  /* Hide page numbers 4 and 5 on mobile (show 1 2 3 ... last Next) */
  html body .pagination > li:nth-child(5),
  html body .pagination > li:nth-child(6) {
    display: none !important;
  }

  /* DataTables info text */
  html body .dataTables_info {
    text-align: left !important;
    margin-bottom: 8px !important;
    font-size: 11px !important;
  }
}

/* ===== 3. SERVICES/PRODUCTS LIST - MOBILE COLUMNS ===== */
/* Show: Name, Pricing, Status | Hide: Icon, Next Due Date */
@media (max-width: 767px) {
  /* Services table - hide icon column (1st) and next due date (4th) */
  html body #tableServicesList thead th:first-child,
  html body #tableServicesList tbody td:first-child,
  html body #tableServicesList thead th:nth-child(4),
  html body #tableServicesList tbody td:nth-child(4) {
    display: none !important;
  }

  /* Ensure Status column (5th, now 3rd after hiding) stays visible */
  html body #tableServicesList thead th:nth-child(5),
  html body #tableServicesList tbody td:nth-child(5) {
    display: table-cell !important;
  }

  /* General fallback for any table-list with status as last column */
  html body .table-list thead th:last-child,
  html body .table-list tbody td:last-child {
    display: table-cell !important;
  }
}

/* ===== 4. INVOICE/TICKET LISTS - MOBILE RESPONSIVE ===== */
/* Let DataTables Responsive handle column visibility naturally */
/* Just ensure the table doesn't overflow and rows are clickable */
@media (max-width: 767px) {
  /* Add padding to DataTables wrapper to prevent right edge cutoff */
  html body .dataTables_wrapper {
    padding-right: 8px !important;
  }

  /* Ensure tables fit within viewport */
  html body #tableInvoicesList,
  html body #tableSupportTicketsList {
    width: calc(100% - 4px) !important;
    table-layout: auto !important;
  }

  /* Make text wrap in cells to prevent overflow */
  html body #tableInvoicesList td,
  html body #tableInvoicesList th,
  html body #tableSupportTicketsList td,
  html body #tableSupportTicketsList th {
    white-space: normal !important;
    word-wrap: break-word !important;
    max-width: 120px !important;
  }

  /* Ensure responsive child rows display properly */
  html body .dtr-details {
    width: 100% !important;
  }

  html body .dtr-details li {
    display: flex !important;
    justify-content: space-between !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #eee !important;
  }

  /* Narrow the invoice # column on mobile */
  html body #tableInvoicesList td:first-child,
  html body #tableInvoicesList th:first-child {
    max-width: 65px !important;
    font-size: 11px !important;
    padding-left: 24px !important; /* Room for + expand icon */
    padding-right: 4px !important;
  }

  /* Replace "View Invoice" button text with eye icon on mobile */
  html body #tableInvoicesList .btn,
  html body #tableInvoicesList a.btn {
    font-size: 0 !important; /* Hide text */
    padding: 6px 8px !important;
    min-width: 32px !important;
  }

  html body #tableInvoicesList .btn::before,
  html body #tableInvoicesList a.btn::before {
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 900 !important;
    content: "\f06e" !important; /* fa-eye */
    font-size: 14px !important;
  }
}

/* ===== 5. SIDEBAR PANELS - START EXPANDED ON MOBILE ===== */
/* Override inline display:none on sidebar panel content */
@media (max-width: 767px) {
  /* Target the list-group which has inline display:none when collapsed */
  html body .panel-sidebar .list-group,
  html body .panel-sidebar .panel-body {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }

  /* Rotate the chevron to show expanded state */
  html body .panel-sidebar .panel-minimise.minimised {
    transform: rotate(180deg) !important;
  }

  /* Also handle Bootstrap collapse if used elsewhere */
  html body .panel-collapsable .collapse,
  html body .panel-collapsable .panel-collapse {
    display: block !important;
    height: auto !important;
  }
}