/* Inventory Manager - Custom styles */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Toast notifications */
.toast-msg {
    animation: toastIn 0.35s ease-out;
}
.toast-msg.toast-out {
    animation: toastOut 0.3s ease-in forwards;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(20px) scale(0.95); }
}

/* Print styles */
@media print {
    nav, footer, .no-print { display: none !important; }
    main { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
}

/* Prevent mobile zoom on input focus */
@media (max-width: 767px) {
    input, select, textarea, button { font-size: 16px !important; }
}

/* Dark mode transitions */
html { transition: background-color 0.2s ease, color 0.2s ease; }

/* Mobile nav animation */
.mobile-nav { max-height: 0; overflow: hidden; transition: max-height 0.2s ease; }
.mobile-nav.open { max-height: 200px; }

/* Collapsible sub-categories */
.cat-children { max-height: 0; overflow: hidden; transition: max-height 0.35s ease-out, opacity 0.25s ease; opacity: 0; }
.cat-children.open { max-height: 2000px; opacity: 1; }
.cat-toggle-icon { transition: transform 0.25s ease; }
.cat-toggle-icon.open { transform: rotate(90deg); }

/* Desktop table child row animation */
.cat-child-row td { transition: padding 0.25s ease, max-height 0.25s ease, opacity 0.25s ease; overflow: hidden; }
.cat-child-row td > div { transition: max-height 0.25s ease, opacity 0.25s ease; overflow: hidden; }
.cat-child-row.collapsed { line-height: 0; border-color: transparent !important; }
.cat-child-row.collapsed td { padding-top: 0 !important; padding-bottom: 0 !important; border-color: transparent !important; line-height: 0; }
.cat-child-row.collapsed td > div { max-height: 0; opacity: 0; }
.cat-child-row td > div { max-height: 100px; opacity: 1; }