/*
 * Django admin theme: topline design language (tokens mirror
 * website/assets/css/esco-brand.css), with the debug-panel amber/cream
 * marking this as an internal surface. Dark mode is disabled in
 * survey/templates/admin/base.html, so :root is the only theme.
 */

:root {
    /* topline brand tokens */
    --t-green: #0D3D26;
    --t-green-mid: #157049;
    --t-green-tint: #EAF2ED;
    --t-blue: #1A4FA0;
    --t-line: #E6E2D9;
    --t-muted: #6B655C;

    /* Internal-surface amber, same values as .debug-panel on the website */
    --t-amber: #C77D00;
    --t-amber-ink: #8A5A00;
    --t-cream: #FFF7E0;

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

    /* Django admin variables */
    --primary: var(--t-green);
    --secondary: var(--t-green-mid);
    --accent: var(--t-amber);
    --primary-fg: #fff;

    --body-fg: #1a1a1a;
    --body-bg: #fff;
    --body-quiet-color: var(--t-muted);
    --body-loud-color: #000;

    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-family-monospace: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Header: cream + amber = internal, like the website's debug panels */
    --header-color: var(--t-amber-ink);
    --header-branding-color: var(--t-green);
    --header-bg: var(--t-cream);
    --header-link-color: var(--t-amber-ink);
    --header-link-hover-color: var(--t-green);

    --breadcrumbs-fg: var(--t-muted);
    --breadcrumbs-link-fg: var(--t-green-mid);
    --breadcrumbs-bg: #fff;

    --link-fg: var(--t-green-mid);
    --link-hover-color: var(--t-green);
    --link-selected-fg: var(--t-green);

    --hairline-color: var(--t-line);
    --border-color: var(--t-line);
    --darkened-bg: #FAF9F4;
    --selected-bg: var(--t-green-tint);
    --selected-row: var(--t-cream);

    --button-fg: #fff;
    --button-bg: var(--t-green-mid);
    --button-hover-bg: var(--t-green);
    --default-button-bg: var(--t-green);
    --default-button-hover-bg: var(--t-green-mid);
    --close-button-bg: var(--t-muted);
    --close-button-hover-bg: #4a453e;
    --delete-button-bg: #ba2121;
    --delete-button-hover-bg: #a41515;

    --object-tools-fg: #fff;
    --object-tools-bg: var(--t-green);
    --object-tools-hover-bg: var(--t-green-mid);
}

/* Header — dashed amber rule on cream, the same "internal surface"
   language as the website's debug panels. */
#header {
    border-bottom: 2px dashed var(--t-amber);
}

#site-name {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
}

/* Django colors #site-name links with --accent (amber here); use green. */
#site-name a:link, #site-name a:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--t-green);
}

#site-name svg {
    display: block;
}

.admin-tag {
    font-family: var(--font-family-monospace);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--t-amber-ink);
    border: 1px solid var(--t-amber);
    padding: 0.1rem 0.45rem;
}

#user-tools {
    font-family: var(--font-family-monospace);
    font-size: 0.7rem;
}

/* No dark mode here; the toggle's JS is removed in our admin/base.html. */
#header .theme-toggle {
    display: none;
}

div.breadcrumbs {
    font-family: var(--font-family-monospace);
    font-size: 0.75rem;
    border-bottom: 1px solid var(--t-line);
}

h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
}

/* Module headers: quiet warm paper with green text instead of the
   default header-bg coupling (which is now cream). */
.module h2, .module caption, .inline-group h2 {
    background: var(--darkened-bg);
    color: var(--t-green);
    font-weight: 600;
    border-bottom: 1px solid var(--t-line);
}

.module h2 a, .module caption a, .inline-group h2 a {
    color: var(--t-green);
}

/* Square corners: the website is 1px borders, no rounding, no shadows. */
.button, input[type="submit"], input[type="button"], .submit-row input, a.button,
.object-tools a {
    border-radius: 0;
}

.object-tools a:link, .object-tools a:visited {
    font-family: var(--font-family-monospace);
}

/* Questions table styling */
.questions-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 13px;
    border: 1px solid var(--border-color);
}

.questions-table th {
    border: 1px solid var(--border-color);
    padding: 6px;
    text-align: left;
    background: var(--darkened-bg);
    font-weight: bold;
}

.questions-table td {
    border: 1px solid var(--border-color);
    padding: 6px;
    vertical-align: top;
}

.questions-table .question-code {
    width: 25%;
}

.questions-table .question-type {
    width: 10%;
}

.questions-table .question-required {
    width: 8%;
    text-align: center;
}

.questions-table .question-condition {
    width: 18%;
}

.questions-table .question-options {
    width: 30%;
}

.questions-table .question-edit {
    width: 9%;
    text-align: center;
}

.question-code strong {
    display: block;
}

.question-code small {
    opacity: 0.7;
}

.question-type-badge {
    background: var(--t-green);
    color: #fff;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font-family-monospace);
}

.condition-code {
    background: var(--darkened-bg);
    padding: 1px 3px;
    font-size: 11px;
    border: 1px solid var(--border-color);
    font-family: var(--font-family-monospace);
}

.condition-none {
    opacity: 0.6;
    font-size: 11px;
    font-style: italic;
}

.option-badge {
    background: var(--t-green-tint);
    color: var(--t-green);
    padding: 1px 3px;
    margin: 1px;
    font-size: 10px;
    display: inline-block;
}

.options-more {
    opacity: 0.6;
    font-size: 10px;
}

.options-none {
    opacity: 0.6;
    font-size: 11px;
    font-style: italic;
}

.add-question-link {
    margin-top: 8px;
    font-size: 11px;
}

.no-questions {
    opacity: 0.6;
}

/* YAML Export styling */
.yaml-export-container {
    margin-top: 10px;
}

.yaml-export-container h4 {
    margin-bottom: 10px;
    color: var(--body-fg);
}

.yaml-export-textarea {
    width: 100%;
    height: 400px;
    font-family: var(--font-family-monospace);
    font-size: 12px;
    background: var(--darkened-bg);
    border: 1px solid var(--border-color);
    padding: 10px;
    resize: vertical;
}

.yaml-export-help {
    font-size: 11px;
    color: var(--body-quiet-color);
    margin-top: 5px;
    font-style: italic;
}

/* YAML import page styles */
.yaml-example {
    background-color: var(--darkened-bg);
    padding: 10px;
    overflow-x: auto;
    border: 1px solid var(--border-color);
}

/* YAML export error and notice styles */
.yaml-export-error {
    color: var(--delete-button-bg);
    font-weight: bold;
    padding: 10px;
    background: #fee;
    border: 1px solid var(--delete-button-bg);
    margin: 10px 0;
}

.yaml-export-notice {
    color: var(--body-quiet-color);
    font-style: italic;
    padding: 10px;
    background: var(--darkened-bg);
    margin: 10px 0;
}