/* Base styles */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
}

main {
    flex: 1;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

.small, small {
    font-size: 0.875rem;
}

/* Links */
a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* Tables */
.table th {
    font-weight: 600;
    white-space: nowrap;
}

.table td {
    vertical-align: middle;
}

.table-financial th,
.table-financial td {
    text-align: right;
}

.table-financial th:first-child,
.table-financial td:first-child {
    text-align: left;
}

/* Forms */
.form-label {
    font-weight: 500;
}

/* Focus styles are handled in themes.css */

/* Buttons */
.btn {
    font-weight: 500;
}

.btn-icon {
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

/* Cards */
.card {
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-header {
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

/* Badges */
.badge-positive {
    background-color: var(--positive-color);
}

.badge-negative {
    background-color: var(--negative-color);
}

/* Utility classes */
.cursor-pointer {
    cursor: pointer;
}

.min-w-0 {
    min-width: 0;
}

.w-fit {
    width: fit-content;
}

/* Overflow utilities */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Spacing utilities */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }

/* Z-index utilities */
.z-1 { z-index: 1; }
.z-10 { z-index: 10; }
.z-100 { z-index: 100; }

/* Responsive utilities */
@media (max-width: 768px) {
    .table-responsive-stack th,
    .table-responsive-stack td {
        display: block;
        text-align: left !important;
    }

    .table-responsive-stack th {
        border-bottom: none;
        padding-bottom: 0;
    }

    .table-responsive-stack td {
        border-top: none;
        padding-top: 0.25rem;
    }

    .table-responsive-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        display: block;
        margin-bottom: 0.25rem;
        color: var(--text-secondary);
    }
}