/* IFFCO-TOKIO Corporate Theme (Solid Single Colors - No Gradients) */
:root {
  --primary-green: #00873d;
  --primary-green-hover: #006f32;
  --primary-green-soft: #e6f5ed;

  --secondary-blue: #0082c8;
  --secondary-blue-hover: #0068a0;
  --secondary-blue-soft: #e5f4fd;

  --navy-950: #07111e;
  --navy-900: #0f172a;
  --navy-800: #1e293b;
  --navy-700: #334155;

  --green-600: #00873d;
  --green-100: #e6f5ed;
  --blue-700: #0082c8;
  --blue-600: #0082c8;
  --blue-50: #e5f4fd;

  --amber-600: #d97706;
  --amber-100: #fef3c7;
  --red-600: #dc2626;
  --red-100: #fee2e2;

  --ink: #0f172a;
  --muted: #64748b;
  --line: #cbd5e1;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --canvas: #f8fafc;

  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.05);
  --shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.12);

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 16px;
  --focus: 0 0 0 4px rgba(0, 130, 200, 0.18);
  --content: 1480px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 15px/1.55 var(--font);
  min-height: 100vh;
}

a {
  color: var(--secondary-blue);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--secondary-blue-hover);
}

img {
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
.card,
.panel {
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* Site Header: Solid Dark Navy with Solid Green Bottom Strip */
.site-header {
  background: var(--navy-900);
  color: #ffffff;
  padding: 18px max(24px, calc((100vw - var(--content)) / 2));
  position: relative;
  border-bottom: 4px solid var(--primary-green);
}

.site-header .brand {
  position: relative;
  z-index: 1;
}

.site-header h1 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.site-header h1::after {
  content: "Enterprise Service & Delivery Platform";
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #94a3b8;
  margin-top: 3px;
}

/* Primary Navigation Bar: Solid White with Solid Accents */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.nav-links {
  max-width: var(--content);
  margin: auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 56px;
}

.nav-links>a,
.nav-dropbtn,
.nav-logout button {
  border: 0;
  background: transparent;
  color: var(--navy-800);
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 650;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-links>a:hover,
.nav-dropbtn:hover {
  background: var(--primary-green-soft);
  color: var(--primary-green);
}

.nav-links>a.active {
  background: var(--primary-green-soft);
  color: var(--primary-green);
  font-weight: 750;
  border-bottom: 3px solid var(--primary-green);
  border-radius: 8px 8px 0 0;
}

.nav-dropdown {
  position: relative;
}

.nav-dropmenu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  min-width: 240px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--primary-green);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--shadow-lg);
}

.nav-dropdown.open .nav-dropmenu {
  display: grid;
}

.nav-dropmenu a {
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}

.nav-dropmenu a:hover {
  background: var(--secondary-blue-soft);
  color: var(--secondary-blue-hover);
}

.nav-logout {
  margin-left: auto;
}

.nav-logout button {
  color: var(--red-600);
}

.nav-logout button:hover {
  background: #fee2e2;
  color: #b91c1c;
}

/* Layout Containers & Headings */
main,
.container {
  width: min(var(--content), calc(100% - 40px));
  margin: 28px auto 60px;
}

main>h2:first-child {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--navy-900);
}

h1,
h2,
h3,
h4 {
  line-height: 1.25;
  letter-spacing: -0.02em;
}

h1 {
  color: var(--navy-950);
}

h2 {
  color: var(--navy-900);
}

h3 {
  color: var(--navy-800);
}

.hint,
.muted,
.text-muted {
  color: var(--muted);
}

/* Panels & Cards */
.panel,
.card,
article {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px;
}

.panel {
  margin: 18px 0;
}

.panel:hover,
.card:hover,
article:hover {
  border-color: var(--primary-green);
  box-shadow: var(--shadow);
}

.cards,
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.cards article,
.card-grid .card {
  position: relative;
  overflow: hidden;
}

.cards article::before,
.card-grid .card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: var(--primary-green);
}

.list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.list-head h2,
.list-head h3 {
  margin: 0;
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}

label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 14px;
}

/* Forms & Inputs */
input,
select,
textarea {
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ink);
  padding: 10px 14px;
  outline: none;
  min-height: 46px;
  font-size: 15px;
}

textarea {
  min-height: 110px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--secondary-blue);
  box-shadow: 0 0 0 4px rgba(0, 130, 200, 0.18);
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8;
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: auto;
  accent-color: var(--primary-green);
  cursor: pointer;
}

.inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Primary Button: Solid Green */
button,
.btn,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  padding: 0 20px;
  min-height: 44px;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}

/* Primary Button: Solid Sky Blue (Right side logo color) */
.btn,
button[type="submit"] {
  color: #ffffff;
  background: var(--secondary-blue);
  border-color: var(--secondary-blue);
  box-shadow: 0 4px 14px rgba(0, 130, 200, 0.22);
}

.btn:hover,
button[type="submit"]:hover {
  color: #ffffff;
  background: var(--secondary-blue-hover);
  border-color: var(--secondary-blue-hover);
  transform: translateY(-1px);
}

/* Secondary & Top-Right Header Action Buttons: Solid Sky Blue (#0082c8) */
.btn-secondary,
.list-head>a,
.list-head>button,
.list-head>.btn,
.list-head>.btn-secondary,
.list-head .actions>a,
.list-head .actions>button,
.list-head .actions>.btn,
.list-head .actions>.btn-secondary,
.list-head .row-actions>a,
.list-head .row-actions>button,
.page-header .actions>a,
.page-header .actions>button,
.page-header .actions>.btn,
.page-header .actions>.btn-secondary,
.task-dashboard-actions>a,
.task-dashboard-actions>button,
.user-menu-title>a,
.user-menu-title>button,
.panel-head>a,
.panel-head>button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 11px !important;
  min-height: 30px !important;
  height: 30px !important;
  background: var(--secondary-blue) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0, 130, 200, 0.22) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  border: none !important;
}

.btn-secondary:hover,
.list-head>a:hover,
.list-head>button:hover,
.list-head>.btn:hover,
.list-head>.btn-secondary:hover,
.list-head .actions>a:hover,
.list-head .actions>button:hover,
.list-head .actions>.btn:hover,
.list-head .actions>.btn-secondary:hover,
.list-head .row-actions>a:hover,
.list-head .row-actions>button:hover,
.page-header .actions>a:hover,
.page-header .actions>button:hover,
.page-header .actions>.btn:hover,
.page-header .actions>.btn-secondary:hover,
.task-dashboard-actions>a:hover,
.task-dashboard-actions>button:hover,
.user-menu-title>a:hover,
.user-menu-title>button:hover,
.panel-head>a:hover,
.panel-head>button:hover {
  color: #ffffff !important;
  background: var(--secondary-blue-hover) !important;
  box-shadow: 0 4px 12px rgba(0, 130, 200, 0.32) !important;
  transform: translateY(-1px) !important;
}

.list-head svg,
.page-header .actions svg,
.task-dashboard-actions svg,
.user-menu-title svg,
.panel-head svg {
  flex-shrink: 0;
  width: 14px !important;
  height: 14px !important;
}

.actions,
.row-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Tables */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Was overflow:hidden. A table with overflow other than visible becomes the
     sticky containing scroller for its own th/td, so the "position: sticky;
     right: 0" Action column stuck to the TABLE's right edge (off-screen)
     instead of the visible edge of .table-wrap. Corners are clipped by the
     .table-wrap scroll container instead. */
  overflow: visible;
  box-shadow: var(--shadow-sm);
}

th {
  background: var(--primary-green-soft);
  color: var(--navy-900);
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

td {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover {
  background: var(--surface-2);
}

.table-wrap {
  overflow: auto;
  border-radius: var(--radius);
}

/* Alerts */
.success,
.error,
.warning,
.info {
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid;
  margin: 14px 0;
  font-size: 14px;
}

.success {
  background: var(--primary-green-soft);
  border-color: #a7f3d0;
  color: #065f46;
}

.error {
  background: var(--red-100);
  border-color: #fecaca;
  color: #991b1b;
}

.warning {
  background: var(--amber-100);
  border-color: #fde68a;
  color: #92400e;
}

.info {
  background: var(--secondary-blue-soft);
  border-color: #bae6fd;
  color: #075985;
}

/* Footer */
footer,
.site-footer {
  color: var(--muted);
  text-align: center;
  padding: 28px;
  border-top: 1px solid var(--line);
  background: #ffffff;
}

code,
pre {
  font-family: "Cascadia Code", Consolas, monospace;
}

/* Dashboard Circular Metric Cards & Status Grid */
.circle-grid,
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.circle-card,
.status-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ink);
  padding: 20px 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.circle-card:hover,
.status-card:hover {
  transform: translateY(-3px);
  border-color: var(--secondary-blue);
  box-shadow: var(--shadow);
}

.circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.circle.sm {
  width: 72px;
  height: 72px;
}

.circle-inner {
  width: 68px;
  height: 68px;
  background: #ffffff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--line);
}

.circle-inner.sm {
  width: 56px;
  height: 56px;
}

.circle-inner strong {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy-900);
}

.circle-label,
.status-label {
  font-weight: 750;
  font-size: 13px;
  text-align: center;
  color: var(--navy-900);
}

/* Dashboard Scope Toggle (All / My tickets) */
.toggle {
  display: inline-flex;
  background: #e2e8f0;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.toggle a {
  padding: 7px 14px;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.toggle a:hover {
  color: var(--navy-900);
}

.toggle a.active {
  background: #ffffff;
  color: var(--secondary-blue);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 920px) {
  .nav-links {
    overflow-x: auto;
  }

  .nav-dropmenu {
    position: fixed;
    left: 18px;
    right: 18px;
    top: 116px;
    max-height: 70vh;
    overflow: auto;
  }

  .nav-logout {
    margin-left: 0;
  }

  main,
  .container {
    width: min(100% - 24px, var(--content));
    margin-top: 20px;
  }
}

/* ==========================================================================
   TOPBAR HEADER & LEFT SIDEBAR CRM LAYOUT (IFFCO-TOKIO Solid Theme)
   ========================================================================== */

/* Topbar Fixed Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: #ffffff !important;
  border-bottom: 1px solid #cbd5e1;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  padding: 0 !important;
}

.topbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 24px;
  width: 100%;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  max-width: 740px;
}

.topbar-brand-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 236px;
  flex-shrink: 0;
  padding-right: 14px;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand-logo-mark {
  width: 34px;
  height: 34px;
  background: var(--primary-green);
  color: #ffffff;
  font-weight: 900;
  font-size: 18px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px rgba(0, 135, 61, 0.25);
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-weight: 800;
  font-size: 16px;
  color: #0f172a;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.brand-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-top: 1px;
}

/* Sidebar Toggle Icon Button (< > after Brand) */
.sidebar-toggle-btn {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  padding: 0 !important;
  border-radius: 6px !important;
  cursor: pointer;
  color: #334155 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  min-height: 28px !important;
  height: 28px !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
  margin-left: 2px;
  flex-shrink: 0;
}

.sidebar-toggle-btn:hover {
  background: #f1f5f9 !important;
  color: var(--secondary-blue) !important;
  border-color: var(--secondary-blue) !important;
}

/* Center Divider Line (Aligned vertically at X=260px with sidebar border) */
.topbar-divider-line {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: #cbd5e1;
  margin: 0 16px 0 0;
  flex-shrink: 0;
}

/* Desktop Sidebar Collapse State */
body.sidebar-collapsed .sidebar-nav {
  transform: translateX(-260px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.sidebar-collapsed main,
body.sidebar-collapsed .container,
body.sidebar-collapsed .dashboard-main,
body.sidebar-collapsed footer,
body.sidebar-collapsed .site-footer {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.sidebar-collapsed .chevron-toggle-left {
  display: none !important;
}

body.sidebar-collapsed .chevron-toggle-right {
  display: inline-block !important;
}

/* Global Search Bar (Starts beside center line) */
.topbar-search {
  position: relative !important;
  max-width: 420px;
  width: 100%;
  margin: 0 !important;
}

.topbar-search input,
.topbar-search input[type="search"] {
  width: 100% !important;
  padding: 8px 14px 8px 38px !important;
  padding-left: 38px !important;
  border-radius: 20px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  font-size: 13.5px !important;
  min-height: 38px !important;
  height: 38px !important;
  color: #0f172a !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease !important;
}

.topbar-search input:focus,
.topbar-search input[type="search"]:focus,
.topbar-search input:focus-visible,
.topbar-search input[type="search"]:focus-visible {
  border-color: var(--secondary-blue) !important;
  outline: none !important;
  box-shadow: none !important;
  background: #ffffff !important;
}

.topbar-search .search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Quick Access Dropdown & Popover Card */
.quick-access-dropdown {
  position: relative;
}

.quick-access-dropdown .dropdown-chevron {
  transition: transform 0.2s ease;
}

.quick-access-dropdown.open .dropdown-chevron {
  transform: rotate(180deg);
}

.quick-access-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 440px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.16);
  display: none;
  z-index: 2000;
  overflow: hidden;
}

.quick-access-dropdown.open .quick-access-popover {
  display: block;
  animation: popoverSlideIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popoverSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}

.popover-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}

.popover-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--secondary-blue);
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  padding: 2px 8px;
  border-radius: 12px;
}

.popover-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 16px;
}

.popover-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.popover-tile:hover {
  background: #f8fafc;
  border-color: var(--secondary-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 130, 200, 0.14);
}

.tile-icon-bg {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-blue   { background: #f0f9ff; }
.bg-green  { background: #f0fdf4; }
.bg-purple { background: #f5f3ff; }
.bg-amber  { background: #fffbeb; }
.bg-rose   { background: #fff1f2; }
.bg-cyan   { background: #ecfeff; }

.tile-label {
  font-size: 11px;
  font-weight: 700;
  color: #334155;
  text-align: center;
  line-height: 1.2;
}

.popover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
}

.footer-hint {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

.footer-link {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--secondary-blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.footer-link:hover {
  text-decoration: underline;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quick-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 11px !important;
  min-height: 30px !important;
  height: 30px !important;
  background: var(--secondary-blue) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0, 130, 200, 0.22) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  border: none !important;
}

.quick-btn svg {
  flex-shrink: 0 !important;
  display: inline-block !important;
  stroke: #ffffff !important;
  fill: none !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
}

.quick-btn:hover {
  background: var(--secondary-blue-hover) !important;
  box-shadow: 0 4px 12px rgba(0, 130, 200, 0.32) !important;
  transform: translateY(-1px) !important;
}

.topbar-icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #475569;
  background: #f1f5f9;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.topbar-icon-btn:hover {
  background: #e2e8f0;
  color: var(--secondary-blue);
}

.bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--secondary-blue);
  color: #ffffff;
  font-weight: 800;
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 10px;
  border: 2px solid #ffffff;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 6px;
}

.user-avatar {
  width: 34px;
  height: 34px;
  background: var(--primary-green);
  color: #ffffff;
  border-radius: 50%;
  font-weight: 800;
  font-size: 14px;
  display: grid;
  place-items: center;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 13px;
  font-weight: 750;
  color: #0f172a;
  line-height: 1.1;
}

.user-role {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

.topbar-logout form {
  margin: 0;
}

.logout-btn {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 8px !important;
  cursor: pointer;
  width: 36px !important;
  min-height: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: none !important;
  transition: background 0.15s ease !important;
}

.logout-btn:hover {
  background: #fca5a5 !important;
  color: #991b1b !important;
}

/* Left Sidebar Navigation Menu */
.sidebar-nav {
  position: fixed;
  top: 64px;
  left: 0;
  bottom: 0;
  width: 260px;
  background: #ffffff;
  border-right: 1px solid #cbd5e1;
  z-index: 990;
  padding: 16px 12px;
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(15, 23, 42, 0.02);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-weight: 650 !important;
  font-size: 13.5px !important;
  color: #334155 !important;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

.sidebar-dropbtn {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-weight: 650 !important;
  font-size: 13.5px !important;
  color: #334155 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

.sidebar-dropbtn>span {
  flex: 1 !important;
  text-align: left !important;
}

.sidebar-dropbtn .chevron-icon {
  margin-left: auto !important;
  transition: transform 0.2s ease !important;
}

/* Hover Effect for Unselected Links: #e5f4fd background with #0082c8 text */
.sidebar-link:hover,
.sidebar-dropbtn:hover,
.sidebar-submenu a:hover {
  background: #e5f4fd !important;
  color: var(--secondary-blue) !important;
}

/* Current Selected Module & Open Parent Dropdown Header: Solid Sky Blue #0082c8 */
.sidebar-link.active,
.sidebar-dropbtn.active,
.sidebar-dropdown.open>.sidebar-dropbtn,
.sidebar-submenu a.active {
  background: var(--secondary-blue) !important;
  color: #ffffff !important;
  font-weight: 750 !important;
  box-shadow: 0 4px 12px rgba(0, 130, 200, 0.22) !important;
}

.sidebar-link.active .nav-icon,
.sidebar-dropbtn.active .nav-icon,
.sidebar-dropdown.open>.sidebar-dropbtn .nav-icon,
.sidebar-dropdown.open>.sidebar-dropbtn .chevron-icon {
  stroke: #ffffff !important;
}

.sidebar-dropdown {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sidebar-dropdown.open .chevron-icon {
  transform: rotate(180deg) !important;
}

.sidebar-submenu {
  display: none;
  flex-direction: column;
  padding-left: 36px;
  gap: 2px;
  margin-top: 4px;
  width: 100%;
}

.sidebar-dropdown.open .sidebar-submenu {
  display: flex;
}

.sidebar-submenu a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}




/* ==========================================================================
   DASHBOARD PAGE & ENHANCED WIDGET LAYOUT STYLES
   ========================================================================== */

@media (min-width: 993px) {
  body:not(.sidebar-collapsed):not(.login-page) main,
  body:not(.sidebar-collapsed):not(.login-page) .container,
  body:not(.sidebar-collapsed) .dashboard-main {
    margin-left: 260px !important;
    width: calc(100% - 260px) !important;
  }
}

main, .dashboard-main, footer, .site-footer {
  margin-top: 64px !important;
  padding: 24px 28px !important;
  min-height: calc(100vh - 64px);
  background: #f8fafc !important;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.login-page main,
body.login-page .login-shell {
  margin: auto !important;
  width: min(975px, 94%) !important;
  max-width: 1320px !important;
  padding: 0 !important;
  background: transparent !important;
}




.dash-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}

.dash-header-title h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.02em;
}

.dash-header-title .subtitle {
  font-size: 13.5px !important;
  color: #64748b !important;
  margin: 0 !important;
}

.dash-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* /* Stat Cards Grid (Dynamic Category KPI Cards) */
.stat-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #ffffff 50%, color-mix(in srgb, var(--card-accent, #0082c8) 9%, #ffffff)) !important;
  border: 1px solid color-mix(in srgb, var(--card-accent, #0082c8) 22%, #cbd5e1) !important;
  border-left: 4px solid var(--card-accent, #0082c8) !important;
  color: #0f172a !important;
  text-decoration: none !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.05) !important;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--card-accent, var(--secondary-blue)) !important;
  box-shadow: 0 12px 28px -6px color-mix(in srgb, var(--card-accent, #0082c8) 30%, transparent), 0 4px 8px -2px rgba(0, 0, 0, 0.04) !important;
}

.stat-icon-box {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--card-accent, #0082c8) 35%, transparent) !important;
}

.stat-icon-box svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #ffffff !important;
  fill: none !important;
  display: block !important;
}

.stat-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

.stat-label {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-value {
  font-size: 24px !important;
  font-weight: 850 !important;
  margin: 1px 0 !important;
  color: #0f172a !important;
  line-height: 1 !important;
}

.stat-link-hint {
  font-size: 11px;
  font-weight: 750;
  color: var(--card-accent, var(--secondary-blue));
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  transition: transform 0.15s ease;
}

.stat-card:hover .stat-link-hint {
  transform: translateX(3px);
}

/* 2-Column Main Widget Layout */
.dash-grid-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 22px;
}

@media (max-width: 1200px) {
  .dash-grid-layout {
    grid-template-columns: 1fr;
  }
}

.dash-widget-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.widget-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

.view-all-btn {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--secondary-blue), var(--secondary-blue-hover)) !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.18s ease;
  box-shadow: 0 3px 10px rgba(0, 130, 200, 0.25);
}

.view-all-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0, 130, 200, 0.35);
}

/* Widget Tables */
.dash-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.dash-table th {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  color: #0369a1 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 12px 14px !important;
  text-align: left !important;
  border-bottom: 2px solid #bae6fd !important;
}

.dash-table th:first-child {
  border-top-left-radius: 8px;
}
.dash-table th:last-child {
  border-top-right-radius: 8px;
}

.dash-table td {
  padding: 12px 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  color: #334155 !important;
  vertical-align: middle !important;
}

.dash-table tbody tr {
  transition: background 0.15s ease;
}

.dash-table tbody tr:hover {
  background: rgba(2, 132, 199, 0.035) !important;
}

.dash-cat-label-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cat-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}

/* Vibrant Badges with Rounder Padding & Distinct Badged Border */
.dash-table .badge-pill {
  display: inline-block !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0.03em !important;
  text-transform: lowercase !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04) !important;
}

.badge-sky {
  background: #e0f2fe !important;
  color: #0284c7 !important;
  border: 1.5px solid #38bdf8 !important;
}

.badge-amber {
  background: #fef3c7 !important;
  color: #d97706 !important;
  border: 1.5px solid #fbbf24 !important;
}

.badge-purple {
  background: #f3e8ff !important;
  color: #7c3aed !important;
  border: 1.5px solid #c084fc !important;
}

.badge-emerald {
  background: #d1fae5 !important;
  color: #059669 !important;
  border: 1.5px solid #34d399 !important;
}

.badge-pink {
  background: #fce7f3 !important;
  color: #db2777 !important;
  border: 1.5px solid #f472b6 !important;
}

.badge-indigo {
  background: #e0e7ff !important;
  color: #4f46e5 !important;
  border: 1.5px solid #818cf8 !important;
}

.count-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  color: #ffffff;
  font-weight: 850;
  font-size: 12px;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--pill-color, #0284c7) 35%, transparent);
}

.table-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 750;
  color: var(--link-color, var(--secondary-blue));
  background: color-mix(in srgb, var(--link-color, var(--secondary-blue)) 10%, transparent);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--link-color, var(--secondary-blue)) 20%, transparent);
  transition: all 0.18s ease;
}

.table-link-btn:hover {
  background: color-mix(in srgb, var(--link-color, var(--secondary-blue)) 20%, transparent);
  transform: translateX(2px);
}

/* Chart Breakdown Section */
.chart-breakdown {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.status-bar-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bar-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

.status-bar-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bar-color-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.bar-track {
  height: 20px;
  background: #f1f5f9;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.bar-fill {
  height: 100%;
  border-radius: 8px;
  transition: width 0.4s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Enhanced Status Quick View List */
.status-quick-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.status-quick-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ffffff 60%, color-mix(in srgb, var(--status-color, #3b82f6) 12%, #ffffff)) !important;
  border: 1px solid color-mix(in srgb, var(--status-color, #3b82f6) 30%, #cbd5e1) !important;
  border-left: 5px solid var(--status-color, var(--secondary-blue)) !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.status-quick-item:hover {
  transform: translateY(-2px) !important;
  border-color: var(--status-color, var(--secondary-blue)) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--status-color, #3b82f6) 25%, transparent) !important;
}

.status-quick-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--status-color);
}

.status-quick-name {
  font-size: 13px;
  font-weight: 750;
  color: #1e293b;
}

.status-quick-count {
  font-size: 12px;
  font-weight: 850;
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 20px;
  min-width: 32px;
  text-align: center;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--status-color, #3b82f6) 40%, transparent);
}

/* SLA Performance Metrics Grid */
.sla-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.sla-metric-card {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-radius: 12px;
  transition: transform 0.18s ease;
}

.sla-metric-card:hover {
  transform: translateY(-2px);
}

.sla-card-compliance {
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
  border: 1px solid #a7f3d0;
  border-left: 4px solid #10b981;
}

.sla-card-response {
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
  border: 1px solid #bfdbfe;
  border-left: 4px solid #3b82f6;
}

.sla-card-resolution {
  background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%);
  border: 1px solid #ddd6fe;
  border-left: 4px solid #8b5cf6;
}

.sla-card-health {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
  border: 1px solid #99f6e4;
  border-left: 4px solid #14b8a6;
}

.sla-metric-label {
  font-size: 11px;
  font-weight: 750;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sla-metric-val {
  font-size: 22px;
  font-weight: 850;
  margin: 3px 0;
}

.text-green { color: #059669 !important; }
.text-blue { color: #2563eb !important; }
.text-purple { color: #7c3aed !important; }
.text-teal { color: #0d9488 !important; }

.sla-metric-sub {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 600;
}

/* Priority & Queue Alerts */
.queue-alerts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.queue-alert-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  transition: transform 0.15s ease;
}

.queue-alert-item:hover {
  transform: translateX(2px);
}

.alert-critical {
  background: linear-gradient(135deg, #fff5f5, #ffffff);
  border: 1px solid #fecaca;
  border-left: 4px solid #ef4444;
  color: #991b1b;
}

.alert-warning {
  background: linear-gradient(135deg, #fffbe6, #ffffff);
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  color: #92400e;
}

.alert-info {
  background: linear-gradient(135deg, #f0f9ff, #ffffff);
  border: 1px solid #bae6fd;
  border-left: 4px solid #0284c7;
  color: #075985;
}

.queue-alert-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.queue-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.alert-red { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.alert-amber { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
.alert-blue { background: #0284c7; box-shadow: 0 0 6px #0284c7; }

.queue-count {
  font-weight: 850;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 12px;
}

.alert-pill-red { background: #fee2e2; color: #b91c1c; }
.alert-pill-amber { background: #fef3c7; color: #b45309; }
.alert-pill-blue { background: #e0f2fe; color: #0369a1; }

/* Shortcuts List */
.shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.shortcut-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  text-decoration: none;
  color: #1e293b;
  font-size: 12.5px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.shortcut-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.shortcut-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.shortcut-item:hover .shortcut-icon-box {
  transform: scale(1.08);
}

.shortcut-sky .shortcut-icon-box { background: #e0f2fe; color: #0284c7; }
.shortcut-emerald .shortcut-icon-box { background: #d1fae5; color: #10b981; }
.shortcut-purple .shortcut-icon-box { background: #f3e8ff; color: #8b5cf6; }
.shortcut-amber .shortcut-icon-box { background: #fef3c7; color: #f59e0b; }

/* Active Team Roster */
.team-roster-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.roster-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  transition: background 0.15s ease;
}

.roster-item:hover {
  background: #ffffff;
  border-color: #e2e8f0;
}

.roster-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 850;
  font-size: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.avatar-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.avatar-emerald { background: linear-gradient(135deg, #10b981, #047857); }
.avatar-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }

.roster-details {
  display: flex;
  flex-direction: column;
}

.roster-name {
  font-size: 13px;
  font-weight: 750;
  color: #0f172a;
  line-height: 1.2;
}

.roster-role {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.roster-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.roster-status-dot.online {
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

/* Sidebar Collapsed State & Mobile Off-canvas */
@media (max-width: 992px) {
  .sidebar-nav {
    transform: translateX(-100%);
  }

  body.sidebar-open .sidebar-nav {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(15, 23, 42, 0.15);
  }

  main,
  .container,
  .dashboard-main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 18px 16px !important;
  }
}

/* ==========================================================================
   COMPACT FOOTER LAYOUT (Aligned with Left Sidebar)
   ========================================================================== */
@media (min-width: 993px) {
  body:not(.sidebar-collapsed):not(.login-page) footer,
  body:not(.sidebar-collapsed):not(.login-page) .site-footer {
    margin-left: 260px !important;
    width: calc(100% - 260px) !important;
  }
}

footer, .site-footer {
  padding: 10px 24px !important;
  min-height: auto !important;
  background: #ffffff !important;
  border-top: 1px solid #cbd5e1 !important;
  color: #64748b !important;
  box-sizing: border-box !important;
}

body:not(.login-page) .footer-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body:not(.login-page) .footer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body:not(.login-page) .footer-brand strong {
  font-size: 12px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
  display: inline !important;
}

body:not(.login-page) .footer-tag {
  font-size: 11px !important;
  color: #64748b !important;
}

body:not(.login-page) .footer-links {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

body:not(.login-page) .footer-links a {
  padding: 2px 6px !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
  color: var(--secondary-blue) !important;
  text-decoration: none !important;
}

body:not(.login-page) .footer-links a:hover {
  text-decoration: underline !important;
}

body:not(.login-page) .footer-meta {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  font-size: 11px !important;
  color: #64748b !important;
  text-align: right !important;
}

@media (max-width: 992px) {

  body:not(.login-page) footer,
  body:not(.login-page) .site-footer {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* Sidebar Help & Support Bottom Widget */
.sidebar-help-widget {
  margin-top: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: none;
}

.help-illustration-box {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: 14px;
  background: transparent !important;
  padding: 0;
  border: none !important;
}

.help-img {
  width: 100%;
  max-height: 135px;
  object-fit: cover;
  border-radius: 14px;
  border: none !important;
}

.help-card {
  width: 100%;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.help-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.help-icon-circle {
  width: 26px;
  height: 26px;
  background: #e0f2fe;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.help-card-title {
  font-weight: 800;
  font-size: 14px;
  color: #0f172a;
}

.help-card-subtitle {
  font-size: 11.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.35;
}

.help-action-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 9px 12px !important;
  margin-top: 4px !important;
  background: var(--secondary-blue) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(0, 130, 200, 0.25) !important;
  transition: all 0.15s ease !important;
}

.help-action-btn:hover {
  background: var(--secondary-blue-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(0, 130, 200, 0.35) !important;
}

.help-action-btn svg {
  stroke: #ffffff !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   UNIFIED PAGE HEADER BANNER & TYPOGRAPHY ACROSS ALL MODULES
   ========================================================================== */
.dash-header-row,
.page-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
}

.dash-header-title h2,
.page-header-title h2,
main h2.page-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  letter-spacing: -0.025em !important;
}

.dash-header-title p.subtitle,
.page-header-title p.subtitle,
.dash-header-title .subtitle,
.page-header-title .subtitle,
main p.subtitle {
  font-size: 13.5px !important;
  color: #64748b !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

/* ==========================================================================
   OFF-CANVAS RIGHT-SIDE SLIDE-OVER FILTER & FORM DRAWER
   ========================================================================== */
.drawer-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(3px) !important;
  z-index: 2500 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.drawer-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
}

.filter-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: 440px !important;
  max-width: 92vw !important;
  height: 100vh !important;
  background: #ffffff !important;
  z-index: 2600 !important;
  box-shadow: -8px 0 36px rgba(15, 23, 42, 0.18) !important;
  transform: translateX(100%) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
}

.filter-drawer.active {
  transform: translateX(0) !important;
}

.drawer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #f8fafc !important;
}

.drawer-header h3 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

.drawer-close-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.drawer-close-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

.drawer-body {
  padding: 24px !important;
  overflow-y: auto !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.drawer-body label {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #334155 !important;
}

.drawer-body input,
.drawer-body select,
.drawer-body textarea {
  width: 100% !important;
  padding: 9px 13px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  font-size: 13.5px !important;
  color: #0f172a !important;
  outline: none !important;
  transition: border-color 0.15s ease !important;
}

.drawer-body input:focus,
.drawer-body select:focus,
.drawer-body textarea:focus {
  border-color: var(--secondary-blue) !important;
}

.drawer-footer {
  padding: 16px 24px !important;
  border-top: 1px solid #f1f5f9 !important;
  background: #f8fafc !important;
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}

/* ==========================================================================
   COMPACT MODULE ACTION TOOLBAR
   ========================================================================== */
.module-action-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
  flex-wrap: nowrap !important;
  background: #ffffff !important;
  padding: 12px 18px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
}

.action-bar-search-form {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  max-width: 480px !important;
}

.search-input-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
}

.search-input-box svg {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

.search-input-box input {
  width: 100% !important;
  height: 38px !important;
  padding: 0 14px 0 36px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  outline: none !important;
  background: #f8fafc !important;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

.search-input-box input:focus {
  border-color: var(--secondary-blue) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(0, 130, 200, 0.12) !important;
}

.action-bar-right-tools {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.action-bar-id-form {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.action-bar-id-input {
  height: 38px !important;
  width: 130px !important;
  padding: 0 12px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  outline: none !important;
  background: #f8fafc !important;
  transition: all 0.18s ease !important;
}

.action-bar-id-input:focus {
  border-color: var(--secondary-blue) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(0, 130, 200, 0.12) !important;
}

.action-bar-btn {
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

.action-bar-btn.btn-primary {
  background: linear-gradient(135deg, var(--secondary-blue), var(--secondary-blue-hover)) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 130, 200, 0.25) !important;
}

.action-bar-btn.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 130, 200, 0.35) !important;
}

.drawer-trigger-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 16px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.drawer-trigger-btn:hover {
  background: #f8fafc !important;
  border-color: var(--secondary-blue) !important;
  color: var(--secondary-blue) !important;
}

/* Reports Multi-Widget Grid Layout */
.reports-widgets-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  gap: 20px !important;
  margin-top: 22px !important;
}

.empty-state-text {
  font-size: 12.5px !important;
  color: #64748b !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 16px 0 !important;
}

/* Reports Header Action Buttons & Icon Colors */
.quick-btn.btn-overdue {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid #fca5a5 !important;
  box-shadow: none !important;
}

.quick-btn.btn-overdue svg {
  stroke: #b91c1c !important;
}

.quick-btn.btn-overdue:hover {
  background: #fca5a5 !important;
  color: #7f1d1d !important;
  border-color: #ef4444 !important;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.25) !important;
}

.quick-btn.btn-overdue:hover svg {
  stroke: #7f1d1d !important;
}

.quick-btn.btn-recent {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1px solid #7dd3fc !important;
  box-shadow: none !important;
}

.quick-btn.btn-recent svg {
  stroke: #0369a1 !important;
}

.quick-btn.btn-recent:hover {
  background: #bae6fd !important;
  color: #075985 !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.25) !important;
}

.quick-btn.btn-recent:hover svg {
  stroke: #075985 !important;
}

.quick-btn.btn-export {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border: 1px solid #6ee7b7 !important;
  box-shadow: none !important;
}

.quick-btn.btn-export svg {
  stroke: #065f46 !important;
}

.quick-btn.btn-export:hover {
  background: #a7f3d0 !important;
  color: #044e37 !important;
  border-color: #34d399 !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25) !important;
}

.quick-btn.btn-export:hover svg {
  stroke: #044e37 !important;
}

/* ==========================================================================
   UNIFIED MODULE TABLES & PAGINATION
   ========================================================================== */
.table-wrap,
main .table-wrap {
  border: 1px solid #cbd5e1 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  /* Was "overflow: hidden !important". Because "main .table-wrap" (0,1,1)
     out-ranks every later ".table-wrap { overflow-x: auto !important }"
     (0,1,0), this silently won on every page inside <main>: wide tables were
     clipped with no scrollbar and the sticky Action column could not stay
     visible. A scroll container still clips to border-radius, so the rounded
     corners are kept. */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

table.app-table,
table.dash-table,
main table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #ffffff !important;
}

table.app-table thead th,
table.dash-table thead th,
main table thead th {
  background: #eef7fb !important;
  color: #334155 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 13px 18px !important;
  border-bottom: 2px solid #cbd5e1 !important;
  text-align: left !important;
}

table.app-table tbody td,
table.dash-table tbody td,
main table tbody td {
  padding: 13px 18px !important;
  font-size: 13.5px !important;
  color: #0f172a !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

table.app-table tbody tr:hover,
table.dash-table tbody tr:hover,
main table tbody tr:hover {
  background: #f8fafc !important;
}

/* Standardized Pagination Strip */
.pager,
main .pager {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 14px !important;
  margin-top: 20px !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
}

.page-info {
  font-size: 13.5px !important;
  color: #475569 !important;
  font-weight: 600 !important;
}

.page-nav {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.page-nav a,
.page-nav button,
.page-nav .btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 14px !important;
  background: var(--secondary-blue) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(0, 130, 200, 0.2) !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

.page-nav a.disabled,
.page-nav button:disabled {
  opacity: 0.45 !important;
  pointer-events: none !important;
  background: #94a3b8 !important;
  box-shadow: none !important;
}

.page-nav a:hover:not(.disabled),
.page-nav button:hover:not(:disabled) {
  background: var(--secondary-blue-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 130, 200, 0.3) !important;
}

.page-size {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
}

.page-size select {
  padding: 5px 10px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  font-size: 13px !important;
  outline: none !important;
}

/* =====================================================================
   GLOBAL UNIFIED CONTROL & RESPONSIVE DESIGN SYSTEM
   Standardized Buttons (36px height, 13px font, 8px radius)
   Standardized Inputs/Selects (38px height, 13.5px font, 8px radius)
   Responsive Header, Mobile Off-canvas Sidebar & Layout Container
   ===================================================================== */

button, .btn, .btn-primary, .btn-secondary, .btn-green, .btn-danger,
.quick-btn, .btn-export, button[type="submit"], button[type="button"],
.primary-action, .secondary-action, .tsButton, .action-bar-btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  font-family: var(--sj-font, "Segoe UI Variable", sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
}

.btn-primary, .primary-action, button[type="submit"].btn-primary {
  background: var(--primary-green, #00873d) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
}
.btn-primary:hover, button[type="submit"].btn-primary:hover {
  background: #006e31 !important;
}

.btn-secondary, .secondary-action {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}
.btn-secondary:hover, .secondary-action:hover {
  background: #f8fafc !important;
  border-color: var(--secondary-blue, #0082c8) !important;
  color: var(--secondary-blue, #0082c8) !important;
}

.btn-danger {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
}
.btn-danger:hover {
  background: #b91c1c !important;
}

.btn-sm, .table-actions button, .row-actions button {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

.btn-lg {
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="file"]):not([type="color"]):not([type="range"]),
select, .control {
  box-sizing: border-box !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 14px 0 38px;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-family: var(--sj-font, "Segoe UI Variable", sans-serif) !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--secondary-blue, #0082c8) !important;
  box-shadow: 0 0 0 3px rgba(0, 130, 200, 0.15) !important;
  outline: none !important;
}

textarea {
  min-height: 100px !important;
  height: auto !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
}

.filters, form.filters, .filter-options, .module-action-bar, .action-bar-search-form, .action-bar-id-form {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.filters label, form.filters label, .filter-options label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  white-space: nowrap !important;
}

.filters select, form.filters select, .filter-options select,
.filters input:not([type="hidden"]), form.filters input:not([type="hidden"]), .filter-options input:not([type="hidden"]) {
  width: auto !important;
  min-width: 150px !important;
  max-width: 280px !important;
  flex: 0 1 auto !important;
  height: 38px !important;
  min-height: 38px !important;
}

.form-grid label input, .form-grid label select, .form-grid label textarea,
.form-group input, .form-group select, .form-group textarea,
.field input, .field select, .field textarea,
.pcrf-form input, .pcrf-form select, .pcrf-form textarea,
form.panel:not(.filters) input, form.panel:not(.filters) select, form.panel:not(.filters) textarea {
  width: 100% !important;
  max-width: 100% !important;
}


/* =====================================================================
   GLOBAL ICON INPUT & ICON BUTTON PROTECTION SYSTEM
   Ensures text never overlaps left/right icons in inputs
   Ensures icon buttons (sidebar toggle, logout, bell, eye toggle)
   are perfectly sized, centered, and aligned.
   ===================================================================== */

/* 1. Header Global Search Bar Input & Icon */
.topbar-search {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.topbar-search input,
.topbar-search input[type="search"] {
  padding-left: 38px !important;
  padding-right: 14px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 20px !important;
}

.topbar-search .search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  stroke: #94a3b8 !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* 2. Action Bar Search Box Input & Icon (Tickets, Tasks, ITSM) */
.search-input-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.search-input-box input,
.search-input-box input[type="text"] {
  padding-left: 36px !important;
  padding-right: 12px !important;
  height: 38px !important;
  min-height: 38px !important;
}

.search-input-box svg {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  stroke: #64748b !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* 3. Login & Register Input Icon Wrappers */
.input-icon-wrap, .input-icon-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.input-icon-wrap input,
.input-icon-wrapper input {
  padding-left: 38px !important;
  padding-right: 12px !important;
  height: 40px !important;
  min-height: 40px !important;
}

.input-icon-wrap.password-wrap input,
.input-icon-wrapper.password-wrap input {
  padding-right: 42px !important;
}

.input-left-icon, .input-icon-wrap > svg, .input-icon-wrapper > svg {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.input-left-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  display: block !important;
}

/* Password Eye Toggle Button */
.password-toggle {
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #94a3b8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 6 !important;
  border-radius: 6px !important;
}

.password-toggle svg, .password-toggle .eye-icon {
  width: 18px !important;
  height: 18px !important;
  stroke: #64748b !important;
  display: block !important;
}

/* 4. Sidebar Toggle Button (< > Icon) */
.sidebar-toggle-btn, #sidebarToggle {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.sidebar-toggle-btn:hover, #sidebarToggle:hover {
  background: #f1f5f9 !important;
  border-color: var(--secondary-blue, #0082c8) !important;
  color: var(--secondary-blue, #0082c8) !important;
}

.sidebar-toggle-btn svg, #sidebarToggle svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  stroke: currentColor !important;
  stroke-width: 2.5 !important;
  flex-shrink: 0 !important;
}

/* Sidebar Toggle Chevron Icon Visibility Logic */
.sidebar-toggle-btn .chevron-toggle-left {
  display: block !important;
}

.sidebar-toggle-btn .chevron-toggle-right {
  display: none !important;
}

/* Desktop Collapsed State: Show > (right chevron), hide < (left chevron) */
body.sidebar-collapsed .sidebar-toggle-btn .chevron-toggle-left {
  display: none !important;
}

body.sidebar-collapsed .sidebar-toggle-btn .chevron-toggle-right {
  display: block !important;
}

/* Mobile Screen (<=992px) Responsive Toggle Logic */
@media (max-width: 992px) {
  body:not(.sidebar-open) .sidebar-toggle-btn .chevron-toggle-left {
    display: none !important;
  }
  body:not(.sidebar-open) .sidebar-toggle-btn .chevron-toggle-right {
    display: block !important;
  }
  body.sidebar-open .sidebar-toggle-btn .chevron-toggle-left {
    display: block !important;
  }
  body.sidebar-open .sidebar-toggle-btn .chevron-toggle-right {
    display: none !important;
  }
}

/* 5. Logout Button (Red Circle/Pill Icon Button) */
.topbar-logout {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.logout-btn, .topbar-logout button {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

.logout-btn:hover, .topbar-logout button:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

.logout-btn svg, .topbar-logout button svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* 6. Topbar Action Icon Buttons (Reminders, Bell) */
.topbar-icon-btn {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.topbar-icon-btn:hover {
  background: #f1f5f9 !important;
  color: var(--secondary-blue, #0082c8) !important;
  border-color: var(--secondary-blue, #0082c8) !important;
}

.topbar-icon-btn svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  stroke: currentColor !important;
  display: block !important;
  flex-shrink: 0 !important;
}


/* =====================================================================
   ULTIMATE ICON INPUT & BUTTON SEPARATION SYSTEM
   High specificity (0, 2, 2) to override any generic input rules.
   Ensures text & placeholders NEVER overlap left/right icons.
   ===================================================================== */

/* 1. Header Search Bar */
.topbar-search {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.topbar-search input,
.topbar-search input[type="search"],
.topbar-search input[type="text"] {
  padding-left: 42px !important;
  padding-right: 14px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 20px !important;
}

.topbar-search .search-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  stroke: #94a3b8 !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* 2. Action Bar Search Box (Tickets, Tasks, ITSM, CMDB, Users) */
.search-input-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.search-input-box input,
.search-input-box input[type="text"],
.search-input-box input[type="search"] {
  padding-left: 42px !important;
  padding-right: 14px !important;
  height: 38px !important;
  min-height: 38px !important;
}

.search-input-box svg,
.search-input-box .search-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  stroke: #64748b !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* 3. Login & Register Input Icon Wrappers */
.input-icon-wrap,
.input-icon-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.input-icon-wrap input,
.input-icon-wrapper input,
.input-icon-wrap input[type="text"],
.input-icon-wrap input[type="email"],
.input-icon-wrap input[type="password"],
.input-icon-wrapper input[type="text"],
.input-icon-wrapper input[type="email"],
.input-icon-wrapper input[type="password"] {
  padding-left: 44px !important;
  padding-right: 14px !important;
  height: 40px !important;
  min-height: 40px !important;
}

.password-wrap input,
.input-icon-wrap.password-wrap input,
.input-icon-wrapper.password-wrap input,
.password-wrap input[type="password"],
.input-icon-wrap.password-wrap input[type="password"] {
  padding-left: 44px !important;
  padding-right: 44px !important;
}

.input-left-icon,
.input-icon-wrap > svg,
.input-icon-wrapper > svg,
.input-icon-wrap .input-left-icon,
.input-icon-wrapper .input-left-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.input-left-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  display: block !important;
}

.password-toggle {
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #94a3b8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 11 !important;
  border-radius: 6px !important;
}

.password-toggle svg,
.password-toggle .eye-icon {
  width: 18px !important;
  height: 18px !important;
  stroke: #64748b !important;
  display: block !important;
}


/* =====================================================================
   MASTER RESPONSIVE & MOBILE LAYOUT OVERRIDES (0, 3, 0 Specificity)
   Fixes narrow content squishing, off-canvas mobile sidebar,
   full-width form fields, stacked filter panels & responsive tables.
   ===================================================================== */

@media (max-width: 992px) {
  /* Hide desktop margin offset and enforce 100% full width main container */
  html body main,
  html body .container,
  html body .dashboard-main,
  html body .pm-container,
  html body footer,
  html body .site-footer {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  /* Off-canvas mobile navigation drawer */
  html body .site-nav,
  html body .sidebar-nav {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 260px !important;
    z-index: 1050 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.18) !important;
    background: #ffffff !important;
    overflow-y: auto !important;
  }

  html body.sidebar-open .site-nav,
  html body.sidebar-open .sidebar-nav {
    transform: translateX(0) !important;
  }

  .topbar-divider-line {
    display: none !important;
  }

  .topbar-search {
    max-width: 200px !important;
  }
}

@media (max-width: 768px) {
  /* Stack form grids and field columns to 1 column on phone screens */
  .form-grid, .grid-2, .grid-3, .form-row, .row, .cards, .card-grid, .kpis, .pcrf-kpis {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Full width form elements */
  .field, .form-group, form.panel label, .pcrf-form label, .form-field {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Stack filter bars vertically */
  .filters, form.filters, .filter-options, .module-action-bar, .board-filter, .pcrf-filter {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .filters label, form.filters label, .filter-options label, .board-filter label, .pcrf-filter label {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .filters select, form.filters select, .filter-options select,
  .filters input:not([type="hidden"]), form.filters input:not([type="hidden"]), .filter-options input:not([type="hidden"]),
  .board-filter select, .board-filter input, .pcrf-filter select, .pcrf-filter input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .filter-go, .action-bar-right-tools, .form-actions, .actions {
    width: 100% !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .filter-go > *, .action-bar-right-tools > *, .form-actions > *, .actions > * {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Header banner titles stack */
  .list-head, .dash-header-row, .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Responsive table scroll wrap */
  table, .table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 540px) {
  .topbar-search {
    display: none !important;
  }
  .site-header {
    padding: 0 10px !important;
  }
  .topbar-brand-section {
    width: auto !important;
    padding-right: 0 !important;
  }
  .brand-tag {
    display: none !important;
  }
  .quick-btn span {
    display: none !important;
  }
  .quick-btn {
    padding: 0 8px !important;
  }
}


/* =====================================================================
   MASTER TABLE HORIZONTAL SCROLL & HEADER PROTECTION SYSTEM
   Prevents column header text (th) & cell text (td) from breaking into vertical letters.
   Enforces clean horizontal table layout with smooth touch scrolling across all modules.
   ===================================================================== */

/* 1. Header & Cell Text Wrapping Protection */
table th,
table td,
.app-table th,
.app-table td,
.dash-table th,
.dash-table td,
.ts-table th,
.ts-table td,
table.table-compact th,
table.table-compact td,
.pcrf-module table th,
.pcrf-module table td {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  word-wrap: normal !important;
}

/* 2. Container Horizontal Scroll Protection */
.table-wrap,
.table-container,
.table-responsive,
.timesheet-table-wrap,
.report-table-wrap,
.list-table-wrap,
.sahaj-table-scroll,
.attachment-table-wrap,
main,
.container,
.dashboard-main,
.pm-container {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 3. Table Layout & Min-Width Constraint on Mobile & Desktop */
table,
.app-table,
.dash-table,
.ts-table,
.pcrf-module table,
main table {
  display: table !important;
  min-width: 720px !important;
  width: 100% !important;
  max-width: none !important;
  border-collapse: collapse !important;
}

/* Allow summary / description cells to wrap naturally with min-width constraint */
table td.col-summary,
table td.col-description,
.app-table td:nth-child(2),
.dash-table td:nth-child(2) {
  white-space: normal !important;
  min-width: 200px !important;
}


/* =====================================================================
   DASHBOARD CARD WIDTH PROTECTION & INNER TABLE SCROLL SYSTEM
   Prevents Ticket Category Breakdown and widget cards from expanding card width.
   Enforces inner horizontal scrolling inside .table-wrap.
   ===================================================================== */

.dash-grid-layout,
.dash-col-main,
.dash-col-side,
.dash-widget-card,
.card,
.panel,
.widget {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.dash-widget-card,
.card,
.panel {
  width: 100% !important;
  overflow: hidden !important;
}

.dash-widget-card .table-wrap,
.card .table-wrap,
.panel .table-wrap,
.table-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

.dash-widget-card table,
.dash-table,
.card table,
.panel table {
  display: table !important;
  min-width: 580px !important;
  width: 100% !important;
}


/* =====================================================================
   UNIVERSAL TABLE INNER SCROLL SYSTEM FOR ALL MODULES & PAGES
   Ensures EVERY table wrapped in .table-wrap or inside main/card/panel
   has an enforced min-width (650px) so horizontal scrolling ALWAYS works.
   ===================================================================== */

.table-wrap,
.table-container,
.table-responsive,
.timesheet-table-wrap,
.report-table-wrap,
.list-table-wrap,
.sahaj-table-scroll,
.attachment-table-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

.table-wrap > table,
.table-container > table,
.table-responsive > table,
.timesheet-table-wrap > table,
.report-table-wrap > table,
.list-table-wrap > table,
table.app-table,
table.dash-table,
table.ts-table,
table.table-compact,
main table,
.pcrf-module table,
.dash-widget-card table,
.card table,
.panel table {
  display: table !important;
  min-width: 650px !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

table th,
table td,
.app-table th,
.app-table td,
.dash-table th,
.dash-table td,
.ts-table th,
.ts-table td,
table.table-compact th,
table.table-compact td,
.pcrf-module table th,
.pcrf-module table td {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  word-wrap: normal !important;
}

table td.col-summary,
table td.col-description,
.app-table td:nth-child(2),
.dash-table td:nth-child(2) {
  white-space: normal !important;
  min-width: 180px !important;
}


/* =====================================================================
   UNIVERSAL TABLE CARD & INNER HORIZONTAL SCROLL SYSTEM
   Applies card-like container bounds, crisp border & inner scroll
   to .table-wrap across all modules (Teams, Tickets, Tasks, Users, PCRF, ITSM).
   ===================================================================== */

.table-wrap,
.table-container,
.table-responsive,
.timesheet-table-wrap,
.report-table-wrap,
.list-table-wrap,
.sahaj-table-scroll,
.attachment-table-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  margin-top: 14px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.table-wrap > table,
.table-container > table,
.table-responsive > table,
.timesheet-table-wrap > table,
.report-table-wrap > table,
.list-table-wrap > table,
table.app-table,
table.dash-table,
table.ts-table,
table.table-compact,
main table,
.pcrf-module table {
  display: table !important;
  min-width: 680px !important;
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}

table th,
table td,
.app-table th,
.app-table td,
.dash-table th,
.dash-table td,
.ts-table th,
.ts-table td,
table.table-compact th,
table.table-compact td,
.pcrf-module table th,
.pcrf-module table td {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  word-wrap: normal !important;
  padding: 10px 14px !important;
}

table td.col-summary,
table td.col-description,
.app-table td:nth-child(2),
.dash-table td:nth-child(2) {
  white-space: normal !important;
  min-width: 200px !important;
}


/* =====================================================================
   GLOBAL MANDATORY INNER HORIZONTAL TABLE SCROLL SYSTEM
   Enforces card-like bounds, border-radius, background, and horizontal
   inner scrolling for ALL tables in ALL modules (Teams, Tickets, Tasks,
   Users, Projects, ITSM, PCRF, Reports, Timesheets, Settings, etc.)
   even when tables are empty or on small mobile screens.
   ===================================================================== */

/* 1. Container: Must be block, 100% width, overflow-x auto, overflow-y hidden */
.table-wrap,
.table-container,
.table-responsive,
.timesheet-table-wrap,
.report-table-wrap,
.list-table-wrap,
.sahaj-table-scroll,
.attachment-table-wrap,
.pcrf-table-wrap,
main .table-wrap,
.dash-widget-card .table-wrap,
.card .table-wrap,
.panel .table-wrap {
}

/* Custom scrollbar styling for webkit browsers */
.table-wrap::-webkit-scrollbar,
.table-container::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.timesheet-table-wrap::-webkit-scrollbar,
.report-table-wrap::-webkit-scrollbar,
.list-table-wrap::-webkit-scrollbar,
.sahaj-table-scroll::-webkit-scrollbar,
.attachment-table-wrap::-webkit-scrollbar {
}

.table-wrap::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.timesheet-table-wrap::-webkit-scrollbar-track,
.report-table-wrap::-webkit-scrollbar-track,
.list-table-wrap::-webkit-scrollbar-track,
.sahaj-table-scroll::-webkit-scrollbar-track,
.attachment-table-wrap::-webkit-scrollbar-track {
}

.table-wrap::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.timesheet-table-wrap::-webkit-scrollbar-thumb,
.report-table-wrap::-webkit-scrollbar-thumb,
.list-table-wrap::-webkit-scrollbar-thumb,
.sahaj-table-scroll::-webkit-scrollbar-thumb,
.attachment-table-wrap::-webkit-scrollbar-thumb {
}

/* 2. Table Element: Force display table, minimum width of 750px across all viewports */
.table-wrap > table,
.table-container > table,
.table-responsive > table,
.timesheet-table-wrap > table,
.report-table-wrap > table,
.list-table-wrap > table,
.sahaj-table-scroll > table,
.attachment-table-wrap > table,
table.app-table,
table.dash-table,
table.ts-table,
table.table-compact,
main table,
.pcrf-module table {
}

/* Ensure mobile media queries cannot break display: table or min-width */
@media (max-width: 1200px) {
  .table-wrap > table,
  .table-container > table,
  .table-responsive > table,
  .timesheet-table-wrap > table,
  .report-table-wrap > table,
  .list-table-wrap > table,
  .sahaj-table-scroll > table,
  .attachment-table-wrap > table,
  table.app-table,
  table.dash-table,
  table.ts-table,
  table.table-compact,
  main table,
  .pcrf-module table {
  }

  .table-wrap table th,
  .table-wrap table td,
  table.app-table th,
  table.app-table td,
  table.dash-table th,
  table.dash-table td,
  table.ts-table th,
  table.ts-table td,
  table.table-compact th,
  table.table-compact td,
  main table th,
  main table td {
  }
}

/* 3. Table Header & Cells Styling */
.table-wrap th,
.table-wrap td,
.table-container th,
.table-container td,
.table-responsive th,
.table-responsive td,
.timesheet-table-wrap th,
.timesheet-table-wrap td,
.report-table-wrap th,
.report-table-wrap td,
.list-table-wrap th,
.list-table-wrap td,
.sahaj-table-scroll th,
.sahaj-table-scroll td,
.attachment-table-wrap th,
.attachment-table-wrap td,
table.app-table th,
table.app-table td,
table.dash-table th,
table.dash-table td,
table.ts-table th,
table.ts-table td,
table.table-compact th,
table.table-compact td,
main table th,
main table td,
.pcrf-module table th,
.pcrf-module table td {
}

/* 4. Empty State Row Handling (e.g. 'No active teams yet.') */
.table-wrap tbody tr td[colspan],
.table-container tbody tr td[colspan],
table.app-table tbody tr td[colspan] {
}

/* Allow description/summary cells to wrap if needed while maintaining cell min-width */
table td.col-summary,
table td.col-description {
}

/* =====================================================================
   GLOBAL MANDATORY INNER HORIZONTAL TABLE SCROLL SYSTEM
   Enforces card-like bounds, border-radius, background, and horizontal
   inner scrolling for ALL tables in ALL modules (Teams, Tickets, Tasks,
   Users, Projects, ITSM, PCRF, Reports, Timesheets, Settings, etc.)
   even when tables are empty or on small mobile screens.
   ===================================================================== */

.table-wrap,
.table-container,
.table-responsive,
.timesheet-table-wrap,
.report-table-wrap,
.list-table-wrap,
.sahaj-table-scroll,
.attachment-table-wrap,
.pcrf-table-wrap,
main .table-wrap,
.dash-widget-card .table-wrap,
.card .table-wrap,
.panel .table-wrap {
}

.table-wrap::-webkit-scrollbar,
.table-container::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.timesheet-table-wrap::-webkit-scrollbar,
.report-table-wrap::-webkit-scrollbar,
.list-table-wrap::-webkit-scrollbar,
.sahaj-table-scroll::-webkit-scrollbar,
.attachment-table-wrap::-webkit-scrollbar {
}

.table-wrap::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.timesheet-table-wrap::-webkit-scrollbar-track,
.report-table-wrap::-webkit-scrollbar-track,
.list-table-wrap::-webkit-scrollbar-track,
.sahaj-table-scroll::-webkit-scrollbar-track,
.attachment-table-wrap::-webkit-scrollbar-track {
}

.table-wrap::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.timesheet-table-wrap::-webkit-scrollbar-thumb,
.report-table-wrap::-webkit-scrollbar-thumb,
.list-table-wrap::-webkit-scrollbar-thumb,
.sahaj-table-scroll::-webkit-scrollbar-thumb,
.attachment-table-wrap::-webkit-scrollbar-thumb {
}

.table-wrap > table,
.table-container > table,
.table-responsive > table,
.timesheet-table-wrap > table,
.report-table-wrap > table,
.list-table-wrap > table,
.sahaj-table-scroll > table,
.attachment-table-wrap > table,
table.app-table,
table.dash-table,
table.ts-table,
table.table-compact,
main table,
.pcrf-module table {
}

@media (max-width: 1200px) {
  .table-wrap > table,
  .table-container > table,
  .table-responsive > table,
  .timesheet-table-wrap > table,
  .report-table-wrap > table,
  .list-table-wrap > table,
  .sahaj-table-scroll > table,
  .attachment-table-wrap > table,
  table.app-table,
  table.dash-table,
  table.ts-table,
  table.table-compact,
  main table,
  .pcrf-module table {
  }

  .table-wrap table th,
  .table-wrap table td,
  table.app-table th,
  table.app-table td,
  table.dash-table th,
  table.dash-table td,
  table.ts-table th,
  table.ts-table td,
  table.table-compact th,
  table.table-compact td,
  main table th,
  main table td {
  }
}

.table-wrap th,
.table-wrap td,
.table-container th,
.table-container td,
.table-responsive th,
.table-responsive td,
.timesheet-table-wrap th,
.timesheet-table-wrap td,
.report-table-wrap th,
.report-table-wrap td,
.list-table-wrap th,
.list-table-wrap td,
.sahaj-table-scroll th,
.sahaj-table-scroll td,
.attachment-table-wrap th,
.attachment-table-wrap td,
table.app-table th,
table.app-table td,
table.dash-table th,
table.dash-table td,
table.ts-table th,
table.ts-table td,
table.table-compact th,
table.table-compact td,
main table th,
main table td,
.pcrf-module table th,
.pcrf-module table td {
}

.table-wrap tbody tr td[colspan],
.table-container tbody tr td[colspan],
table.app-table tbody tr td[colspan] {
}

table td.col-summary,
table td.col-description {
}

/* =====================================================================
   GLOBAL MANDATORY INNER HORIZONTAL TABLE SCROLL SYSTEM
   Enforces card-like bounds, border-radius, background, and horizontal
   inner scrolling for ALL tables in ALL modules (Teams, Tickets, Tasks,
   Users, Projects, ITSM, PCRF, Reports, Timesheets, Settings, etc.)
   even when tables are empty or on small mobile screens.
   ===================================================================== */

.table-wrap,
.table-container,
.table-responsive,
.timesheet-table-wrap,
.report-table-wrap,
.list-table-wrap,
.sahaj-table-scroll,
.attachment-table-wrap,
.pcrf-table-wrap,
main .table-wrap,
.dash-widget-card .table-wrap,
.card .table-wrap,
.panel .table-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  margin-top: 14px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  position: relative !important;
  clear: both !important;
}

.table-wrap::-webkit-scrollbar,
.table-container::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.timesheet-table-wrap::-webkit-scrollbar,
.report-table-wrap::-webkit-scrollbar,
.list-table-wrap::-webkit-scrollbar,
.sahaj-table-scroll::-webkit-scrollbar,
.attachment-table-wrap::-webkit-scrollbar {
  height: 8px !important;
  display: block !important;
}

.table-wrap::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.timesheet-table-wrap::-webkit-scrollbar-track,
.report-table-wrap::-webkit-scrollbar-track,
.list-table-wrap::-webkit-scrollbar-track,
.sahaj-table-scroll::-webkit-scrollbar-track,
.attachment-table-wrap::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
  border-radius: 4px !important;
}

.table-wrap::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.timesheet-table-wrap::-webkit-scrollbar-thumb,
.report-table-wrap::-webkit-scrollbar-thumb,
.list-table-wrap::-webkit-scrollbar-thumb,
.sahaj-table-scroll::-webkit-scrollbar-thumb,
.attachment-table-wrap::-webkit-scrollbar-thumb {
  background: #94a3b8 !important;
  border-radius: 4px !important;
}

.table-wrap > table,
.table-container > table,
.table-responsive > table,
.timesheet-table-wrap > table,
.report-table-wrap > table,
.list-table-wrap > table,
.sahaj-table-scroll > table,
.attachment-table-wrap > table,
table.app-table,
table.dash-table,
table.ts-table,
table.table-compact,
main table,
.pcrf-module table {
  display: table !important;
  min-width: 750px !important;
  width: max-content !important;
  border-collapse: collapse !important;
  margin: 0 !important;
  table-layout: auto !important;
}

@media (max-width: 1200px) {
  .table-wrap > table,
  .table-container > table,
  .table-responsive > table,
  .timesheet-table-wrap > table,
  .report-table-wrap > table,
  .list-table-wrap > table,
  .sahaj-table-scroll > table,
  .attachment-table-wrap > table,
  table.app-table,
  table.dash-table,
  table.ts-table,
  table.table-compact,
  main table,
  .pcrf-module table {
    display: table !important;
    min-width: 750px !important;
    width: max-content !important;
  }

  .table-wrap table th,
  .table-wrap table td,
  table.app-table th,
  table.app-table td,
  table.dash-table th,
  table.dash-table td,
  table.ts-table th,
  table.ts-table td,
  table.table-compact th,
  table.table-compact td,
  main table th,
  main table td {
    display: table-cell !important;
    white-space: nowrap !important;
  }
}

.table-wrap th,
.table-wrap td,
.table-container th,
.table-container td,
.table-responsive th,
.table-responsive td,
.timesheet-table-wrap th,
.timesheet-table-wrap td,
.report-table-wrap th,
.report-table-wrap td,
.list-table-wrap th,
.list-table-wrap td,
.sahaj-table-scroll th,
.sahaj-table-scroll td,
.attachment-table-wrap th,
.attachment-table-wrap td,
table.app-table th,
table.app-table td,
table.dash-table th,
table.dash-table td,
table.ts-table th,
table.ts-table td,
table.table-compact th,
table.table-compact td,
main table th,
main table td,
.pcrf-module table th,
.pcrf-module table td {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  word-wrap: normal !important;
  padding: 11px 16px !important;
}

.table-wrap tbody tr td[colspan],
.table-container tbody tr td[colspan],
table.app-table tbody tr td[colspan] {
  white-space: nowrap !important;
  min-width: 750px !important;
  text-align: center !important;
}

table td.col-summary,
table td.col-description {
  white-space: normal !important;
  min-width: 220px !important;
}


/* =====================================================================
   MOBILE TOPBAR CLEANUP SYSTEM
   Hides header search, Quick Action button, brand text ('Sahaj Ticketing'),
   and user profile text ('Sahaj Administrator / Administrator') on mobile
   and tablet viewports (<= 992px) so navigation buttons fit comfortably.
   ===================================================================== */
@media (max-width: 992px) {
  /* 1. Remove Header Global Search Input */
  .topbar-search,
  .top-search-form,
  .global-search-wrap,
  .header-search,
  #topSearchForm,
  .search-form {
    display: none !important;
  }

  /* 2. Remove Quick Actions Mega Dropdown */
  .quick-access-dropdown,
  #quickAccessDropdown,
  .quick-actions,
  .quick-action-dropdown,
  #quickAccessTrigger {
    display: none !important;
  }

  /* 3. Remove 'Sahaj Ticketing' Brand Text */
  .topbar-brand .brand-text,
  .brand-name,
  .brand-tag,
  .logo-text,
  .site-brand-text {
    display: none !important;
  }

  /* 4. Remove 'Sahaj Administrator Administrator' User Text */
  .topbar-user .user-info,
  .user-name,
  .user-role,
  .header-user-info,
  .profile-info {
    display: none !important;
  }

  /* 5. Hide Topbar Vertical Divider Line */
  .topbar-divider-line {
    display: none !important;
  }

  /* Clean up Topbar Spacing & Alignment */
  .site-header .topbar-container {
    padding: 6px 12px !important;
    gap: 8px !important;
    justify-content: space-between !important;
  }

  .topbar-left {
    gap: 8px !important;
    flex: 0 0 auto !important;
  }

  .topbar-brand-section {
    gap: 8px !important;
  }

  .topbar-actions {
    gap: 8px !important;
    flex: 0 0 auto !important;
  }

  .topbar-user {
    padding: 2px !important;
    gap: 0 !important;
  }
}


/* =====================================================================
   HEADER BRAND LOGO INSET SYSTEM
   Styles the uploaded logo image inside the green logo box (.brand-logo-mark)
   ===================================================================== */
.brand-logo-mark {
  width: 36px !important;
  height: 36px !important;
  background: var(--primary-green, #00873d) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 10px rgba(0, 135, 61, 0.25) !important;
  overflow: hidden !important;
  padding: 2px !important;
  box-sizing: border-box !important;
}

.brand-logo-mark img.brand-logo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  display: block !important;
}


/* =====================================================================
   GLOBAL RESPONSIVE TABLE SCROLL & FULL-WIDTH SYSTEM
   - Desktop (>768px): Tables span 100% full width of container (no fixed max-content width).
   - Mobile (<=768px): Tables enforce min-width (680px) for inner horizontal scrollbar.
   ===================================================================== */

/* 1. Container: Block, 100% width, overflow-x auto, rounded card bounds */
.table-wrap,
.table-container,
.table-responsive,
.timesheet-table-wrap,
.report-table-wrap,
.list-table-wrap,
.sahaj-table-scroll,
.attachment-table-wrap,
.pcrf-table-wrap,
main .table-wrap,
.dash-widget-card .table-wrap,
.card .table-wrap,
.panel .table-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  margin-top: 14px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  position: relative !important;
  clear: both !important;
}

/* Webkit Scrollbar Styling */
.table-wrap::-webkit-scrollbar,
.table-container::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.timesheet-table-wrap::-webkit-scrollbar,
.report-table-wrap::-webkit-scrollbar,
.list-table-wrap::-webkit-scrollbar,
.sahaj-table-scroll::-webkit-scrollbar,
.attachment-table-wrap::-webkit-scrollbar {
  height: 8px !important;
  display: block !important;
}

.table-wrap::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.timesheet-table-wrap::-webkit-scrollbar-track,
.report-table-wrap::-webkit-scrollbar-track,
.list-table-wrap::-webkit-scrollbar-track,
.sahaj-table-scroll::-webkit-scrollbar-track,
.attachment-table-wrap::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
  border-radius: 4px !important;
}

.table-wrap::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.timesheet-table-wrap::-webkit-scrollbar-thumb,
.report-table-wrap::-webkit-scrollbar-thumb,
.list-table-wrap::-webkit-scrollbar-thumb,
.sahaj-table-scroll::-webkit-scrollbar-thumb,
.attachment-table-wrap::-webkit-scrollbar-thumb {
  background: #94a3b8 !important;
  border-radius: 4px !important;
}

/* 2. Desktop / Non-Mobile Screens (>768px): FULL 100% WIDTH (stretches across entire container) */
@media (min-width: 769px) {
  .table-wrap > table,
  .table-container > table,
  .table-responsive > table,
  .timesheet-table-wrap > table,
  .report-table-wrap > table,
  .list-table-wrap > table,
  .sahaj-table-scroll > table,
  .attachment-table-wrap > table,
  table.app-table,
  table.dash-table,
  table.ts-table,
  table.table-compact,
  main table,
  .pcrf-module table {
    display: table !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    table-layout: auto !important;
  }

  .table-wrap tbody tr td[colspan],
  .table-container tbody tr td[colspan],
  table.app-table tbody tr td[colspan] {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }
}

/* 3. Mobile Screens (<=768px): ENFORCE MIN-WIDTH FOR INNER HORIZONTAL SCROLL */
@media (max-width: 768px) {
  .table-wrap > table,
  .table-container > table,
  .table-responsive > table,
  .timesheet-table-wrap > table,
  .report-table-wrap > table,
  .list-table-wrap > table,
  .sahaj-table-scroll > table,
  .attachment-table-wrap > table,
  table.app-table,
  table.dash-table,
  table.ts-table,
  table.table-compact,
  main table,
  .pcrf-module table {
    display: table !important;
    min-width: 680px !important;
    width: max-content !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    table-layout: auto !important;
  }

  .table-wrap table th,
  .table-wrap table td,
  table.app-table th,
  table.app-table td,
  table.dash-table th,
  table.dash-table td,
  table.ts-table th,
  table.ts-table td,
  table.table-compact th,
  table.table-compact td,
  main table th,
  main table td {
    display: table-cell !important;
    white-space: nowrap !important;
  }

  .table-wrap tbody tr td[colspan],
  .table-container tbody tr td[colspan],
  table.app-table tbody tr td[colspan] {
    white-space: nowrap !important;
    min-width: 680px !important;
    text-align: center !important;
  }
}

/* 4. Cell Padding & Summary Defaults */
.table-wrap th,
.table-wrap td,
.table-container th,
.table-container td,
.table-responsive th,
.table-responsive td,
.timesheet-table-wrap th,
.timesheet-table-wrap td,
.report-table-wrap th,
.report-table-wrap td,
.list-table-wrap th,
.list-table-wrap td,
.sahaj-table-scroll th,
.sahaj-table-scroll td,
.attachment-table-wrap th,
.attachment-table-wrap td,
table.app-table th,
table.app-table td,
table.dash-table th,
table.dash-table td,
table.ts-table th,
table.ts-table td,
table.table-compact th,
table.table-compact td,
main table th,
main table td,
.pcrf-module table th,
.pcrf-module table td {
  padding: 11px 16px !important;
}

table td.col-summary,
table td.col-description {
  white-space: normal !important;
  min-width: 220px !important;
}


/* =====================================================================
   HEADER BRAND LOGO FULL SQUARE SYSTEM
   Places the logo image in full square filling the entire logo container
   ===================================================================== */
.brand-logo-mark {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  display: block !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid #cbd5e1 !important;
  box-sizing: border-box !important;
}

.brand-logo-mark img.brand-logo-img,
.brand-logo-mark img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: fill !important;
  border-radius: 7px !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* =====================================================================
   MOBILE & TAB SCREEN TOGGLE BUTTON POSITIONING SYSTEM
   Places the toggle button (> / <) immediately beside the logo icon
   on mobile and tablet viewports (<= 992px).
   ===================================================================== */
@media (max-width: 992px) {
  .topbar-brand-section {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
  }

  .topbar-brand {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .sidebar-toggle-btn,
  #sidebarToggle {
    margin-left: 0 !important;
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    flex-shrink: 0 !important;
  }
}


/* =====================================================================
   FILTER DRAWER & COMPACT TRIGGER BUTTON FIX
   Fixes drawer z-index, active visibility, and eliminates vertical padding
   bloat on mobile devices for Filter Options trigger buttons.
   ===================================================================== */

.drawer-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 99998 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

.drawer-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.filter-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: 420px !important;
  max-width: 90vw !important;
  height: 100vh !important;
  background: #ffffff !important;
  z-index: 99999 !important;
  box-shadow: -8px 0 36px rgba(15, 23, 42, 0.25) !important;
  transform: translateX(100%) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  pointer-events: auto !important;
}

.filter-drawer.active {
  transform: translateX(0) !important;
}

.drawer-trigger-btn,
#openFilterDrawerBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 14px !important;
  margin: 4px 0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

@media (max-width: 768px) {
  .drawer-trigger-btn,
  #openFilterDrawerBtn {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 14px !important;
    margin: 6px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* =====================================================================
   PCRF PROCESS BOARD TOP PADDING & FILTER DRAWER FIX
   Eliminates top whitespace gap on PCRF board and ensures filter drawer
   opens seamlessly with high z-index overlay.
   ===================================================================== */
.pcrf-module main,
.pcrf-page,
main.pcrf-page {
  padding-top: 10px !important;
  margin-top: 54px !important;
}

.pcrf-module .dash-header-row,
.pcrf-page .dash-header-row {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 768px) {
  .pcrf-module main,
  .pcrf-page,
  main.pcrf-page {
    padding-top: 8px !important;
    margin-top: 50px !important;
  }
}

.drawer-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 99998 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

.drawer-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.filter-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: 420px !important;
  max-width: 90vw !important;
  height: 100vh !important;
  background: #ffffff !important;
  z-index: 99999 !important;
  box-shadow: -8px 0 36px rgba(15, 23, 42, 0.25) !important;
  transform: translateX(100%) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  pointer-events: auto !important;
}

.filter-drawer.active {
  transform: translateX(0) !important;
}


/* =====================================================================
   GLOBAL MODULE PADDING & SUBLINE REMOVAL SYSTEM (SPRINTS MATCHING)
   - Matches Sprints Overview top/bottom padding across all modules.
   - Completely removes sublines/subtitles from all pages.
   ===================================================================== */

/* 1. Global Subline Removal */
.subtitle,
.dash-header-title .subtitle,
.dash-header-title p,
.page-header .subtitle,
.page-header p,
.header-title .subtitle,
.header-title p,
.list-head .subtitle,
.list-head p,
main .subtitle,
main header p.subtitle,
.pcrf-page .subtitle {
  display: none !important;
}

/* 2. Global Unified Module Padding (Desktop >768px: 64px top margin, 24px 28px padding) */
main:not(.login-shell):not(.register-shell),
.dashboard-main,
.pcrf-page,
main.pcrf-page,
.pcrf-module main,
.content-area,
.page-container {
  margin-top: 64px !important;
  padding: 24px 28px !important;
  min-height: calc(100vh - 64px) !important;
  background: #f8fafc !important;
  box-sizing: border-box !important;
}

.pcrf-module .dash-header-row,
.pcrf-page .dash-header-row,
.dash-header-row {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 20px !important;
}

/* 3. Mobile/Tablet Viewports (<=768px: 54px top margin, 16px 16px padding) */
@media (max-width: 768px) {
  main:not(.login-shell):not(.register-shell),
  .dashboard-main,
  .pcrf-page,
  main.pcrf-page,
  .pcrf-module main,
  .content-area,
  .page-container {
    margin-top: 54px !important;
    padding: 16px 16px !important;
    min-height: calc(100vh - 54px) !important;
  }
}


/* =====================================================================
   AUTH PAGES (LOGIN & REGISTER) HEIGHT & LAYOUT FIX
   Excludes auth pages from global main 100vh min-height/margin rules,
   ensuring snug, compact height matching content across Login & Register.
   ===================================================================== */
body.login-page,
body.register-page {
}

body.login-page main.login-shell,
body.register-page main.login-shell,
body.register-page main.register-shell,
main.login-shell,
main.register-shell {
}

.login-card,
.register-card {
}

.login-brand,
.register-brand {
}


/* =====================================================================
   BRAND MARK LOGO IMAGE REPLACEMENT SYSTEM
   Ensures brand-mark container displays the logo image in full square
   matching the sidebar logo.
   ===================================================================== */
.brand-mark,
.mfa-brand-mark,
.brand-logo-mark {
}

.brand-mark img,
.brand-mark img.brand-logo-img,
.mfa-brand-mark img,
.mfa-brand-mark img.brand-logo-img,
.brand-logo-mark img,
.brand-logo-mark img.brand-logo-img {
}


/* =====================================================================
   GLOBAL FIXED STICKY ACTION COLUMN & 3-DOT TOGGLE DROPDOWN SYSTEM
   - Pins Action column to table end (sticky right: 0).
   - Horizontal scrolling columns move beside it (refer second image).
   - Displays vertical three-dot (⋮) toggle menu for action links.
   ===================================================================== */

/* 1. Sticky Action Column Position & Shadow Boundary */
table th:last-child,
.app-table th:last-child,
.dash-table th:last-child,
.ts-table th:last-child,
.table-compact th:last-child,
main table th:last-child,
th.col-action,
th.row-actions,
th.actions-col {
  position: sticky !important;
  right: 0 !important;
  top: auto !important;
  background: #f8fafc !important;
  z-index: 12 !important;
  box-shadow: -4px 0 10px rgba(15, 23, 42, 0.08) !important;
  text-align: center !important;
  min-width: 60px !important;
}

table td:last-child,
.app-table td:last-child,
.dash-table td:last-child,
.ts-table td:last-child,
.table-compact td:last-child,
main table td:last-child,
td.col-action,
td.row-actions,
td.actions-col {
  position: sticky !important;
  right: 0 !important;
  background: #ffffff !important;
  z-index: 10 !important;
  box-shadow: -4px 0 10px rgba(15, 23, 42, 0.08) !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Alternate Row Backgrounds for Sticky Action Column */
.app-table tbody tr:nth-child(even) td:last-child,
.dash-table tbody tr:nth-child(even) td:last-child,
main table tbody tr:nth-child(even) td:last-child,
table tbody tr:nth-child(even) td.col-action {
  background: #f8fafc !important;
}

.app-table tbody tr:hover td:last-child,
.dash-table tbody tr:hover td:last-child,
main table tbody tr:hover td:last-child,
table tbody tr:hover td.col-action {
  background: #eff6ff !important;
}

/* Ensure Parent Container Allows Smooth Horizontal Scroll Under Sticky Action */
.table-wrap,
.table-responsive,
.board-scroll,
.dash-card,
div:has(> table) {
  position: relative !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 2. Vertical 3-Dot Action Button & Floating Dropdown */
.action-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.action-dots-btn,
.btn-action-dots {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #475569 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

.action-dots-btn:hover,
.action-dots-btn:focus-visible,
.btn-action-dots:hover {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}

.action-dropdown-menu {
  position: fixed !important;
  display: none;
  min-width: 140px !important;
  padding: 6px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.18), 0 8px 10px -6px rgba(15, 23, 42, 0.1) !important;
  z-index: 99999 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.action-dropdown-menu.show {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.action-dropdown-menu a,
.action-dropdown-menu button,
.action-dropdown-menu form {
  width: 100% !important;
  margin: 0 !important;
}

.action-dropdown-menu a,
.action-dropdown-menu button {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

.action-dropdown-menu a:hover,
.action-dropdown-menu button:hover {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

.action-dropdown-menu button.danger:hover,
.action-dropdown-menu a.danger:hover,
.action-dropdown-menu .btn-danger:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}


/* =====================================================================
   GLOBAL REDESIGNED PAGINATION & TOP-RIGHT ROWS SELECTOR SYSTEM
   - Image 2 UI reference with existing green/blue theme colors.
   - Showing X to Y of Z entries left alignment.
   - Square/rounded-rect page number buttons right alignment.
   - Moves Rows dropdown to top right area above all tables.
   ===================================================================== */

/* 1. Top Right Rows Selector */
.page-size,
.page-size-top,
.rows-selector-top {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  margin-left: auto !important;
}

.page-size label,
.page-size-top label,
.rows-selector-top label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #475569 !important;
}

.page-size select,
.page-size-top select,
.rows-selector-top select {
  height: 36px !important;
  min-height: 36px !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  transition: border-color 0.15s ease !important;
}

.page-size select:hover,
.page-size select:focus {
  border-color: #00873d !important;
}

/* 2. Redesigned Bottom Pagination Bar */
.pager,
.pagination,
.board-pagination {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  padding: 14px 20px !important;
  margin-top: 16px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  box-sizing: border-box !important;
}

.page-info,
.pager .page-info,
.pagination .page-info,
.board-pagination .page-info {
  font-size: 13.5px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.page-info strong,
.pager .page-info strong,
.board-pagination .page-info strong {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* Page Navigation Buttons Container */
.page-nav,
.page-controls,
.page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}

/* Page Number Button Styling (Matching Image 2 with Green Theme) */
.page-num-btn,
.page-nav a,
.page-controls a,
.board-pagination a.btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.page-num-btn:hover,
.page-nav a:hover:not(.disabled),
.page-controls a:hover:not(.disabled) {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}

/* Active Page Button (Theme Primary Green) */
.page-num-btn.active,
.page-nav a.active,
.page-controls a.active {
  background: #00873d !important;
  border-color: #00873d !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(0, 135, 61, 0.28) !important;
}

/* Disabled Page Button */
.page-num-btn.disabled,
.page-nav a.disabled,
.page-controls a.disabled {
  opacity: 0.45 !important;
  pointer-events: none !important;
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
}

@media (max-width: 768px) {
  .pager,
  .pagination,
  .board-pagination {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 12px 14px !important;
  }

  .page-info {
    text-align: center !important;
  }

  .page-nav,
  .page-controls,
  .page-numbers {
    justify-content: center !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }
}