/* Galaxy-branded stylesheet for schema-salad-doc HTML output.
 *
 * Replaces galaxy_bootstrap.min.css with a purpose-built, lightweight
 * stylesheet that matches the Galaxy design language used in the Sphinx docs.
 */

@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap");

/* ── Reset & base ─────────────────────────────────────────────────────── */

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

body {
    font-family: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #2c3143;
    background-color: #ffffff;
    background-image:
        linear-gradient(to right, rgba(37, 83, 123, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(37, 83, 123, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    margin: 0;
    padding: 0;
}

/* ── Container ────────────────────────────────────────────────────────── */

.container, .container-fluid {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ── Navbar / brand bar ───────────────────────────────────────────────── */

.navbar, nav.navbar {
    background: linear-gradient(135deg, #2c3143 0%, #25537b 100%);
    border-bottom: 3px solid #ffd700;
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar-brand, .navbar .brand, .navbar a {
    color: #f8f9fa;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar a:hover {
    color: #ffd700;
}

.navbar img, .navbar-brand img {
    height: 2rem;
    width: auto;
}

.navbar-inverse {
    background: linear-gradient(135deg, #2c3143 0%, #25537b 100%);
    border-bottom: 3px solid #ffd700;
    border-color: #ffd700;
}

.navbar-inverse .navbar-brand {
    color: #f8f9fa;
}

/* ── Typography ───────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: "Atkinson Hyperlegible", sans-serif;
    color: #2c3143;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h1 {
    font-size: 2rem;
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 0.5rem;
}

h2 {
    font-size: 1.6rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    padding-bottom: 0.4rem;
}

h3 { font-size: 1.3rem; color: #25537b; }
h4 { font-size: 1.15rem; color: #25537b; }
h5 { font-size: 1rem; color: #25537b; }

/* ── Links ────────────────────────────────────────────────────────────── */

a {
    color: #25537b;
    text-decoration: underline;
    text-decoration-color: rgba(37, 83, 123, 0.3);
    text-underline-offset: 2px;
}

a:hover {
    color: #1d4263;
    text-decoration-color: #ffd700;
}

/* ── Tables ───────────────────────────────────────────────────────────── */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

th {
    background-color: #25537b;
    color: #ffffff;
    text-align: left;
    padding: 0.6rem 0.8rem;
    font-weight: 700;
    border: 1px solid #1d4263;
}

td {
    padding: 0.5rem 0.8rem;
    border: 1px solid #dee2e6;
    vertical-align: top;
}

tr:nth-child(even) {
    background-color: #f8f9fa;
}

tr:hover {
    background-color: #edf4fa;
}

/* ── Schema-salad responsive table rows ───────────────────────────────── */

.responsive-table {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
    margin: 1rem 0;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(44, 49, 67, 0.06);
}

.responsive-table > .row {
    margin-left: 0;
    margin-right: 0;
}

.responsive-table-header {
    background: linear-gradient(135deg, #2c3143 0%, #25537b 100%);
    color: #f8f9fa;
    font-weight: 700;
    padding: 0.6rem 0;
}

.responsive-table-header [class*="col-"] {
    color: #f8f9fa;
}

.responsive-table-row {
    border-top: 1px solid #dee2e6;
    padding: 0.75rem 0;
}

.responsive-table-row:nth-of-type(odd) {
    background-color: #f8f9fa;
}

.responsive-table-row:hover {
    background-color: #edf4fa;
}

/* ── Bootstrap-style grid (xs/sm/md/lg) ───────────────────────────────── */

[class*="col-xs-"],
[class*="col-sm-"],
[class*="col-md-"],
[class*="col-lg-"] {
    padding: 0.25rem 0.75rem;
    min-height: 1px;
    word-wrap: break-word;
}

/* xs: always on (mobile-first default) */
.col-xs-1  { flex: 0 0 8.3333%;  max-width: 8.3333%;  }
.col-xs-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-xs-3  { flex: 0 0 25%;      max-width: 25%;      }
.col-xs-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-xs-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-xs-6  { flex: 0 0 50%;      max-width: 50%;      }
.col-xs-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-xs-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-xs-9  { flex: 0 0 75%;      max-width: 75%;      }
.col-xs-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-xs-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-xs-12 { flex: 0 0 100%;     max-width: 100%;     }

@media (min-width: 768px) {
    .col-sm-1  { flex: 0 0 8.3333%;  max-width: 8.3333%;  }
    .col-sm-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .col-sm-3  { flex: 0 0 25%;      max-width: 25%;      }
    .col-sm-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-sm-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .col-sm-6  { flex: 0 0 50%;      max-width: 50%;      }
    .col-sm-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .col-sm-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .col-sm-9  { flex: 0 0 75%;      max-width: 75%;      }
    .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
    .col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
    .col-sm-12 { flex: 0 0 100%;     max-width: 100%;     }
}

@media (min-width: 992px) {
    .col-md-1  { flex: 0 0 8.3333%;  max-width: 8.3333%;  }
    .col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .col-md-3  { flex: 0 0 25%;      max-width: 25%;      }
    .col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .col-md-6  { flex: 0 0 50%;      max-width: 50%;      }
    .col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .col-md-9  { flex: 0 0 75%;      max-width: 75%;      }
    .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
    .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
    .col-md-12 { flex: 0 0 100%;     max-width: 100%;     }
}

@media (min-width: 1170px) {
    .col-lg-1  { flex: 0 0 8.3333%;  max-width: 8.3333%;  }
    .col-lg-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .col-lg-3  { flex: 0 0 25%;      max-width: 25%;      }
    .col-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-lg-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .col-lg-6  { flex: 0 0 50%;      max-width: 50%;      }
    .col-lg-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .col-lg-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .col-lg-9  { flex: 0 0 75%;      max-width: 75%;      }
    .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
    .col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
    .col-lg-12 { flex: 0 0 100%;     max-width: 100%;     }
}

/* schema-salad inlines a stacked description on narrow and inline on wide */
.description-header { display: none; }
.description-col {
    margin-top: 0.75rem;
    margin-left: 1.5rem;
}

@media (min-width: 1170px) {
    .description-header { display: block; }
    .description-col {
        margin-top: 0;
        margin-left: 0;
    }
}

/* ── Row utility ──────────────────────────────────────────────────────── */

.row {
    display: flex;
    flex-wrap: wrap;
}

/* ── Code & pre ───────────────────────────────────────────────────────── */

code {
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
    font-size: 0.9em;
    background-color: #edf4fa;
    color: #2c3143;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    padding: 1px 5px;
}

pre {
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
    font-size: 0.85em;
    background-color: #2c3143;
    color: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
    margin: 1rem 0;
}

pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
}

/* ── Blockquotes ──────────────────────────────────────────────────────── */

blockquote {
    border-left: 4px solid #ffd700;
    background-color: rgba(255, 215, 0, 0.03);
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    color: #58585a;
    font-style: italic;
}

/* ── Panels / cards ───────────────────────────────────────────────────── */

.panel {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    margin: 1rem 0;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(44, 49, 67, 0.06);
}

.panel-heading {
    background: linear-gradient(135deg, #2c3143 0%, #25537b 100%);
    color: #f8f9fa;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 700;
}

.panel-body {
    padding: 1rem;
}

.panel-default > .panel-heading {
    background: linear-gradient(135deg, #2c3143 0%, #25537b 100%);
    color: #f8f9fa;
}

/* ── Schema type badges & labels ──────────────────────────────────────── */

.label, .badge {
    display: inline-block;
    padding: 0.2em 0.5em;
    font-size: 0.8em;
    font-weight: 700;
    border-radius: 3px;
    background-color: #25537b;
    color: #ffffff;
}

.label-default, .badge-default {
    background-color: #58585a;
}

.label-primary, .badge-primary {
    background-color: #25537b;
}

.label-warning, .badge-warning {
    background-color: #fe7f02;
}

/* ── Alerts ───────────────────────────────────────────────────────────── */

.alert {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

.alert-info {
    background-color: #edf4fa;
    border: 1px solid #25537b;
    color: #25537b;
}

.alert-warning {
    background-color: #fff8e1;
    border: 1px solid #fe7f02;
    color: #7f5102;
}

/* ── Lists ────────────────────────────────────────────────────────────── */

ul, ol {
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.3rem;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .container, .container-fluid {
        padding: 0 1rem;
    }

    .navbar {
        padding: 0.5rem 1rem;
    }
}

/* ── Footer area ──────────────────────────────────────────────────────── */

footer, .footer {
    background-color: #2c3143;
    color: #f8f9fa;
    padding: 1.5rem 2rem;
    margin-top: 3rem;
    border-top: 3px solid #ffd700;
    text-align: center;
}

footer a {
    color: #dee2e6;
}

footer a:hover {
    color: #ffd700;
}