/* Highlight links inside changelist table cells */
td[class*="field-"] a {
    color: #039ab8 !important;
    text-decoration: none;
}

td[class*="field-"] a:hover {
    color: rgb(0 152 182) !important;
    text-decoration: underline;
}

th[class*="field-"] a {
    color: #039ab8 !important;
    text-decoration: none;
}

th[class*="field-"] a:hover {
    color: rgb(0 152 182) !important;
    text-decoration: underline;
}

/* Recent Actions: subtle theme-aligned color cues per action type. */
#recent-actions-module .actionlist li {
    border-left-width: 3px !important;
    position: relative;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

#recent-actions-module .actionlist li:hover {
    transform: translateX(2px);
}

#recent-actions-module .actionlist li.addlink {
    border-left-color: rgb(16 185 129);
    background-image: linear-gradient(to right, rgb(16 185 129 / 0.08), transparent 45%);
}

#recent-actions-module .actionlist li.changelink {
    border-left-color: rgb(0 190 227);
    background-image: linear-gradient(to right, rgb(0 190 227 / 0.10), transparent 45%);
}

#recent-actions-module .actionlist li.deletelink {
    border-left-color: rgb(244 63 94);
    background-image: linear-gradient(to right, rgb(244 63 94 / 0.08), transparent 45%);
}

#recent-actions-module .actionlist li::after {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 9999px;
    line-height: 1;
}

#recent-actions-module .actionlist li.addlink::after {
    content: 'added';
    background-color: rgb(16 185 129 / 0.15);
    color: rgb(4 120 87);
}

#recent-actions-module .actionlist li.changelink::after {
    content: 'changed';
    background-color: rgb(0 190 227 / 0.15);
    color: rgb(0 114 136);
}

#recent-actions-module .actionlist li.deletelink::after {
    content: 'deleted';
    background-color: rgb(244 63 94 / 0.15);
    color: rgb(190 18 60);
}

.dark #recent-actions-module .actionlist li.addlink::after {
    color: rgb(110 231 183);
}

.dark #recent-actions-module .actionlist li.changelink::after {
    color: rgb(133 227 248);
}

.dark #recent-actions-module .actionlist li.deletelink::after {
    color: rgb(253 164 175);
}

/* Reserve room on the first row so long object titles ellipsis-truncate
   before colliding with the action-type pill above. */
#recent-actions-module .actionlist li > div:first-child {
    padding-right: 4.5rem;
}

/* ---------------------------------------------------------------------------
   Admin homepage (app list) — subtle theme-aligned color cues per app group.
   Targets unfold's app_list_default.html structure: the visible card is the
   `.app-{name} > div` wrapper containing the table; rows are `tr.model-{name}`.
   Palette stays in the cyan/teal/blue family so it feels coherent, not loud.
   --------------------------------------------------------------------------- */

/* The visible card wrapper (unfold renders this as <div class="bg-base-50 ...">). */
.app-authtoken > div,
.app-auth > div,
.app-django_celery_results > div,
.app-etlapp > div {
    border-left-width: 3px !important;
    border-left-style: solid !important;
    transition: box-shadow 160ms ease, transform 160ms ease !important;
    position: relative;
}

.app-authtoken > div:hover,
.app-auth > div:hover,
.app-django_celery_results > div:hover,
.app-etlapp > div:hover {
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 14px rgb(0 190 227 / 0.10) !important;
}

/* Single accent color for every app group — primary cyan from the theme. */
.app-authtoken > div,
.app-auth > div,
.app-django_celery_results > div,
.app-etlapp > div {
    border-left-color: rgb(0 190 227) !important;
}

[class*="app-"] caption {
    background-image: linear-gradient(to right, rgb(0 190 227 / 0.12), transparent 65%) !important;
    border-radius: 4px;
    padding: 6px 10px !important;
}

/* Caption link: theme color on hover. */
[class*="app-"] caption a.section {
    transition: color 120ms ease;
}
[class*="app-"] caption a.section:hover {
    color: rgb(0 152 182) !important;
}

/* Model rows: hover background tint + link color shift. */
[class*="app-"] tr[class*="model-"] {
    transition: background-color 120ms ease;
}

[class*="app-"] tr[class*="model-"]:hover {
    background-color: rgb(0 190 227 / 0.06) !important;
}

[class*="app-"] tr[class*="model-"] th a {
    transition: color 120ms ease, padding-left 120ms ease;
}

[class*="app-"] tr[class*="model-"]:hover th a {
    color: rgb(0 152 182) !important;
    padding-left: 4px;
}

/* Add (+) button — tinted circle on hover so it reads as an action. */
[class*="app-"] tr[class*="model-"] a.addlink {
    border-radius: 9999px;
    padding: 4px;
    transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

[class*="app-"] tr[class*="model-"] a.addlink:hover {
    background-color: rgb(0 190 227 / 0.14) !important;
    color: rgb(0 114 136) !important;
    transform: scale(1.08);
}

/* Change/edit icon: same treatment, primary tint. */
[class*="app-"] tr[class*="model-"] a.changelink,
[class*="app-"] tr[class*="model-"] a.viewlink {
    border-radius: 9999px;
    padding: 4px;
    transition: background-color 120ms ease, color 120ms ease;
}

[class*="app-"] tr[class*="model-"] a.changelink:hover,
[class*="app-"] tr[class*="model-"] a.viewlink:hover {
    background-color: rgb(0 190 227 / 0.10) !important;
    color: rgb(0 114 136) !important;
}

/* Dark mode: lower-opacity tints so accents don't glow. */
.dark .app-authtoken > div:hover,
.dark .app-auth > div:hover,
.dark .app-django_celery_results > div:hover,
.dark .app-etlapp > div:hover {
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 14px rgb(0 190 227 / 0.14) !important;
}

.dark [class*="app-"] tr[class*="model-"]:hover {
    background-color: rgb(0 190 227 / 0.08) !important;
}

.dark [class*="app-"] caption {
    background-image: linear-gradient(to right, rgb(0 190 227 / 0.18), transparent 65%) !important;
}