/* IFFCO-TOKIO Theme Login & Registration Styles (Unified Compact Layout) */
:root {
  --primary-green: #00873d;
  --primary-green-hover: #006f32;
  --primary-green-soft: #e6f5ed;
  
  --secondary-blue: #0082c8;
  --secondary-blue-hover: #0068a0;
  --secondary-blue-soft: #e5f4fd;

  --ink: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --surface: #ffffff;
  --canvas: #f8fafc;
  
  --shadow-card: 0 20px 40px -12px rgba(15, 23, 42, 0.1), 0 0 1px rgba(0, 0, 0, 0.06);
}

* {
  box-sizing: border-box;
}

body.login-page,
body.register-page {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.login-shell,
.register-shell {
  width: min(840px, 92vw);
  min-height: auto;
  margin: auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

/* Left Brand Panel */
.login-brand,
.register-brand {
  position: relative;
  padding: 32px 34px;
  color: #ffffff;
  background: var(--primary-green);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.brand-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ffffff;
  color: var(--primary-green);
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.brand-title-wrap {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ffffff;
}

.brand-sub {
  font-size: 11px;
  color: var(--secondary-blue-soft);
  font-weight: 600;
}

.brand-hero h1 {
  margin: 22px 0 10px;
  font-size: clamp(22px, 2.2vw, 27px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff !important;
}

.brand-copy {
  margin: 0;
  color: #ffffff !important;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.92;
}

/* Bottom Feature Grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

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

.feature-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.feature-icon svg {
  width: 16px;
  height: 16px;
}

.feature-text strong {
  display: block;
  font-size: 11.5px;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.2;
}

.feature-text span {
  display: block;
  font-size: 10px;
  color: var(--secondary-blue-soft);
  margin-top: 1px;
}

/* Right Form Panel */
.login-card,
.register-card {
  align-self: center;
  padding: 32px 34px;
  background: #ffffff;
}

.card-heading {
  text-align: center;
  margin-bottom: 18px;
}

/* Welcome Pill Badge */
.welcome-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--secondary-blue-soft);
  color: var(--secondary-blue);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 10px;
  border: 1px solid #bae6fd;
}

.welcome-pill svg {
  width: 13px;
  height: 13px;
}

.card-heading h2 {
  margin: 0 0 4px;
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.card-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

/* Alerts */
.alert {
  display: grid;
  gap: 3px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
}

.alert.success {
  border: 1px solid #a7f3d0;
  background: #ecfdf5;
  color: #065f46;
}

.alert.error {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.alert.info {
  border: 1px solid #bae6fd;
  background: #f0f9ff;
  color: #075985;
}

/* Form Controls & Embedded Left SVG Icons */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}

.full-width {
  grid-column: 1 / -1;
}

.form-field {
  margin-bottom: 12px;
}

.form-field label {
  display: block;
  margin-bottom: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
}

.label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.label-row a {
  color: var(--secondary-blue);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.label-row a:hover {
  color: var(--secondary-blue-hover);
  text-decoration: underline;
}

.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-left-icon {
  position: absolute;
  left: 12px;
  color: #94a3b8;
  pointer-events: none;
  transition: color 0.15s ease;
  display: flex;
  align-items: center;
}

.input-left-icon svg {
  width: 17px;
  height: 17px;
}

.input-icon-wrap input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 36px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-size: 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-icon-wrap input:focus {
  outline: none;
  border-color: var(--secondary-blue);
  box-shadow: 0 0 0 3px rgba(0, 130, 200, 0.15);
}

.input-icon-wrap input:focus ~ .input-left-icon,
.input-icon-wrap:focus-within .input-left-icon {
  color: var(--secondary-blue);
}

.password-wrap input {
  padding-right: 40px;
}

.password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  height: 32px;
  width: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.password-toggle svg {
  width: 16px;
  height: 16px;
}

.password-toggle:hover {
  color: var(--secondary-blue);
  background: var(--secondary-blue-soft);
}

.remember-option {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0 14px;
  color: #475569;
  font-size: 11.5px;
  cursor: pointer;
}

.remember-option input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--primary-green);
  cursor: pointer;
  flex-shrink: 0;
}

/* Captcha Inline Box */
.captcha-box {
  margin: 10px 0 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--secondary-blue-soft);
  border: 1px solid #bae6fd;
}

.captcha-inline-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.captcha-code-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.captcha-code {
  flex: 1;
  padding: 6px 10px;
  background: #ffffff;
  border: 1.5px dashed #7dd3fc;
  border-radius: 6px;
  color: #0c4a6e;
  font-family: "Cascadia Code", "Consolas", "Courier New", monospace;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-align: center;
  user-select: none;
}

.captcha-refresh {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid #7dd3fc;
  color: var(--secondary-blue);
  text-decoration: none;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.captcha-refresh:hover {
  background: var(--secondary-blue);
  color: #ffffff;
}

.captcha-input-group {
  flex: 1;
}

.captcha-input {
  font-family: "Cascadia Code", "Consolas", "Courier New", monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.captcha-unavailable {
  margin-bottom: 6px;
  padding: 6px 8px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 10.5px;
}

/* Primary Action Button */
.primary-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  border: 0;
  color: #ffffff;
  background: var(--secondary-blue);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 130, 200, 0.22);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.primary-action svg {
  width: 16px;
  height: 16px;
}

.primary-action:hover {
  background: var(--secondary-blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(0, 130, 200, 0.28);
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.divider::before,
.divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border);
}

/* Trusted Security Box */
.trusted-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--secondary-blue-soft);
  border: 1px solid #bae6fd;
  margin-bottom: 14px;
}

.trusted-icon {
  color: var(--secondary-blue);
  display: flex;
  align-items: center;
  margin-top: 2px;
}

.trusted-icon svg {
  width: 16px;
  height: 16px;
}

.trusted-text strong {
  display: block;
  font-size: 12px;
  color: #0369a1;
  font-weight: 700;
}

.trusted-text span {
  display: block;
  font-size: 11px;
  color: #075985;
  margin-top: 1px;
  line-height: 1.35;
}

/* Register Footer Link */
.register-footer {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

.register-link {
  color: var(--primary-green);
  font-weight: 700;
  text-decoration: none;
  margin-left: 3px;
}

.register-link:hover {
  color: var(--primary-green-hover);
  text-decoration: underline;
}

@media (max-width: 800px) {
  .login-shell,
  .register-shell {
    grid-template-columns: 1fr;
    margin: 12px auto;
  }
  .login-brand,
  .register-brand {
    padding: 24px 20px;
  }
  .feature-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }
  .login-card,
  .register-card {
    padding: 24px 20px;
  }
}

@media (max-width: 520px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .login-brand,
  .register-brand {
    display: none;
  }
  .login-card,
  .register-card {
    padding: 20px 16px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .captcha-inline-row {
    flex-direction: column;
  }
}

/* =====================================================================
   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;
}


/* =====================================================================
   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;
  }
}