/* ============================================================
   Toolbox — Shared Styles
   Common styles used across all sub-apps
   ============================================================ */

/* Base */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #d1d5db; }
.dark ::-webkit-scrollbar-thumb { background: #333; }
.dark ::-webkit-scrollbar-thumb:hover { background: #444; }

/* ============================================================
   Animations
   ============================================================ */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes modal-slide-up {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.animate-enter    { animation: fade-in-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-fade-in  { animation: fade-in 0.2s ease both; }
.animate-modal    { animation: modal-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.delay-50  { animation-delay: 0.05s; }
.delay-100 { animation-delay: 0.1s; }
.delay-150 { animation-delay: 0.15s; }
.delay-200 { animation-delay: 0.2s; }

/* ============================================================
   Custom Inputs (purple focus accent)
   ============================================================ */
.custom-input {
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.custom-input:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
}
.dark .custom-input:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}

/* ============================================================
   Save Status Indicator
   ============================================================ */
.save-status-saved   { color: #10b981; }
.save-status-saving  { color: #f59e0b; }
.save-status-unsaved { color: #9ca3af; }
.save-status-error   { color: #ef4444; }

/* ============================================================
   Utility
   ============================================================ */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}