/* ==========================================================================
   AFYAN ERP - Comprehensive Enterprise Theme & Design System for Frappe v17
   Obsidian Dark Sidebar | Luxury Amber/Gold Accents | Crisp Responsive Desk
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root,
[data-theme="light"],
[data-theme-mode="light"],
body {
  /* Typography - Clean, Crisp, Decent Modern Enterprise UI */
  --font-stack: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --body-font-family: var(--font-stack);

  /* Primary Brand Colors (Gold & Amber) */
  --primary: #d97706;
  --primary-color: #d97706;
  --primary-hover: #b45309;
  --primary-active: #92400e;
  --primary-light: #fef3c7;
  --primary-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  --gold-glow: 0 4px 14px rgba(217, 119, 6, 0.35);

  /* Obsidian Dark Sidebar */
  --surface-sidebar: #0c121e;
  --sidebar-bg: #0c121e;
  --sidebar-surface: #0c121e;
  --sidebar-border-color: #1e293b;
  --sidebar-border: #1e293b;
  --sidebar-hover-color: rgba(255, 255, 255, 0.08);
  --sidebar-text-color: #e2e8f0;
  --sidebar-text: #e2e8f0;
  --sidebar-active-color: #ffffff;
  --sidebar-active-bg: #d97706;

  /* Surfaces & Backgrounds */
  --navbar-bg: #ffffff;
  --surface-navbar: #ffffff;
  --bg-color: #f8fafc;
  --body-bg: #f8fafc;
  --card-bg: #ffffff;
  --surface-card: #ffffff;
  --modal-bg: #ffffff;
  --control-bg: #ffffff;
  --border-color: #e2e8f0;

  /* Text Colors */
  --text-color: #0f172a;
  --heading-color: #0f172a;
  --text-muted: #64748b;
  --text-light: #94a3b8;

  /* Semantic Highlight Colors */
  --emerald-bg: #dcfce7;
  --emerald-text: #15803d;
  --emerald-border: #86efac;
  --sky-bg: #e0f2fe;
  --sky-text: #0369a1;
  --sky-border: #7dd3fc;
  --amber-bg: #fef3c7;
  --amber-text: #b45309;
  --amber-border: #fde68a;
  --rose-bg: #fee2e2;
  --rose-text: #b91c1c;
  --rose-border: #fca5a5;
  --teal-bg: #ccfbf1;
  --teal-text: #0f766e;
  --teal-border: #99f6e4;
}

/* Base Font & Smooth Scrollbar */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
.desk-page,
.page-container,
.page-body {
  font-family: var(--font-stack) !important;
  font-weight: 400;
  color: var(--text-color);
  background-color: #f8fafc;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ==========================================================================
   1. GLOBAL TOPBAR & NAVBAR STYLING
   ========================================================================== */
.afyan-top-navbar,
#afyan-global-header,
.navbar,
header.navbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 18px !important;
  min-height: 52px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1010 !important;
  width: 100% !important;
}

.afyan-navbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.afyan-sidebar-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.afyan-sidebar-toggle-btn:hover {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #d97706 !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.2) !important;
  transform: translateY(-1px) !important;
}

.afyan-sidebar-toggle-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
}

.afyan-navbar-brand-home {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  padding: 4px 6px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.afyan-navbar-brand-home:hover {
  background: #f1f5f9 !important;
}

.afyan-navbar-brand-home img,
.afyan-navbar-logo {
  height: 30px !important;
  max-height: 30px !important;
  width: auto !important;
  max-width: 145px !important;
  object-fit: contain !important;
  display: block !important;
}

.afyan-desk-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  color: #b45309 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.afyan-desk-pill:hover {
  background: #fde68a !important;
  border-color: #d97706 !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2) !important;
  transform: translateY(-1px) !important;
  color: #92400e !important;
}

.afyan-desk-pill svg {
  width: 13px !important;
  height: 13px !important;
  stroke: currentColor !important;
}

/* Hide duplicate default search buttons */
#full-search-button,
#small-search-button,
.navbar-modal-search-mobile,
.navbar-modal-search,
.standard-items-section .search-bar,
.page-head .search-icon,
.page-head #small-search-button,
.page-head #full-search-button,
.page-head button[aria-label="Search"],
.page-head button[data-original-title="Search"],
.page-head .btn-search {
  display: none !important;
}

/* Global AwesomeBar / Search Bar */
.search-bar,
.afyan-global-search {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  max-width: 480px !important;
  flex: 1 1 auto !important;
  margin: 0 16px !important;
}

.search-bar input.form-control,
.afyan-global-search input {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  padding-left: 36px !important;
  padding-right: 75px !important;
  font-size: 13px !important;
  height: 36px !important;
  width: 100% !important;
  transition: all 0.2s ease !important;
}

.search-bar input.form-control:focus,
.afyan-global-search input:focus {
  background: #ffffff !important;
  border-color: #d97706 !important;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15) !important;
  outline: none !important;
}

.afyan-kbd-badge {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: #e2e8f0;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
}

.afyan-navbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.afyan-notification-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.afyan-notification-btn:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

.afyan-badge-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  line-height: 1;
  box-sizing: border-box;
}

.afyan-badge-count.hidden,
.afyan-badge-count:empty,
.afyan-badge-count[data-count="0"] {
  display: none !important;
}

/* Notifications Popover */
.es-popover.notifications-popover {
  width: min(380px, calc(100vw - 20px)) !important;
  max-width: 400px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.15), 0 4px 12px -2px rgba(15, 23, 42, 0.08) !important;
  z-index: 1060 !important;
}

.es-popover.notifications-popover .notifications-list {
  position: static !important;
  width: 100% !important;
  height: min(480px, calc(100vh - 120px)) !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
}

.es-popover.notifications-popover .notification-list-header {
  padding: 12px 16px 8px 16px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.es-popover.notifications-popover .notification-header-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

.es-popover.notifications-popover .notification-panel-title {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #0f172a !important;
}

.es-popover.notifications-popover .notification-list-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 6px 8px !important;
}

.es-popover.notifications-popover .recent-item.notification-item {
  display: flex !important;
  padding: 10px 12px !important;
  margin: 4px 0 !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  border-left: 3px solid transparent !important;
}

.es-popover.notifications-popover .recent-item.notification-item.unread {
  background: #eff6ff !important;
  border-left-color: #3b82f6 !important;
}

.es-popover.notifications-popover .recent-item.notification-item:hover {
  background: #f1f5f9 !important;
}

.es-popover.notifications-popover .recent-item.notification-item.unread:hover {
  background: #e0f2fe !important;
}


.afyan-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 3px;
  border-radius: 9999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.afyan-user-chip:hover {
  background: #ffffff;
  border-color: #cbd5e1;
}

.afyan-avatar-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #451a03 0%, #1e293b 100%);
  color: #ffffff;
  font-weight: 600;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #d97706;
}

.afyan-user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.afyan-user-name {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.afyan-user-role {
  font-size: 10px;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.afyan-avatar-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #d97706;
}

/* User Profile Dropdown Menu */
.afyan-user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  z-index: 1050;
  padding: 8px;
  animation: afyanFadeInDown 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  display: none;
}

.afyan-user-dropdown-menu.show {
  display: block;
}

@keyframes afyanFadeInDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.afyan-user-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 12px 10px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 6px;
}

.afyan-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #f59e0b;
  flex-shrink: 0;
  overflow: hidden;
}

.afyan-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.afyan-card-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}

.afyan-card-fullname {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.afyan-card-email {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.afyan-card-role-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  text-transform: capitalize;
}

.afyan-user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.afyan-user-menu-item:hover {
  background: #f8fafc;
  color: #0f172a;
}

.afyan-user-menu-item svg {
  color: #64748b;
  transition: color 0.15s ease;
}

.afyan-user-menu-item:hover svg {
  color: #0f172a;
}

.afyan-user-menu-item.logout-item:hover {
  background: #fef2f2;
  color: #dc2626;
}

.afyan-user-menu-item.logout-item:hover svg {
  color: #dc2626;
}

.afyan-user-menu-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 6px 0;
}

/* ==========================================================================
   2. OBSIDIAN DARK SIDEBAR (.body-sidebar)
   ========================================================================== */
/* Hide Frappe default app switcher / sidebar headers & extra widgets */
.sidebar-header,
.body-sidebar .sidebar-header,
.body-sidebar>.sidebar-header,
.header-title,
.title-container,
.app-switcher,
.workspace-dock,
.app-rail,
.body-sidebar-container .workspace-dock,
.body-sidebar-container .app-rail,
.body-sidebar .onboarding-sidebar,
.body-sidebar .promotional-banners,
.body-sidebar .dropdown-mobile,
.body-sidebar .collapse-sidebar-link,
.body-sidebar .sidebar-resize-handle {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.body-sidebar-container {
  display: flex !important;
  --sidebar-width: 240px !important;
  width: 240px !important;
  min-width: 240px !important;
  background: #0c121e !important;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.body-sidebar-container .body-sidebar-placeholder,
.body-sidebar-container.expanded .body-sidebar-placeholder {
  width: 240px !important;
  min-width: 240px !important;
  background: #0c121e !important;
  display: block !important;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.body-sidebar-container .body-sidebar,
.body-sidebar-container.expanded .body-sidebar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 1020 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: #0c121e !important;
  border-right: 1px solid #1e293b !important;
  color: #e2e8f0 !important;
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, width 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease !important;
}

/* COLLAPSED STATE: ONLY when body has .sidebar-collapsed or container has .collapsed */
body.sidebar-collapsed .body-sidebar-container,
.body-sidebar-container.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  overflow: hidden !important;
}

body.sidebar-collapsed .body-sidebar-placeholder,
.body-sidebar-container.collapsed .body-sidebar-placeholder {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  display: none !important;
  overflow: hidden !important;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.sidebar-collapsed .body-sidebar,
.body-sidebar-container.collapsed .body-sidebar {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-240px) !important;
  overflow: hidden !important;
}

/* Sidebar Backdrop on Mobile */
.afyan-sidebar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
  z-index: 1015;
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.afyan-sidebar-backdrop.active {
  display: block;
  opacity: 1;
}

/* Fixed Top Brand Header */
.body-sidebar>.afyan-sidebar-brand {
  padding: 14px 16px 12px !important;
  border-bottom: 1px solid #1e293b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: #090e18 !important;
  width: 100% !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.afyan-sidebar-brand img,
.afyan-sidebar-logo {
  height: 32px !important;
  max-height: 32px !important;
  width: auto !important;
  max-width: 175px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Middle Scrollable Sidebar Items */
.body-sidebar .body-sidebar-top {
  flex: 1 1 auto !important;
  padding: 8px 8px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.body-sidebar .body-sidebar-top .sidebar-items {
  width: 100% !important;
}

.body-sidebar .standard-sidebar-item {
  margin-bottom: 2px !important;
  border-radius: 8px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  min-height: 34px !important;
}

.body-sidebar .standard-sidebar-item .item-anchor,
.body-sidebar .standard-sidebar-item .sidebar-item-label,
.body-sidebar .standard-sidebar-item span,
.body-sidebar .standard-sidebar-item a {
  color: #cbd5e1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.body-sidebar .standard-sidebar-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
}

.body-sidebar .standard-sidebar-item:hover .item-anchor,
.body-sidebar .standard-sidebar-item:hover .sidebar-item-label,
.body-sidebar .standard-sidebar-item:hover span {
  color: #ffffff !important;
}

.body-sidebar .standard-sidebar-item .sidebar-item-icon svg,
.body-sidebar .standard-sidebar-item svg {
  color: #94a3b8 !important;
  stroke: #94a3b8 !important;
}

.body-sidebar .standard-sidebar-item:hover .sidebar-item-icon svg,
.body-sidebar .standard-sidebar-item:hover svg {
  color: #f59e0b !important;
  stroke: #f59e0b !important;
}

/* Sidebar item containers - NEVER have background or shadow (containers must remain 100% transparent) */
.body-sidebar .sidebar-item-container,
.body-sidebar .sidebar-item-container.selected,
.body-sidebar .sidebar-item-container.active,
.body-sidebar .sidebar-item-container.active-sidebar,
.body-sidebar .sidebar-item-container.open,
.body-sidebar .afyan-sidebar-dropdown-parent,
.body-sidebar .afyan-sidebar-dropdown-parent.selected,
.body-sidebar .afyan-sidebar-dropdown-parent.active,
.body-sidebar .afyan-sidebar-dropdown-parent.active-sidebar,
.body-sidebar .afyan-sidebar-dropdown-parent.open {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* HIGHLIGHT ONLY THE BUTTON ITSELF (> .standard-sidebar-item) WHEN ACTIVE / SELECTED */
.body-sidebar .sidebar-item-container.selected > .standard-sidebar-item,
.body-sidebar .sidebar-item-container.active > .standard-sidebar-item,
.body-sidebar .sidebar-item-container.active-sidebar > .standard-sidebar-item,
.body-sidebar .afyan-sidebar-dropdown-parent.selected > .standard-sidebar-item,
.body-sidebar .afyan-sidebar-dropdown-parent.active > .standard-sidebar-item,
.body-sidebar .afyan-sidebar-dropdown-parent.active-sidebar > .standard-sidebar-item,
.body-sidebar .standard-sidebar-item.selected,
.body-sidebar .standard-sidebar-item.active-sidebar,
.body-sidebar .standard-sidebar-item.active {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4) !important;
}

.body-sidebar .sidebar-item-container.selected > .standard-sidebar-item *,
.body-sidebar .sidebar-item-container.active > .standard-sidebar-item *,
.body-sidebar .sidebar-item-container.active-sidebar > .standard-sidebar-item *,
.body-sidebar .afyan-sidebar-dropdown-parent.selected > .standard-sidebar-item *,
.body-sidebar .afyan-sidebar-dropdown-parent.active > .standard-sidebar-item *,
.body-sidebar .afyan-sidebar-dropdown-parent.active-sidebar > .standard-sidebar-item *,
.body-sidebar .standard-sidebar-item.selected *,
.body-sidebar .standard-sidebar-item.active-sidebar *,
.body-sidebar .standard-sidebar-item.active * {
  color: #ffffff !important;
  font-weight: 700 !important;
  stroke: #ffffff !important;
}

/* When a dropdown is open but NOT active/selected, the parent button stays transparent */
.body-sidebar .afyan-sidebar-dropdown-parent.open:not(.selected):not(.active):not(.active-sidebar) > .standard-sidebar-item {
  background: transparent !important;
  box-shadow: none !important;
}

.body-sidebar .afyan-sidebar-dropdown-parent.open:not(.selected):not(.active):not(.active-sidebar) > .standard-sidebar-item * {
  color: #cbd5e1 !important;
  stroke: #cbd5e1 !important;
  font-weight: 600 !important;
}

/* Reports & All Dropdowns in Sidebar */
.afyan-sidebar-dropdown-parent {
  position: relative !important;
}

.afyan-sidebar-chevron {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  color: #94a3b8 !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 4px !important;
  cursor: pointer !important;
}

.afyan-sidebar-chevron.open {
  transform: rotate(180deg) !important;
  color: #f59e0b !important;
}

/* All Dropdown Submenus - Strictly Transparent Wrapper with Left Accent Line */
.body-sidebar .afyan-reports-submenu,
.body-sidebar .afyan-projects-submenu,
.body-sidebar .afyan-settings-submenu,
.body-sidebar .afyan-inv-submenu,
.body-sidebar .afyan-acc-submenu,
.body-sidebar .afyan-rcm-submenu,
.body-sidebar .afyan-invoicing-submenu {
  display: none;
  flex-direction: column !important;
  padding: 4px 0 6px 14px !important;
  margin: 2px 0 6px 16px !important;
  border-left: 2px solid rgba(245, 158, 11, 0.25) !important;
  gap: 2px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.body-sidebar .afyan-reports-submenu.open,
.body-sidebar .afyan-projects-submenu.open,
.body-sidebar .afyan-settings-submenu.open,
.body-sidebar .afyan-inv-submenu.open,
.body-sidebar .afyan-acc-submenu.open,
.body-sidebar .afyan-rcm-submenu.open,
.body-sidebar .afyan-invoicing-submenu.open {
  display: flex !important;
}

/* Unselected Submenu Items - Slate Text, Transparent, Subtle Hover */
.body-sidebar .afyan-submenu-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.body-sidebar .afyan-submenu-item * {
  color: #94a3b8 !important;
  stroke: #94a3b8 !important;
  font-weight: 500 !important;
}

.body-sidebar .afyan-submenu-item:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.body-sidebar .afyan-submenu-item:hover * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* ONLY the SELECTED Submenu Button inside any dropdown gets highlighted */
.body-sidebar .afyan-submenu-item.active {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  border: none !important;
  border-left: none !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35) !important;
}

.body-sidebar .afyan-submenu-item.active *,
.body-sidebar .afyan-submenu-item.active .afyan-sub-icon svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  font-weight: 600 !important;
}

.afyan-sub-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.afyan-sub-icon svg {
  stroke: #94a3b8 !important;
  transition: stroke 0.15s ease !important;
}

.afyan-sub-label {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Settings Sidebar Dropdown & Submenu Theme Matching (Afyan Orange) */
.afyan-settings-dropdown-parent.selected > .standard-sidebar-item,
.afyan-settings-dropdown-parent.active > .standard-sidebar-item,
.sidebar-item-container[item-name="Settings"].selected > .standard-sidebar-item,
.sidebar-item-container[item-name="Settings"] > .standard-sidebar-item.selected,
.sidebar-item-container[item-name="Settings"] > .standard-sidebar-item.active {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4) !important;
}

.afyan-settings-dropdown-parent.open:not(.selected):not(.active) > .standard-sidebar-item,
.sidebar-item-container[item-name="Settings"].open:not(.selected):not(.active) > .standard-sidebar-item {
  background: transparent !important;
  box-shadow: none !important;
}

.afyan-settings-dropdown-parent.selected > .standard-sidebar-item *,
.afyan-settings-dropdown-parent.active > .standard-sidebar-item *,
.sidebar-item-container[item-name="Settings"] > .standard-sidebar-item.selected *,
.sidebar-item-container[item-name="Settings"] > .standard-sidebar-item.active * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.afyan-settings-submenu {
  border-left: 2px solid rgba(245, 158, 11, 0.25) !important;
  padding: 4px 0 6px 14px !important;
  margin: 2px 0 6px 16px !important;
}

.afyan-settings-submenu .afyan-submenu-item {
  border-left: none !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  color: #94a3b8 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

.afyan-settings-submenu .afyan-submenu-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f8fafc !important;
}

.afyan-settings-submenu .afyan-submenu-item.active {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  border: none !important;
  border-left: none !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35) !important;
}

.afyan-settings-submenu .afyan-submenu-item.active *,
.afyan-settings-submenu .afyan-submenu-item.active .afyan-sub-icon svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Truck Dispatching Sidebar Item & Shortcut (Afyan Vivid Orange pill) */
.sidebar-item-container[item-name="Truck Dispatching"].selected > .standard-sidebar-item,
.sidebar-item-container[item-name="Truck Dispatching"].active > .standard-sidebar-item,
.sidebar-item-container[item-name="Truck Dispatching"].active-sidebar > .standard-sidebar-item,
.sidebar-item-container[data-id="Truck Dispatching"].selected > .standard-sidebar-item,
.sidebar-item-container[data-id="Truck Dispatching"].active > .standard-sidebar-item,
.sidebar-item-container[data-id="Truck Dispatching"].active-sidebar > .standard-sidebar-item,
.sidebar-item-container[item-name="Dispatch Workspace"].selected > .standard-sidebar-item,
.sidebar-item-container[item-name="Dispatch Workspace"].active > .standard-sidebar-item {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.45) !important;
}

.sidebar-item-container[item-name="Truck Dispatching"] > .standard-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.sidebar-item-container[item-name="Truck Dispatching"].selected > .standard-sidebar-item *,
.sidebar-item-container[item-name="Truck Dispatching"].active > .standard-sidebar-item *,
.sidebar-item-container[item-name="Truck Dispatching"].active-sidebar > .standard-sidebar-item *,
.sidebar-item-container[data-id="Truck Dispatching"].selected > .standard-sidebar-item *,
.sidebar-item-container[data-id="Truck Dispatching"].active > .standard-sidebar-item * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Invoicing Sidebar Dropdown & Submenu (Afyan Amber/Orange) */
.afyan-invoicing-dropdown-parent.selected > .standard-sidebar-item,
.afyan-invoicing-dropdown-parent.active > .standard-sidebar-item,
.sidebar-item-container[item-name="Invoicing"].selected > .standard-sidebar-item,
.sidebar-item-container[item-name="Invoicing"] > .standard-sidebar-item.selected,
.sidebar-item-container[item-name="Invoicing"] > .standard-sidebar-item.active {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4) !important;
}

.afyan-invoicing-dropdown-parent.open:not(.selected):not(.active) > .standard-sidebar-item,
.sidebar-item-container[item-name="Invoicing"].open:not(.selected):not(.active) > .standard-sidebar-item {
  background: transparent !important;
  box-shadow: none !important;
}

.afyan-invoicing-dropdown-parent > .standard-sidebar-item:hover,
.sidebar-item-container[item-name="Invoicing"] > .standard-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.afyan-invoicing-dropdown-parent.selected > .standard-sidebar-item *,
.afyan-invoicing-dropdown-parent.active > .standard-sidebar-item *,
.sidebar-item-container[item-name="Invoicing"] > .standard-sidebar-item.selected *,
.sidebar-item-container[item-name="Invoicing"] > .standard-sidebar-item.active * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.afyan-invoicing-submenu {
  border-left: 2px solid rgba(245, 158, 11, 0.25) !important;
  padding: 4px 0 6px 14px !important;
  margin: 2px 0 6px 16px !important;
  gap: 2px !important;
}

.afyan-invoicing-submenu.open {
  display: flex !important;
}

.afyan-invoicing-submenu .afyan-submenu-item {
  border-left: none !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  color: #94a3b8 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

.afyan-invoicing-submenu .afyan-submenu-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f8fafc !important;
}

.afyan-invoicing-submenu .afyan-submenu-item.active {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  border: none !important;
  border-left: none !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35) !important;
}

.afyan-invoicing-submenu .afyan-submenu-item.active *,
.afyan-invoicing-submenu .afyan-submenu-item.active .afyan-sub-icon svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.afyan-invoicing-submenu .afyan-submenu-item .afyan-sub-chevron {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Fixed Bottom Footer */
.body-sidebar>.afyan-sidebar-footer {
  padding: 12px 16px !important;
  border-top: 1px solid #1e293b !important;
  background: #080d16 !important;
  position: relative !important;
  overflow: hidden !important;
  margin-top: auto !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.afyan-footer-brand img {
  height: 20px !important;
  max-height: 20px !important;
  width: auto !important;
  max-width: 120px !important;
  object-fit: contain !important;
  display: block !important;
}

.afyan-footer-tagline {
  margin-top: 4px;
  font-size: 9px;
  font-style: italic;
  font-weight: 600;
  color: #f59e0b;
  letter-spacing: 0.2px;
}

/* ==========================================================================
   3. WORKSPACE & DASHBOARD PAGES
   ========================================================================== */
.widget[data-widget-type="number_card"] .dashboard-widget-box,
.number-card-widget,
.widget.number-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  padding: 16px 20px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.widget[data-widget-type="number_card"] .dashboard-widget-box:hover,
.number-card-widget:hover {
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-2px) !important;
  border-color: #cbd5e1 !important;
}

.widget[data-widget-type="number_card"] .widget-title,
.number-card-widget .widget-title {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #64748b !important;
}

.widget[data-widget-type="number_card"] .number-card-value,
.number-card-widget .number-card-value,
.widget[data-widget-type="number_card"] .widget-body span {
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
}

.widget[data-widget-type="shortcut"] .dashboard-widget-box,
.widget.shortcut,
.shortcut-widget-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  transition: all 0.2s ease !important;
}

.widget[data-widget-type="shortcut"] .dashboard-widget-box:hover,
.shortcut-widget-box:hover {
  border-color: #d97706 !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.12) !important;
  transform: translateY(-1px) !important;
}

.widget[data-widget-type="shortcut"] .widget-title,
.shortcut-widget-box .widget-title {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
}

.widget[data-widget-type="card"] .dashboard-widget-box,
.widget.card,
.card-widget-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  padding: 16px !important;
  transition: all 0.2s ease !important;
}

.widget[data-widget-type="card"] .dashboard-widget-box:hover,
.card-widget-box:hover {
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-2px) !important;
}

.widget[data-widget-type="card"] .widget-head,
.card-widget-box .widget-head {
  border-bottom: 1px solid #f1f5f9 !important;
  padding-bottom: 10px !important;
  margin-bottom: 12px !important;
}

.widget[data-widget-type="card"] .widget-title,
.card-widget-box .widget-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
}

.widget[data-widget-type="card"] .card-link,
.card-widget-box a {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  transition: color 0.15s ease !important;
}

.widget[data-widget-type="card"] .card-link:hover,
.card-widget-box a:hover {
  color: #d97706 !important;
}

/* ==========================================================================
   4. BUTTONS & STATUS BADGES
   ========================================================================== */
.btn-primary,
.afyan-btn-gold {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  padding: 7px 16px !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary:hover,
.afyan-btn-gold:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

.btn-default,
.btn-secondary {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  transition: all 0.2s ease !important;
}

.btn-default:hover,
.btn-secondary:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

.badge-active,
.badge-delivered,
.badge-verified,
.badge-approved,
.indicator-pill.green {
  background: var(--emerald-bg) !important;
  color: var(--emerald-text) !important;
  border: 1px solid var(--emerald-border) !important;
  border-radius: 9999px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.badge-in-transit,
.badge-scheduled,
.indicator-pill.blue {
  background: var(--sky-bg) !important;
  color: var(--sky-text) !important;
  border: 1px solid var(--sky-border) !important;
  border-radius: 9999px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.badge-pending,
.badge-picked-up,
.indicator-pill.orange,
.indicator-pill.yellow {
  background: var(--amber-bg) !important;
  color: var(--amber-text) !important;
  border: 1px solid var(--amber-border) !important;
  border-radius: 9999px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.badge-denied,
.badge-inactive,
.badge-cancelled,
.badge-on-leave,
.indicator-pill.red {
  background: var(--rose-bg) !important;
  color: var(--rose-text) !important;
  border: 1px solid var(--rose-border) !important;
  border-radius: 9999px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.badge-completed,
.indicator-pill.cyan {
  background: var(--teal-bg) !important;
  color: var(--teal-text) !important;
  border: 1px solid var(--teal-border) !important;
  border-radius: 9999px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   5. LIST VIEWS (.frappe-list, .list-row, .list-sidebar)
   ========================================================================== */
.frappe-list .result {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
  margin-top: 12px !important;
}

.list-row-head {
  background: #f8fafc !important;
  border-bottom: 2px solid #e2e8f0 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  color: #475569 !important;
  padding: 10px 16px !important;
}

.list-row-container .list-row {
  min-height: 42px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  transition: background-color 0.15s ease !important;
}

.list-row-container:hover .list-row,
.list-row-container .list-row:hover {
  background-color: #f8fafc !important;
}

.list-row-container.selected .list-row {
  background-color: #fef3c7 !important;
}

.list-subject .level-item a {
  font-weight: 700 !important;
  color: #0f172a !important;
  text-decoration: none !important;
}

.list-subject .level-item a:hover {
  color: #d97706 !important;
  text-decoration: underline !important;
}

.list-paging-area {
  padding: 14px 16px !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 0 0 12px 12px !important;
}

.list-sidebar .sidebar-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

/* ==========================================================================
   6. DOCTYPE FORM VIEWS & CHILD TABLES (.form-layout, .form-grid)
   ========================================================================== */
.form-page {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  padding: 18px 24px !important;
  margin-bottom: 24px !important;
}

.form-tabs-list {
  border-bottom: 2px solid #e2e8f0 !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
}

.form-tabs-list .nav-link {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  padding: 8px 16px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  transition: all 0.15s ease !important;
}

.form-tabs-list .nav-link:hover {
  color: #0f172a !important;
}

.form-tabs-list .nav-link.active {
  color: #d97706 !important;
  font-weight: 600 !important;
  border-bottom-color: #d97706 !important;
}

.section-head {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 12px 0 8px 0 !important;
  margin-bottom: 12px !important;
}

/* Form Controls & Inputs */
.form-control:not([type="checkbox"]),
input.form-control:not([type="checkbox"]),
select.form-control,
.input-with-feedback:not([type="checkbox"]) {
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 6px !important;
  border: 1px solid #cbd5e1 !important;
  background: #f8fafc !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  padding: 4px 10px !important;
  transition: all 0.15s ease !important;
}

.form-control:hover:not([type="checkbox"]),
input.form-control:hover:not([type="checkbox"]),
select.form-control:hover {
  border-color: #94a3b8 !important;
  background: #ffffff !important;
}

.form-control:focus:not([type="checkbox"]),
input.form-control:focus:not([type="checkbox"]),
select.form-control:focus {
  border-color: #d97706 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15) !important;
  outline: none !important;
}

/* Child Tables / Grids (.form-grid) */
.form-grid {
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

.grid-heading-row {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  color: #475569 !important;
  height: 32px !important;
}

.grid-row {
  height: 36px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.grid-row:hover {
  background-color: #f8fafc !important;
}

.grid-static-col {
  font-size: 12.5px !important;
  color: #1e293b !important;
}

.grid-append-row .btn-add-row {
  margin: 8px !important;
  background: #f8fafc !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #334155 !important;
}

.grid-append-row .btn-add-row:hover {
  background: #fef3c7 !important;
  border-color: #d97706 !important;
  color: #b45309 !important;
}

/* Timeline & Form Footer */
.form-footer .timeline {
  margin-top: 20px !important;
}

.timeline-item {
  border-left: 2px solid #e2e8f0 !important;
  padding-left: 16px !important;
  margin-bottom: 16px !important;
}

.timeline-content {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

/* ==========================================================================
   7. QUERY REPORTS & FINANCIAL DATATABLES
   ========================================================================== */
.page-container:has(.report-wrapper),
.page-container:has(.page-form),
.query-report-view,
.report-view {
  background-color: #f8fafc !important;
}

.page-head {
  padding: 14px 20px 10px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.page-head .page-title h1,
.page-head .title-text {
  font-size: 19px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
}

.page-head .page-actions,
.page-head .standard-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* Filter Card Panel (.page-form) */
.page-form,
.standard-filter-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
  padding: 16px 20px !important;
  margin: 12px 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px 16px !important;
  align-items: flex-end !important;
}

.page-form .frappe-control:not([data-fieldtype="Check"]),
.standard-filter-section .frappe-control:not([data-fieldtype="Check"]) {
  flex: 1 1 190px !important;
  min-width: 170px !important;
  max-width: 320px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.page-form .frappe-control .control-label,
.standard-filter-section .frappe-control .control-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  margin-bottom: 5px !important;
  line-height: 1.2 !important;
  display: block !important;
}

.page-form .frappe-control .reqd {
  color: #ef4444 !important;
  font-weight: 700 !important;
}

/* Check Filter Area (.check-filter-area) */
.check-filter-area {
  flex-basis: 100% !important;
  width: 100% !important;
  border-top: 1px solid #f1f5f9 !important;
  margin-top: 8px !important;
  padding-top: 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
  align-items: center !important;
}

.check-filter-area::before {
  content: "OPTIONS:" !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.5px !important;
  margin-right: 4px !important;
}

.check-filter-area .frappe-control[data-fieldtype="Check"] {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
}

.check-filter-area .frappe-control[data-fieldtype="Check"] .form-group {
  margin: 0 !important;
  padding: 0 !important;
}

.check-filter-area .frappe-control[data-fieldtype="Check"] .checkbox {
  margin: 0 !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.check-filter-area .frappe-control[data-fieldtype="Check"] .checkbox:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.check-filter-area .frappe-control[data-fieldtype="Check"] .checkbox.checked {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
}

.check-filter-area .frappe-control[data-fieldtype="Check"] .checkbox label {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.check-filter-area .frappe-control[data-fieldtype="Check"] .input-area {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

.check-filter-area .frappe-control[data-fieldtype="Check"] input[type="checkbox"] {
  accent-color: #d97706 !important;
  width: 15px !important;
  height: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 3px !important;
  border: 1.5px solid #94a3b8 !important;
  cursor: pointer !important;
  position: static !important;
  opacity: 1 !important;
  display: inline-block !important;
}

/* Report Summary Cards */
.report-summary {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 16px 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.report-summary .summary-item,
.report-summary .report-summary-item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  border-left: 4px solid #d97706 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  height: auto !important;
  min-height: 84px !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.report-summary .summary-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 6px !important;
  line-height: 1.4 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  text-align: left !important;
  white-space: normal !important;
  width: 100% !important;
  display: block !important;
}

.report-summary .summary-value {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.35 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  text-align: left !important;
  display: block !important;
  width: 100% !important;
}

/* Chart Wrapper */
.chart-wrapper {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  margin: 16px 0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
  width: 100% !important;
  overflow: visible !important;
  min-height: 200px !important;
  box-sizing: border-box !important;
}

.chart-wrapper .chart-container {
  width: 100% !important;
  position: relative !important;
  padding-top: 6px !important;
}

.chart-wrapper svg.frappe-chart {
  overflow: visible !important;
}

/* Report DataTable */
.report-wrapper {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
  margin-top: 12px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
}

.datatable {
  --dt-border-color: #cbd5e1 !important;
  --dt-cell-bg: #ffffff !important;
  font-family: var(--font-stack) !important;
  font-size: 13px !important;
  background-color: #ffffff !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

.datatable .dt-scrollable {
  font-family: var(--font-stack) !important;
  font-size: 13px !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
}

.datatable .dt-header {
  background: #f8fafc !important;
  border-bottom: 2px solid #94a3b8 !important;
}

.datatable .dt-row-header {
  background-color: #f8fafc !important;
  height: 38px !important;
  border-bottom: 2px solid #94a3b8 !important;
}

.datatable .dt-cell--header {
  background-color: #f8fafc !important;
  color: #334155 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 2px solid #94a3b8 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

.datatable .dt-cell--header .dt-cell__content {
  background-color: #f8fafc !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  color: #475569 !important;
  padding: 0 10px !important;
  line-height: 36px !important;
  height: 36px !important;
  display: block !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.datatable .dt-row {
  border-bottom: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  height: 36px !important;
  min-width: 100% !important;
  width: max-content !important;
  display: flex !important;
}

.datatable .dt-row:nth-child(even) {
  background-color: #f8fafc !important;
}

.datatable .dt-row:hover {
  background-color: #f1f5f9 !important;
}

.datatable .dt-row.selected {
  background-color: #fef3c7 !important;
}

.datatable .dt-cell--col-0 {
  min-width: 50px !important;
  width: 50px !important;
  max-width: 50px !important;
  flex: 0 0 50px !important;
  border-left: 1px solid #cbd5e1 !important;
}

.datatable .dt-cell--col-0 .dt-cell__content {
  text-align: center !important;
  padding: 0 4px !important;
}

/* Scoped rules for tree & financial statements */
.tree-view .datatable .dt-cell--col-1,
.tree-grid .datatable .dt-cell--col-1,
.financial-statements-report .datatable .dt-cell--col-1,
[data-page-route*="Balance Sheet"] .datatable .dt-cell--col-1,
[data-page-route*="Profit and Loss"] .datatable .dt-cell--col-1,
[data-page-route*="Trial Balance"] .datatable .dt-cell--col-1 {
  flex: 1 1 0% !important;
  min-width: 320px !important;
  max-width: none !important;
}

.tree-view .datatable .dt-cell:not(.dt-cell--col-0):not(.dt-cell--col-1),
.tree-grid .datatable .dt-cell:not(.dt-cell--col-0):not(.dt-cell--col-1),
.financial-statements-report .datatable .dt-cell:not(.dt-cell--col-0):not(.dt-cell--col-1),
[data-page-route*="Balance Sheet"] .datatable .dt-cell:not(.dt-cell--col-0):not(.dt-cell--col-1),
[data-page-route*="Profit and Loss"] .datatable .dt-cell:not(.dt-cell--col-0):not(.dt-cell--col-1),
[data-page-route*="Trial Balance"] .datatable .dt-cell:not(.dt-cell--col-0):not(.dt-cell--col-1) {
  min-width: 140px !important;
  flex: 0 0 160px !important;
  text-align: right !important;
}

.datatable .dt-cell {
  font-size: 12.5px !important;
  color: #1e293b !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  height: 36px !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

.datatable .dt-cell__content {
  padding: 0 10px !important;
  line-height: 35px !important;
  height: 35px !important;
  display: block !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.datatable .dt-cell a {
  color: #0284c7 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.datatable .dt-cell a:hover {
  color: #d97706 !important;
  text-decoration: underline !important;
}

.datatable .dt-cell--numeric,
.datatable .dt-cell--currency,
.datatable .dt-cell--numeric .dt-cell__content,
.datatable .dt-cell--currency .dt-cell__content {
  font-variant-numeric: tabular-nums !important;
  font-weight: 600 !important;
  text-align: right !important;
}

.datatable .dt-row--total,
.datatable .dt-row.total-row,
.datatable .dt-row.dt-row-totalRow {
  background: #f8fafc !important;
  border-top: 2px solid #cbd5e1 !important;
  font-weight: 600 !important;
}

.datatable .dt-row--total .dt-cell__content,
.datatable .total-row .dt-cell__content,
.datatable .dt-row.dt-row-totalRow .dt-cell__content {
  font-weight: 600 !important;
  color: #0f172a !important;
  line-height: 35px !important;
}

.datatable .dt-cell--checkbox .dt-cell__content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 35px !important;
  padding: 0 !important;
  line-height: normal !important;
}

.datatable .dt-cell--checkbox input[type="checkbox"] {
  accent-color: #d97706 !important;
  width: 15px !important;
  height: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  margin: 0 !important;
  cursor: pointer !important;
}

/* ==========================================================================
   8. TREE VIEWS, KANBAN & CALENDAR
   ========================================================================== */
.tree-node .tree-link {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}

.tree-node .tree-link:hover {
  background: #fef3c7 !important;
  color: #b45309 !important;
}

.kanban-column {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 12px !important;
}

.kanban-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.kanban-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
}

/* ==========================================================================
   9. MODALS, DIALOGS & DROPDOWNS
   ========================================================================== */
.modal-content {
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16) !important;
  overflow: hidden !important;
}

.modal-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 14px 20px !important;
}

.modal-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
}

.modal-footer {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  padding: 12px 20px !important;
}

.dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  padding: 6px !important;
  z-index: 1060 !important;
}

/* ==========================================================================
   10. RESPONSIVE BREAKPOINTS (Desktop, Tablet, Mobile) & LEAVE APPLICATION
   ========================================================================== */
@media (max-width: 1200px) {
  .widget[data-widget-type="number_card"] .dashboard-widget-box {
    padding: 14px 16px !important;
  }
}

/* Duplicate navbar suppression */
header.navbar ~ #afyan-global-header,
.navbar ~ #afyan-global-header,
#afyan-global-header + header.navbar {
  display: none !important;
}

/* Desk Layout Sizing & Overlap Prevention */
.main-section {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

/* Base Desktop & Responsive Rules for Pages, List Views & Forms */
.page-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.container.page-body,
.page-body {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.layout-main {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  gap: 20px !important;
  box-sizing: border-box !important;
}

/* Main Section Wrapper: MUST be block flow so Form and Comments/Footer stack vertically */
.layout-main-section-wrapper {
  display: block !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.layout-main-section {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Form Layout: Full width inside main section, natural responsive grid */
.form-page {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 24px 0 !important;
  box-sizing: border-box !important;
}

.std-form-layout .section-head,
.std-form-layout .section-body,
.form-section {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

.form-footer {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 20px !important;
  margin-bottom: 40px !important;
  box-sizing: border-box !important;
}

/* List Views: Full width without awkward left padding or margins */
.frappe-list {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

.frappe-list .result-container,
.list-row-container {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Side Sections: Completely eliminate ghost sidebars in List views */
.layout-side-section.hide-sidebar,
.layout-side-section.hidden,
.layout-side-section:empty,
.layout-side-section:not(.right):not(:has(.list-sidebar .sidebar-section:not(.hide))),
.no-list-sidebar .layout-side-section {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* Visible Sidebars (Form Right Sidebar or Active List Sidebar) */
.layout-side-section.right,
.layout-side-section:has(.form-sidebar),
.layout-side-section:has(.list-sidebar .sidebar-section:not(.hide)) {
  display: block !important;
  flex: 0 0 240px !important;
  width: 240px !important;
  min-width: 200px !important;
  max-width: 260px !important;
  box-sizing: border-box !important;
}

/* Leave Application & List Status Indicator Badges */
.indicator-pill.green,
.indicator-pill.Approved,
.indicator.green,
[data-filter="status"][data-value="Approved"] {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #86efac !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.indicator-pill.orange,
.indicator-pill.Open,
.indicator-pill.Pending,
.indicator.orange,
[data-filter="status"][data-value="Open"] {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.indicator-pill.red,
.indicator-pill.Rejected,
.indicator-pill.Cancelled,
.indicator.red,
[data-filter="status"][data-value="Rejected"] {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid #fca5a5 !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.indicator-pill.blue,
.indicator.blue {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1px solid #7dd3fc !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
}

@media (max-width: 991px) {
  .body-sidebar-container.expanded {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    z-index: 1030 !important;
  }

  /* Prevent Ctrl + K badge from colliding with search placeholder */
  .afyan-kbd-badge {
    display: none !important;
  }

  /* Layout Main Responsive Stacking & Full-Width */
  .layout-main,
  .layout-main.layout-two-column {
    flex-direction: column !important;
    width: 100% !important;
    display: flex !important;
  }

  .layout-main-section-wrapper,
  .layout-main-section {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* Fully hide collapsed/empty sidebars so they consume 0 space */
  .layout-side-section.hide-sidebar,
  .layout-side-section.hidden,
  .layout-side-section:empty,
  .layout-side-section:not(.right):not(:has(.list-sidebar .sidebar-section:not(.hide))),
  .no-list-sidebar .layout-side-section {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    flex: 0 0 0% !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Visible sidebars stack cleanly below main content */
  .layout-side-section.right:not(.hide-sidebar):not(.hidden):not(:empty),
  .layout-side-section:has(.form-sidebar):not(.hide-sidebar):not(.hidden):not(:empty),
  .layout-side-section:has(.list-sidebar .sidebar-section:not(.hide)):not(.hide-sidebar):not(.hidden):not(:empty) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin-top: 16px !important;
  }

  .layout-side-section .sidebar-section {
    margin-bottom: 10px !important;
  }

  /* Form View Inputs: Stack Full Width on Small Screens to Prevent 140px Squishing */
  .form-section .section-body .form-column,
  .form-column.col-sm-6,
  .form-column.col-xs-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    float: none !important;
  }

  /* List View: Full Width Rows & Optimized Subject Space to Prevent Truncation */
  .frappe-list .result {
    width: 100% !important;
    overflow-x: auto !important;
  }

  .frappe-list .list-row,
  .frappe-list .list-row-head {
    width: 100% !important;
  }

  .frappe-list .list-row .list-row-col.list-subject,
  .frappe-list .list-row-head .list-row-col:first-child {
    flex: 1.8 1 150px !important;
    min-width: 150px !important;
  }

  .frappe-list .list-row .list-row-col:not(.list-subject),
  .frappe-list .list-row-head .list-row-col:not(:first-child) {
    flex: 1 1 80px !important;
  }

  .page-form .frappe-control:not([data-fieldtype="Check"]),
  .standard-filter-section .frappe-control:not([data-fieldtype="Check"]) {
    flex: 1 1 160px !important;
    min-width: 140px !important;
  }

  .form-page {
    padding: 18px !important;
  }

  .report-summary {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {

  .afyan-top-navbar,
  #afyan-global-header,
  .navbar,
  header.navbar {
    padding: 8px 12px !important;
  }

  .search-bar,
  .afyan-global-search {
    margin: 0 8px !important;
  }

  .afyan-user-meta {
    display: none !important;
  }

  .afyan-desk-pill span {
    display: none !important;
  }

  /* Page Head on Mobile */
  .page-head {
    padding: 12px 14px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .page-head .page-title,
  .page-head .title-text {
    font-size: 17px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .page-head .page-actions,
  .page-head .standard-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .page-head .btn-primary,
  .page-head .btn-secondary,
  .page-head .btn-default {
    flex: 1 1 auto !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 13px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Standard Filter Section on Mobile */
  .page-form,
  .standard-filter-section,
  .filter-section {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 14px !important;
    gap: 8px !important;
  }

  .page-form .frappe-control,
  .standard-filter-section .frappe-control,
  .filter-section .frappe-control {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  .check-filter-area {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Leave Application & Frappe List Rows Responsive Card Layout */
  .frappe-list .result {
    border-radius: 10px !important;
    margin-top: 10px !important;
    border: 1px solid #e2e8f0 !important;
  }

  .list-row-head {
    display: none !important;
  }

  .list-row-container {
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .list-row-container:last-child {
    border-bottom: none !important;
  }

  .list-row-container .list-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 12px 14px !important;
    gap: 8px !important;
    min-height: auto !important;
    position: relative !important;
  }

  .list-row .list-subject {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .list-row .list-subject .level-item {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
  }

  .list-row .list-row-col {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12.5px !important;
  }

  .list-row .indicator-pill,
  .list-row .indicator {
    margin-left: auto !important;
  }

  .list-row-activity {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 4px !important;
    border-top: 1px dashed #f1f5f9 !important;
    font-size: 11.5px !important;
    color: #64748b !important;
  }

  /* Pagination on Mobile */
  .list-paging-area {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  .list-paging-area .btn-group {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .list-paging-area .btn-group .btn {
    flex: 1 1 auto !important;
    height: 36px !important;
    text-align: center !important;
  }

  /* Form View on Mobile */
  .form-page {
    padding: 14px 16px !important;
    border-radius: 10px !important;
  }

  .form-layout .form-section {
    padding: 12px 0 !important;
  }

  .form-layout .form-section .section-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .form-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  .form-control:not([type="checkbox"]),
  input.form-control:not([type="checkbox"]),
  select.form-control,
  .input-with-feedback:not([type="checkbox"]) {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 13px !important;
  }

  .form-tabs-list {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 2px !important;
  }

  .form-tabs-list .nav-link {
    white-space: nowrap !important;
    padding: 6px 12px !important;
    font-size: 12.5px !important;
  }

  .report-summary {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .page-head {
    padding: 10px 12px !important;
  }

  .list-row-container .list-row {
    padding: 10px 12px !important;
  }

  .form-page {
    padding: 12px !important;
  }
}

/* Afyan Dashboard Skeleton Loading State */
@keyframes afyanShimmerAnim {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.afyan-shimmer {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%) !important;
  background-size: 200% 100% !important;
  animation: afyanShimmerAnim 1.6s ease-in-out infinite !important;
}

.afyan-skeleton-container {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Hide Frappe default onboarding widgets */
.user-onboarding,
.onb-panel,
.onboarding-widget-box,
[data-widget-name="onboarding"],
.widget-onboarding {
  display: none !important;
}

/* Suppress all footers across the application */
.workspace-footer,
.page-footer,
.web-footer,
.report-footer,
.desk-footer,
.layout-footer,
footer,
.afyan-on-dashboard .workspace-footer,
.afyan-on-dashboard .page-footer,
.afyan-on-dashboard .web-footer,
.afyan-on-dashboard .report-footer,
.afyan-on-dashboard footer,
.afyan-acc-dashboard .afyan-acc-footer-banner,
.afyan-acc-footer-banner,
.afyan-rcm-dashboard .afyan-rcm-footer-banner,
.afyan-rcm-footer-banner {
  display: none !important;
}
/* Employee Portal sidebar item (afyan_sidebar_patch.js). An older stylesheet saved in Navbar Settings
   hides every top-level item that is not on its fixed list; the ID selector outranks it. */
#afyan-persistent-sidebar .sidebar-item-container.afyan-employee-portal-item,
#afyan-persistent-sidebar .standard-sidebar-section .sidebar-item-container.afyan-employee-portal-item {
	display: block !important;
}