/* ============================================================
   Pero theme — single source of truth for font + colours.
   Change these few variables to re-skin the whole app.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root {
    /* One font for the entire app. */
    --pero-font: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Peroweb core palette (#405189 blue). */
    --pero-primary: #405189;
    --pero-primary-hover: #364574;
    --pero-accent: #f5b301;

    /* Sidebar / topbar (overrides theme.css so the whole shell is blue). */
    --sidebar-bg-color: #405189;
    --sidebar-menu-color: #abb9e8;
    --sidebar-menu-hover-color: #eae7e7;
    --sidebar-menu-active-color: #fff;
    --sidebar-menu-icon-color: #abb9e8;
    --sidebar-menu-header-color: #dad9d9;
    --sidebar-footer-bg-color: #405189;
    --topbar-bg-color: #fff;
    --topbar-menu-color: #405189;
    --sidebar-width: 220px;
    --sidebar-width-minus: -220px;

    /* Form inputs. */
    --form-input-bg-color: #fff;
    --form-input-disabled-bg-color: #f1f1f1;
    --form-input-border-color: #bab9b9;

    /* Dark auth-screen background. */
    --pero-auth-bg: linear-gradient(160deg, #2b3a63 0%, #405189 100%);

    /* Map Bootstrap's primary onto the brand. */
    --bs-primary: var(--pero-primary);
    --bs-primary-rgb: 64, 81, 137;
    --bs-border-radius: 0.575rem;
    --bs-link-color: var(--pero-primary);
    --bs-link-hover-color: var(--pero-primary-hover);
}

* { box-sizing: border-box; }
body { font-family: var(--pero-font); background-color: #f4f4f4; }

/* --- Primary buttons / surfaces re-themed off the variables --- */
.btn-primary {
    --bs-btn-bg: var(--pero-primary);
    --bs-btn-border-color: var(--pero-primary);
    --bs-btn-hover-bg: var(--pero-primary-hover);
    --bs-btn-hover-border-color: var(--pero-primary-hover);
    --bs-btn-active-bg: var(--pero-primary-hover);
    --bs-btn-active-border-color: var(--pero-primary-hover);
    --bs-btn-disabled-bg: var(--pero-primary);
    --bs-btn-disabled-border-color: var(--pero-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--pero-primary);
    --bs-btn-border-color: var(--pero-primary);
    --bs-btn-hover-bg: var(--pero-primary);
    --bs-btn-hover-border-color: var(--pero-primary);
    --bs-btn-active-bg: var(--pero-primary);
}
.bg-primary { background-color: var(--pero-primary) !important; }
.text-primary { color: var(--pero-primary) !important; }
.form-check-input:checked { background-color: var(--pero-primary); border-color: var(--pero-primary); }
a { color: var(--pero-primary); }
a:hover { color: var(--pero-primary-hover); }

/* --- Auth screens --- */
.bg-system-login { background: var(--pero-auth-bg); }
.text-accent { color: var(--pero-accent); }

/* Logo badge: white rounded card so a dark/coloured logo reads on the dark bg. */
.pero-auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 16px;
    padding: 8px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.pero-auth-logo img { max-height: 36px; width: auto; display: block; }

/* --- Shared flash alerts (partials/flash.php) --- */
.pero-alert {
    border: 0;
    border-left: 4px solid currentColor;
    padding: .8rem 1rem;
    gap: .6rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    animation: pero-flash-in .25s ease-out;
    font-size: 14px;
}
.pero-alert .pero-alert-icon { font-size: 1.15rem; line-height: 1.4; flex-shrink: 0; }
.pero-alert.alert-success { color: #0f7b47; background: #e9f7f0; }
.pero-alert.alert-danger  { color: #b42318; background: #fdecea; }
.pero-alert .btn-close { padding: 0px; }
.alert-dismissible .btn-close { top: 10px; right: 10px; }
@keyframes pero-flash-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.table > :not(caption) > tr > td {
    padding-block: .2rem;
}