static/admin.css

/* ═══════════════════════════════════════════════════════════════════════════
   SQLite DBaaS - Material Design 3 (M3) Admin Panel Styles
   Based on Google's Material Design 3 Design System
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   M3 Design Tokens (CSS Custom Properties)
   ═══════════════════════════════════════════ */

:root {
    /* Primary Colors */
    --md-sys-color-primary: #006590;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #c7e7ff;
    --md-sys-color-on-primary-container: #001c38;
    
    /* Secondary Colors */
    --md-sys-color-secondary: #4f606e;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #d3e5f5;
    --md-sys-color-on-secondary-container: #0b1d29;
    
    /* Tertiary Colors */
    --md-sys-color-tertiary: #615b71;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #e7def8;
    --md-sys-color-on-tertiary-container: #1d182b;
    
    /* Error Colors */
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;
    
    /* Success Colors */
    --md-sys-color-success: #146b3a;
    --md-sys-color-success-container: #a6f6bd;
    
    /* Surface Colors (Light Theme) */
    --md-sys-color-surface: #f8f9ff;
    --md-sys-color-surface-dim: #d8dae1;
    --md-sys-color-surface-bright: #f8f9ff;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f2f3fa;
    --md-sys-color-surface-container: #eceeef;
    --md-sys-color-surface-container-high: #e6e7ee;
    --md-sys-color-surface-container-highest: #e0e1e8;
    
    /* Text Colors */
    --md-sys-color-on-surface: #191c20;
    --md-sys-color-on-surface-variant: #40484c;
    --md-sys-color-outline: #70787c;
    --md-sys-color-outline-variant: #bfc8cc;
    
    /* Typography */
    --md-sys-typescale-display-large: 57px;
    --md-sys-typescale-display-medium: 45px;
    --md-sys-typescale-display-small: 36px;
    --md-sys-typescale-headline-large: 32px;
    --md-sys-typescale-headline-medium: 28px;
    --md-sys-typescale-headline-small: 24px;
    --md-sys-typescale-title-large: 22px;
    --md-sys-typescale-title-medium: 16px;
    --md-sys-typescale-title-small: 14px;
    --md-sys-typescale-body-large: 16px;
    --md-sys-typescale-body-medium: 14px;
    --md-sys-typescale-body-small: 12px;
    --md-sys-typescale-label-large: 14px;
    --md-sys-typescale-label-medium: 12px;
    --md-sys-typescale-label-small: 11px;
    
    /* Shape */
    --md-sys-shape-corner-none: 0px;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;
    
    /* Elevation */
    --md-sys-elevation-level0: none;
    --md-sys-elevation-level1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3);
    --md-sys-elevation-level2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3);
    --md-sys-elevation-level3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
    
    /* Motion */
    --md-sys-motion-duration-short: 150ms;
    --md-sys-motion-duration-medium: 300ms;
    --md-sys-motion-duration-long: 500ms;
    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
}

/* ═══════════════════════════════════════════
   Base Styles
   ═══════════════════════════════════════════ */

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

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

body {
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    min-height: 100vh;
    line-height: 1.5;
}

/* Material Symbols Configuration */
.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    font-size: 24px;
    line-height: 1;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════
   App Header (Top App Bar)
   ═══════════════════════════════════════════ */

.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--md-sys-color-surface-container);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.header-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--md-sys-color-on-surface);
}

.brand-icon {
    color: var(--md-sys-color-primary);
    font-size: 32px;
}

.brand-text {
    font-size: var(--md-sys-typescale-title-large);
    font-weight: 500;
    letter-spacing: 0;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--md-sys-shape-corner-full);
    text-decoration: none;
    color: var(--md-sys-color-on-surface-variant);
    font-size: var(--md-sys-typescale-label-large);
    font-weight: 500;
    transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.nav-item:hover {
    background: var(--md-sys-color-surface-container-high);
}

.nav-item.active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

/* ═══════════════════════════════════════════
   Main Content Area
   ═══════════════════════════════════════════ */

.main-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px;
    min-height: calc(100vh - 64px);
}

/* ═══════════════════════════════════════════
   Page Layout
   ═══════════════════════════════════════════ */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}

.page-title {
    font-size: var(--md-sys-typescale-headline-medium);
    font-weight: 400;
    color: var(--md-sys-color-on-surface);
}

.page-subtitle {
    font-size: var(--md-sys-typescale-body-large);
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 4px;
}

/* ═══════════════════════════════════════════
   M3 Cards
   ═══════════════════════════════════════════ */

.m3-card {
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-large);
    padding: 24px;
    margin-bottom: 16px;
    border: 1px solid var(--md-sys-color-outline-variant);
    transition: box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.m3-card:hover {
    box-shadow: var(--md-sys-elevation-level1);
}

.m3-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.m3-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-radius: var(--md-sys-shape-corner-medium);
}

.m3-card-title {
    font-size: var(--md-sys-typescale-title-medium);
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
}

.m3-card-subtitle {
    font-size: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
}

/* ═══════════════════════════════════════════
   Grid Layouts
   ═══════════════════════════════════════════ */

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════
   Stats Cards (Dashboard)
   ═══════════════════════════════════════════ */

.stat-card {
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-large);
    padding: 20px;
    border: 1px solid var(--md-sys-color-outline-variant);
}

.stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.stat-label {
    font-size: var(--md-sys-typescale-label-medium);
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-icon {
    color: var(--md-sys-color-primary);
}

.stat-value {
    font-size: var(--md-sys-typescale-display-small);
    font-weight: 400;
    color: var(--md-sys-color-on-surface);
    line-height: 1.2;
}

.stat-secondary {
    font-size: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 4px;
}

/* Status Colors */
.stat-card.success {
    border-left: 4px solid var(--md-sys-color-success);
}

.stat-card.success .stat-icon {
    color: var(--md-sys-color-success);
}

.stat-card.error {
    border-left: 4px solid var(--md-sys-color-error);
}

.stat-card.error .stat-icon {
    color: var(--md-sys-color-error);
}

.stat-card.warning {
    border-left: 4px solid #de8310;
}

/* ═══════════════════════════════════════════
   M3 Data Table
   ═══════════════════════════════════════════ */

.m3-table-container {
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-large);
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
}

.m3-table {
    width: 100%;
    border-collapse: collapse;
}

.m3-table thead {
    background: var(--md-sys-color-surface-container);
}

.m3-table th {
    padding: 16px 20px;
    text-align: left;
    font-size: var(--md-sys-typescale-label-medium);
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.m3-table td {
    padding: 16px 20px;
    font-size: var(--md-sys-typescale-body-medium);
    color: var(--md-sys-color-on-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.m3-table tbody tr:hover {
    background: var(--md-sys-color-surface-container);
}

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

/* Code/mono cells */
.m3-table .mono {
    font-family: 'Roboto Mono', 'Fira Code', monospace;
    font-size: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-primary);
}

/* ═══════════════════════════════════════════
   M3 Buttons & Chips
   ═══════════════════════════════════════════ */

/* Button group */
.m3-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

/* Custom button styles to complement M3 web components */
.m3-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: var(--md-sys-shape-corner-full);
    font-size: var(--md-sys-typescale-label-large);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
    border: none;
}

.m3-button--filled {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.m3-button--filled:hover {
    box-shadow: var(--md-sys-elevation-level1);
}

.m3-button--outlined {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline);
}

.m3-button--outlined:hover {
    background: var(--md-sys-color-primary-container);
}

.m3-button--text {
    background: transparent;
    color: var(--md-sys-color-primary);
    padding: 10px 12px;
}

.m3-button--text:hover {
    background: var(--md-sys-color-primary-container);
}

.m3-button--tonal {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

/* Icon Button */
.m3-icon-button {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--md-sys-shape-corner-full);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--md-sys-color-on-surface-variant);
    transition: background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.m3-icon-button:hover {
    background: var(--md-sys-color-surface-container-high);
}

/* ═══════════════════════════════════════════
   Forms (Text Fields)
   ═══════════════════════════════════════════ */

.m3-form-field {
    margin-bottom: 20px;
}

.m3-label {
    display: block;
    font-size: var(--md-sys-typescale-body-small);
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 8px;
}

.m3-input {
    width: 100%;
    padding: 16px;
    background: var(--md-sys-color-surface-container-highest);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-small);
    font-size: var(--md-sys-typescale-body-large);
    color: var(--md-sys-color-on-surface);
    font-family: inherit;
    transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.m3-input:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    border-width: 2px;
    padding: 15px;
}

.m3-input::placeholder {
    color: var(--md-sys-color-on-surface-variant);
}

/* Textarea */
.m3-textarea {
    min-height: 120px;
    resize: vertical;
    font-family: 'Roboto Mono', monospace;
}

/* ═══════════════════════════════════════════
   Chips
   ═══════════════════════════════════════════ */

.m3-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: var(--md-sys-shape-corner-small);
    font-size: var(--md-sys-typescale-label-large);
    font-weight: 500;
}

.m3-chip--filled {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.m3-chip--outlined {
    background: transparent;
    border: 1px solid var(--md-sys-color-outline);
    color: var(--md-sys-color-on-surface-variant);
}

.m3-chip.success {
    background: var(--md-sys-color-success-container);
    color: var(--md-sys-color-success);
}

.m3-chip.error {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-error);
}

/* ═══════════════════════════════════════════
   Login Page
   ═══════════════════════════════════════════ */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-surface);
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-extra-large);
    padding: 48px 40px;
    box-shadow: var(--md-sys-elevation-level2);
}

.login-header {
    text-align: center;
    margin-bottom: 40px;
}

.login-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-radius: var(--md-sys-shape-corner-large);
    margin: 0 auto 24px;
    font-size: 32px;
}

.login-title {
    font-size: var(--md-sys-typescale-headline-small);
    font-weight: 400;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 8px;
}

.login-subtitle {
    font-size: var(--md-sys-typescale-body-medium);
    color: var(--md-sys-color-on-surface-variant);
}

.login-error {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    padding: 12px 16px;
    border-radius: var(--md-sys-shape-corner-small);
    margin-bottom: 24px;
    font-size: var(--md-sys-typescale-body-medium);
}

/* ═══════════════════════════════════════════
   Diagnostics / Status List
   ═══════════════════════════════════════════ */

.diag-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.diag-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-medium);
}

.diag-status {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--md-sys-shape-corner-full);
    flex-shrink: 0;
}

.diag-status.success {
    background: var(--md-sys-color-success-container);
    color: var(--md-sys-color-success);
}

.diag-status.error {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-error);
}

.diag-content {
    flex: 1;
    min-width: 0;
}

.diag-name {
    font-size: var(--md-sys-typescale-body-medium);
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
}

.diag-value {
    font-size: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
    word-break: break-all;
}

/* ═══════════════════════════════════════════
   Strategy Cards (Layered Info)
   ═══════════════════════════════════════════ */

.strategy-layers {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.strategy-layer {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.strategy-layer:last-child {
    border-bottom: none;
}

.layer-number {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-radius: var(--md-sys-shape-corner-full);
    font-size: var(--md-sys-typescale-label-medium);
    font-weight: 500;
    flex-shrink: 0;
}

.layer-content h4 {
    font-size: var(--md-sys-typescale-title-small);
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 4px;
}

.layer-content p {
    font-size: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
}

/* ═══════════════════════════════════════════
   Empty State
   ═══════════════════════════════════════════ */

.empty-state {
    text-align: center;
    padding: 48px 24px;
}

.empty-icon {
    font-size: 64px;
    color: var(--md-sys-color-outline);
    margin-bottom: 16px;
}

.empty-title {
    font-size: var(--md-sys-typescale-title-medium);
    color: var(--md-sys-color-on-surface);
    margin-bottom: 8px;
}

.empty-description {
    font-size: var(--md-sys-typescale-body-medium);
    color: var(--md-sys-color-on-surface-variant);
}

/* ═══════════════════════════════════════════
   Pagination
   ═══════════════════════════════════════════ */

.m3-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
}

.m3-pagination-info {
    font-size: var(--md-sys-typescale-body-medium);
    color: var(--md-sys-color-on-surface-variant);
    margin: 0 16px;
}

/* ═══════════════════════════════════════════
   Code Block
   ═══════════════════════════════════════════ */

.m3-code-block {
    background: var(--md-sys-color-surface-container-highest);
    border-radius: var(--md-sys-shape-corner-medium);
    padding: 16px;
    font-family: 'Roboto Mono', monospace;
    font-size: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ═══════════════════════════════════════════
   Quick Actions
   ═══════════════════════════════════════════ */

.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-full);
    font-size: var(--md-sys-typescale-label-large);
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.quick-action:hover {
    background: var(--md-sys-color-surface-container-high);
    border-color: var(--md-sys-color-outline);
}

/* ═══════════════════════════════════════════
   Responsive Design
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .header-content {
        padding: 0 16px;
    }
    
    .brand-text {
        display: none;
    }
    
    .nav-item span:not(.material-symbols-outlined) {
        display: none;
    }
    
    .nav-item {
        padding: 12px;
    }
    
    .main-content {
        padding: 16px;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .m3-card {
        padding: 16px;
    }
    
    .login-card {
        padding: 32px 24px;
    }
}

/* ═══════════════════════════════════════════
   Animations
   ═══════════════════════════════════════════ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.m3-card, .stat-card, .m3-table-container {
    animation: fadeIn var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized);
}

/* Staggered animation */
.m3-card:nth-child(1), .stat-card:nth-child(1) { animation-delay: 0ms; }
.m3-card:nth-child(2), .stat-card:nth-child(2) { animation-delay: 50ms; }
.m3-card:nth-child(3), .stat-card:nth-child(3) { animation-delay: 100ms; }
.m3-card:nth-child(4), .stat-card:nth-child(4) { animation-delay: 150ms; }