/*
 * LSMC-inspired theme for Zebra Day
 * Dark, modern, clinical aesthetic with zebra stripe accents
 * Based on lsmc.com design system
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* LSMC-inspired color palette */
    --lsmc-black: #0a0a0a;
    --lsmc-dark: #141414;
    --lsmc-gray-900: #1a1a1a;
    --lsmc-gray-800: #262626;
    --lsmc-gray-700: #333333;
    --lsmc-gray-600: #4a4a4a;
    --lsmc-gray-400: #888888;
    --lsmc-gray-300: #a3a3a3;
    --lsmc-gray-200: #d4d4d4;
    --lsmc-white: #fafafa;
    
    /* Zebra accent colors */
    --zebra-stripe-light: #ffffff;
    --zebra-stripe-dark: #1a1a1a;
    --zebra-accent: #6366f1;  /* Indigo accent */
    --zebra-accent-hover: #818cf8;
    --zebra-success: #22c55e;
    --zebra-warning: #f59e0b;
    --zebra-error: #ef4444;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--lsmc-black);
    color: var(--lsmc-white);
    padding: 24px;
    margin: 0;
    line-height: 1.6;
    font-size: 15px;
}

/* Zebra stripe decorative border at top */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: repeating-linear-gradient(
        90deg,
        var(--zebra-stripe-light) 0px,
        var(--zebra-stripe-light) 20px,
        var(--zebra-stripe-dark) 20px,
        var(--zebra-stripe-dark) 40px
    );
    z-index: 1000;
}

h1, h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    border-bottom: 1px solid var(--lsmc-gray-700);
    padding: 12px 0;
    margin-top: 32px;
    margin-bottom: 16px;
}

h1 {
    font-size: 2rem;
    color: var(--lsmc-white);
}

h2 {
    font-size: 1.25rem;
    color: var(--lsmc-gray-200);
}

small {
    display: block;
    color: var(--lsmc-gray-400);
    font-size: 0.85em;
}

a {
    color: var(--zebra-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--zebra-accent-hover);
}

a.navigational-link {
    font-weight: 600;
    background-color: var(--zebra-accent);
    color: var(--lsmc-white);
    padding: 8px 16px;
    border-radius: 6px;
    display: inline-block;
}

a.navigational-link:hover {
    background-color: var(--zebra-accent-hover);
}

hr {
    border: 0;
    border-bottom: 1px solid var(--lsmc-gray-700);
    margin: 24px 0;
}

ul {
    list-style-type: none;
    padding-left: 0;
}

ul ul {
    padding-left: 24px;
}

li {
    padding: 4px 0;
}

/* Form inputs */
input[type=text],
input[type=email],
input[type=password],
input[type=number] {
    font-family: 'JetBrains Mono', monospace;
    padding: 12px 16px;
    border: 1px solid var(--lsmc-gray-700);
    border-radius: 6px;
    background-color: var(--lsmc-gray-900);
    color: var(--lsmc-white);
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus {
    border-color: var(--zebra-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

input[type=text]::placeholder {
    color: var(--lsmc-gray-600);
}

/* Submit buttons */
input[type=submit] {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    padding: 12px 24px;
    background-color: var(--zebra-accent);
    border: none;
    border-radius: 6px;
    color: var(--lsmc-white);
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

input[type=submit]:hover {
    background-color: var(--zebra-accent-hover);
}

input[type=submit]:active {
    transform: scale(0.98);
}

/* Regular buttons */
input[type="button"] {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    background-color: var(--lsmc-gray-800);
    border: 1px solid var(--lsmc-gray-700);
    color: var(--lsmc-white);
    padding: 12px 24px;
    font-size: 14px;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

input[type="button"]:hover {
    background-color: var(--lsmc-gray-700);
    border-color: var(--lsmc-gray-600);
}

input[type="button"]:active {
    background-color: var(--lsmc-gray-600);
}

/* Select dropdowns */
select {
    font-family: 'JetBrains Mono', monospace;
    background-color: var(--lsmc-gray-900);
    border: 1px solid var(--lsmc-gray-700);
    color: var(--lsmc-white);
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 6px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

select:focus {
    border-color: var(--zebra-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

select option {
    background-color: var(--lsmc-gray-900);
    color: var(--lsmc-white);
}

/* Textarea */
textarea {
    font-family: 'JetBrains Mono', monospace;
    padding: 16px;
    border: 1px solid var(--lsmc-gray-700);
    border-radius: 6px;
    background-color: var(--lsmc-gray-900);
    color: var(--lsmc-white);
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea:focus {
    border-color: var(--zebra-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

textarea::placeholder {
    color: var(--lsmc-gray-600);
}

textarea::-webkit-scrollbar {
    width: 8px;
}

textarea::-webkit-scrollbar-thumb {
    background-color: var(--lsmc-gray-600);
    border-radius: 4px;
}

textarea::-webkit-scrollbar-track {
    background-color: var(--lsmc-gray-800);
    border-radius: 4px;
}

/* Theme switcher link */
#bottomRightLink {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    background-color: var(--lsmc-gray-800);
    border: 1px solid var(--lsmc-gray-700);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--lsmc-gray-300);
    transition: all 0.2s ease;
}

#bottomRightLink:hover {
    background-color: var(--lsmc-gray-700);
    color: var(--lsmc-white);
}

/* Tables */
table {
    border-collapse: collapse;
    width: 100%;
    margin: 16px 0;
}

th, td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--lsmc-gray-700);
}

th {
    font-weight: 600;
    color: var(--lsmc-gray-300);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

tr:hover {
    background-color: var(--lsmc-gray-900);
}

/* Code/pre blocks */
pre, code {
    font-family: 'JetBrains Mono', monospace;
    background-color: var(--lsmc-gray-900);
    border-radius: 4px;
    font-size: 13px;
}

code {
    padding: 2px 6px;
    color: var(--zebra-accent-hover);
}

pre {
    padding: 16px;
    overflow-x: auto;
    border: 1px solid var(--lsmc-gray-700);
}

/* Status indicators with zebra colors */
.status-online, .status-success {
    color: var(--zebra-success);
}

.status-offline, .status-error {
    color: var(--zebra-error);
}

.status-warning {
    color: var(--zebra-warning);
}

/* Zebra stripe accent for important sections */
.zebra-accent {
    border-left: 4px solid;
    border-image: repeating-linear-gradient(
        180deg,
        var(--zebra-stripe-light) 0px,
        var(--zebra-stripe-light) 8px,
        var(--zebra-stripe-dark) 8px,
        var(--zebra-stripe-dark) 16px
    ) 1;
    padding-left: 16px;
}

