/* Custom styles for Brett Acoustics Wholesale Ordering System */

/* Brett Acoustics custom font */
@font-face {
    font-family: 'BrettAcoustics';
    src: url('../fonts/BrettAcoutics-Regular.otf') format('opentype'),
         url('../fonts/BrettAcoutics-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Ensure body takes full height */
html, body {
    height: 100%;
}

/* Custom focus states */
input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Table hover effects */
tbody tr:hover {
    background-color: rgba(249, 250, 251, 0.5);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    /* Site chrome (nav, footer) has no .no-print class of its own since it
       lives in base.html outside every page's content block -- hide it here
       once, globally, rather than per-template. Printing a contract/estimate
       preview should produce just the document, not the app around it. */
    nav[aria-label="Main navigation"],
    footer {
        display: none !important;
    }
}

/* Loading spinner */
.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #4F46E5;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Rendered Terms & Conditions / contract markdown.
   Tailwind is loaded via the Play CDN with NO typography plugin, so the
   `prose` classes render as no-ops and Preflight strips heading sizes and
   list bullets -- leaving T&C content as an undifferentiated wall of text.
   This scoped class restores legal-document typography for every place that
   renders sanitized T&C HTML (admin viewer, editor preview, and the
   customer/public acceptance pages). Self-contained -- no plugin needed. */
.rendered-terms {
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.65;
}
.rendered-terms h1,
.rendered-terms h2,
.rendered-terms h3,
.rendered-terms h4 {
    color: #111827;
    font-weight: 700;
    line-height: 1.3;
    margin: 1.4em 0 0.5em;
}
.rendered-terms h1 { font-size: 1.5rem; }
.rendered-terms h2 { font-size: 1.25rem; }
.rendered-terms h3 { font-size: 1.1rem; }
.rendered-terms h4 { font-size: 1rem; }
.rendered-terms > :first-child { margin-top: 0; }
.rendered-terms p { margin: 0 0 0.9em; }
.rendered-terms ul,
.rendered-terms ol { margin: 0 0 0.9em; padding-left: 1.6em; }
.rendered-terms ul { list-style: disc; }
.rendered-terms ol { list-style: decimal; }
.rendered-terms li { margin: 0.25em 0; }
.rendered-terms li > ul,
.rendered-terms li > ol { margin: 0.25em 0; }
.rendered-terms strong { font-weight: 600; color: #111827; }
.rendered-terms em { font-style: italic; }
.rendered-terms a { color: #4F46E5; text-decoration: underline; }
.rendered-terms blockquote {
    border-left: 3px solid #d1d5db;
    padding-left: 1em;
    margin: 0 0 0.9em;
    color: #6b7280;
}
.rendered-terms hr { border: 0; border-top: 1px solid #e5e7eb; margin: 1.5em 0; }
.rendered-terms table { border-collapse: collapse; margin: 0 0 0.9em; width: 100%; }
.rendered-terms th,
.rendered-terms td { border: 1px solid #e5e7eb; padding: 0.4em 0.6em; text-align: left; }
.rendered-terms th { background: #f9fafb; font-weight: 600; }
.rendered-terms code {
    background: #f3f4f6; padding: 0.1em 0.35em; border-radius: 3px;
    font-size: 0.9em;
}
/* Placeholder tokens left unsubstituted in a preview (e.g. an unknown
   {{token}}) stay visible as literal text -- that's intended so typos show. */

/* Brand accent color. --brand / --brand-dark are set per-tenant in base.html
   from branding.primary_color (Brett's maroon by default). Use these instead of
   hardcoded hex so white-label instances re-color with their own branding. */
.text-brand { color: var(--brand); }
.bg-brand { background-color: var(--brand); }
.bg-brand:hover { background-color: var(--brand-dark); }