/* Stadt-Kino Horn CI, angewendet auf das Cino-Verwaltungstool.
   Werte aus dem CI-Handbuch (tokens/colors_and_type.css) übernommen. */
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
    --kino-red: #8F0C00;
    --kino-red-deep: #5C0700;
    --kino-red-bright: #B41E0C;
    --kino-black: #0B0808;
    --kino-black-soft: #14100F;
    --kino-charcoal: #1F1816;
    --kino-charcoal-2: #2B2220;
    --kino-cream: #F5EAD3;
    --kino-cream-soft: #EFE2C3;
    --kino-paper: #FDFCF7;
    --kino-gold: #C9A35A;
    --kino-gold-deep: #8E6F30;
    --kino-grey-900: #1A1414;
    --kino-grey-700: #3D3431;
    --kino-grey-500: #6E625D;
    --kino-grey-300: #B8ADA6;
    --kino-grey-100: #E7DFD3;

    /* Bootstrap liest diese Variablen direkt (5.3), Radius/Font/Grundfarben
       lassen sich so ohne Sass-Rebuild umziehen. */
    --bs-body-font-family: 'Work Sans', system-ui, -apple-system, Helvetica, Arial, sans-serif;
    --bs-body-bg: var(--kino-paper);
    --bs-body-color: var(--kino-grey-900);
    --bs-border-radius: 6px;
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: 10px;
    --bs-link-color: var(--kino-red);
    --bs-link-color-rgb: 143, 12, 0;
    --bs-link-hover-color: var(--kino-red-bright);
}

body {
    background: var(--kino-paper);
}

h1, h2, h3, h4, h5, .card-title {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Bootstraps Hover-/Active-Farben je Button sind zur Buildzeit fix verdrahtet,
   deshalb hier direkt statt über --bs-primary umzufärben. */
.btn-primary {
    background-color: var(--kino-red);
    border-color: var(--kino-red);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--kino-red-bright) !important;
    border-color: var(--kino-red-bright) !important;
}

/* Same story as .btn-primary above: Bootstrap hardcodes the active page's
   colors directly on .pagination as CSS variables, so a :root override has
   no effect — must win the cascade on the component itself. */
.page-item.active .page-link {
    background-color: var(--kino-red);
    border-color: var(--kino-red);
    color: #fff;
}

.navbar-kino {
    background-color: var(--kino-black) !important;
    border-bottom: 3px solid var(--kino-red);
}
.navbar-kino .navbar-brand img {
    height: 34px;
}
.navbar-kino .navbar-text,
.navbar-kino span {
    color: var(--kino-cream) !important;
}

.card {
    border-color: var(--kino-grey-100);
    box-shadow: 0 2px 6px rgba(11, 8, 8, 0.08);
}

.card-header-brand {
    background-color: var(--kino-red) !important;
    color: var(--kino-cream) !important;
    border-color: var(--kino-red) !important;
}
.card-header-brand .text-muted {
    color: rgba(245, 234, 211, 0.75) !important;
}

/* Counts that need attention (open requests/orders > 0) pulse in red. */
.blink-alert {
    color: var(--kino-red);
    animation: blink-alert 1.2s ease-in-out infinite;
}
@keyframes blink-alert {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.15; }
}
@media (prefers-reduced-motion: reduce) {
    .blink-alert { animation: none; }
}

.form-control:focus {
    border-color: var(--kino-red);
    box-shadow: 0 0 0 0.2rem rgba(143, 12, 0, 0.15);
}

a { transition: color 160ms cubic-bezier(0.65, 0, 0.35, 1); }

/* Fixed width so fee badges ("45%" … "99,9%") align in a column instead of
   each hugging its own text width. Must be `width` (not `min-width`) —
   longer values like "99,9%" would otherwise grow the badge past shorter
   ones ("45%"), leaving badges visibly different sizes in the same list. */
.badge-fee {
    display: inline-block;
    width: 3.5em;
    text-align: center;
    white-space: nowrap;
}