html { 
    font-family: 'Google Sans', Arial, sans-serif; 
    background: #f8f9fa; 
    padding: 0;
    margin: 0;
    height: 100%;
}

body { 
    max-width: 100%; 
    margin: 0; 
    background: white;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }
a { color: #377ba8; }
hr { border: none; border-top: 1px solid lightgray; }
nav { 
    background: white; 
    display: flex; 
    align-items: center; 
    padding: 1rem 2rem;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 2px 6px 2px rgba(60,64,67,0.15);
}

nav h1 { 
    flex: auto; 
    margin: 0;
    color: #202124;
    font-size: 1.5rem;
}

nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
nav ul { 
    display: flex; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
}

nav ul li a, 
nav ul li span { 
    display: block; 
    padding: 0.5rem 1rem;
    color: #5f6368;
    text-decoration: none;
}

.content { 
    flex: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.landing-container {
    text-align: center;
    max-width: 600px;
    padding: 2rem;
}

.landing-title {
    font-size: 2.5rem;
    color: #202124;
    margin-bottom: 1rem;
}

.landing-subtitle {
    font-size: 1.25rem;
    color: #5f6368;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.google-signin-button {
    display: inline-flex;
    align-items: center;
    background-color: white;
    border: 1px solid #dadce0;
    border-radius: 4px;
    color: #3c4043;
    cursor: pointer;
    font-family: 'Google Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 0 12px;
    height: 40px;
    text-decoration: none;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
    transition: background-color 0.2s, box-shadow 0.2s;
}

.google-signin-button:hover {
    background-color: #f8f9fa;
    box-shadow: 0 1px 3px 0 rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15);
}

.google-signin-button img {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.flash { 
    margin: 1em 0; 
    padding: 1em; 
    background: #e6f4ea; 
    border: 1px solid #137333;
    border-radius: 4px;
    color: #137333;
}

/* Dashboard specific styles */
.dashboard-container {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.status-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
}

.status-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-active {
    background-color: #34a853;
}

.status-inactive {
    background-color: #ea4335;
}

.status-text {
    font-weight: 500;
}

.status-text-active {
    color: #34a853;
}

.status-text-inactive {
    color: #ea4335;
}

.action-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.action-button.primary {
    background-color: #1a73e8;
    color: white;
    border: none;
}

.action-button.secondary {
    background-color: white;
    color: #1a73e8;
    border: 1px solid #1a73e8;
}

.action-button:hover {
    background-color: #1557b0;
    color: white;
}

.action-button.secondary:hover {
    background-color: #f8f9fa;
    color: #1557b0;
}

.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }
.post > header > div:first-of-type { flex: auto; }
.post > header h1 { font-size: 1.5em; margin-bottom: 0; }
.post .about { color: slategray; font-style: italic; }
.post .body { white-space: pre-line; }
.content:last-child { margin-bottom: 0; }
.content form { margin: 1em 0; display: flex; flex-direction: column; }
.content label { font-weight: bold; margin-bottom: 0.5em; }
.content input, .content textarea { margin-bottom: 1em; }
.content textarea { min-height: 12em; resize: vertical; }
input.danger { color: #cc2f2e; }
input[type=submit] { align-self: start; min-width: 10em; }

.routes-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 2px 6px 2px rgba(60,64,67,0.15);
    padding: 2rem;
    margin-top: 2rem;
    width: 100%;
    max-width: 600px;
}

.routes-card h2 {
    color: #202124;
    margin-top: 0;
    margin-bottom: 1rem;
}

.routes-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.route-option {
    padding: 0.75rem;
    border: 1px solid #dadce0;
    border-radius: 4px;
    transition: background-color 0.2s;
    margin-bottom: 0.5rem;
}

.route-option:hover {
    background-color: #f8f9fa;
}

.route-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.route-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

.route-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.route-name {
    font-weight: 500;
    color: #202124;
    flex: 1;
}

.route-status-container {
    display: flex;
    gap: 0.5rem;
}

.route-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: relative;
    cursor: help;
}

.route-status-indicator.topic-status {
    background-color: #ea4335;
}

.route-status-indicator.topic-status.status-active {
    background-color: #34a853;
}

.route-status-indicator.permission-status {
    background-color: #ea4335;
}

.route-status-indicator.permission-status.status-active {
    background-color: #34a853;
}

.status-tooltip {
    visibility: hidden;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #3c4043;
    color: white;
    text-align: center;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
}

.route-status-indicator:hover .status-tooltip {
    visibility: visible;
    opacity: 1;
}

.route-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-left: 1.75rem;
    font-size: 0.875rem;
    color: #5f6368;
}

.route-topic {
    font-weight: 500;
    color: #5f6368;
    font-size: 0.9em;
    font-family: monospace;
}

.route-description {
    font-style: italic;
}

/* Status cards container for two-column layout */
.status-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.status-cards-container .status-card {
    flex: 1;
    min-width: 300px;
    margin-bottom: 0;
}

/* Scheduler details styles */
.scheduler-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.scheduler-detail {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.scheduler-label {
    font-weight: 500;
    color: #666;
    min-width: 100px;
}

.scheduler-value {
    color: #333;
}

/* Watch details styles */
.watch-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 0.75rem;
    background-color: #f8f9fa;
    border-radius: 4px;
    border-left: 4px solid #1a73e8;
}

.watch-detail {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.watch-label {
    font-weight: 500;
    color: #666;
    min-width: 80px;
}

.watch-value {
    color: #333;
    font-family: monospace;
}

/* Error display styles */
.error-container {
    margin-top: 1rem;
}

.error-toggle {
    background-color: #fce8e6;
    color: #c5221f;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.error-toggle:hover {
    background-color: #fad2cf;
}

.error-details {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background-color: #fce8e6;
    border-radius: 4px;
    border-left: 4px solid #c5221f;
    overflow-x: auto;
}

.error-details pre {
    margin: 0;
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 0.85rem;
    color: #c5221f;
}

.hidden {
    display: none;
}