/* ═══════════════════════════════════════════════════════════════
   ServerScheduler unified tool styles
   Design reference: aws-cost-savings-calculator
   Dark theme: #0f1117 bg, #1a1d27 cards, #63b3ed accent, #48bb78 savings
   ═══════════════════════════════════════════════════════════════ */

/* --- Layout container --- */
#layout-content {
    background: #0f1117 !important;
    padding: 0 !important;
}

/* --- Root wrapper --- */
.ss-tool {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: #0f1117 !important;
    color: #e2e8f0 !important;
    min-height: 80vh !important;
    padding: 40px 20px !important;
}

/* --- Container / inner width --- */
.ss-tool .container {
    max-width: 860px !important;
    margin: 0 auto !important;
    background: transparent !important;
}

/* --- Cards (all variants) --- */
.ss-tool .card,
.ss-tool .plan-card,
.ss-tool .result-card,
.ss-tool .check-item,
.ss-tool .callout,
.ss-tool .callout-aws,
.ss-tool .callout-ss,
.ss-tool .cta-section,
.ss-tool .cta-block,
.ss-tool .category,
.ss-tool .current-specs,
.ss-tool .result-summary,
.ss-tool .results {
    background: #1a1d27 !important;
    border: 1px solid #2d3748 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    color: #e2e8f0 !important;
}

/* --- CTA cards (gradient like reference) --- */
.ss-tool .cta-card,
.ss-tool .cta-box {
    background: linear-gradient(135deg, #1a2744, #1f1a30) !important;
    border: 1px solid #553c9a !important;
    border-radius: 16px !important;
}

/* --- Headings --- */
.ss-tool h1,
.ss-tool h2,
.ss-tool h3,
.ss-tool .card-title,
.ss-tool .plan-title,
.ss-tool .category-title,
.ss-tool .cta-title {
    color: #f7fafc !important;
}

/* --- Card labels / section headers --- */
.ss-tool .card-label,
.ss-tool .card-title,
.ss-tool .section-label,
.ss-tool .category-header {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #718096 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* --- Muted text / subtitles / descriptions --- */
.ss-tool p,
.ss-tool .subtitle,
.ss-tool label,
.ss-tool .check-desc,
.ss-tool .plan-desc,
.ss-tool .cta-sub,
.ss-tool .cta-note,
.ss-tool .result-label,
.ss-tool .result-sub,
.ss-tool .breakdown,
.ss-tool .plan-stat,
.ss-tool .cta-savings {
    color: #a0aec0 !important;
}

/* --- Inputs and selects --- */
.ss-tool input,
.ss-tool select,
.ss-tool textarea {
    background: #0f1117 !important;
    border: 1px solid #2d3748 !important;
    border-radius: 8px !important;
    color: #e2e8f0 !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
}

.ss-tool input:focus,
.ss-tool select:focus,
.ss-tool textarea:focus {
    border-color: #63b3ed !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(99,179,237,0.15) !important;
}

/* --- Sliders --- */
.ss-tool input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 4px !important;
    background: #2d3748 !important;
    border-radius: 2px !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.ss-tool input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #63b3ed !important;
    cursor: pointer !important;
    box-shadow: 0 0 0 3px rgba(99,179,237,0.2) !important;
}

/* --- Primary / CTA buttons --- */
.ss-tool .cta-btn,
.ss-tool .btn-primary,
.ss-tool .btn-large,
.ss-tool .analyze-btn,
.ss-tool .calculate-btn {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 36px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: opacity 0.15s, transform 0.15s !important;
}

.ss-tool .cta-btn:hover,
.ss-tool .btn-primary:hover,
.ss-tool .analyze-btn:hover,
.ss-tool .calculate-btn:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

/* --- Secondary / outline / ghost buttons --- */
.ss-tool .btn,
.ss-tool .btn-outline,
.ss-tool .btn-secondary,
.ss-tool .btn-ghost,
.ss-tool .copy-btn,
.ss-tool .cta-button {
    background: transparent !important;
    border: 1px solid #4a5568 !important;
    color: #a0aec0 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
}

.ss-tool .btn:hover,
.ss-tool .btn-outline:hover,
.ss-tool .copy-btn:hover {
    border-color: #63b3ed !important;
    color: #63b3ed !important;
}

/* --- Add/dashed buttons --- */
.ss-tool .add-btn,
.ss-tool .btn-add {
    background: transparent !important;
    border: 1px dashed #4a5568 !important;
    color: #718096 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    width: 100% !important;
}

.ss-tool .add-btn:hover,
.ss-tool .btn-add:hover {
    border-color: #63b3ed !important;
    color: #63b3ed !important;
}

/* --- Remove/danger buttons --- */
.ss-tool .remove-btn,
.ss-tool .del-btn,
.ss-tool .btn-danger {
    background: rgba(245,101,101,0.1) !important;
    border: 1px solid rgba(245,101,101,0.3) !important;
    color: #fc8181 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
}

.ss-tool .remove-btn:hover,
.ss-tool .del-btn:hover,
.ss-tool .btn-danger:hover {
    background: rgba(245,101,101,0.2) !important;
}

/* --- Day toggle buttons (schedule generator) --- */
.ss-tool .day-btn {
    background: #1a1d27 !important;
    border: 1px solid #2d3748 !important;
    color: #718096 !important;
    border-radius: 8px !important;
}

.ss-tool .day-btn.active,
.ss-tool .day-btn[class*="active"],
.ss-tool .day-btn.selected {
    background: #63b3ed !important;
    border-color: #63b3ed !important;
    color: #0f1117 !important;
}

/* --- Badges / pills --- */
.ss-tool .badge,
.ss-tool .env-badge,
.ss-tool .info-pill,
.ss-tool .badge-dot {
    background: rgba(99,179,237,0.15) !important;
    color: #63b3ed !important;
    border: 1px solid rgba(99,179,237,0.3) !important;
    border-radius: 20px !important;
}

/* Specific environment badges */
.ss-tool .env-prod { background: rgba(72,187,120,0.15) !important; color: #48bb78 !important; border-color: rgba(72,187,120,0.3) !important; }
.ss-tool .env-dev  { background: rgba(99,179,237,0.15) !important; color: #63b3ed !important; border-color: rgba(99,179,237,0.3) !important; }
.ss-tool .env-staging { background: rgba(246,173,85,0.15) !important; color: #f6ad55 !important; border-color: rgba(246,173,85,0.3) !important; }
.ss-tool .env-qa   { background: rgba(183,148,246,0.15) !important; color: #b794f4 !important; border-color: rgba(183,148,246,0.3) !important; }
.ss-tool .cheapest-badge { background: rgba(72,187,120,0.15) !important; color: #48bb78 !important; border-color: rgba(72,187,120,0.3) !important; }

/* --- Tables --- */
.ss-tool table,
.ss-tool .comparison-table,
.ss-tool .breakdown-table,
.ss-tool .accounts-table {
    background: #1a1d27 !important;
    border: 1px solid #2d3748 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    color: #e2e8f0 !important;
}

.ss-tool th {
    background: #252a38 !important;
    color: #718096 !important;
    border-bottom: 1px solid #2d3748 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.ss-tool td {
    border-bottom: 1px solid #1e2230 !important;
    color: #e2e8f0 !important;
}

.ss-tool tr:last-child td {
    border-bottom: none !important;
}

/* --- Dividers --- */
.ss-tool hr,
.ss-tool .divider {
    border: none !important;
    border-top: 1px solid #2d3748 !important;
}

/* --- Savings / highlight values --- */
.ss-tool .result-value,
.ss-tool .saving-cell,
.ss-tool .cta-savings,
.ss-tool .savings {
    color: #48bb78 !important;
    font-weight: 700 !important;
}

.ss-tool .slider-value,
.ss-tool .range-value {
    color: #63b3ed !important;
    font-weight: 700 !important;
}

/* --- Pro/con icons in comparison tools --- */
.ss-tool .icon-pro { color: #48bb78 !important; }
.ss-tool .icon-con,
.ss-tool .cross    { color: #fc8181 !important; }

/* --- Code / output blocks --- */
.ss-tool pre,
.ss-tool code,
.ss-tool .output,
.ss-tool .grid-cell {
    background: #0a0d14 !important;
    border: 1px solid #2d3748 !important;
    color: #e2e8f0 !important;
    border-radius: 8px !important;
}

/* --- Placeholder text --- */
.ss-tool input::placeholder,
.ss-tool textarea::placeholder {
    color: #4a5568 !important;
}

/* ═══════════════════════════════════════════════════════
   HERO/HEADER NORMALISATION
   Override gradient hero banners to match cost-savings-calculator style
   (centred text on the plain dark background, no separate banner)
   ═══════════════════════════════════════════════════════ */

/* Remove the gradient banner from tools that have one */
.ss-tool .hero,
.ss-tool header,
.ss-tool .hero-section {
    background: transparent !important;
    background-image: none !important;
    border-bottom: none !important;
    padding: 32px 0 40px 0 !important;
    text-align: center !important;
    color: #e2e8f0 !important;
    max-width: 860px !important;
    margin: 0 auto !important;
}

/* Match .header style from cost savings calculator */
.ss-tool .header,
.ss-tool .hero,
.ss-tool header {
    text-align: center !important;
    margin-top: 5em !important;
    margin-bottom: 48px !important;
}

/* Badge above the h1 */
.ss-tool .hero .badge,
.ss-tool header .badge,
.ss-tool .header .badge,
.ss-tool .hero-badge {
    display: inline-block !important;
    background: rgba(99,179,237,0.15) !important;
    color: #63b3ed !important;
    border: 1px solid rgba(99,179,237,0.3) !important;
    border-radius: 20px !important;
    padding: 4px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 16px !important;
}

/* Main tool title */
.ss-tool .hero h1,
.ss-tool header h1,
.ss-tool .header h1 {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #f7fafc !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
}

/* h1 spans must inherit white - no coloured accents */
.ss-tool .hero h1 span,
.ss-tool header h1 span,
.ss-tool .header h1 span {
    color: inherit !important;
}

/* Subtitle / description below title */
.ss-tool .hero p,
.ss-tool header p,
.ss-tool .header p,
.ss-tool .hero .subtitle,
.ss-tool header .subtitle {
    color: #a0aec0 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* The aws-idle-resource-audit has a .header wrapping a site-logo - hide that */
.ss-tool .header .logo {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════
   SEO article section sits on a white background - 
   reset all colours so dark text is visible
   ═══════════════════════════════════════════════════════ */
.ss-tool section.bg-white,
.ss-tool section.bg-white * {
    color: unset !important;
    background-color: unset !important;
}
.ss-tool section.bg-white {
    background-color: #ffffff !important;
}
.ss-tool section.bg-white p {
    color: #374151 !important;
}
.ss-tool section.bg-white h2 {
    color: #111827 !important;
}
.ss-tool section.bg-white a {
    color: #4f46e5 !important;
}
.ss-tool section.bg-white strong {
    color: #1f2937 !important;
}
.ss-tool section.bg-white .text-gray-500,
.ss-tool section.bg-white .text-gray-600,
.ss-tool section.bg-white .text-gray-700,
.ss-tool section.bg-white .text-gray-800 {
    color: unset !important;
}


/* Override any gradient clip text on h1s - force white */
.ss-tool h1 {
    -webkit-text-fill-color: #f7fafc !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    background-image: none !important;
}