/* VipShell — perustyyli
   Tarkoituksella minimaalinen: toiminnallisuus ensin, visuaalisuus myöhemmin */

:root {
    --color-bg:       #f8f8f6;
    --color-surface:  #ffffff;
    --color-border:   #d8d8d4;
    --color-text:     #1a1a18;
    --color-muted:    #6b6b66;
    --color-accent:   #2a5caa;
    --color-accent-h: #1e4480;

    --font-ui:   system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, monospace;

    --radius: 4px;
    --gap:    1.5rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

/* Header */
.shell-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem var(--gap);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.shell-logo {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-accent);
    text-decoration: none;
    letter-spacing: 0.03em;
}

.shell-nav, .shell-user {
    color: var(--color-muted);
    font-size: 0.875rem;
}

.shell-nav a { color: var(--color-accent); text-decoration: none; }
.shell-nav a:hover { text-decoration: underline; }

/* Dashboard */
.shell-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--gap);
    padding: var(--gap);
    max-width: 1200px;
    margin: 0 auto;
}

.widget {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.widget-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.widget-desc {
    color: var(--color-muted);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.widget-links a {
    display: inline-block;
    color: var(--color-accent);
    text-decoration: none;
    font-size: 0.875rem;
}

.widget-links a:hover { text-decoration: underline; }

/* Sisältösivut */
.shell-content {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--gap);
}

.shell-content h1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Taulukko */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--color-border);
    color: var(--color-muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.data-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.data-table tr:last-child td { border-bottom: none; }

.data-table a {
    color: var(--color-accent);
    text-decoration: none;
}

.data-table a:hover { text-decoration: underline; }

/* Tilat */
.empty {
    color: var(--color-muted);
    font-style: italic;
    padding: 1rem 0;
}

.no-widgets {
    color: var(--color-muted);
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
}