/* ============================================
   UI Styles — 4 Visual Themes
   ============================================ */

/* ========== 1. CLASSIC (Default) ========== */
html[data-ui-style="classic"] .panel_s {
  box-shadow: none !important;
  border-radius: 4px;
}
html[data-ui-style="classic"] .btn {
  border-radius: 4px;
  box-shadow: none !important;
}

/* ========== 2. NEOFORMISM — Premium Soft UI ========== */

/* ── CSS Custom Properties ── */
html[data-ui-style="neoformism"] {
  --neu-bg: #eceff3;
  --neu-bg-dark: #14171e;
  --neu-text: #2d3138;
  --neu-text-soft: #6b7280;
  --neu-text-muted: #9ca3af;
  --neu-shadow-dark: rgba(163, 177, 194, 0.5);
  --neu-shadow-light: rgba(255, 255, 255, 0.9);
  --neu-shadow-dark-deep: rgba(163, 177, 194, 0.6);
  --neu-shadow-light-deep: rgba(255, 255, 255, 1);
  --neu-radius-sm: 14px;
  --neu-radius-md: 18px;
  --neu-radius-lg: 24px;
  --neu-radius-xl: 28px;
  --neu-panel-pad: 20px;
  --neu-gap: 16px;
  --neu-primary: #6c5ce7;
  --neu-primary-soft: rgba(108, 92, 231, 0.08);
  --neu-success: #27ae60;
  --neu-info: #2d9cdb;
  --neu-danger: #e74c3c;
  --neu-warning: #f39c12;
}

html[data-ui-style="neoformism"].dark {
  --neu-bg: #14171e;
  --neu-text: #e5e7eb;
  --neu-text-soft: #9ca3af;
  --neu-text-muted: #6b7280;
  --neu-shadow-dark: rgba(0, 0, 0, 0.35);
  --neu-shadow-light: rgba(60, 70, 90, 0.08);
  --neu-shadow-dark-deep: rgba(0, 0, 0, 0.45);
  --neu-shadow-light-deep: rgba(60, 70, 90, 0.12);
}

/* ── Page Canvas ── */
html[data-ui-style="neoformism"]:not([class*="theme-"]),
html[data-ui-style="neoformism"]:not([class*="theme-"]) body {
  background: var(--neu-bg) !important;
}
html[data-ui-style="neoformism"],
html[data-ui-style="neoformism"] body {
  color: var(--neu-text) !important;
}

html[data-ui-style="neoformism"] .content {
  background: transparent !important;
}

/* ── Core Extruded Cards ── */
html[data-ui-style="neoformism"] .panel_s,
html[data-ui-style="neoformism"] .widget,
html[data-ui-style="neoformism"] .modal-content,
html[data-ui-style="neoformism"] .panel-heading,
html[data-ui-style="neoformism"] .panel-footer,
html[data-ui-style="neoformism"] .well,
html[data-ui-style="neoformism"] .screen-options-area,
html[data-ui-style="neoformism"] .dropdown-menu,
html[data-ui-style="neoformism"] .list-group-item,
html[data-ui-style="neoformism"] .feed-item,
html[data-ui-style="neoformism"] .home-activity,
html[data-ui-style="neoformism"] .kan-ban-col,
html[data-ui-style="neoformism"] .panel-group .panel,
html[data-ui-style="neoformism"] .project-overview-open-tasks,
html[data-ui-style="neoformism"] .project-overview-days-left,
html[data-ui-style="neoformism"] .project-overview-logged-hours-finance,
html[data-ui-style="neoformism"] .project-overview-expenses-finance,
html[data-ui-style="neoformism"] .top_stats_wrapper > div,
html[data-ui-style="neoformism"] .si-widget,
html[data-ui-style="neoformism"] div[class*="tw-bg-white"][class*="tw-shadow-sm"],
html[data-ui-style="neoformism"] .bootstrap-datetimepicker-widget.dropdown-menu,
html[data-ui-style="neoformism"] .daterangepicker,
html[data-ui-style="neoformism"] .select2-dropdown,
html[data-ui-style="neoformism"] .popover {
  background: var(--neu-bg) !important;
  box-shadow:
    9px 9px 18px var(--neu-shadow-dark),
    -9px -9px 18px var(--neu-shadow-light) !important;
  border-radius: var(--neu-radius-md) !important;
  border: none !important;
  margin: var(--neu-gap) 0;
}

/* ── Nav tabs get reduced margin ── */
html[data-ui-style="neoformism"] .nav-tabs {
  background: var(--neu-bg) !important;
  box-shadow:
    6px 6px 12px var(--neu-shadow-dark),
    -6px -6px 12px var(--neu-shadow-light) !important;
  border-radius: var(--neu-radius-sm) var(--neu-radius-sm) 0 0 !important;
  border: none !important;
  padding: 0 var(--neu-panel-pad);
  margin: 0;
}

/* ── Inner sections: transparent so the parent glass shows ── */
html[data-ui-style="neoformism"] .panel-body,
html[data-ui-style="neoformism"] .panel-heading,
html[data-ui-style="neoformism"] .panel-footer,
html[data-ui-style="neoformism"] .modal-body,
html[data-ui-style="neoformism"] .modal-header,
html[data-ui-style="neoformism"] .modal-footer,
html[data-ui-style="neoformism"] .tab-pane,
html[data-ui-style="neoformism"] .tab-content,
html[data-ui-style="neoformism"] .project-overview-left,
html[data-ui-style="neoformism"] .project-overview-right,
html[data-ui-style="neoformism"] .panel-group .panel-heading,
html[data-ui-style="neoformism"] .panel-group .panel-body,
html[data-ui-style="neoformism"] .kan-ban-col .panel-body,
html[data-ui-style="neoformism"] .popover-title,
html[data-ui-style="neoformism"] .popover-content {
  background: transparent !important;
  border: none !important;
}

/* ── Header ── */
html[data-ui-style="neoformism"] #header {
  background: var(--neu-bg) !important;
  box-shadow:
    0 6px 14px rgba(163, 177, 194, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.85) !important;
  border-bottom: none !important;
  padding: 0 var(--neu-panel-pad);
}
html[data-ui-style="neoformism"].dark #header {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3) !important;
}
html[data-ui-style="neoformism"] .header-left a,
html[data-ui-style="neoformism"] .header-left .btn {
  border-radius: var(--neu-radius-sm);
  transition: all 0.2s ease;
  padding: 8px 14px;
}
html[data-ui-style="neoformism"] .header-left a:hover,
html[data-ui-style="neoformism"] .header-left .btn:hover {
  box-shadow:
    inset 3px 3px 8px var(--neu-shadow-dark),
    inset -3px -3px 8px var(--neu-shadow-light) !important;
}
html[data-ui-style="neoformism"] #header .navbar-nav > li > a {
  border-radius: var(--neu-radius-sm);
  margin: 6px 3px;
  padding: 8px 14px;
  transition: all 0.2s ease;
}
html[data-ui-style="neoformism"] #header .navbar-nav > li > a:hover,
html[data-ui-style="neoformism"] #header .navbar-nav > li > a:focus {
  box-shadow:
    inset 3px 3px 8px var(--neu-shadow-dark),
    inset -3px -3px 8px var(--neu-shadow-light) !important;
  background: transparent !important;
}

/* Header search icon — keep native, no neumorphic effect */
html[data-ui-style="neoformism"] #top_search_button button {
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
}
html[data-ui-style="neoformism"] #top_search_button button:hover {
  box-shadow: none !important;
  transform: none !important;
}
/* Move search icon right so it doesn't overlap text (padding gets overridden by neumorphic) */
html[data-ui-style="neoformism"] #top_search_button {
  right: 14px !important;
  left: 14px !important;
}
html[data-ui-style="neoformism"] #search_input {
  padding-left: 44px !important;
  padding-right: 44px !important;
}

/* ── Sidebar — Full Coverage ── */
html[data-ui-style="neoformism"] .sidebar {
  background: var(--neu-bg) !important;
  border: none !important;
  padding: 8px 4px;
}
html[data-ui-style="neoformism"] .sidebar .nav > li > a {
  border-radius: var(--neu-radius-sm);
  margin: 3px 6px;
  padding: 10px 14px !important;
  transition: all 0.2s ease;
  font-weight: 500;
}
html[data-ui-style="neoformism"] .sidebar .nav > li > a:hover {
  box-shadow:
    4px 4px 10px var(--neu-shadow-dark),
    -4px -4px 10px var(--neu-shadow-light) !important;
}
html[data-ui-style="neoformism"] .sidebar .nav > li.active > a {
  box-shadow:
    inset 4px 4px 10px var(--neu-shadow-dark-deep),
    inset -4px -4px 10px var(--neu-shadow-light-deep) !important;
}
html[data-ui-style="neoformism"] .sidebar .menu-icon {
  opacity: 0.6;
  transition: opacity 0.2s;
}
html[data-ui-style="neoformism"] .sidebar .nav > li.active .menu-icon,
html[data-ui-style="neoformism"] .sidebar .nav > li > a:hover .menu-icon {
  opacity: 1;
}

/* Sidebar sub-menu */
html[data-ui-style="neoformism"] .sidebar .nav > li.dropdown > ul.sub-menu {
  background: transparent !important;
  box-shadow: none !important;
  margin: 2px 6px;
  padding: 4px 0 4px 18px;
}
html[data-ui-style="neoformism"] .sidebar .nav > li.dropdown > ul.sub-menu li a {
  border-radius: 10px;
  margin: 1px 0;
  padding: 6px 12px !important;
  font-size: 13px;
  font-weight: 400;
}
html[data-ui-style="neoformism"] .sidebar .nav > li.dropdown > ul.sub-menu li a:hover {
  box-shadow:
    3px 3px 7px var(--neu-shadow-dark),
    -3px -3px 7px var(--neu-shadow-light) !important;
}
html[data-ui-style="neoformism"] .sidebar .nav > li.dropdown > ul.sub-menu li.active > a {
  box-shadow:
    inset 3px 3px 7px var(--neu-shadow-dark),
    inset -3px -3px 7px var(--neu-shadow-light) !important;
}
html[data-ui-style="neoformism"] .sidebar::-webkit-scrollbar {
  width: 4px;
}
html[data-ui-style="neoformism"] .sidebar::-webkit-scrollbar-thumb {
  background: rgba(163, 177, 194, 0.3);
  border-radius: 20px;
}
html[data-ui-style="neoformism"] .sidebar .nav-divider {
  background: transparent !important;
  height: 1px;
  margin: 6px 14px;
  box-shadow:
    0 1px 0 var(--neu-shadow-light),
    0 -1px 0 var(--neu-shadow-dark);
}

/* ── Buttons — Premium Neumorphic ── */
html[data-ui-style="neoformism"] button,
html[data-ui-style="neoformism"] .btn {
  background: var(--neu-bg) !important;
  box-shadow:
    6px 6px 14px var(--neu-shadow-dark-deep),
    -6px -6px 14px var(--neu-shadow-light-deep) !important;
  border-radius: var(--neu-radius-sm) !important;
  border: none !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  padding: 10px 22px !important;
  position: relative;
  transform: translateY(0);
}
html[data-ui-style="neoformism"] button:hover,
html[data-ui-style="neoformism"] .btn:hover {
  box-shadow:
    10px 10px 22px var(--neu-shadow-dark-deep),
    -10px -10px 22px var(--neu-shadow-light-deep) !important;
  transform: translateY(-1px);
}
html[data-ui-style="neoformism"] button:active,
html[data-ui-style="neoformism"] .btn:active {
  box-shadow:
    inset 6px 6px 14px var(--neu-shadow-dark-deep),
    inset -6px -6px 14px var(--neu-shadow-light-deep) !important;
  transform: translateY(1px);
}

/* Button colour variants — subtle gradient + tinted text */
html[data-ui-style="neoformism"] .btn-default {
  color: var(--neu-text) !important;
  background: linear-gradient(145deg, #f0f3f7, #e6e9ef) !important;
}
html[data-ui-style="neoformism"] .btn-primary {
  background: linear-gradient(145deg, #f0f3f7, #e6e9ef) !important;
  color: var(--neu-primary) !important;
  box-shadow:
    6px 6px 14px var(--neu-shadow-dark-deep),
    -6px -6px 14px var(--neu-shadow-light-deep),
    inset 0 0 0 1px var(--neu-primary-soft) !important;
}
html[data-ui-style="neoformism"] .btn-primary:hover {
  box-shadow:
    10px 10px 22px var(--neu-shadow-dark-deep),
    -10px -10px 22px var(--neu-shadow-light-deep),
    inset 0 0 0 1px var(--neu-primary-soft) !important;
}
html[data-ui-style="neoformism"] .btn-primary:active {
  box-shadow:
    inset 6px 6px 14px var(--neu-shadow-dark-deep),
    inset -6px -6px 14px var(--neu-shadow-light-deep) !important;
}
html[data-ui-style="neoformism"] .btn-success {
  color: var(--neu-success) !important;
}
html[data-ui-style="neoformism"] .btn-info {
  color: var(--neu-info) !important;
}
html[data-ui-style="neoformism"] .btn-danger {
  color: var(--neu-danger) !important;
}
html[data-ui-style="neoformism"] .btn-warning {
  color: var(--neu-warning) !important;
}

html[data-ui-style="neoformism"].dark button,
html[data-ui-style="neoformism"].dark .btn {
  background: var(--neu-bg) !important;
  color: var(--neu-text) !important;
}
html[data-ui-style="neoformism"].dark .btn-primary {
  color: #a78bfa !important;
}
html[data-ui-style="neoformism"].dark .btn-success {
  color: #4ade80 !important;
}
html[data-ui-style="neoformism"].dark .btn-info {
  color: #60a5fa !important;
}
html[data-ui-style="neoformism"].dark .btn-danger {
  color: #f87171 !important;
}
html[data-ui-style="neoformism"].dark .btn-warning {
  color: #fbbf24 !important;
}

/* ── Form Controls ── */
html[data-ui-style="neoformism"] .form-control,
html[data-ui-style="neoformism"] .dataTables_filter input {
  background: var(--neu-bg) !important;
  box-shadow:
    inset 4px 4px 10px var(--neu-shadow-dark),
    inset -4px -4px 10px var(--neu-shadow-light) !important;
  border-radius: var(--neu-radius-sm) !important;
  border: none !important;
  padding: 10px 16px !important;
  font-size: 14px;
  transition: all 0.25s ease;
}
html[data-ui-style="neoformism"] .form-control:focus {
  box-shadow:
    inset 4px 4px 10px var(--neu-shadow-dark-deep),
    inset -4px -4px 10px var(--neu-shadow-light-deep),
    0 0 0 4px var(--neu-primary-soft) !important;
}
html[data-ui-style="neoformism"] select.form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232d3138' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px !important;
  -webkit-appearance: none;
  appearance: none;
}
html[data-ui-style="neoformism"].dark select.form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e5e7eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* ── Nav Tabs ── */
html[data-ui-style="neoformism"] .nav-tabs {
  border-bottom: none !important;
  padding: 0;
  gap: 4px;
}
html[data-ui-style="neoformism"] .nav-tabs > li > a {
  border: none !important;
  border-radius: var(--neu-radius-sm) var(--neu-radius-sm) 0 0 !important;
  margin: 0 1px;
  padding: 12px 20px !important;
  font-weight: 500;
  color: var(--neu-text-muted);
  transition: all 0.2s ease;
}
html[data-ui-style="neoformism"] .nav-tabs > li > a:hover {
  box-shadow:
    4px 4px 10px var(--neu-shadow-dark),
    -4px -4px 10px var(--neu-shadow-light);
  color: var(--neu-text);
}
html[data-ui-style="neoformism"] .nav-tabs > li.active > a {
  box-shadow:
    inset 4px 4px 10px var(--neu-shadow-dark-deep),
    inset -4px -4px 10px var(--neu-shadow-light-deep) !important;
  color: var(--neu-primary) !important;
}
html[data-ui-style="neoformism"] .tab-content {
  background: transparent;
  padding: var(--neu-panel-pad) 0;
}
html[data-ui-style="neoformism"].dark .nav-tabs > li > a {
  color: var(--neu-text-muted);
}
html[data-ui-style="neoformism"].dark .nav-tabs > li.active > a {
  color: #a78bfa !important;
}

/* ── Badges / Labels ── */
html[data-ui-style="neoformism"] .badge,
html[data-ui-style="neoformism"] .label {
  box-shadow:
    3px 3px 7px var(--neu-shadow-dark),
    -3px -3px 7px var(--neu-shadow-light) !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-weight: 600;
  font-size: 11px;
}

/* ── Alerts ── */
html[data-ui-style="neoformism"] .alert {
  border: none !important;
  border-radius: var(--neu-radius-md) !important;
}

/* ── Tables ── */
html[data-ui-style="neoformism"] .table {
  border-radius: var(--neu-radius-md);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}
html[data-ui-style="neoformism"] .table > thead > tr > th {
  border: none !important;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--neu-text-muted);
  padding: 14px 16px;
  background: transparent !important;
}
html[data-ui-style="neoformism"] .table > tbody > tr {
  border: none !important;
  transition: all 0.2s;
}
html[data-ui-style="neoformism"] .table > tbody > tr:hover {
  box-shadow:
    inset 2px 2px 6px var(--neu-shadow-dark),
    inset -2px -2px 6px var(--neu-shadow-light) !important;
}
html[data-ui-style="neoformism"] .table > tbody > tr.active {
  box-shadow:
    inset 3px 3px 8px var(--neu-shadow-dark),
    inset -3px -3px 8px var(--neu-shadow-light) !important;
}
html[data-ui-style="neoformism"] .table > tbody > tr > td {
  border: none !important;
  padding: 12px 16px;
  border-bottom: 1px solid transparent !important;
}

/* ── Kanban ── */
html[data-ui-style="neoformism"] .kan-ban-col .panel_s {
  box-shadow: none !important;
  margin: 0 !important;
}
html[data-ui-style="neoformism"] .kan-ban-col .panel-body {
  background: transparent !important;
}
html[data-ui-style="neoformism"] .kan-ban-col .card {
  background: var(--neu-bg) !important;
  box-shadow:
    5px 5px 12px var(--neu-shadow-dark),
    -5px -5px 12px var(--neu-shadow-light) !important;
  border-radius: var(--neu-radius-sm) !important;
  border: none !important;
  margin-bottom: 10px;
  padding: 14px 16px !important;
  transition: all 0.2s ease;
}
html[data-ui-style="neoformism"] .kan-ban-col .card:hover {
  box-shadow:
    8px 8px 18px var(--neu-shadow-dark-deep),
    -8px -8px 18px var(--neu-shadow-light-deep) !important;
  transform: translateY(-2px);
}

/* ── Modals ── */
html[data-ui-style="neoformism"] .modal-backdrop {
  background: rgba(163, 177, 194, 0.25) !important;
}
html[data-ui-style="neoformism"].dark .modal-backdrop {
  background: rgba(0, 0, 0, 0.35) !important;
}
html[data-ui-style="neoformism"] .modal-content {
  border-radius: var(--neu-radius-lg) !important;
}

/* ── Progress ── */
html[data-ui-style="neoformism"] .progress {
  background: var(--neu-bg) !important;
  box-shadow:
    inset 3px 3px 8px var(--neu-shadow-dark),
    inset -3px -3px 8px var(--neu-shadow-light) !important;
  border-radius: 30px;
  overflow: hidden;
  height: 8px;
}
html[data-ui-style="neoformism"] .progress-bar {
  border-radius: 30px;
  box-shadow: 0 0 6px rgba(108, 92, 231, 0.2);
}

/* ── Misc Small Boxes ── */
html[data-ui-style="neoformism"] .staff_logged_time,
html[data-ui-style="neoformism"] .project-progress,
html[data-ui-style="neoformism"] .milestone {
  background: var(--neu-bg) !important;
  box-shadow:
    5px 5px 12px var(--neu-shadow-dark),
    -5px -5px 12px var(--neu-shadow-light) !important;
  border-radius: var(--neu-radius-md) !important;
  border: none !important;
}

/* ── Tooltip ── */
html[data-ui-style="neoformism"] .tooltip-inner {
  background: var(--neu-bg) !important;
  box-shadow:
    6px 6px 14px var(--neu-shadow-dark),
    -6px -6px 14px var(--neu-shadow-light) !important;
  border-radius: var(--neu-radius-sm) !important;
  color: var(--neu-text) !important;
  font-size: 12px;
  padding: 8px 14px;
}
html[data-ui-style="neoformism"] .tooltip-arrow {
  display: none;
}

/* ── Dropdown menu items ── */
html[data-ui-style="neoformism"] .dropdown-menu > li > a {
  border-radius: 10px;
  margin: 2px 6px;
  padding: 8px 14px !important;
  transition: all 0.15s ease;
}
html[data-ui-style="neoformism"] .dropdown-menu > li > a:hover {
  box-shadow:
    inset 3px 3px 7px var(--neu-shadow-dark),
    inset -3px -3px 7px var(--neu-shadow-light) !important;
  background: transparent !important;
}

/* ── Footer ── */
html[data-ui-style="neoformism"] .footer {
  background: transparent !important;
  border: none !important;
  box-shadow:
    0 -1px 0 var(--neu-shadow-light),
    0 1px 0 var(--neu-shadow-dark);
}

/* ── Scrollbar ── */
html[data-ui-style="neoformism"] ::-webkit-scrollbar {
  width: 6px;
}
html[data-ui-style="neoformism"] ::-webkit-scrollbar-track {
  background: transparent;
}
html[data-ui-style="neoformism"] ::-webkit-scrollbar-thumb {
  background: rgba(163, 177, 194, 0.3);
  border-radius: 20px;
}

/* ── Select2 ── */
html[data-ui-style="neoformism"] .select2-container--default .select2-selection--single,
html[data-ui-style="neoformism"] .select2-container--default .select2-selection--multiple {
  background: var(--neu-bg) !important;
  box-shadow:
    inset 4px 4px 10px var(--neu-shadow-dark),
    inset -4px -4px 10px var(--neu-shadow-light) !important;
  border-radius: var(--neu-radius-sm) !important;
  border: none !important;
  padding: 2px 0;
}

/* ── Activity feed ── */
html[data-ui-style="neoformism"] .activity-feed .feed-item {
  background: var(--neu-bg) !important;
  box-shadow:
    5px 5px 12px var(--neu-shadow-dark),
    -5px -5px 12px var(--neu-shadow-light) !important;
  border-radius: var(--neu-radius-md) !important;
  margin-bottom: 10px;
  border: none !important;
  padding: 16px;
}
html[data-ui-style="neoformism"] .feed-item .date {
  color: var(--neu-text-muted);
}

/* ── Onoffswitch ── */
html[data-ui-style="neoformism"] .onoffswitch {
  box-shadow:
    inset 3px 3px 8px var(--neu-shadow-dark),
    inset -3px -3px 8px var(--neu-shadow-light) !important;
  border-radius: 30px;
  border: none !important;
}
html[data-ui-style="neoformism"] .onoffswitch-switch {
  box-shadow:
    2px 2px 6px var(--neu-shadow-dark),
    -2px -2px 6px var(--neu-shadow-light) !important;
  border-radius: 50% !important;
  background: var(--neu-bg) !important;
}

/* ── Breadcrumb ── */
html[data-ui-style="neoformism"] .breadcrumb {
  background: transparent !important;
}
html[data-ui-style="neoformism"] .breadcrumb > li + li::before {
  color: var(--neu-text-muted);
}

/* ========== 3. IPHONE (iOS Style) ========== */
html[data-ui-style="iphone"] {
  --ios-blue: #007aff;
  --ios-red: #ff3b30;
  --ios-green: #34c759;
  --ios-orange: #ff9500;
  --ios-yellow: #ffcc00;
  --ios-purple: #af52de;
  --ios-pink: #ff2d55;
  --ios-gray: #8e8e93;
  --ios-separator: rgba(60,60,67,0.08);
}

/* Header - iOS style large title */
html[data-ui-style="iphone"] #header {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(40px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.4) !important;
  border-bottom: 0.5px solid var(--ios-separator) !important;
}
html[data-ui-style="iphone"].dark #header {
  background: rgba(0,0,0,0.85) !important;
  border-bottom: 0.5px solid rgba(60,60,67,0.3) !important;
}

/* Sidebar - iOS style */
html[data-ui-style="iphone"] .sidebar {
  background: rgba(249,249,249,0.85) !important;
  backdrop-filter: blur(40px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.4) !important;
  border-right: 0.5px solid var(--ios-separator) !important;
}
html[data-ui-style="iphone"].dark .sidebar {
  background: rgba(0,0,0,0.85) !important;
  border-right: 0.5px solid rgba(60,60,67,0.3) !important;
}
html[data-ui-style="iphone"] .sidebar ul.nav li a {
  border-radius: 10px;
  margin: 1px 6px;
  padding: 10px 12px !important;
  font-weight: 500;
  font-size: 14px;
}
html[data-ui-style="iphone"] .sidebar ul.nav li.active > a {
  background: rgba(0,122,255,0.1) !important;
  color: var(--ios-blue) !important;
}
html[data-ui-style="iphone"] .sidebar ul.nav li.active > a .menu-icon {
  color: var(--ios-blue) !important;
}

/* Panels - iOS rounded corners */
html[data-ui-style="iphone"] .panel_s {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
  border: 0.5px solid var(--ios-separator) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
html[data-ui-style="iphone"].dark .panel_s {
  background: rgba(28,28,30,0.85) !important;
  border: 0.5px solid rgba(60,60,67,0.3) !important;
}
html[data-ui-style="iphone"] .panel-body {
  background: transparent !important;
}

/* Buttons - iOS pill style */
html[data-ui-style="iphone"] .btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 8px 20px !important;
  border: none !important;
  transition: all 0.2s cubic-bezier(0.25,0.1,0.25,1) !important;
}
html[data-ui-style="iphone"] .btn-primary {
  background: var(--ios-blue) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,122,255,0.25) !important;
}
html[data-ui-style="iphone"] .btn-primary:hover {
  opacity: 0.85;
  transform: scale(0.97);
}
html[data-ui-style="iphone"] .btn-default {
  background: rgba(120,120,128,0.12) !important;
  color: var(--ios-blue) !important;
}
html[data-ui-style="iphone"] .btn-info {
  background: #5ac8fa !important;
}
html[data-ui-style="iphone"] .btn-success {
  background: var(--ios-green) !important;
}
html[data-ui-style="iphone"] .btn-danger {
  background: var(--ios-red) !important;
}
html[data-ui-style="iphone"] .btn-warning {
  background: var(--ios-orange) !important;
}

/* Form controls - iOS style */
html[data-ui-style="iphone"] .form-control {
  border-radius: 10px !important;
  border: 1.5px solid rgba(60,60,67,0.12) !important;
  background: rgba(120,120,128,0.08) !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  transition: border-color 0.2s;
}
html[data-ui-style="iphone"] .form-control:focus {
  border-color: var(--ios-blue) !important;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.12) !important;
}
html[data-ui-style="iphone"].dark .form-control {
  background: rgba(120,120,128,0.2) !important;
  border-color: rgba(60,60,67,0.3) !important;
  color: #fff !important;
}
html[data-ui-style="iphone"].dark .form-control:focus {
  border-color: var(--ios-blue) !important;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.2) !important;
}

/* Nav Tabs - iOS segmented control style */
html[data-ui-style="iphone"] .nav-tabs {
  border-bottom: 0.5px solid var(--ios-separator);
  padding: 0 16px;
}
html[data-ui-style="iphone"] .nav-tabs > li > a {
  border: none !important;
  font-weight: 500;
  font-size: 14px;
  color: #8e8e93;
  padding: 12px 16px !important;
  margin: 0;
  transition: all 0.2s;
}
html[data-ui-style="iphone"] .nav-tabs > li.active > a {
  color: var(--ios-blue) !important;
  border-bottom: 2px solid var(--ios-blue) !important;
  background: transparent !important;
}

/* Dropdowns - iOS action sheet style */
html[data-ui-style="iphone"] .dropdown-menu {
  border-radius: 14px !important;
  border: 0.5px solid var(--ios-separator) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important;
  padding: 6px 0;
}
html[data-ui-style="iphone"].dark .dropdown-menu {
  background: rgba(28,28,30,0.95) !important;
  border: 0.5px solid rgba(60,60,67,0.3) !important;
}
html[data-ui-style="iphone"] .dropdown-menu > li > a {
  padding: 10px 16px;
  font-size: 15px;
}

/* Modals - iOS sheet style */
html[data-ui-style="iphone"] .modal-content {
  border-radius: 16px !important;
  border: 0.5px solid var(--ios-separator) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}
html[data-ui-style="iphone"] .modal-header {
  border-bottom: 0.5px solid var(--ios-separator);
  padding: 16px 20px;
}
html[data-ui-style="iphone"] .modal-header h4 {
  font-weight: 700;
  font-size: 17px;
}

/* Tables - iOS style */
html[data-ui-style="iphone"] .table {
  border-radius: 14px;
  overflow: hidden;
}
html[data-ui-style="iphone"] .table > thead > tr > th {
  font-weight: 600;
  font-size: 12px;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 0.5px solid var(--ios-separator);
}
html[data-ui-style="iphone"] .table > tbody > tr {
  border-bottom: 0.5px solid rgba(60,60,67,0.06);
}
html[data-ui-style="iphone"] .table > tbody > tr:last-child {
  border-bottom: none;
}

/* Badges - iOS pill style */
html[data-ui-style="iphone"] .badge {
  border-radius: 20px;
  font-weight: 600;
  font-size: 11px;
  padding: 3px 10px;
}

/* Alerts - iOS style */
html[data-ui-style="iphone"] .alert {
  border-radius: 14px;
  border: none;
  border-left: 4px solid;
}

/* Scrollbar - iOS style */
html[data-ui-style="iphone"] ::-webkit-scrollbar {
  width: 4px;
}
html[data-ui-style="iphone"] ::-webkit-scrollbar-track {
  background: transparent;
}
html[data-ui-style="iphone"] ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 4px;
}

/* ========== 4. گلسمورفیسم (Glassmorphism) ========== */

/* ── Page Background ── */
html[data-ui-style="glass"],
html[data-ui-style="glass"] body {
  background: linear-gradient(135deg, #e8e0f0 0%, #d4e4f7 25%, #f0e6f6 50%, #dce8f5 75%, #e6def0 100%) fixed !important;
  background-size: 400% 400% !important;
  animation: glassBgShift 20s ease infinite !important;
}
@keyframes glassBgShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
html[data-ui-style="glass"].dark,
html[data-ui-style="glass"].dark body {
  background: linear-gradient(135deg, #0f0c1a 0%, #1a1035 25%, #0c1a2e 50%, #120c1f 75%, #0d0b18 100%) fixed !important;
  background-size: 400% 400% !important;
}
html[data-ui-style="glass"] .content {
  background: transparent !important;
}

/* ── Core Glass Card ── */
html[data-ui-style="glass"] .panel_s,
html[data-ui-style="glass"] .modal-content,
html[data-ui-style="glass"] .dropdown-menu,
html[data-ui-style="glass"] .widget,
html[data-ui-style="glass"] .kan-ban-col,
html[data-ui-style="glass"] .screen-options-area,
html[data-ui-style="glass"] .well,
html[data-ui-style="glass"] .list-group-item,
html[data-ui-style="glass"] .feed-item,
html[data-ui-style="glass"] .home-activity,
html[data-ui-style="glass"] .panel-group .panel,
html[data-ui-style="glass"] .project-overview-open-tasks,
html[data-ui-style="glass"] .project-overview-days-left,
html[data-ui-style="glass"] .project-overview-logged-hours-finance,
html[data-ui-style="glass"] .project-overview-expenses-finance,
html[data-ui-style="glass"] table.items thead,
html[data-ui-style="glass"] .bootstrap-datetimepicker-widget.dropdown-menu,
html[data-ui-style="glass"] .daterangepicker,
html[data-ui-style="glass"] .select2-dropdown,
html[data-ui-style="glass"] .btn-group.open .dropdown-toggle,
html[data-ui-style="glass"] .si-widget,
html[data-ui-style="glass"] div[class*="tw-bg-white"][class*="tw-shadow-sm"] {
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.02),
    0 8px 24px rgba(0, 0, 0, 0.04),
    0 20px 48px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  border-radius: 16px !important;
}
html[data-ui-style="glass"].dark .panel_s,
html[data-ui-style="glass"].dark .modal-content,
html[data-ui-style="glass"].dark .dropdown-menu,
html[data-ui-style="glass"].dark .widget,
html[data-ui-style="glass"].dark .kan-ban-col,
html[data-ui-style="glass"].dark .screen-options-area,
html[data-ui-style="glass"].dark .well,
html[data-ui-style="glass"].dark .list-group-item,
html[data-ui-style="glass"].dark .feed-item,
html[data-ui-style="glass"].dark .home-activity,
html[data-ui-style="glass"].dark .panel-group .panel,
html[data-ui-style="glass"].dark .project-overview-open-tasks,
html[data-ui-style="glass"].dark .project-overview-days-left,
html[data-ui-style="glass"].dark .project-overview-logged-hours-finance,
html[data-ui-style="glass"].dark .project-overview-expenses-finance,
html[data-ui-style="glass"].dark table.items thead,
html[data-ui-style="glass"].dark .bootstrap-datetimepicker-widget.dropdown-menu,
html[data-ui-style="glass"].dark .daterangepicker,
html[data-ui-style="glass"].dark .select2-dropdown,
html[data-ui-style="glass"].dark .si-widget,
html[data-ui-style="glass"].dark div[class*="tw-bg-white"][class*="tw-shadow-sm"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* ── Glass Inner Parts ── */
html[data-ui-style="glass"] .panel-body,
html[data-ui-style="glass"] .panel-heading,
html[data-ui-style="glass"] .panel-footer,
html[data-ui-style="glass"] .modal-header,
html[data-ui-style="glass"] .modal-footer,
html[data-ui-style="glass"] .panel-group .panel-heading,
html[data-ui-style="glass"] .panel-group .panel-body {
  background: transparent !important;
}
html[data-ui-style="glass"] .panel-heading,
html[data-ui-style="glass"] .panel-footer,
html[data-ui-style="glass"] .modal-header,
html[data-ui-style="glass"] .modal-footer,
html[data-ui-style="glass"] .panel-group .panel-heading {
  border-color: rgba(255, 255, 255, 0.25) !important;
}
html[data-ui-style="glass"].dark .panel-heading,
html[data-ui-style="glass"].dark .panel-footer,
html[data-ui-style="glass"].dark .modal-header,
html[data-ui-style="glass"].dark .modal-footer,
html[data-ui-style="glass"].dark .panel-group .panel-heading {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ── Header ── */
html[data-ui-style="glass"] #header {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(30px) saturate(2) !important;
  -webkit-backdrop-filter: blur(30px) saturate(2) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}
html[data-ui-style="glass"].dark #header {
  background: rgba(0, 0, 0, 0.15) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
html[data-ui-style="glass"] .header-left {
  background: transparent !important;
}
html[data-ui-style="glass"] .header-left .btn,
html[data-ui-style="glass"] .header-left a {
  border-radius: 8px;
}
html[data-ui-style="glass"] .header-left .btn:hover,
html[data-ui-style="glass"] .header-left a:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}
html[data-ui-style="glass"].dark .header-left .btn:hover,
html[data-ui-style="glass"].dark .header-left a:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}
html[data-ui-style="glass"] #header .navbar-nav > li > a {
  border-radius: 8px;
  margin: 4px 2px;
  transition: all 0.2s;
}
html[data-ui-style="glass"] #header .navbar-nav > li > a:hover,
html[data-ui-style="glass"] #header .navbar-nav > li > a:focus {
  background: rgba(255, 255, 255, 0.15) !important;
}
html[data-ui-style="glass"].dark #header .navbar-nav > li > a:hover,
html[data-ui-style="glass"].dark #header .navbar-nav > li > a:focus {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* ── Sidebar (full coverage) ── */
html[data-ui-style="glass"] .sidebar {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}
html[data-ui-style="glass"].dark .sidebar {
  background: rgba(0, 0, 0, 0.15) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Sidebar menu separators */
html[data-ui-style="glass"] .sidebar .nav > li > a {
  border-radius: 10px;
  margin: 2px 8px;
  transition: all 0.25s ease;
  position: relative;
}
html[data-ui-style="glass"] .sidebar .nav > li > a:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(6px);
}
html[data-ui-style="glass"].dark .sidebar .nav > li > a:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}
html[data-ui-style="glass"] .sidebar .nav > li.active > a {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
html[data-ui-style="glass"].dark .sidebar .nav > li.active > a {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Sidebar menu icons */
html[data-ui-style="glass"] .sidebar .menu-icon {
  opacity: 0.8;
  transition: opacity 0.2s;
}
html[data-ui-style="glass"] .sidebar .nav > li.active .menu-icon {
  opacity: 1;
}

/* Sidebar sub-menu (collapsible items) */
html[data-ui-style="glass"] .sidebar .nav > li.dropdown > ul.sub-menu {
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 8px;
  padding: 2px 0 2px 16px;
}
html[data-ui-style="glass"] .sidebar .nav > li.dropdown > ul.sub-menu li a {
  border-radius: 8px;
  margin: 1px 0;
  padding: 6px 12px !important;
  font-size: 13px;
}
html[data-ui-style="glass"] .sidebar .nav > li.dropdown > ul.sub-menu li.active > a {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
html[data-ui-style="glass"].dark .sidebar .nav > li.dropdown > ul.sub-menu li.active > a {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Sidebar scrollbar */
html[data-ui-style="glass"] .sidebar::-webkit-scrollbar {
  width: 3px;
}
html[data-ui-style="glass"] .sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

/* Sidebar separators */
html[data-ui-style="glass"] .sidebar .nav > li > a .sub-menu + .nav-divider,
html[data-ui-style="glass"] .sidebar .nav-divider {
  background: rgba(255, 255, 255, 0.08);
  height: 1px;
  margin: 4px 12px;
}

/* ── Buttons ── */
html[data-ui-style="glass"] .btn {
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-weight: 500 !important;
}
html[data-ui-style="glass"] .btn-default {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #4a4a6a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
html[data-ui-style="glass"] .btn-default:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}
html[data-ui-style="glass"].dark .btn-default {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #b8b8d0 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
html[data-ui-style="glass"].dark .btn-default:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
html[data-ui-style="glass"] .btn-primary {
  background: rgba(108, 92, 231, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}
html[data-ui-style="glass"] .btn-primary:hover {
  background: rgba(108, 92, 231, 0.7) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.3) !important;
}
html[data-ui-style="glass"] .btn-success {
  background: rgba(52, 199, 89, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 4px 16px rgba(52, 199, 89, 0.15) !important;
}
html[data-ui-style="glass"] .btn-info {
  background: rgba(90, 200, 250, 0.45) !important;
}
html[data-ui-style="glass"] .btn-danger {
  background: rgba(255, 59, 48, 0.45) !important;
}
html[data-ui-style="glass"] .btn-warning {
  background: rgba(255, 149, 0, 0.45) !important;
}

/* ── Form Controls ── */
html[data-ui-style="glass"] .form-control {
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  transition: all 0.25s;
}
html[data-ui-style="glass"] .form-control:focus {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(108, 92, 231, 0.3) !important;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.08) !important;
}
html[data-ui-style="glass"].dark .form-control {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #ddd !important;
}
html[data-ui-style="glass"].dark .form-control:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(108, 92, 231, 0.2) !important;
}
html[data-ui-style="glass"] select.form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234a4a6a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
  -webkit-appearance: none;
  appearance: none;
}

/* ── Nav Tabs ── */
html[data-ui-style="glass"] .nav-tabs {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
html[data-ui-style="glass"] .nav-tabs > li > a {
  border: none !important;
  border-radius: 10px 10px 0 0 !important;
  margin: 0 2px;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 500;
  transition: all 0.25s;
}
html[data-ui-style="glass"] .nav-tabs > li > a:hover {
  background: rgba(255, 255, 255, 0.12);
}
html[data-ui-style="glass"] .nav-tabs > li.active > a {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #6c5ce7 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-bottom: none !important;
}
html[data-ui-style="glass"].dark .nav-tabs > li > a {
  color: rgba(255, 255, 255, 0.4);
}
html[data-ui-style="glass"].dark .nav-tabs > li.active > a {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #a78bfa !important;
}
html[data-ui-style="glass"] .tab-content {
  background: transparent;
  padding-top: 12px;
}

/* ── Badges / Labels ── */
html[data-ui-style="glass"] .badge,
html[data-ui-style="glass"] .label {
  backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* ── Alerts ── */
html[data-ui-style="glass"] .alert {
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 14px !important;
  border-left-width: 4px !important;
}

/* ── Tables ── */
html[data-ui-style="glass"] .table {
  border-radius: 14px;
  overflow: hidden;
}
html[data-ui-style="glass"] .table > thead > tr > th {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-weight: 600;
  color: rgba(0, 0, 0, 0.5);
}
html[data-ui-style="glass"] .table > tbody > tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.2s;
}
html[data-ui-style="glass"] .table > tbody > tr:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
html[data-ui-style="glass"].dark .table > thead > tr > th {
  color: rgba(255, 255, 255, 0.4);
}
html[data-ui-style="glass"] .table > tbody > tr.active {
  background: rgba(108, 92, 231, 0.08) !important;
}

/* ── DataTable search input ── */
html[data-ui-style="glass"] .dataTables_filter input {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 10px !important;
}

/* ── Progress bars ── */
html[data-ui-style="glass"] .progress {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
}

/* ── Top Stats ── */
html[data-ui-style="glass"] .top_stats_wrapper {
  gap: 12px;
}
html[data-ui-style="glass"] .top_stats_wrapper > div {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 16px !important;
}
html[data-ui-style="glass"].dark .top_stats_wrapper > div {
  background: rgba(0, 0, 0, 0.12) !important;
}

/* ── Kanban Items ── */
html[data-ui-style="glass"] .kan-ban-col .panel_s {
  box-shadow: none !important;
}
html[data-ui-style="glass"] .kan-ban-col .panel-body {
  background: transparent !important;
}
html[data-ui-style="glass"] .kan-ban-col .card {
  background: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  margin-bottom: 8px;
  transition: all 0.2s;
}
html[data-ui-style="glass"] .kan-ban-col .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* ── Modals ── */
html[data-ui-style="glass"] .modal-backdrop {
  backdrop-filter: blur(4px) !important;
  background: rgba(0, 0, 0, 0.2) !important;
}
html[data-ui-style="glass"].dark .modal-backdrop {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* ── Small Info / Stats boxes ── */
html[data-ui-style="glass"] .staff_logged_time,
html[data-ui-style="glass"] .project-progress,
html[data-ui-style="glass"] .milestone {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ── Popover / Tooltip ── */
html[data-ui-style="glass"] .popover {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 14px !important;
}
html[data-ui-style="glass"] .popover-title {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
html[data-ui-style="glass"] .popover-content {
  background: transparent !important;
}
html[data-ui-style="glass"] .tooltip-inner {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  color: #333 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
html[data-ui-style="glass"].dark .tooltip-inner {
  background: rgba(30, 30, 50, 0.6) !important;
  color: #ccc !important;
}

/* ── Footer ── */
html[data-ui-style="glass"] .footer {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ── Inline Alert / Toast ── */
html[data-ui-style="glass"] .toast,
html[data-ui-style="glass"] .toast-message {
  backdrop-filter: blur(16px) !important;
  border-radius: 14px !important;
}

/* ── Scrollbar ── */
html[data-ui-style="glass"] ::-webkit-scrollbar {
  width: 6px;
}
html[data-ui-style="glass"] ::-webkit-scrollbar-track {
  background: transparent;
}
html[data-ui-style="glass"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
}

/* ── Select2 (enhanced selects) ── */
html[data-ui-style="glass"] .select2-container--default .select2-selection--single,
html[data-ui-style="glass"] .select2-container--default .select2-selection--multiple {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
}
html[data-ui-style="glass"].dark .select2-container--default .select2-selection--single,
html[data-ui-style="glass"].dark .select2-container--default .select2-selection--multiple {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* ── Sub-header / Breadcrumb ── */
html[data-ui-style="glass"] .breadcrumb {
  background: transparent !important;
}
html[data-ui-style="glass"] .breadcrumb > li + li::before {
  color: rgba(0, 0, 0, 0.2);
}

/* ── Activity log / timeline ── */
html[data-ui-style="glass"] .activity-feed .feed-item {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  margin-bottom: 8px;
}
html[data-ui-style="glass"] .feed-item .date {
  color: rgba(0, 0, 0, 0.3);
}
html[data-ui-style="glass"].dark .feed-item .date {
  color: rgba(255, 255, 255, 0.3);
}

/* ── Email / Inbox ── */
html[data-ui-style="glass"] .inbox-table .table > tbody > tr {
  background: transparent;
}
html[data-ui-style="glass"] .inbox-table .table > tbody > tr.unread {
  background: rgba(108, 92, 231, 0.04) !important;
}

/* ── Ticket view ── */
html[data-ui-style="glass"] .ticket-area {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(4px);
  border-radius: 14px;
  padding: 16px;
}

/* ── Survey / Form builder ── */
html[data-ui-style="glass"] .survey_box {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(8px);
  border-radius: 14px;
}