/*
  www/public/assets/app-overrides.css
  Purpose: stronger button / active-item shadows for light theme so controls are clearly visible
*/

:root {
    /* tweakable shadow colors for light theme */
    --override-btn-shadow-1: 0 8px 20px rgba(0, 0, 0, 0.12);
    --override-btn-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.08);
    --override-btn-outline-bg: #f8f9fa; /* subtle background for outline buttons so they read as buttons */
    --override-active-bg: rgba(0, 0, 0, 0.06);
    --override-active-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    --override-focus-ring: 0 0 0 0.18rem rgba(13, 110, 253, 0.12);
}

/* Apply only for light theme pages (explicit or default) */
body[data-theme="light"],
body:not([data-theme]) {
    /* Make all .btn more prominent by increasing shadow and subtle lift */
    .btn {
        /* stronger, multi-layer shadow for clear button appearance */
        box-shadow:
            var(--override-btn-shadow-1), var(--override-btn-shadow-2) !important;
        transform: translateZ(0); /* ensure GPU layer for crisp shadow */
        transition:
            box-shadow 160ms ease,
            transform 120ms ease,
            background-color 120ms ease;
    }

    /* Slightly lift on hover to emphasize clickability */
    .btn:hover,
    .btn:focus {
        box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.14),
            0 4px 10px rgba(0, 0, 0, 0.09) !important;
        transform: translateY(-2px);
        outline: none;
    }

    /* Make outline-style buttons look more like buttons (use subtle bg + shadow) */
    .btn.btn-outline-secondary,
    .btn.btn-outline-primary,
    .btn-outline-secondary,
    .btn-outline-primary,
    label.btn.btn-outline-secondary,
    label.btn.btn-outline-primary {
        background-color: var(--override-btn-outline-bg);
        color: inherit;
        border-color: rgba(0, 0, 0, 0.08);
        box-shadow: var(--override-btn-shadow-2) !important;
    }

    /* Stronger hover for outline buttons */
    .btn.btn-outline-secondary:hover,
    .btn.btn-outline-primary:hover,
    label.btn.btn-outline-secondary:hover,
    label.btn.btn-outline-primary:hover {
        background-color: #eef0f2;
        border-color: rgba(0, 0, 0, 0.12);
        box-shadow:
            0 10px 22px rgba(0, 0, 0, 0.12),
            0 3px 8px rgba(0, 0, 0, 0.06) !important;
        transform: translateY(-2px);
    }

    /* Primary button: keep color but strengthen shadow */
    .btn-primary {
        box-shadow:
            0 10px 24px rgba(0, 0, 0, 0.14),
            0 3px 8px rgba(0, 0, 0, 0.08) !important;
    }
    .btn-primary:hover,
    .btn-primary:focus {
        box-shadow:
            0 14px 32px rgba(0, 0, 0, 0.16),
            0 5px 12px rgba(0, 0, 0, 0.1) !important;
        transform: translateY(-2px);
    }

    /* Make small/inlined file input label (Załaduj) look like a real button as well */
    input[type="file"].d-none + label.btn,
    label.btn[for^="rodolider-db-"] {
        /* if labels used as file triggers */
        box-shadow: var(--override-btn-shadow-2) !important;
        background-color: var(--override-btn-outline-bg);
        border-color: rgba(0, 0, 0, 0.08);
    }

    /* Focus accessibility - keep a subtle ring on focus for keyboard users */
    .btn:focus-visible,
    label.btn:focus-visible {
        box-shadow:
            var(--override-btn-shadow-2), var(--override-focus-ring) !important;
    }

    /*
    Sidebar / nav active item in light mode:
    make active item look raised (clearer button-like appearance)
  */
    .nav-link.active {
        background-color: var(--override-active-bg) !important;
        box-shadow: var(--override-active-shadow) !important;
        color: rgba(0, 0, 0, 0.95) !important;
    }

    /* header nav link active - ensure top-right user link also has clearer appearance if active */
    .app-header .nav-link.active {
        background-color: transparent !important; /* keep header unobtrusive but add subtle shadow */
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06) !important;
        border-radius: 6px;
        color: rgba(0, 0, 0, 0.9) !important;
    }

    /* Buttons inside tables / small controls: increase shadow but keep compact */
    .btn.btn-sm,
    .btn.btn-xs,
    .btn.btn-compact {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
        transform: none;
    }

    /* Prevent shadows from being clipped by overflow parents */
    .app-wrapper,
    .app-main,
    .card,
    .app-sidebar,
    .sidebar-wrapper {
        overflow: visible !important;
    }
}

/* Reasonable dark theme parity (do not make shadows overly dark in dark mode) */

body[data-theme="dark"] .btn,
body[data-theme="dark"] .nav-link.active {
    /* keep existing dark theme look, do not override heavily */

    box-shadow: none !important;
}

/* Companies page: disable button animations for download/upload/active/switch controls */
body[data-theme="light"] a.btn[href*="/companies/download"],
body[data-theme="light"] form[action*="/companies/upload"] label.btn,
body[data-theme="light"] label.btn[for^="rodolider-db-"],
body[data-theme="light"] form[action*="/companies/switch"] .btn {
    transform: none !important;
    box-shadow: none !important;
    transition:
        background-color 120ms ease,
        color 120ms ease,
        border-color 120ms ease;
}

/* Keep hover simple (highlight without lift/animation) */
body[data-theme="light"] a.btn[href*="/companies/download"]:hover,
body[data-theme="light"] form[action*="/companies/upload"] label.btn:hover,
body[data-theme="light"] label.btn[for^="rodolider-db-"]:hover,
body[data-theme="light"] form[action*="/companies/switch"] .btn:hover {
    transform: none !important;
}

/* Subtle highlight for outline-secondary on hover in companies */
body[data-theme="light"]
    a.btn.btn-outline-secondary[href*="/companies/download"]:hover,
body[data-theme="light"]
    form[action*="/companies/upload"]
    label.btn.btn-outline-secondary:hover,
body[data-theme="light"]
    label.btn.btn-outline-secondary[for^="rodolider-db-"]:hover,
body[data-theme="light"]
    form[action*="/companies/switch"]
    .btn.btn-outline-secondary:hover {
    background-color: #eef0f2;
    border-color: rgba(0, 0, 0, 0.12);
}

/* Primary switch button: keep color, no lift */
body[data-theme="light"]
    form[action*="/companies/switch"]
    .btn.btn-primary:hover,
body[data-theme="light"]
    form[action*="/companies/switch"]
    .btn.btn-primary:focus {
    transform: none !important;
    box-shadow: none !important;
}