@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');

/* =====================================================
   Datachef admin overrides
   ===================================================== */

/* -- Header: "DCO Subscribe" title + "by [Datachef logo]" byline --------- */
.admin-header-title {
    display: block;
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: 24px;
    color: #FF5854;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 20px;
    text-decoration: none;
}

.admin-header-byline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #6b7280;
    margin-top: 4px;
    text-decoration: none;
}

.admin-logo {
    display: block;
    box-sizing: content-box;
    height: 16px;
    width: auto;
}

/* -- Object tools: lay custom changelist/change actions out inline with the
   built-in add/change buttons instead of stacking (Unfold doesn't load
   Django's base.css, which is what normally floats these into a row) ---- */
.object-tools {
    display: flex;
    align-items: center;
}

.object-tools .objectaction-item {
    display: flex;
    list-style: none;
    order: 2;
    margin: 0 12px 0 20px;
}

/* Unwrap the built-in add-button's wrapper div so its divider and "+" button
   become direct flex items alongside the Template action above, letting
   Template slot in between them (divider, then Template, then "+") instead
   of sitting on the far side of the divider from "+". */
.object-tools > div {
    display: contents;
}

.object-tools > div > span {
    order: 1;
}

.object-tools > div > a.addlink {
    order: 3;
}

/* -- Buttons: coral accent color -------------------- */
.submit-row input[type="submit"],
.submit-row input[type="button"],
.submit-row a.default,
a.addlink,
a.changelink,
.object-tools a {
    background-color: #FF5854 !important;
    color: #fff !important;
    border-color: transparent !important;
}

.submit-row input[type="submit"]:hover,
.submit-row input[type="button"]:hover,
.submit-row a.default:hover,
a.addlink:hover,
a.changelink:hover,
.object-tools a:hover {
    background-color: #e04440 !important;
}

/* Dark mode: same coral (no inversion) */
.dark .submit-row input[type="submit"],
.dark .submit-row input[type="button"],
.dark .submit-row a.default,
.dark a.addlink,
.dark a.changelink,
.dark .object-tools a {
    background-color: #FF5854 !important;
    color: #fff !important;
}

.dark .submit-row input[type="submit"]:hover,
.dark .submit-row input[type="button"]:hover,
.dark .submit-row a.default:hover,
.dark a.addlink:hover,
.dark a.changelink:hover,
.dark .object-tools a:hover {
    background-color: #e04440 !important;
}

/* -- S3Direct file input: match action-button styling ----------------- */
.s3direct .file-input::file-selector-button,
.s3direct .file-input::-webkit-file-upload-button {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    margin-right: 8px;
    border: none;
    border-radius: 6px;
    background-color: #FF5854;
    color: #fff;
    cursor: pointer;
}

.s3direct .file-input::file-selector-button:hover,
.s3direct .file-input::-webkit-file-upload-button:hover {
    background-color: #e04440;
}

.dark .s3direct .file-input::file-selector-button,
.dark .s3direct .file-input::-webkit-file-upload-button {
    background-color: #FF5854;
    color: #fff;
}

.dark .s3direct .file-input::file-selector-button:hover,
.dark .s3direct .file-input::-webkit-file-upload-button:hover {
    background-color: #e04440;
}