/* ==========================================================================
   style.css - the last global sheet, loaded on every page by printCSSHeader()
   after Bootstrap and the design system (aca-tokens / aca-base / aca-shell).
   Only rules that no page sheet can own belong here.
   ========================================================================== */

::placeholder {
    color: var(--aca-muted);
    text-overflow: ellipsis;
}

/* wraps placeholders better if they don't fit */
input[placeholder] {
    text-overflow: ellipsis;
}

/* Add consistent margin between content in table cells */
table td > div:not(:last-child), .table td > div:not(:last-child) {
    margin-bottom: 0.25rem;
}

td {
    border: 1px var(--aca-line-strong) solid;
    padding: 5px;
}

input[type="button"]:hover,
input[type="submit"]:hover {
    color: var(--aca-orange);
}

/* Scrollable container with modern scrollbar */
.pre-scrollable {
    border-radius: var(--aca-radius-sm);
    background-color: var(--aca-surface);
}

.pre-scrollable::-webkit-scrollbar {
    width: 8px;
}

.pre-scrollable::-webkit-scrollbar-track {
    background: var(--aca-surface-2);
    border-radius: 4px;
}

.pre-scrollable::-webkit-scrollbar-thumb {
    background: var(--aca-line-strong);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.pre-scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--aca-muted);
}

/* =================================================================
   RESPONSIVE DESIGN - MOBILE BREAKPOINTS
   ================================================================= */