/* base.css - global styles extracted from original style.css */
* {
    box-sizing: border-box;
    font-family: Inter, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial
}

body {
    margin: 0;
    color: #111;
    background: #f7fafc
}

.container {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px
}

/* Global header/nav */
header {
    background: linear-gradient(90deg, #0f172a 0%, #071020 100%);
    color: #fff;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

header h1 {
    margin: 0;
    font-size: 18px
}

nav {
    margin-left: 16px
}

nav button {
    margin-right: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: #e6eef6;
    border: 1px solid rgba(255, 255, 255, 0.06)
}

nav button.active {
    background: #06b6d4;
    color: #062024
}

main {
    padding: 20px;
    max-width: 1100px;
    margin: 0 auto
}

.controls {
    margin-bottom: 12px
}

input {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    min-width: 120px
}

button {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: linear-gradient(180deg, #fff, #f8fafc);
    cursor: pointer
}

/* Table, cards, pager, footer */
.table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden
}

.table th,
.table td {
    padding: 8px;
    border-bottom: 1px solid #f1f5f9;
    text-align: left
}

.table th {
    background: #f8fafc
}

.card {
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px
}

.pager {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    margin-bottom: 18px
}

.footer {
    padding: 12px;
    text-align: center;
    color: #475569
}

/* utilities */
.view.hidden {
    display: none
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 4px solid #e6eef6;
    border-top-color: #06b6d4;
    border-radius: 50%;
    animation: spin 1s linear infinite
}

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

button[disabled] {
    opacity: 0.6;
    cursor: not-allowed
}