/* ============================================================
   ESmont Dashboard — Base Styles
   Reset, typography, body, global utilities, keyframes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

/* --- Reset --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

input {
    box-sizing: border-box;
}

/* --- Body --- */
body {
    font-family: "Source Sans 3", sans-serif;
    background: var(--background);
    color: var(--foreground);
    margin: 0;
    padding: 0;
}

/* --- Focus styles (accessibility) --- */
button:focus-visible,
.icon-btn:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(26,115,232,.35);
    outline-offset: 2px;
}

/* --- Touch targets --- */
button, .icon-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ---- Utility classes ---- */

.flex           { display: flex; }
.flex-wrap      { flex-wrap: wrap; }
.items-center   { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

.gap-1  { gap:  8px; }
.gap-2  { gap: 16px; }
.gap-3  { gap: 24px; }

.mt-1   { margin-top:  8px; }
.mt-2   { margin-top: 16px; }
.mt-3   { margin-top: 24px; }
.mt-4   { margin-top: 32px; }
.mb-1   { margin-bottom:  8px; }
.mb-2   { margin-bottom: 16px; }
.mb-3   { margin-bottom: 24px; }
.mb-4   { margin-bottom: 32px; }
.p-1    { padding:  8px; }
.p-2    { padding: 16px; }
.p-3    { padding: 24px; }
.p-4    { padding: 32px; }

.hidden         { display: none !important; }
.mobile-only    { display: none; }
.desktop-only   { display: block !important; }

.muted {
    opacity: .8;
    font-size: 14px;
}

/* Gradient text used for hero headings and card order numbers */
.big {
    font-size: 20px;
    background: linear-gradient(90deg, var(--status-in-progress) 0%, var(--status-done) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    font-weight: 900;
}

.text-primary {
    font-weight: bold;
    color: #99CC33;
}

/* --- Loading spinner --- */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- Shared keyframes (referenced by components) --- */
@keyframes shimmer {
    0%   { background-position: -450px 0; }
    100% { background-position:  450px 0; }
}

@keyframes badge-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .75; transform: scale(1.15); }
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(.9) translateY(-20px); }
    to   { opacity: 1; transform: scale(1)  translateY(0); }
}