/* EV Charging System – Brand + Custom Classes */
/* Relies on Tailwind CDN loaded via CDN script in layouts */

:root {
  --brand-50:  #eff2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d7fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #465FFF;
  --brand-600: #3d50e0;
  --brand-700: #3344c5;
  --brand-800: #2a37a0;
  --brand-900: #1e2778;
}

.form-input {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: #111827;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
  -webkit-appearance: none;
}
.form-input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(70,95,255,.15); }
.form-input::placeholder { color: #9ca3af; }
select.form-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 1rem; padding-right: 2.5rem; }
.dark .form-input { color: #f9fafb; background: #1f2937; border-color: #374151; }
.dark .form-input::placeholder { color: #6b7280; }
.dark select.form-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); }

.menu-item { display: flex; align-items: center; gap: .75rem; border-radius: .75rem; padding: .625rem .875rem; font-size: .875rem; font-weight: 500; transition: all .15s; text-decoration: none; white-space: nowrap; }
.menu-item-active { background-color: var(--brand-50); color: var(--brand-700); }
.menu-item-inactive { color: #6b7280; }
.menu-item-inactive:hover { background-color: #f9fafb; color: #111827; }
.dark .menu-item-active { background-color: rgba(70,95,255,.12); color: var(--brand-400); }
.dark .menu-item-inactive { color: #9ca3af; }
.dark .menu-item-inactive:hover { background-color: rgba(255,255,255,.05); color: #f9fafb; }
.menu-item-icon-active { fill: var(--brand-500); flex-shrink: 0; width: 1.25rem; height: 1.25rem; }
.menu-item-icon-inactive { fill: #9ca3af; flex-shrink: 0; width: 1.25rem; height: 1.25rem; transition: fill .15s; }
.menu-item-inactive:hover .menu-item-icon-inactive { fill: #4b5563; }
.dark .menu-item-icon-active { fill: var(--brand-400); }
.dark .menu-item-inactive:hover .menu-item-icon-inactive { fill: #d1d5db; }
.menu-item-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.sidebar, .no-scrollbar { scrollbar-width: none; }
.sidebar::-webkit-scrollbar, .no-scrollbar::-webkit-scrollbar { display: none; }

[x-cloak] { display: none !important; }
.z-9998 { z-index: 9998; }
.z-9999 { z-index: 9999; }
aside.sidebar.fixed.left-0.top-0.z-\[9999\].flex.h-screen.w-\[290px\].flex-col.overflow-y-hidden.border-r.border-gray-200.bg-white.px-5.dark\:border-gray-800.dark\:bg-gray-900.lg\:static.lg\:translate-x-0.transition-all.duration-300.-translate-x-full {
    background: #26343f;
}
.bg-brand-500 {
    --tw-bg-opacity: 1;
/*    background-color: rgb(11 86 41) !important;*/
    background-color: rgb(38 52 63) !important;
}
.focus\:ring-brand-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(11 86 41) !important;
}
.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(19 39 17) !important;
}
*, ::after, ::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5ebe5 !important;
}
.menu-item-active {
    background-color: #f0ffef !important;
    color: #26343f !important;
}
.menu-item-icon-active {
    fill: #26343f !important;
}