/*
 * dashboard_utilities.css
 * Utility classes used in dashboard.html that are NOT available via Tailwind CDN
 * (dashboard loads only dashboard_shared_styles.css, no Tailwind).
 * These mirror the Tailwind equivalents precisely.
 */

/* ── Colors — Background ─────────────────────────────────────────────────── */
.bg-white        { background-color: #ffffff; }
.bg-gray-50      { background-color: #f9fafb; }
.bg-gray-100     { background-color: #f3f4f6; }
.bg-gray-200     { background-color: #e5e7eb; }
.bg-gray-600     { background-color: #4b5563; }
.bg-blue-600     { background-color: #2563eb; }
.bg-yellow-50    { background-color: #fefce8; }
.bg-indigo-600   { background-color: #4f46e5; }

/* bg-opacity-50: used together with bg-gray-600 on the modal backdrop */
.bg-gray-600.bg-opacity-50 { background-color: rgba(75, 85, 99, 0.5); }

/* ── Colors — Text ───────────────────────────────────────────────────────── */
.text-white            { color: #ffffff; }
.text-primary-text-color { color: var(--primary-text-color); }
.text-gray-400   { color: #9ca3af; }
.text-gray-500   { color: #6b7280; }
.text-gray-600   { color: #4b5563; }
.text-gray-700   { color: #374151; }
.text-gray-900   { color: #111827; }
.text-yellow-800 { color: #92400e; }
.text-green-600  { color: #16a34a; }
.text-accent-color { color: var(--accent-color); }
.text-md         { font-size: 1rem; }

/* ── Colors — Border ─────────────────────────────────────────────────────── */
.border-gray-200    { border-color: #e5e7eb; }
.border-gray-300    { border-color: #d1d5db; }
.border-yellow-200  { border-color: #fde68a; }
.border-border-color { border-color: var(--border-color); }

/* ── Typography ──────────────────────────────────────────────────────────── */
.font-normal      { font-weight: 400; }
.uppercase        { text-transform: uppercase; }
.tracking-wider   { letter-spacing: 0.05em; }
.whitespace-nowrap { white-space: nowrap; }
.font-mono        { font-family: var(--font-monospace); }

/* ── Spacing — Padding ───────────────────────────────────────────────────── */
.p-0  { padding: 0; }
.p-2  { padding: 0.5rem; }
.p-3  { padding: 0.75rem; }
.p-4  { padding: 1rem; }
.p-6  { padding: 1.5rem; }
.px-4 { padding-left: 1rem;   padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem;    padding-bottom: 1rem; }
.py-8 { padding-top: 2rem;    padding-bottom: 2rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }

/* ── Spacing — Margin ────────────────────────────────────────────────────── */
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.ml-3 { margin-left: 0.75rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }

/* Important override (Tailwind's ! prefix) */
.\!mb-0 { margin-bottom: 0 !important; }

/* ── Spacing — Gap & Children ────────────────────────────────────────────── */
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.fixed    { position: fixed; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
.h-full   { height: 100%; }
.h-5      { height: 1.25rem; }
.h-6      { height: 1.5rem; }
.w-5      { width: 1.25rem; }
.w-11     { width: 2.75rem; }
.max-w-3xl  { max-width: 48rem; }
.justify-center { justify-content: center; }
.overflow-y-auto { overflow-y: auto; }
.cursor-pointer    { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* Visually hidden (screen-reader only) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Borders ─────────────────────────────────────────────────────────────── */
.border   { border-width: 1px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.rounded  { border-radius: 0.25rem; }
.rounded-lg  { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),
                0 4px 6px -2px rgba(0,0,0,0.05);
}

/* divide-y: top border on every child except the first */
.divide-y > * + *            { border-top-width: 1px; border-top-style: solid; }
.divide-gray-200 > * + *     { border-top-color: #e5e7eb; }
.divide-border-color > * + * { border-top-color: var(--border-color); }

/* ── Hover states ────────────────────────────────────────────────────────── */
.hover\:bg-blue-700:hover  { background-color: #1d4ed8; }
.hover\:bg-gray-700:hover  { background-color: #374151; }
.hover\:text-red-700:hover { color: #b91c1c; }
.text-left { text-align: left; }

/* ── Billing toggle (replaces peer / peer-checked Tailwind JIT classes) ──── */
/* Track thumb */
#billing-toggle + div::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem;
    height: 1.25rem;
    background: #ffffff;
    border-radius: 9999px;
    transition: transform 150ms ease-in-out;
}
/* Checked state: highlight track + slide thumb */
#billing-toggle:checked + div {
    background-color: #4f46e5;
}
#billing-toggle:checked + div::after {
    transform: translateX(1.25rem);
}