.nav-link {
    font-size: 0.875rem;
    color: #4B5563;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.15s;
}
.nav-link:hover,
.nav-link.active {
    background-color: #F3F4F6;
    color: #111827;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s;
}
.btn:hover { opacity: 0.85; }
.btn-primary  { background-color: #2563EB; color: #fff; }
.btn-danger   { background-color: #DC2626; color: #fff; }
.btn-secondary{ background-color: #E5E7EB; color: #374151; }
.form-input {
    width: 100%;
    min-height: 2.75rem;
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
}
.form-input:focus { border-color: #2563EB; }
.card {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
    padding: 1.5rem;
    overflow-wrap: break-word;
    word-break: break-word;
}
.badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}
.badge-green  { background:#D1FAE5; color:#065F46; }
.badge-yellow { background:#FEF3C7; color:#92400E; }
.badge-red    { background:#FEE2E2; color:#991B1B; }
.badge-blue   { background:#DBEAFE; color:#1E40AF; }
.badge-gray   { background:#F3F4F6; color:#374151; }

img {
    max-width: 100%;
    height: auto;
}
.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 639px) {
    .mobile-table thead { display: none; }
    .mobile-table, .mobile-table tbody { display: block; }
    .mobile-table tr {
        display: block;
        background: #fff;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.07);
        margin-bottom: 0.75rem;
        overflow: hidden;
    }
    .mobile-table td {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
        border-bottom: 1px solid #F3F4F6 !important;
        min-height: 0;
    }
    .mobile-table td:last-child { border-bottom: none !important; }
    .mobile-table td[data-label]::before {
        content: attr(data-label);
        color: #6B7280;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
        min-width: 5.5rem;
        padding-top: 0.15rem;
        flex-shrink: 0;
    }
    .mobile-table td:empty { display: none; }
    .mobile-table { min-width: 0 !important; width: 100%; }
    .mobile-table-wrap {
        overflow: visible !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        transition-delay: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (prefers-color-scheme: dark) {
    html { color-scheme: dark; }
    body { background-color: #111827; }

    /* Custom component classes */
    .card { background: #1f2937; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
    .form-input { background-color: #374151; border-color: #4b5563; color: #f3f4f6; }
    .form-input::placeholder { color: #6b7280; }
    .form-input:focus { border-color: #3b82f6; }
    .btn-secondary { background-color: #374151; color: #d1d5db; }
    .nav-link { color: #d1d5db; }
    .nav-link:hover, .nav-link.active { background-color: #374151; color: #f9fafb; }
    .badge-gray { background: #374151; color: #d1d5db; }

    /* Background overrides */
    .bg-white  { background-color: #1f2937; }
    .bg-gray-50  { background-color: #111827; }
    .bg-gray-100 { background-color: #0f172a; }

    /* Text overrides */
    .text-gray-800 { color: #f3f4f6; }
    .text-gray-700 { color: #e5e7eb; }
    .text-gray-600 { color: #d1d5db; }
    .text-gray-500 { color: #9ca3af; }
    .text-gray-400 { color: #6b7280; }

    /* Border overrides */
    .border-gray-200 { border-color: #374151; }
    .border-gray-100 { border-color: #1f2937; }
    .border-gray-300 { border-color: #4b5563; }

    /* Divide overrides */
    .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #374151; }
    .divide-gray-50  > :not([hidden]) ~ :not([hidden]) { border-color: #1f2937; }

    /* Hover states */
    .hover\:bg-gray-50:hover  { background-color: #263141; }
    .hover\:bg-gray-100:hover { background-color: #374151; }

    /* Alert/banner backgrounds */
    .bg-red-50   { background-color: #450a0a; }
    .bg-green-50 { background-color: #052e16; }
    .bg-blue-50  { background-color: #0c1a3e; }
    .bg-amber-50 { background-color: #2d1a00; }
    .border-red-200   { border-color: #7f1d1d; }
    .border-green-200 { border-color: #14532d; }
    .text-red-700   { color: #fca5a5; }
    .text-green-700 { color: #86efac; }

    /* Dev mode switch-user badge */
    .bg-yellow-100 { background-color: #3d2a00; }
    .text-yellow-700 { color: #fbbf24; }
    .hover\:bg-yellow-200:hover { background-color: #4d3500; }
}