/* ========================= */
/* COLORS */
/* ========================= */

:root {
    /* ===== Core Theme ===== */
    --color-bg: #212529;
    --color-bg-highlight: #30363d;
    --color-text: #f8f9fa;
    --color-text-muted: #f8f9faa9;
    --color-accent-gold: #ffc107;

    --color-form-bg: #14161a;
    --color-form-text: #f8f9fa;
    
    --color-link-hover: #ffc107;
    --color-link-hover-dark: #ffcd39;

    --color-border: #575757;
    --color-border-highlight: #30363d;

    /* ===== Borders & Depth ===== */
    --color-border-default: #343a40;
    --color-border-hover: #e0b84f;

    --shadow-color: rgba(0, 0, 0, 0.45);

    /* ===== Buttons ===== */
    --button-font-color: #000000;

    /* Device colors on buttons */
    --button-highlight-green: #2e4501;
    --button-highlight-teal:  #41956c;
    --button-highlight-red:   #cf260f;

    /* ===== Fonts ===== */
    --font-app-name: "Hack";
    --font-heading: "Libre Baskerville";
    --font-button-text: "Hack";
    --font-body: "Libre Baskerville";
    --font-muted: "Hack";
}

/* ========================= */
/* TYPOGRAPHY */
/* ========================= */
:root {
  /* Font families */
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, Arial, sans-serif;
    --font-heading: "Libre Baskerville V2", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Font sizes */
    --fs-base: 1rem;     /* 16px default */
    --fs-sm: 0.875rem;   /* 14px */
    --fs-xs: 0.8125rem;  /* 13px */
    --fs-lg: 1.125rem;   /* 18px */

  /* Headings (tweak freely) */
    --fs-h1: 2rem;
    --fs-h2: 1.75rem;
    --fs-h3: 1.5rem;
    --fs-h4: 1.25rem;
    --fs-h5: 1.125rem;
    --fs-h6: 1rem;

  /* Line height */
    --lh-body: 1.5;
    --lh-heading: 1.2;
}

/* =========================
    Apply variables (minimal + safe)
    ========================= */
body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
}

h1, h2, h3, h4, h5, h6,
.page-title {
    font-family: var(--font-heading);
    line-height: var(--lh-heading);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

small, .small {
    font-size: var(--fs-sm);
}

.btn {
    font-size: var(--fs-base); /* keep buttons consistent with body */
}

/* Optional: form labels slightly smaller */
.form-label {
    font-size: var(--fs-sm);
}


/* ========================= */
/* END TYPOGRAPHY */
/* ========================= */

* {
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* Navbar App Name */
.navbar-brand {
    color: var(--color-text);
}
.navbar-brand:hover {
    color: var(--color-link-hover);
}

.link-text:hover {
    color: var(--color-link-hover);
}

/* Used in multiple locations */
.text-muted {
    color: var(--color-text-muted) !important;
}

#previewImg { max-width: 300px; max-height: 300px; }


.background {
    background-image: url("../images/background/osr_background.png");
}

.content-container {
    padding: 12px;
    margin-top: 40px;
    margin-bottom: 40px;
    /* border-radius: 18px !important;
    -webkit-border-radius: 18px !important;
    -moz-border-radius: 18px !important;
    -ms-border-radius: 18px !important;
    -o-border-radius: 18px !important; */
}

.card-content-container {
    padding: 12px;
}

.page-title {
    color: var(--color-text);
    text-shadow: 0 2px 10px rgba(0,0,0,0.55);
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 1.25rem;
    text-align: center;
}

@media (min-width: 992px) {
    .page-title { margin-bottom: 1.6rem; }
}

/*~ ======================================  */
/*^       OTHER       */
/*~ ======================================  */

.form-text {
    color: var(--color-text);
}


/*~ ======================================  */
/*^       MESSAGES       */
/*~ ======================================  */
body {
    background-color: var(--color-bg); /* or whatever your dark bg is */
    background-repeat: repeat;
}

.messages {
    margin-top: 0;
    padding-top: 1rem;
}

/* Message-area checkbox contrast fix */
.messages input[type="checkbox"],
.django-messages input[type="checkbox"],
.alert input[type="checkbox"]{
    accent-color: #ffc107;              /* your gold accent */
}

/* If Bootstrap styles are being applied (form-check-input), force readable borders */
.messages .form-check-input,
.django-messages .form-check-input,
.alert .form-check-input{
    background-color: transparent;      /* don't blend into dark bg */
    border: 2px solid #f8f9fa;          /* bright border so you can see the box */
}

.messages .form-check-input:checked,
.django-messages .form-check-input:checked,
.alert .form-check-input:checked{
    background-color: #ffc107;          /* checked fill */
    border-color: #ffc107;
}

.messages .form-check-input:focus,
.django-messages .form-check-input:focus,
.alert .form-check-input:focus{
    box-shadow: 0 0 0 .2rem rgba(255,193,7,.25);
}



/*~ ======================================  */
/*^       ERRORS       */
/*~ ======================================  */

/* =========================
   Error / Validation Styling
   ========================= */

/* Django form field errors */
.text-danger,
.invalid-feedback,
.errorlist {
    /* light red text */
    /* color: #f8d7da !important; */
    color: #f55b67 !important; /* light red text */
}

.text-danger li {
    color: #f55b67 !important;
}
/* Error containers (alerts, non-field errors) */
.alert-danger {
    background-color: rgba(220, 53, 69, 0.15); /* Bootstrap danger, softened */
    color: #f8d7da;
    border: 1px solid rgba(220, 53, 69, 0.4);
}

/* Error lists from Django (ul.errorlist) */
.errorlist {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.errorlist li {
    margin-top: 0.25rem;
}

/* Inputs with errors */
.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: #dc3545 !important;
    background-color: transparent;
}

/* Focused invalid inputs (dark mode safe) */
.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, 0.25);
}

/* Error state for checkboxes */
.form-check-input.is-invalid {
    border-color: #dc3545;
}

.form-check-input.is-invalid:checked {
    background-color: #dc3545;
    border-color: #dc3545;
}


.messages .alert.alert-danger .btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.9;
}

/*~ ======================================  */
/*^       DARK MODE FORMS       */
/*~ ======================================  */

.form-control {
    background-color: var(--color-form-bg);
    color: var(--color-form-text);
    border-color: rgba(255,255,255,0.15);
}

.form-control:focus {
    border-color: #ffc107;
    box-shadow: 0 0 0 0.15rem rgba(255,193,7,0.25);
}

.form-control::placeholder {
    color: rgba(248, 249, 250, 0.6);
    opacity: 1;
}

.form-control:focus::placeholder {
    color: rgba(19, 19, 19, 0.5);
}


/* =========================
   Dark UI: Disabled + Readonly form controls
   ========================= */

/* Disabled (should look clearly unavailable) */
.form-control:disabled,
.form-select:disabled,
textarea.form-control:disabled {
    background-color: rgba(33, 37, 41, 0.65); /* darker/more muted than normal */
    color: rgba(248, 249, 250, 0.55);
    border-color: rgba(255, 255, 255, 0.10);
    opacity: 1; /* prevent Bootstrap/browser from washing it out unpredictably */
    cursor: not-allowed;
}

/* Placeholder inside disabled */
.form-control:disabled::placeholder,
.form-select:disabled::placeholder,
textarea.form-control:disabled::placeholder {
    color: rgba(248, 249, 250, 0.35);
    opacity: 1;
}

/* Readonly (available but not editable) */
.form-control[readonly],
textarea.form-control[readonly] {
    background-color: rgba(33, 37, 41, 0.85); /* close to normal, but subtly different */
    color: rgba(248, 249, 250, 0.80);
    border-color: rgba(255, 255, 255, 0.12);
    opacity: 1;
    cursor: default;
}

/* Readonly focus: no “edit me” glow */
.form-control[readonly]:focus,
textarea.form-control[readonly]:focus {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

/* Optional: help text + labels when the control is disabled */
.form-control:disabled ~ .form-text,
.form-select:disabled ~ .form-text {
    color: rgba(248, 249, 250, 0.50);
}

/* =========================
   Dark UI: Selects
   ========================= */
.form-select {
    background-color: var(--color-form-bg);
    color: var(--color-form-text);
    border-color: rgba(255,255,255,0.15);

    /* Fix default light arrow background */
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(248,249,250,.7) 50%),
        linear-gradient(135deg, rgba(248,249,250,.7) 50%, transparent 50%),
        linear-gradient(to right, transparent, transparent);
    background-position:
        calc(100% - 20px) calc(1em + 2px),
        calc(100% - 15px) calc(1em + 2px),
        100% 0;
    background-size:
        5px 5px,
        5px 5px,
        2.5em 2.5em;
    background-repeat: no-repeat;
}

.form-select:focus {
    border-color: #ffc107;
    box-shadow: 0 0 0 0.15rem rgba(255,193,7,0.25);
}




/* =========================
   Tom Select – Dark Theme
   ========================= */

/* Main input box */
.ts-control {
    background-color: #212529;
    color: #f8f9fa;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: none;
}

/* Focus state */
.ts-control.focus {
    border-color: #ffc107;
    box-shadow: 0 0 0 0.15rem rgba(255,193,7,0.25);
}

/* Placeholder text */
.ts-control input::placeholder {
    color: rgba(248,249,250,0.6);
}

/* Selected tag/item */
.ts-control .item {
    background-color: rgba(255,193,7,0.15);
    color: #ffc107;
    border-radius: 0.25rem;
}

/* Dropdown menu */
.ts-dropdown {
    background-color: #2b3035;
    color: #f8f9fa;
    border: 1px solid rgba(255,255,255,0.12);
}

/* Dropdown options */
.ts-dropdown .option {
    padding: 0.5rem 0.75rem;
}

/* Hover / active option */
.ts-dropdown .option.active,
.ts-dropdown .option:hover {
    background-color: rgba(255,193,7,0.15);
    color: #ffc107;
}

/* No results text */
.ts-dropdown .no-results {
    color: rgba(248,249,250,0.6);
}

/* Remove light focus outline */
.ts-wrapper.multi.has-items .ts-control {
    padding: 0.375rem 0.75rem;
}


/* =========================
   Tint 'Bootstrap-Danger' on disabled
   ========================= */



/* Disabled form controls with danger intent */
.form-control:disabled,
textarea.form-control:disabled {
    background-color: rgba(220, 53, 69, 0.08); /* danger tint */
    color: rgba(248, 249, 250, 0.6);
    border-color: rgba(220, 53, 69, 0.35);
    opacity: 1;
    cursor: not-allowed;
}

.form-control:disabled::placeholder,
textarea.form-control:disabled::placeholder {
    color: rgba(248, 249, 250, 0.4);
    opacity: 1;
}


.form-select:disabled {
    background-color: rgba(220, 53, 69, 0.08);
    color: rgba(248, 249, 250, 0.6);
    border-color: rgba(220, 53, 69, 0.35);
    opacity: 1;
    cursor: not-allowed;
}

/* Tom Select – disabled with danger tint */
.ts-wrapper.disabled .ts-control {
    background-color: rgba(220, 53, 69, 0.08);
    border-color: rgba(220, 53, 69, 0.35);
    color: rgba(248, 249, 250, 0.6);
    cursor: not-allowed;
}

/* Disable hover/focus effects */
.ts-wrapper.disabled .ts-control:hover,
.ts-wrapper.disabled .ts-control.focus {
    box-shadow: none;
}

/* Disabled tags/items */
.ts-wrapper.disabled .item {
    background-color: rgba(220, 53, 69, 0.15);
    color: rgba(248, 249, 250, 0.7);
}

.form-control:disabled ~ .form-text,
.form-select:disabled ~ .form-text {
    color: rgba(220, 53, 69, 0.75);
}

/*~ ======================================  */
/*^      DEBUG       */
/*~ ======================================  */

.debug-container {
    background-color: rgba(104, 2, 13, 0.185);
}

.debug-title {
    background-color: rgba(104, 2, 13, 0.185);
}

.debug-text {
    color: rgba(68, 1, 8, 0.75);
    background-color: rgba(104, 2, 13, 0.185);
}

/*~ ======================================  */
/*^      ADMIN MODE       */
/*~ ======================================  */



.admin-mode-indicator {
    background: rgba(var(--bs-danger-rgb), 0.15);
    border: 1px solid rgba(var(--bs-danger-rgb), 0.4);
    color: var(--bs-danger);
    /* animation: adminPulse 2.5s ease-in-out infinite; */
}
/* 
@keyframes adminPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(220,53,69,0); }
    50% { box-shadow: 0 0 0.5rem rgba(220, 209, 53, 0.35); }
} 
*/

/*~ ======================================  */
/*^      TOS & PRIVACY       */
/*~ ======================================  */


.legal-text {
    color: var(--color-text) !important;
}

/*~ ==========================================================  */
/*^              Raised Panel              */
/*~ ==========================================================  */

.raised-panel {
    border: 2px solid var(--color-border-default);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}