/* ============================================================
   OP LEVEL ULTRA-DEEP CYBER THEME (v4.0 - PERFECT MOBILE & DESKTOP)
   Designed for TM PANEL STORES / TMKEYPORTAL
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --op-bg-dark: #080C14;
  --op-sidebar-bg: #0C101B;
  --op-card-bg: #101624;
  --op-card-border: rgba(255, 255, 255, 0.1);
  --op-text-main: #F1F5F9;
  --op-text-muted: #94A3B8;
  --op-primary-glow: #7F00FF;
  --op-cyan-glow: #00F2FE;
  --op-pink-glow: #FF007F;
  --op-radius: 16px;
}

/* UNIVERSAL BODY & HTML DARK OVERRIDE */
html, body, 
.light-style, .dark-style,
.light-style body, .dark-style body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background-color: var(--op-bg-dark) !important;
  color: var(--op-text-main) !important;
  min-height: 100vh;
}

/* ============================================================
   SIDEBAR & NAVIGATION (SOLID OPAQUE DARK BACKGROUND - NO BLEED)
   ============================================================ */

.light-style .bg-menu-theme, 
.dark-style .bg-menu-theme,
.bg-menu-theme,
aside.layout-menu, 
.layout-menu, 
.menu-vertical {
  background-color: var(--op-sidebar-bg) !important;
  border-right: 1px solid var(--op-card-border) !important;
  box-shadow: 4px 0 25px rgba(0, 0, 0, 0.8) !important;
  z-index: 1099 !important;
}

/* Logo Header */
.bg-menu-theme .app-brand-text,
.app-brand-text {
  background: linear-gradient(135deg, #FF4B2B 0%, #FF416C 40%, #00F2FE 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
  font-size: 1.45rem !important;
  letter-spacing: 0.5px;
}

/* Menu Links */
.bg-menu-theme .menu-link,
.menu-link {
  color: var(--op-text-muted) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  margin: 3px 8px !important;
  transition: all 0.2s ease !important;
}

.bg-menu-theme .menu-link:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #FFFFFF !important;
}

.bg-menu-theme .menu-item.active > .menu-link {
  background: linear-gradient(90deg, rgba(127, 0, 255, 0.6) 0%, rgba(0, 242, 254, 0.4) 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 15px rgba(127, 0, 255, 0.3) !important;
}

/* Clean Submenu Items */
.bg-menu-theme .menu-sub,
.menu-sub {
  background: #060910 !important;
  border-left: 2px solid var(--op-cyan-glow) !important;
  margin-left: 1rem !important;
  padding: 4px 0 4px 6px !important;
  border-radius: 0 10px 10px 0 !important;
}

.bg-menu-theme .menu-sub .menu-link,
.menu-sub .menu-link {
  color: #CBD5E1 !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
}

.bg-menu-theme .menu-sub .menu-link::before,
.menu-sub .menu-link::before {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--op-cyan-glow) !important;
  margin-right: 10px !important;
  box-shadow: 0 0 6px var(--op-cyan-glow) !important;
  display: inline-block !important;
}

.bg-menu-theme .menu-sub .menu-link:hover {
  background: rgba(0, 242, 254, 0.15) !important;
  color: #FFFFFF !important;
}

.bg-menu-theme .menu-sub .menu-item.active > .menu-link {
  background: rgba(0, 242, 254, 0.25) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* ============================================================
   NAVBAR HEADER
   ============================================================ */
.layout-navbar {
  background: #0D121F !important;
  border-bottom: 1px solid var(--op-card-border) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

.navbar-nav .nav-link, .layout-navbar .nav-link {
  color: var(--op-text-main) !important;
}

/* ============================================================
   CARDS & FORMS (ADD USER, ADD DAYS, ETC.)
   ============================================================ */

.card {
  background: var(--op-card-bg) !important;
  border: 1px solid var(--op-card-border) !important;
  border-radius: var(--op-radius) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  color: var(--op-text-main) !important;
}

.card-header, .card-title, .card-body, h1, h2, h3, h4, h5, h6 {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Input Fields & Dropdowns */
.form-control, .form-select, select, textarea {
  background: #080C14 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
}

.form-control:focus, .form-select:focus, select:focus {
  border-color: var(--op-cyan-glow) !important;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.3) !important;
  color: #FFFFFF !important;
}

.input-group-text {
  background: #080C14 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: var(--op-text-muted) !important;
  border-radius: 10px !important;
}

label, .form-label {
  color: var(--op-text-muted) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

/* Buttons */
.btn-primary, button[type="submit"] {
  background: linear-gradient(135deg, #7F00FF 0%, #E100FF 50%, #00F2FE 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 12px 24px !important;
  box-shadow: 0 4px 20px rgba(127, 0, 255, 0.4) !important;
}

.btn-primary:hover, button[type="submit"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 25px rgba(0, 242, 254, 0.5) !important;
}

/* Tables */
table.dataTable, table.table {
  background: transparent !important;
  color: #FFFFFF !important;
}

table.dataTable th, table.table th {
  background: #0D121F !important;
  color: var(--op-cyan-glow) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

table.dataTable td, table.table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #E2E8F0 !important;
}

/* ============================================================
   CLICK & TOUCH EVENT FIX FOR MOBILE MENU
   ============================================================ */

.layout-overlay {
  z-index: 1070 !important;
}

aside.layout-menu, .layout-menu, .menu-vertical {
  z-index: 1080 !important;
  pointer-events: auto !important;
}

.menu-inner, .menu-item, .menu-link, .menu-toggle, .menu-sub, .menu-sub .menu-link {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
}

.menu-link * {
  pointer-events: none !important; /* Allow parent <a> to catch click */
}