/* (A) PAGE TRANSITION */
::view-transition-old(root),::view-transition-new(root){animation-duration:0.3s}
@keyframes grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes shrink-x{from{transform:scaleX(1)}to{transform:scaleX(0)}}::view-transition-old(tx){animation:.2s linear both shrink-x}::view-transition-new(tx){animation:.2s linear both grow-x}.tran-x{view-transition-name:tx}
@keyframes grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes shrink-y{from{transform:scaleY(1)}to{transform:scaleY(0)}}::view-transition-old(ty){animation:.2s linear both shrink-y}::view-transition-new(ty){animation:.2s linear both grow-y}.tran-y{view-transition-name:ty}
@keyframes zoom-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes zoom-out{from{transform:scale(1)}to{transform:scale(0)}}::view-transition-old(zoom){animation:.2s linear both zoom-out}::view-transition-new(zoom){animation:.2s linear both zoom-in}.tran-zoom{view-transition-name:zoom}

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

:root {
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bg-app: #f4f6f9;
  --surface-card: #ffffff;
  --text-dark: #0f172a;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-gradient: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
  
  --success-500: #10b981;
  --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  
  --warning-500: #f59e0b;
  --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  
  --danger-500: #ef4444;
  --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);

  --purple-gradient: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  --dark-hero-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #311b92 100%);
  
  --card-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.04), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --card-shadow-hover: 0 20px 35px -10px rgba(99, 102, 241, 0.12), 0 10px 15px -8px rgba(15, 23, 42, 0.08);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-main) !important;
  background-color: var(--bg-app) !important;
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-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;
}

/* (C) ICOMOON */
@font-face{font-family:icomoon;src:url(icomoon.woff) format('woff');font-weight:400;font-style:normal;font-display:block}[class*=" icon-"],[class^=icon-]{font-family:icomoon!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.icon-home3:before{content:"\e902"}.icon-pencil:before{content:"\e905"}.icon-image:before{content:"\e90d"}.icon-images:before{content:"\e90e"}.icon-camera:before{content:"\e90f"}.icon-headphones:before{content:"\e910"}.icon-music:before{content:"\e911"}.icon-play:before{content:"\e912"}.icon-dice:before{content:"\e915"}.icon-bullhorn:before{content:"\e91a"}.icon-connection:before{content:"\e91b"}.icon-feed:before{content:"\e91d"}.icon-mic:before{content:"\e91e"}.icon-file-empty:before{content:"\e924"}.icon-files-empty:before{content:"\e925"}.icon-file-text2:before{content:"\e926"}.icon-file-zip:before{content:"\e92b"}.icon-copy:before{content:"\e92c"}.icon-paste:before{content:"\e92d"}.icon-stack:before{content:"\e92e"}.icon-folder:before{content:"\e92f"}.icon-folder-open:before{content:"\e930"}.icon-folder-plus:before{content:"\e931"}.icon-folder-minus:before{content:"\e932"}.icon-folder-download:before{content:"\e933"}.icon-folder-upload:before{content:"\e934"}.icon-price-tag:before{content:"\e935"}.icon-barcode:before{content:"\e937"}.icon-qrcode:before{content:"\e938"}.icon-cart:before{content:"\e93a"}.icon-coin-dollar:before{content:"\e93b"}.icon-credit-card:before{content:"\e93f"}.icon-phone:before{content:"\e942"}.icon-address-book:before{content:"\e944"}.icon-envelop:before{content:"\e945"}.icon-pushpin:before{content:"\e946"}.icon-location:before{content:"\e947"}.icon-map:before{content:"\e94b"}.icon-history:before{content:"\e94d"}.icon-clock2:before{content:"\e94f"}.icon-alarm:before{content:"\e950"}.icon-bell:before{content:"\e951"}.icon-calendar:before{content:"\e953"}.icon-printer:before{content:"\e954"}.icon-keyboard:before{content:"\e955"}.icon-display:before{content:"\e956"}.icon-laptop:before{content:"\e957"}.icon-mobile:before{content:"\e958"}.icon-tablet:before{content:"\e95a"}.icon-floppy-disk:before{content:"\e962"}.icon-drive:before{content:"\e963"}.icon-database:before{content:"\e964"}.icon-undo:before{content:"\e965"}.icon-redo:before{content:"\e966"}.icon-undo2:before{content:"\e967"}.icon-redo2:before{content:"\e968"}.icon-forward:before{content:"\e969"}.icon-reply:before{content:"\e96a"}.icon-bubble:before{content:"\e96b"}.icon-user:before{content:"\e971"}.icon-users:before{content:"\e972"}.icon-user-plus:before{content:"\e973"}.icon-user-minus:before{content:"\e974"}.icon-user-check:before{content:"\e975"}.icon-quotes-left:before{content:"\e977"}.icon-quotes-right:before{content:"\e978"}.icon-hour-glass:before{content:"\e979"}.icon-spinner:before{content:"\e97a"}.icon-spinner11:before{content:"\e984"}.icon-search:before{content:"\e986"}.icon-zoom-in:before{content:"\e987"}.icon-zoom-out:before{content:"\e988"}.icon-enlarge:before{content:"\e989"}.icon-shrink:before{content:"\e98a"}.icon-enlarge2:before{content:"\e98b"}.icon-shrink2:before{content:"\e98c"}.icon-key:before{content:"\e98d"}.icon-lock:before{content:"\e98f"}.icon-unlocked:before{content:"\e990"}.icon-wrench:before{content:"\e991"}.icon-equalizer:before{content:"\e992"}.icon-cog:before{content:"\e994"}.icon-hammer:before{content:"\e996"}.icon-magic-wand:before{content:"\e997"}.icon-bug:before{content:"\e999"}.icon-pie-chart:before{content:"\e99a"}.icon-stats-dots:before{content:"\e99b"}.icon-stats-bars2:before{content:"\e99d"}.icon-gift:before{content:"\e99f"}.icon-glass:before{content:"\e9a0"}.icon-mug:before{content:"\e9a2"}.icon-rocket:before{content:"\e9a5"}.icon-meter:before{content:"\e9a6"}.icon-hammer2:before{content:"\e9a8"}.icon-fire:before{content:"\e9a9"}.icon-bin2:before{content:"\e9ad"}.icon-briefcase:before{content:"\e9ae"}.icon-airplane:before{content:"\e9af"}.icon-truck:before{content:"\e9b0"}.icon-shield:before{content:"\e9b4"}.icon-power:before{content:"\e9b5"}.icon-switch:before{content:"\e9b6"}.icon-power-cord:before{content:"\e9b7"}.icon-clipboard:before{content:"\e9b8"}.icon-list-numbered:before{content:"\e9b9"}.icon-list:before{content:"\e9ba"}.icon-list2:before{content:"\e9bb"}.icon-tree:before{content:"\e9bc"}.icon-menu:before{content:"\e9bd"}.icon-menu2:before{content:"\e9be"}.icon-cloud:before{content:"\e9c1"}.icon-cloud-download:before{content:"\e9c2"}.icon-cloud-upload:before{content:"\e9c3"}.icon-cloud-check:before{content:"\e9c4"}.icon-download2:before{content:"\e9c5"}.icon-upload2:before{content:"\e9c6"}.icon-download3:before{content:"\e9c7"}.icon-upload3:before{content:"\e9c8"}.icon-sphere:before{content:"\e9c9"}.icon-earth:before{content:"\e9ca"}.icon-link:before{content:"\e9cb"}.icon-flag:before{content:"\e9cc"}.icon-attachment:before{content:"\e9cd"}.icon-eye:before{content:"\e9ce"}.icon-eye-plus:before{content:"\e9cf"}.icon-eye-minus:before{content:"\e9d0"}.icon-eye-blocked:before{content:"\e9d1"}.icon-bookmark:before{content:"\e9d2"}.icon-star-empty:before{content:"\e9d7"}.icon-star-half:before{content:"\e9d8"}.icon-star-full:before{content:"\e9d9"}.icon-heart:before{content:"\e9da"}.icon-heart-broken:before{content:"\e9db"}.icon-smile2:before{content:"\e9e2"}.icon-sad2:before{content:"\e9e6"}.icon-warning:before{content:"\ea07"}.icon-notification:before{content:"\ea08"}.icon-question:before{content:"\ea09"}.icon-plus:before{content:"\ea0a"}.icon-minus:before{content:"\ea0b"}.icon-info:before{content:"\ea0c"}.icon-cancel-circle:before{content:"\ea0d"}.icon-blocked:before{content:"\ea0e"}.icon-cross:before{content:"\ea0f"}.icon-checkmark:before{content:"\ea10"}.icon-enter:before{content:"\ea13"}.icon-exit:before{content:"\ea14"}.icon-play3:before{content:"\ea1c"}.icon-pause2:before{content:"\ea1d"}.icon-stop2:before{content:"\ea1e"}.icon-backward2:before{content:"\ea1f"}.icon-forward3:before{content:"\ea20"}.icon-first:before{content:"\ea21"}.icon-last:before{content:"\ea22"}.icon-previous2:before{content:"\ea23"}.icon-next2:before{content:"\ea24"}.icon-eject:before{content:"\ea25"}.icon-volume-high:before{content:"\ea26"}.icon-volume-medium:before{content:"\ea27"}.icon-volume-low:before{content:"\ea28"}.icon-volume-mute:before{content:"\ea29"}.icon-volume-mute2:before{content:"\ea2a"}.icon-volume-increase:before{content:"\ea2b"}.icon-volume-decrease:before{content:"\ea2c"}.icon-loop:before{content:"\ea2d"}.icon-loop2:before{content:"\ea2e"}.icon-arrow-up:before{content:"\ea32"}.icon-arrow-right:before{content:"\ea34"}.icon-arrow-down:before{content:"\ea36"}.icon-arrow-left:before{content:"\ea38"}.icon-circle-up:before{content:"\ea41"}.icon-circle-right:before{content:"\ea42"}.icon-circle-down:before{content:"\ea43"}.icon-circle-left:before{content:"\ea44"}.icon-move-up:before{content:"\ea46"}.icon-move-down:before{content:"\ea47"}.icon-sort-alpha-asc:before{content:"\ea48"}.icon-sort-alpha-desc:before{content:"\ea49"}.icon-sort-numeric-asc:before{content:"\ea4a"}.icon-sort-numberic-desc:before{content:"\ea4b"}.icon-sort-amount-asc:before{content:"\ea4c"}.icon-sort-amount-desc:before{content:"\ea4d"}.icon-checkbox-checked:before{content:"\ea52"}.icon-checkbox-unchecked:before{content:"\ea53"}.icon-radio-checked:before{content:"\ea54"}.icon-radio-checked2:before{content:"\ea55"}.icon-radio-unchecked:before{content:"\ea56"}.icon-make-group:before{content:"\ea58"}.icon-scissors:before{content:"\ea5a"}.icon-filter:before{content:"\ea5b"}.icon-table2:before{content:"\ea71"}.icon-insert-template:before{content:"\ea72"}.icon-embed:before{content:"\ea7f"}.icon-embed2:before{content:"\ea80"}.icon-terminal:before{content:"\ea81"}.icon-share2:before{content:"\ea82"}.icon-google:before{content:"\ea88"}.icon-facebook:before{content:"\ea90"}.icon-youtube:before{content:"\ea9d"}.icon-github:before{content:"\eab0"}.icon-pinterest:before{content:"\ead1"}.icon-paypal:before{content:"\ead8"}.icon-file-pdf:before{content:"\eadf"}.icon-file-word:before{content:"\eae1"}.icon-file-excel:before{content:"\eae2"}.icon-libreoffice:before{content:"\eae3"}.icon-html-five:before{content:"\eae4"}
.ico{font-size:24px}.ico-sm{font-size:16px}

/* (D) WIDGETS & CORE LAYOUT */
#cb-loading{transition:opacity .3s}.cb-hide{opacity:0;visibility:hidden;height:0}.cb-pg-hide{display:none}
#cb-loading{width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:9999;background:rgba(15,23,42,.75);backdrop-filter:blur(4px)}#cb-loading .spinner-border{width:70px;height:70px}
.head{background:#e2e8f0}.zebra .d-flex{background:#fff;margin-bottom:10px;border-radius:10px}.zebra .d-flex:nth-child(odd){background-color:#f8fafc}.pagination{border:1px solid #d0e8ff;background:#f0f8ff}

/* (E) ADMIN & NAVIGATION STYLING */
#cb-body,body{min-height:100vh}
#cb-toggle{display:none}

#cb-side {
  width: 230px;
  flex-shrink: 0;
  background: #0f172a !important;
  border-right: 1px solid rgba(255,255,255,0.08);
  box-shadow: 4px 0 20px rgba(0,0,0,0.05);
}
#cb-side a {
  color: #94a3b8 !important;
  font-weight: 500;
  border-radius: 10px;
  padding: 10px 14px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-size: 0.92rem;
}
#cb-side a:hover, #cb-side a.active {
  color: #ffffff !important;
  background: rgba(99, 102, 241, 0.18);
  transform: translateX(3px);
}
#cb-side a:hover i, #cb-side a.active i {
  color: #818cf8 !important;
}
#cb-side .nav-section-title {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 18px 14px 6px 14px;
}

/* Sidebar Backdrop for Mobile */
#cb-side-backdrop {
  display: none !important;
}

/* MOBILE MEDIA QUERY ENHANCEMENTS */
@media screen and (max-width: 768px) {
  #cb-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  #cb-side {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: 270px !important;
    z-index: 1050 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 10px 0 30px rgba(0,0,0,0.5) !important;
  }
  #cb-side.show {
    display: flex !important;
  }
  #cb-side-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 1040 !important;
  }
  #cb-side-backdrop.show {
    display: block !important;
  }
  
  .dash-hero {
    padding: 20px !important;
    border-radius: 14px !important;
  }
  
  .dash-hero h2 {
    font-size: 1.35rem !important;
  }
  
  .dash-card {
    border-radius: 14px !important;
  }

  .kpi-card {
    padding: 14px !important;
  }
  
  .kpi-value {
    font-size: 1.55rem !important;
  }

  .kpi-icon-wrapper {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
  }

  .dash-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100%;
  }

  .btn-dash-action {
    justify-content: center;
    padding: 10px 10px !important;
    font-size: 0.82rem !important;
  }
}

/* (F) 100X MODERN DASHBOARD COMPONENTS */

/* Modern Card Structure */
.dash-card {
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
@media screen and (min-width: 992px) {
  .dash-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
  }
}

/* Hero Header Banner */
.dash-hero {
  background: var(--dark-hero-gradient);
  border-radius: 20px;
  color: #ffffff;
  padding: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(15, 23, 42, 0.15);
}
.dash-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

/* KPI Cards */
.kpi-card {
  padding: 24px;
  position: relative;
}
.kpi-icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}
.kpi-icon-indigo { background: var(--primary-gradient); }
.kpi-icon-success { background: var(--success-gradient); }
.kpi-icon-warning { background: var(--warning-gradient); }
.kpi-icon-danger { background: var(--danger-gradient); }
.kpi-icon-purple { background: var(--purple-gradient); }

.kpi-value {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--text-dark);
}
.kpi-label {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Glowing Badges */
.badge-glow-danger {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}
.badge-glow-success {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}
.badge-glow-warning {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}
.badge-glow-info {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.25);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}

/* Item Progress Bar */
.stock-progress-track {
  height: 8px;
  background: #f1f5f9;
  border-radius: 6px;
  overflow: hidden;
}
.stock-progress-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.6s ease;
}

/* Action Quick Buttons */
.btn-dash-action {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.88rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btn-dash-action:hover {
  background: #ffffff;
  color: #0f172a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

/* List Items Hover Styling */
.item-watch-row {
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: #ffffff;
  padding: 14px 18px;
  margin-bottom: 10px;
  transition: all 0.2s ease;
  cursor: pointer;
}
.item-watch-row:hover {
  border-color: var(--primary-500);
  background: #f8fafc;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* Activity Feed */
.activity-item {
  position: relative;
  padding-left: 28px;
  padding-bottom: 16px;
}
.activity-item::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 24px;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}
.activity-item:last-child::before {
  display: none;
}
.activity-dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 2px var(--border-color);
}

/* Touch Friendly Table Container */
.table-responsive-touch {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}