/* ============================================================
   Developia — app.css
   Complements Tailwind Play CDN. Keep minimal.
   ============================================================ */

/* Prevent FOUC with Alpine.js */
[x-cloak] { display: none !important; }

/* Primary colour token — overridden per-merchant in public layout */
:root {
    --color-primary: #6366f1;
}

/* Utility classes driven by the CSS variable */
.text-primary   { color: var(--color-primary); }
.bg-primary     { background-color: var(--color-primary); }
.border-primary { border-color: var(--color-primary); }
.ring-primary   { --tw-ring-color: var(--color-primary); }

.bg-primary\/5  { background-color: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.bg-primary\/10 { background-color: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.border-primary\/20 { border-color: color-mix(in srgb, var(--color-primary) 20%, transparent); }
.ring-primary\/30   { --tw-ring-color: color-mix(in srgb, var(--color-primary) 30%, transparent); }

/* Button */
.btn-primary {
    display: inline-block;
    background-color: var(--color-primary);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.15s;
    text-decoration: none;
}
.btn-primary:hover { opacity: 0.88; }
.btn-primary:active { opacity: 0.75; }

/* Focus visible ring */
.btn-primary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Smooth transitions for sidebar active states */
nav a { transition: background-color 0.12s, color 0.12s; }

/* FullCalendar overrides */
.fc .fc-button-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
.fc .fc-button-primary:hover {
    opacity: 0.85;
}
.fc .fc-daygrid-event {
    border-radius: 4px;
    font-size: 0.75rem;
}

/* Truncate multi-line */
.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;
}

/* Form focus ring helper */
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Scrollbar slim */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }