/*
 * Client Portal Dashboard Styles
 *
 * Utility classes using cp-tw- prefix (Tailwind-compatible naming, no preflight).
 * These supplement Tailwind classes generated via the cp-tw- prefix configuration.
 */

/* Base resets scoped to the dashboard container */
.cp-tw-max-w-6xl {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.5;
    color: #1f2937;
}

.cp-tw-max-w-6xl *,
.cp-tw-max-w-6xl *::before,
.cp-tw-max-w-6xl *::after {
    box-sizing: border-box;
}

/* Layout */
.cp-tw-max-w-6xl  { max-width: 72rem; }
.cp-tw-mx-auto    { margin-left: auto; margin-right: auto; }
.cp-tw-py-6       { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.cp-tw-px-4       { padding-left: 1rem; padding-right: 1rem; }
.cp-tw-p-3        { padding: 0.75rem; }
.cp-tw-p-4        { padding: 1rem; }
.cp-tw-p-5        { padding: 1.25rem; }
.cp-tw-p-6        { padding: 1.5rem; }
.cp-tw-px-2       { padding-left: 0.5rem; padding-right: 0.5rem; }
.cp-tw-py-1       { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.cp-tw-px-3       { padding-left: 0.75rem; padding-right: 0.75rem; }
.cp-tw-py-2       { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.cp-tw-px-4       { padding-left: 1rem; padding-right: 1rem; }
.cp-tw-mb-1       { margin-bottom: 0.25rem; }
.cp-tw-mb-2       { margin-bottom: 0.5rem; }
.cp-tw-mb-3       { margin-bottom: 0.75rem; }
.cp-tw-mb-4       { margin-bottom: 1rem; }
.cp-tw-mb-5       { margin-bottom: 1.25rem; }
.cp-tw-mb-6       { margin-bottom: 1.5rem; }
.cp-tw-mt-1       { margin-top: 0.25rem; }
.cp-tw-mt-2       { margin-top: 0.5rem; }
.cp-tw-mt-3       { margin-top: 0.75rem; }
.cp-tw-mt-4       { margin-top: 1rem; }
.cp-tw-pr-3       { padding-right: 0.75rem; }

/* Flex */
.cp-tw-flex        { display: flex; }
.cp-tw-flex-wrap   { flex-wrap: wrap; }
.cp-tw-items-center { align-items: center; }
.cp-tw-items-start  { align-items: flex-start; }
.cp-tw-justify-between { justify-content: space-between; }
.cp-tw-gap-2       { gap: 0.5rem; }
.cp-tw-gap-3       { gap: 0.75rem; }
.cp-tw-gap-4       { gap: 1rem; }
.cp-tw-gap-5       { gap: 1.25rem; }
.cp-tw-gap-6       { gap: 1.5rem; }

/* Grid */
.cp-tw-grid              { display: grid; }
.cp-tw-grid-cols-1       { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px) {
    .md\:cp-tw-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:cp-tw-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Sizing */
.cp-tw-w-full       { width: 100%; }
.cp-tw-max-w-sm     { max-width: 24rem; }
.cp-tw-max-w-md     { max-width: 28rem; }

/* Typography */
.cp-tw-text-2xl      { font-size: 1.5rem; line-height: 2rem; }
.cp-tw-text-lg       { font-size: 1.125rem; line-height: 1.75rem; }
.cp-tw-text-md       { font-size: 1rem; line-height: 1.5rem; }
.cp-tw-text-sm       { font-size: 0.875rem; line-height: 1.25rem; }
.cp-tw-text-xs       { font-size: 0.75rem; line-height: 1rem; }
.cp-tw-font-bold     { font-weight: 700; }
.cp-tw-font-semibold { font-weight: 600; }
.cp-tw-font-medium   { font-weight: 500; }
.cp-tw-font-mono     { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.cp-tw-text-left     { text-align: left; }
.cp-tw-break-all     { word-break: break-all; }

/* Colors */
.cp-tw-text-white     { color: #ffffff; }
.cp-tw-text-gray-400  { color: #9ca3af; }
.cp-tw-text-gray-500  { color: #6b7280; }
.cp-tw-text-gray-700  { color: #374151; }
.cp-tw-text-blue-600  { color: #2563eb; }
.cp-tw-text-green-600 { color: #16a34a; }
.cp-tw-text-yellow-600{ color: #ca8a04; }
.cp-tw-text-red-500   { color: #ef4444; }
.cp-tw-text-red-600   { color: #dc2626; }

.cp-tw-bg-white       { background-color: #ffffff; }
.cp-tw-bg-gray-50     { background-color: #f9fafb; }
.cp-tw-bg-gray-100    { background-color: #f3f4f6; }
.cp-tw-bg-blue-600    { background-color: #2563eb; }
.cp-tw-bg-green-600   { background-color: #16a34a; }

/* Borders */
.cp-tw-border          { border-width: 1px; border-style: solid; }
.cp-tw-border-b        { border-bottom-width: 1px; border-bottom-style: solid; }
.cp-tw-border-b-2      { border-bottom-width: 2px; border-bottom-style: solid; }
.cp-tw-border-gray-100 { border-color: #f3f4f6; }
.cp-tw-border-gray-200 { border-color: #e5e7eb; }
.cp-tw-border-gray-300 { border-color: #d1d5db; }
.cp-tw-border-blue-600 { border-color: #2563eb; }
.cp-tw-rounded         { border-radius: 0.25rem; }

/* Display */
.cp-tw-block  { display: block; }
.cp-tw-hidden { display: none; }

/* Interactions */
.hover\:cp-tw-bg-blue-700:hover  { background-color: #1d4ed8; }
.hover\:cp-tw-bg-green-700:hover { background-color: #15803d; }
.hover\:cp-tw-bg-gray-200:hover  { background-color: #e5e7eb; }
.hover\:cp-tw-text-gray-700:hover { color: #374151; }
.hover\:cp-tw-underline:hover     { text-decoration: underline; }

/* Forms */
.cp-tw-max-w-6xl select,
.cp-tw-max-w-6xl input[type="text"],
.cp-tw-max-w-6xl textarea {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.cp-tw-max-w-6xl select:focus,
.cp-tw-max-w-6xl input:focus,
.cp-tw-max-w-6xl textarea:focus {
    outline: 2px solid #2563eb;
    outline-offset: -1px;
    border-color: #2563eb;
}

/* Links */
.cp-tw-link {
    text-decoration: none;
}
/* Button base */
.cp-tw-max-w-6xl button {
    cursor: pointer;
    border: none;
}

/* Table */
.cp-tw-max-w-6xl table {
    border-collapse: collapse;
}

/* Code blocks */
.cp-tw-max-w-6xl code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
}

/* Spinner (used by JS) */
.cp-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #d1d5db;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: cp-spin 0.6s linear infinite;
}

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