/* =============================================
   Vitrixon — Custom Global Styles
   ============================================= */

/* Prevent flash of unstyled content during theme load */
html { transition: background-color 0.15s ease, color 0.15s ease; }

/* ---- Tailwind primary color via CSS variable ---- */
.text-primary   { color: var(--primary) !important; }
.bg-primary     { background-color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }
.ring-primary   { --tw-ring-color: var(--primary) !important; }
.focus\:border-primary:focus { border-color: var(--primary) !important; }
.focus\:ring-primary:focus   { --tw-ring-color: var(--primary) !important; }
.hover\:text-primary:hover   { color: var(--primary) !important; }
.from-primary   { --tw-gradient-from: var(--primary) !important; }

/* ---- Dark mode: Input backgrounds ---- */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
.dark textarea,
.dark select {
    background-color: rgb(17 24 39) !important; /* gray-900 */
    color: rgb(243 244 246) !important;          /* gray-100 */
}
.dark input::placeholder,
.dark textarea::placeholder { color: rgb(107 114 128); }

/* ---- Dark mode: card / panel backgrounds ---- */
.dark .bg-white { background-color: rgb(17 24 39) !important; }

/* ---- Quill editor dark mode ---- */
.dark .ql-toolbar { background: rgb(31 41 55); border-color: rgb(55 65 81) !important; }
.dark .ql-container { background: rgb(17 24 39); border-color: rgb(55 65 81) !important; color: rgb(229 231 235); }
.dark .ql-editor.ql-blank::before { color: rgb(107 114 128); }
.dark .ql-stroke { stroke: rgb(156 163 175) !important; }
.dark .ql-fill   { fill: rgb(156 163 175) !important; }
.dark .ql-picker-label { color: rgb(156 163 175) !important; }

/* ---- Scrollbar (frontend) ---- */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgb(209 213 219); border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: rgb(75 85 99); }

/* ---- File input button ---- */
input[type="file"]::file-selector-button {
    background: var(--primary);
    color: white;
    padding: 0.4rem 0.9rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    margin-right: 0.75rem;
    transition: opacity 0.15s;
}
input[type="file"]::file-selector-button:hover { opacity: 0.85; }

/* ---- Toast flash animation ---- */
#flash-alert, #flash-alert-error, #flash-alert-warn {
    animation: slideDown 0.3s ease forwards;
}
@keyframes slideDown {
    from { opacity: 0; transform: translate(-50%, -16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---- Mobile bottom nav safe area ---- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .safe-area-inset-bottom { padding-bottom: env(safe-area-inset-bottom); }
}