/*
 * Indie Folk Central look for the Django admin.
 * Colours and fonts follow indiefolkcentral.com: cream background, dark forest,
 * sunset accent, "wolk" pink links, Josefin Sans headings and Figtree text.
 */

/* ---------- Brand tokens ---------- */

:root {
    --ifc-bos: #3d4a46;
    --ifc-bos-donker: #262f2c;
    --ifc-mist: #8a9893;
    --ifc-sunset: #e9967f;
    --ifc-sunset-hover: #df8169;
    --ifc-sunset-licht: #f6c9b6;
    --ifc-wolk: #c4566b;
    --ifc-wolk-hover: #a8404f;
    --ifc-cream: #f7f4ef;
    --ifc-surface: #ffffff;
    --ifc-line: #e4e1da;
    --ifc-text: #22292a;
    --ifc-text-soft: #5d6866;
    --ifc-radius: 14px;
    --ifc-heading: "Josefin Sans", "Figtree", sans-serif;
}

/* ---------- Light theme (default) ---------- */

html[data-theme="light"],
:root {
    --page-bg: var(--ifc-cream);
    --card-bg: var(--ifc-surface);

    --primary: var(--ifc-bos);
    --secondary: var(--ifc-bos-donker);
    --accent: var(--ifc-sunset);
    --primary-fg: #fff;

    --body-fg: var(--ifc-text);
    --body-bg: var(--ifc-surface);
    --body-quiet-color: var(--ifc-text-soft);
    --body-medium-color: #3a4443;
    --body-loud-color: #111716;

    --header-color: #c8d0cd;
    --header-branding-color: #fff;
    --header-bg: var(--ifc-bos-donker);
    --header-link-color: #fff;

    --breadcrumbs-fg: #c8d0cd;
    --breadcrumbs-link-fg: var(--ifc-sunset-licht);
    --breadcrumbs-bg: var(--ifc-bos);

    --link-fg: var(--ifc-wolk);
    --link-hover-color: var(--ifc-wolk-hover);
    --link-selected-fg: var(--ifc-bos-donker);

    --hairline-color: var(--ifc-line);
    --border-color: #d5d1c8;

    --error-fg: #b3263c;
    --message-info-bg: #e8eeec;
    --message-success-bg: #e3efe4;
    --message-warning-bg: #fbf1c9;
    --message-error-bg: #fbe4e6;

    --darkened-bg: #eeebe5;
    --selected-bg: #f3ece3;
    --selected-row: #fbf1c9;

    --button-fg: #fff;
    --button-bg: var(--ifc-bos);
    --button-hover-bg: var(--ifc-bos-donker);
    --default-button-bg: var(--ifc-sunset);
    --default-button-hover-bg: var(--ifc-sunset-hover);
    --default-button-fg: var(--ifc-bos-donker);
    --close-button-bg: var(--ifc-mist);
    --close-button-hover-bg: var(--ifc-bos);
    --delete-button-bg: #b3263c;
    --delete-button-hover-bg: #8f1d30;

    --object-tools-fg: var(--ifc-bos-donker);
    --object-tools-bg: var(--ifc-sunset);
    --object-tools-hover-bg: var(--ifc-sunset-hover);

    --font-family-primary: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Dark theme: the forest at night ---------- */

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --page-bg: #1b2220;
        --card-bg: #232c29;

        --primary: #2f3a37;
        --secondary: #151b19;
        --primary-fg: #f2efe9;

        --body-fg: #e9e6e0;
        --body-bg: #232c29;
        --body-quiet-color: #a9b4b0;
        --body-medium-color: #d3d8d5;
        --body-loud-color: #ffffff;

        --header-bg: #151b19;
        --breadcrumbs-bg: #2f3a37;
        --breadcrumbs-link-fg: var(--ifc-sunset-licht);

        --link-fg: #f0a593;
        --link-hover-color: var(--ifc-sunset-licht);
        --link-selected-fg: #fff;

        --hairline-color: #34403c;
        --border-color: #44524d;

        --darkened-bg: #1f2725;
        --selected-bg: #2c3734;
        --selected-row: #3d3a22;

        --button-bg: #44524d;
        --button-hover-bg: #56665f;
        --close-button-bg: #44524d;
        --close-button-hover-bg: #56665f;

        --message-info-bg: #2c3a37;
        --message-success-bg: #24402c;
        --message-warning-bg: #4a3f17;
        --message-error-bg: #4d1f27;
    }
}

html[data-theme="dark"] {
    --page-bg: #1b2220;
    --card-bg: #232c29;

    --primary: #2f3a37;
    --secondary: #151b19;
    --primary-fg: #f2efe9;

    --body-fg: #e9e6e0;
    --body-bg: #232c29;
    --body-quiet-color: #a9b4b0;
    --body-medium-color: #d3d8d5;
    --body-loud-color: #ffffff;

    --header-bg: #151b19;
    --breadcrumbs-bg: #2f3a37;
    --breadcrumbs-link-fg: var(--ifc-sunset-licht);

    --link-fg: #f0a593;
    --link-hover-color: var(--ifc-sunset-licht);
    --link-selected-fg: #fff;

    --hairline-color: #34403c;
    --border-color: #44524d;

    --darkened-bg: #1f2725;
    --selected-bg: #2c3734;
    --selected-row: #3d3a22;

    --button-bg: #44524d;
    --button-hover-bg: #56665f;
    --close-button-bg: #44524d;
    --close-button-hover-bg: #56665f;

    --message-info-bg: #2c3a37;
    --message-success-bg: #24402c;
    --message-warning-bg: #4a3f17;
    --message-error-bg: #4d1f27;
}

/* ---------- Page ---------- */

body {
    background: var(--page-bg);
    font-size: 0.9375rem;
}

#container,
#main,
.main > #nav-sidebar + .content {
    background: var(--page-bg);
}

h1, h2, h3, h4,
#content h1,
#content h2,
.module h2,
.module caption,
.inline-group h2 {
    font-family: var(--ifc-heading);
    letter-spacing: -0.01em;
}

#content h1 {
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--body-loud-color);
    margin-bottom: 1.25rem;
}

#content h2 {
    font-weight: 600;
}

/* ---------- Header ---------- */

#header {
    background: var(--header-bg);
    padding: 14px 32px;
    align-items: center;
}

#branding #site-name a.ifc-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.ifc-logo {
    display: block;
    height: 32px;
    width: auto;
}

.ifc-app-name {
    font-family: var(--ifc-heading);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ifc-bos-donker);
    background: var(--ifc-sunset);
    border-radius: 999px;
    padding: 4px 12px 2px;
    line-height: 1.3;
}

#user-tools {
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
}

#user-tools a {
    border-bottom: none;
}

#user-tools a:focus,
#user-tools a:hover {
    color: var(--ifc-sunset-licht);
    text-decoration: none;
}

#logout-form button {
    border-bottom: none;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8125rem;
}

#logout-form button:hover {
    color: var(--ifc-sunset-licht);
}

/* ---------- Breadcrumbs ---------- */

div.breadcrumbs {
    background: var(--breadcrumbs-bg);
    padding: 10px 32px;
    font-size: 0.8125rem;
}

div.breadcrumbs a:focus,
div.breadcrumbs a:hover {
    color: #fff;
}

/* ---------- Cards: modules, tables, fieldsets ---------- */

.module,
#changelist .changelist-form-container,
.inline-group {
    background: var(--card-bg);
    border-radius: var(--ifc-radius);
    box-shadow: 0 1px 2px rgba(38, 47, 44, 0.06), 0 4px 14px rgba(38, 47, 44, 0.05);
    border: 1px solid var(--hairline-color);
    overflow: hidden;
}

.module h2,
.module caption,
.inline-group h2 {
    background: var(--header-bg);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 12px 16px 10px;
    text-transform: none;
    letter-spacing: 0;
}

.module caption a.section,
.module h2 a {
    color: #fff;
}

.module caption a.section:hover,
.module h2 a:hover {
    color: var(--ifc-sunset-licht);
}

.dashboard .module table th,
.dashboard .module table td {
    padding: 10px 16px;
}

/* Fieldsets on the edit page */
fieldset.module {
    margin-bottom: 20px;
}

fieldset.module h2.fieldset-heading,
fieldset.module > h2,
fieldset.module summary h2 {
    background: var(--header-bg);
    color: #fff;
}

.inline-group .tabular .module,
.inline-group .module {
    box-shadow: none;
    border: none;
    border-radius: 0;
}

.inline-related h3 {
    background: var(--darkened-bg);
    color: var(--body-fg);
    font-family: var(--ifc-heading);
    border-bottom: 1px solid var(--hairline-color);
}

/* Table header rows */
thead th,
tfoot td {
    background: var(--darkened-bg);
    color: var(--body-quiet-color);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--hairline-color);
}

thead th.sorted {
    background: var(--selected-bg);
}

#result_list td,
#result_list th {
    padding: 10px 12px;
    vertical-align: middle;
}

#changelist table tbody tr:hover {
    background: var(--selected-bg);
}

#changelist table tbody tr.selected {
    background: var(--selected-row);
}

/* ---------- Changelist toolbar, filters and actions ---------- */

#changelist #toolbar {
    background: var(--card-bg);
    border-bottom: 1px solid var(--hairline-color);
    padding: 12px;
}

#changelist #toolbar form input[type="text"] {
    border-radius: 999px;
    padding: 6px 14px;
}

#changelist .actions {
    background: var(--darkened-bg);
    border-bottom: 1px solid var(--hairline-color);
}

#changelist-filter {
    background: var(--card-bg);
    border-radius: var(--ifc-radius);
    border: 1px solid var(--hairline-color);
    box-shadow: 0 1px 2px rgba(38, 47, 44, 0.06);
    overflow: hidden;
}

#changelist-filter h2 {
    font-family: var(--ifc-heading);
    background: var(--header-bg);
    color: #fff;
    text-transform: none;
    letter-spacing: 0;
    padding: 12px 16px 10px;
}

#changelist-filter h3 {
    font-family: var(--ifc-heading);
    font-weight: 600;
}

#changelist-filter details summary {
    font-family: var(--ifc-heading);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.875rem;
    color: var(--body-fg);
}

#changelist-filter li.selected a {
    color: var(--ifc-wolk);
    font-weight: 600;
}

#changelist-filter li.selected {
    border-left-color: var(--ifc-sunset);
}

.paginator {
    border-top: 1px solid var(--hairline-color);
    background: var(--card-bg);
    padding: 12px;
}

/* ---------- Buttons ---------- */

.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button,
button.button {
    border-radius: 999px;
    padding: 9px 18px;
    font-family: var(--font-family-primary);
    font-weight: 600;
    font-size: 0.875rem;
    transition: background-color 0.15s ease;
}

.button.default,
input[type="submit"].default,
.submit-row input.default {
    background: var(--default-button-bg);
    color: var(--default-button-fg);
}

.button.default:hover,
input[type="submit"].default:hover,
.submit-row input.default:hover {
    background: var(--default-button-hover-bg);
}

.submit-row {
    background: var(--card-bg);
    border: 1px solid var(--hairline-color);
    border-radius: var(--ifc-radius);
    padding: 14px;
}

.submit-row a.deletelink,
.submit-row a.closelink {
    border-radius: 999px;
    padding: 9px 18px;
    height: auto;
    line-height: 1.2;
}

.object-tools a:link,
.object-tools a:visited {
    border-radius: 999px;
    padding: 7px 16px;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--object-tools-fg);
}

.object-tools a.addlink {
    background-image: none;
    padding-left: 16px;
}

.object-tools a.addlink::before {
    content: "+ ";
}

/* ---------- Form fields ---------- */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select,
.vTextField {
    border-radius: 8px;
    border-color: var(--border-color);
    padding: 7px 10px;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--ifc-sunset);
    outline: 2px solid color-mix(in srgb, var(--ifc-sunset) 35%, transparent);
    outline-offset: 0;
}

.help,
p.help,
form p.help,
div.help {
    color: var(--body-quiet-color);
}

/* ---------- Sidebar ---------- */

#nav-sidebar {
    background: var(--page-bg);
    border-right: 1px solid var(--hairline-color);
}

#nav-sidebar .module {
    box-shadow: none;
}

#nav-sidebar .current-model {
    background: var(--selected-row);
}

#nav-sidebar .current-model a {
    font-weight: 600;
}

.toggle-nav-sidebar {
    background: var(--page-bg);
    border-right-color: var(--hairline-color);
}

/* ---------- Messages ---------- */

ul.messagelist li {
    border-radius: 10px;
    margin: 0 0 8px;
}

/* ---------- Login page ---------- */

body.login {
    background: var(--ifc-bos-donker);
}

.login #container {
    background: var(--card-bg);
    border-radius: var(--ifc-radius);
    overflow: hidden;
    border: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.login #header {
    padding: 22px 28px;
    justify-content: center;
}

.login #branding #site-name a.ifc-brand {
    flex-direction: column;
    gap: 10px;
}

.login .ifc-logo {
    height: 38px;
}

.login #content {
    padding: 24px 28px 28px;
}

.login .submit-row {
    border: none;
    padding: 1em 0 0;
    background: none;
}

.login .submit-row input {
    width: 100%;
    background: var(--default-button-bg);
    color: var(--default-button-fg);
}

.login .submit-row input:hover {
    background: var(--default-button-hover-bg);
}

.login #header .theme-toggle {
    position: absolute;
    top: 14px;
    right: 14px;
}

.login #header {
    position: relative;
}

/* ---------- Small screens ---------- */

@media (max-width: 767px) {
    #header {
        padding: 12px 16px;
    }

    div.breadcrumbs {
        padding: 10px 16px;
    }

    .ifc-logo {
        height: 26px;
    }
}

/* ---------- Artist form submissions ---------- */

table.ifc-changes { border-collapse: collapse; }
table.ifc-changes td, table.ifc-changes th { padding: 4px 12px 4px 0; vertical-align: top; text-align: left; }

/* Add song / upload / invite preview */
.ifc-tool .help { margin: 0 0 14px; }
.ifc-flag { padding: 8px 12px; border-radius: 6px; margin: 0 0 8px; font-weight: 600; max-width: 760px; }
.ifc-flag-error { background: #fbe7ea; border-left: 4px solid #c4566b; color: #6e1f2c; }
.ifc-flag-warning { background: #fdf3e1; border-left: 4px solid #d99a2b; color: #5c4210; }
.ifc-mail-preview { background: #fff; color: #22292a; border: 1px solid #e4e1da; border-radius: 10px; padding: 22px 26px; margin: 16px 0; max-width: 700px; }
.ifc-mail-preview a { color: #1a5fb4; }
.ifc-email-box { background: var(--darkened-bg, #f6f4f0); border-radius: 10px; padding: 12px 16px; margin: 0 0 14px; max-width: 760px; }
.ifc-email-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.ifc-dashboard-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: none; margin-bottom: 16px; }
.ifc-dashboard-note .button { margin-left: auto; }
.ifc-steps { max-width: 760px; }
.ifc-steps li { margin-bottom: 6px; list-style: decimal; }
.ifc-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.ifc-labels { border-collapse: collapse; width: 100%; background: var(--body-bg, #fff); }
.ifc-labels th, .ifc-labels td { padding: 5px 8px; border-bottom: 1px solid var(--hairline-color, #e4e1da); text-align: center; vertical-align: middle; }
.ifc-labels th:nth-child(2), .ifc-labels td:nth-child(2) { text-align: left; }
.ifc-labels tbody tr:hover { background: rgba(233, 150, 127, .08); }
.ifc-suggest, .ifc-suggest-sample { background: #fbe3d8; }
.ifc-suggest-sample { padding: 1px 6px; border-radius: 4px; }
.ifc-star input { display: none; }
.ifc-star span { font-size: 20px; color: #d5d1c8; cursor: pointer; }
.ifc-star input:checked + span { color: #e9967f; }
.ifc-create { max-width: 760px; margin-top: 14px; }
.nowrap { white-space: nowrap; }
.ifc-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

/* Video workspace */
.ifc-stepbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 10px; list-style: none; }
.ifc-stepbar li { list-style: none; padding: 8px 14px; border-radius: 20px; background: var(--darkened-bg, #f0ede7); color: var(--body-quiet-color); font-weight: 600; }
.ifc-stepbar li.done { background: #dfe8e3; color: #2f5a47; }
.ifc-stepbar li.current { background: var(--ifc-sunset); color: #fff; }
.ifc-now { margin: 0 0 14px; }
.ifc-card { background: var(--body-bg, #fff); border: 1px solid var(--hairline-color); border-radius: var(--ifc-radius); padding: 14px 18px 18px; margin: 0 0 18px; }
.ifc-card h2 { margin: 0 0 12px; font-size: 18px; }
.ifc-card h3 { margin: 16px 0 6px; font-size: 14px; }
.ifc-count { font-weight: 400; font-size: 13px; color: var(--body-quiet-color); margin-left: 8px; }
.ifc-tracklist td:nth-child(3) { text-align: left; }
.ifc-tracklist th:nth-child(2), .ifc-tracklist td:nth-child(2) { text-align: center; }
.ifc-tracklist tr.dragging { opacity: .4; }
.ifc-tracklist tr.ifc-new { background: #fdf3e1; }
.ifc-drag { cursor: grab; color: var(--body-quiet-color); font-size: 18px; }
.ifc-mini { border: 1px solid var(--hairline-color); background: transparent; border-radius: 6px; padding: 2px 7px; margin-left: 2px; cursor: pointer; }
.ifc-missing { color: #c4566b; font-size: 12px; }
.ifc-next { margin-top: 14px; }
.ifc-back { margin-bottom: 20px; }
.ifc-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-bottom: 12px; }
.ifc-grid2 textarea { width: 100%; box-sizing: border-box; }
.ifc-still { max-width: 260px; border-radius: 8px; margin-top: 8px; }
.ifc-desc { width: 100%; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.ifc-checks { margin: 0 0 12px; padding: 0; }
.ifc-checks li { list-style: none; padding: 4px 0; }
.ifc-check-error { color: #8c2a3a; font-weight: 600; }
.ifc-check-ok { color: #2f5a47; font-weight: 600; }
.ifc-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; }
.ifc-chip { border: 1px dashed var(--ifc-sunset); background: transparent; color: var(--body-fg); border-radius: 12px; padding: 2px 9px; cursor: pointer; font-size: 12px; }
.ifc-copy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ifc-copy-grid textarea { width: 100%; box-sizing: border-box; font-size: 12px; margin-bottom: 6px; }
.ifc-progress td { text-align: left !important; }
@media (max-width: 800px) { .ifc-grid2 { grid-template-columns: 1fr; } }

/* Approvals list: narrow yes/no columns with upright headers */
body.model-approval.change-list th.column-yt_indiefolkcentral,
body.model-approval.change-list th.column-yt_indiefolkcentralmusic,
body.model-approval.change-list th.column-isrc_in_document,
body.model-approval.change-list th.column-monetization_allowed,
body.model-approval.change-list th.column-pdf_expired,
body.model-approval.change-list th.column-verified {
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; vertical-align: top; text-align: left; padding: 8px 4px; width: 28px; }
body.model-approval.change-list td.field-yt_indiefolkcentral,
body.model-approval.change-list td.field-yt_indiefolkcentralmusic,
body.model-approval.change-list td.field-isrc_in_document,
body.model-approval.change-list td.field-monetization_allowed,
body.model-approval.change-list td.field-pdf_expired,
body.model-approval.change-list td.field-verified { text-align: center; padding: 6px 4px; width: 28px; }

/* Label chips (Tracks list, Build page): only the labels a song has */
.ifc-labelcell { position: relative; display: inline-flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.ifc-lchip { display: inline-flex; align-items: center; gap: 2px; background: #fff; color: #22292a; border: 1px solid #d9d5cc;
  border-radius: 11px; padding: 1px 3px 1px 9px; font-size: 12px; line-height: 1.5; white-space: nowrap; }
.ifc-lchip.shared { background: #dde9d5; border-color: #b9cfae; color: #2f4a25; }
.ifc-lchip .x { border: 0; background: transparent; color: #9a958c; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 4px; border-radius: 8px; }
.ifc-lchip .x:hover { color: #c4566b; background: rgba(196,86,107,.1); }
.ifc-ladd { border: 1px dashed #c9c4ba; background: transparent; color: #8a9893; border-radius: 11px; width: 22px; height: 20px;
  line-height: 1; cursor: pointer; font-size: 14px; padding: 0; }
.ifc-ladd:hover { border-color: var(--ifc-sunset); color: var(--ifc-sunset); }
.ifc-lmenu { position: absolute; z-index: 30; top: 100%; left: 0; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; width: 260px;
  background: #fff; border: 1px solid #e4e1da; border-radius: 10px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); color: #5d6866; font-size: 12px; }
.ifc-lmenu button { border: 1px solid #d9d5cc; background: #f7f4ef; border-radius: 11px; padding: 2px 9px; font-size: 12px; cursor: pointer; color: #22292a; }
.ifc-lmenu button:hover { background: #fbe3d8; border-color: #e9967f; }
.ifc-starchip { border: 0; background: transparent; font-size: 16px; padding: 0 4px; cursor: pointer; color: #d5d1c8; }
.ifc-starchip.on { color: #e9967f; }
body.model-track.change-list td.field-labels { min-width: 230px; white-space: normal; }
.ifc-flag-ok { background: #e6efe0; border-left: 4px solid #6f9a5b; color: #2f4a25; }
.ifc-lock { display: flex; align-items: center; gap: 12px; max-width: none; }
.ifc-lock .button { margin-left: auto; }

/* Label filter bar above the Tracks list */
.ifc-labelbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; align-items: center; }
.ifc-labelbar > a, .ifc-lb { border: 1px solid #d9d5cc; border-radius: 14px; background: #fff; font-size: 12px; overflow: hidden; display: inline-flex; }
.ifc-labelbar a { padding: 3px 10px; color: #22292a; text-decoration: none !important; }
.ifc-labelbar a b { color: #8a9893; font-weight: 600; margin-left: 2px; }
.ifc-labelbar a:hover { background: #fbe3d8; }
.ifc-labelbar > a.on, .ifc-lb.on > a:first-child { background: #3d4a46; color: #fff; }
.ifc-labelbar > a.on b, .ifc-lb.on > a:first-child b { color: #f6c9b6; }
.ifc-lb a.new { border-left: 1px solid #d9d5cc; color: #6b3324; background: #fdf3ee; }
.ifc-lb a.new.on { background: #e9967f; color: #fff; }

/* Tracklist builder panel */
.ifc-addtl { border: 1px solid #d9d5cc; background: #fff; color: #3d4a46; border-radius: 8px; width: 26px; height: 22px; padding: 0;
  cursor: pointer; font-size: 13px; line-height: 1; }
.ifc-addtl:hover { background: #fbe3d8; border-color: #e9967f; }
.ifc-addtl.in { background: #dde9d5; border-color: #b9cfae; color: #2f4a25; }
.ifc-builder { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; z-index: 50; transform: translateX(340px); transition: transform .2s;
  background: var(--body-bg, #fff); border-left: 1px solid var(--hairline-color); box-shadow: -8px 0 24px rgba(0,0,0,.08); }
.ifc-builder.open { transform: none; }
body.ifc-builder-open { padding-right: 340px; box-sizing: border-box; }
.ifc-builder .create[hidden], .ifc-builder [hidden] { display: none !important; }
.ifc-builder-tab { position: absolute; left: -44px; top: 140px; width: 44px; padding: 12px 0; writing-mode: vertical-rl; transform: rotate(180deg);
  background: #3d4a46; color: #fff; border: 0; border-radius: 0 10px 10px 0; cursor: pointer; font-weight: 600; font-size: 13px; }
.ifc-builder-tab .n { background: #e9967f; border-radius: 9px; padding: 4px 2px; margin-top: 6px; display: inline-block; }
.ifc-builder-body { height: 100%; overflow: auto; padding: 14px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
.ifc-builder .row { display: flex; gap: 6px; } .ifc-builder .row select { flex: 1; min-width: 0; }
.ifc-builder .create { display: flex; flex-direction: column; gap: 6px; background: var(--darkened-bg, #f6f4f0); padding: 8px; border-radius: 8px; }
.ifc-builder .head { font-size: 12px; color: var(--body-quiet-color); }
.ifc-builder .items { margin: 0; padding: 0; list-style: none; counter-reset: n; }
.ifc-builder .items li { counter-increment: n; display: flex; align-items: center; gap: 6px; padding: 5px 4px; border-bottom: 1px solid var(--hairline-color);
  font-size: 12px; background: var(--body-bg, #fff); cursor: grab; }
.ifc-builder .items li::before { content: counter(n); width: 20px; text-align: right; color: var(--body-quiet-color); }
.ifc-builder .items li.drag { opacity: .4; }
.ifc-builder .items .h { color: #b5b0a6; } .ifc-builder .items .t { flex: 1; }
.ifc-builder .items .x { border: 0; background: transparent; color: #9a958c; cursor: pointer; font-size: 15px; }
.ifc-builder .items .x:hover { color: #c4566b; }
.ifc-builder .open { text-align: center; }

/* Undo toast and the "unsaved changes" dialog */
.ifc-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); z-index: 100; background: #262f2c; color: #fff;
  padding: 10px 14px 10px 18px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 14px; transition: transform .2s;
  display: flex; align-items: center; gap: 12px; }
.ifc-toast.show { transform: translate(-50%, 0); }
.ifc-toast button { background: #e9967f; color: #262f2c; border: 0; border-radius: 8px; padding: 5px 10px; font-weight: 600; cursor: pointer; }
.ifc-modal { position: fixed; inset: 0; z-index: 200; background: rgba(20,26,24,.45); display: flex; align-items: center; justify-content: center; }
.ifc-modal-card { background: var(--body-bg, #fff); color: var(--body-fg); border-radius: 16px; padding: 22px 24px; width: min(420px, 92vw);
  box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.ifc-modal-card h3 { margin: 0 0 6px; font-size: 17px; }
.ifc-modal-card p { margin: 0 0 16px; color: var(--body-quiet-color); }
.ifc-modal-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

/* Tabs (Social designs / Playlist adds) */
.ifc-tabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 2px solid var(--hairline-color); }
.ifc-tabs a { padding: 9px 16px; border-radius: 10px 10px 0 0; text-decoration: none !important; color: var(--body-quiet-color); font-weight: 600; margin-bottom: -2px; }
.ifc-tabs a.on { background: var(--body-bg, #fff); color: var(--body-fg); border: 2px solid var(--hairline-color); border-bottom-color: var(--body-bg, #fff); }

/* Left menu: six areas */
#nav-sidebar.ifc-menu { padding: 10px 10px 30px; }
.ifc-menu-area { margin: 0 0 12px; background: var(--body-bg, #fff); border-radius: 12px; padding: 6px 0 8px; box-shadow: 0 1px 0 var(--hairline-color); }
.ifc-menu-head { font-family: var(--ifc-heading); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ifc-bos-donker, #262f2c); padding: 6px 14px 4px; }
.ifc-menu-area.on .ifc-menu-head { color: var(--ifc-wolk, #c4566b); }
.ifc-menu a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 14px 5px 36px; font-size: 14px;
  color: var(--body-fg) !important; text-decoration: none !important; border-left: 3px solid transparent; }
.ifc-menu a:hover { background: rgba(233,150,127,.10); }
.ifc-menu a.on { background: #fbe3d8; border-left-color: #e9967f; font-weight: 600; }
.ifc-menu a b { background: #e9967f; color: #262f2c; border-radius: 10px; padding: 0 7px; font-size: 11px; line-height: 18px; }

/* Dashboard: Today + areas */
.ifc-today .ifc-h { font-size: 20px; margin: 0 0 12px; }
.ifc-today-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ifc-today-card { display: flex; flex-direction: column; gap: 2px; background: var(--body-bg, #fff); border: 1px solid var(--hairline-color);
  border-left: 5px solid #e9967f; border-radius: 12px; padding: 12px 14px; text-decoration: none !important; color: var(--body-fg) !important; }
.ifc-today-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.07); }
.ifc-today-card .i { font-size: 20px; } .ifc-today-card b { font-size: 26px; line-height: 1.1; font-family: var(--ifc-heading); }
.ifc-today-card span:last-child { font-size: 13px; color: var(--body-quiet-color); }
.ifc-today-card.done { border-left-color: #b9cfae; opacity: .75; } .ifc-today-card.done b { color: #2f5a47; }
.ifc-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 18px; }
.ifc-area-card { background: var(--body-bg, #fff); border: 1px solid var(--hairline-color); border-radius: 14px; padding: 12px 16px 14px; }
.ifc-area-card h3 { margin: 0 0 8px; font-size: 15px; }
.ifc-area-card a { display: block; padding: 3px 0; font-size: 14px; }
.ifc-area-card a b { background: #e9967f; color: #262f2c; border-radius: 10px; padding: 0 7px; font-size: 11px; }

/* Today as a to-do list */
.ifc-todo { background: var(--body-bg, #fff); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 0 var(--hairline-color); margin-bottom: 20px; max-width: 900px; }
.ifc-todo-row { display: flex; align-items: center; gap: 18px; padding: 14px 22px; border-bottom: 1px solid var(--hairline-color);
  font-size: 18px; color: var(--body-fg) !important; text-decoration: none !important; }
.ifc-todo-row:last-child { border-bottom: 0; }
.ifc-todo-row:hover { background: rgba(233,150,127,.08); }
.ifc-todo-row .dot { width: 14px; height: 14px; border-radius: 50%; background: #e9967f; flex: none; }
.ifc-todo-row.urgent .dot { background: #c4566b; } .ifc-todo-row.done .dot { background: #8fb3a2; }
.ifc-todo-row .n { font: 700 28px/1 var(--ifc-heading); width: 70px; } .ifc-todo-row .l { flex: 1; font-weight: 600; }
.ifc-todo-row .go { color: var(--ifc-wolk, #c4566b); font-size: 15px; font-weight: 600; }
.ifc-todo-row.done { color: var(--body-quiet-color) !important; } .ifc-todo-row.done .n { color: #2f5a47; }

/* Photo permission note (only for you) */
.ifc-photo-note { display: inline-block; font-size: 11px; border-radius: 10px; padding: 1px 7px; background: #f0ede7; color: #5d6866; white-space: nowrap; }
.ifc-photo-note.no { background: #fbe7ea; color: #8c2a3a; font-weight: 600; }

/* Videos list: compact */
body.model-video.change-list td.field-ch, body.model-video.change-list td.field-track_count,
body.model-video.change-list td.field-watch { width: 1%; white-space: nowrap; text-align: center; }
body.model-video.change-list td.field-published_date { width: 1%; white-space: nowrap; }