/* ==========================================================================
   MAZDA — Admin panel brand CSS
   Zastępuje client_type.css + client.css (wskazywane przez css.client w mazda.yaml).
   Zawiera: @font-face MazdaType, CSS variables override, AdminLTE/Bootstrap overrides.
   Primary color: #91092d | Hover: #b30f3a | Sidebar: #222222 | Navbar: #fff
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. @font-face — MazdaType
   -------------------------------------------------------------------------- */

/* LIGHT — brak pliku light, fallback do regular */
@font-face {
    font-family: 'MazdaType';
    src: url('/dist/css/fonts/mazda_font/MazdaType-Regular.woff2') format('woff2'),
         url('/dist/css/fonts/mazda_font/MazdaType-Regular.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* REGULAR */
@font-face {
    font-family: 'MazdaType';
    src: url('/dist/css/fonts/mazda_font/MazdaType-Regular.woff2') format('woff2'),
         url('/dist/css/fonts/mazda_font/MazdaType-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* MEDIUM */
@font-face {
    font-family: 'MazdaType';
    src: url('/dist/css/fonts/mazda_font/MazdaType-Medium.woff2') format('woff2'),
         url('/dist/css/fonts/mazda_font/MazdaType-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* BOLD */
@font-face {
    font-family: 'MazdaType';
    src: url('/dist/css/fonts/mazda_font/MazdaType-Bold.woff2') format('woff2'),
         url('/dist/css/fonts/mazda_font/MazdaType-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ITALIC */
@font-face {
    font-family: 'MazdaType';
    src: url('/dist/css/fonts/mazda_font/MazdaType-Italic.woff2') format('woff2'),
         url('/dist/css/fonts/mazda_font/MazdaType-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* MEDIUM ITALIC */
@font-face {
    font-family: 'MazdaType';
    src: url('/dist/css/fonts/mazda_font/MazdaType-MediumItalic.woff2') format('woff2'),
         url('/dist/css/fonts/mazda_font/MazdaType-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* BOLD ITALIC */
@font-face {
    font-family: 'MazdaType';
    src: url('/dist/css/fonts/mazda_font/MazdaType-BoldItalic.woff2') format('woff2'),
         url('/dist/css/fonts/mazda_font/MazdaType-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. CSS Custom Properties — MAZDA overrides
   -------------------------------------------------------------------------- */

:root {
    --main-color: #91092d;          /* MAZDA dark red (primary) */
    --main-color2: #b30f3a;         /* jaśniejszy MAZDA red (hover/aktywny) */
    --main-font: 'MazdaType';
    --client-main-color: #91092d;

    --color-gray: #9ab4bb;          /* neutral gray — bez zmian */
    --color-light-gray: #ecf0f5;    /* bardzo jasny gray — bez zmian */
    --color-black: #000000;         /* true black — bez zmian */
    --color-white: #FFFFFF;         /* true white — bez zmian */
    --color-brown: #91092d;         /* MAZDA primary */
    --color-light-brown: #b30f3a;   /* MAZDA hover */
    --color-line: #020a0d;          /* subtelne linie — bez zmian */
    --color-line-gray: #f4f5f7;     /* jasne separatory — bez zmian */
}

/* --------------------------------------------------------------------------
   3. Font — body i elementy formularzy
   -------------------------------------------------------------------------- */

body {
    font-family: var(--main-font), Verdana, Geneva, sans-serif;
}

input, select, textarea, button {
    font-family: var(--main-font), Verdana, Geneva, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'MazdaType', sans-serif;
}

/* --------------------------------------------------------------------------
   4. AdminLTE — sidebar i nawigacja
   -------------------------------------------------------------------------- */

/* Sidebar — kolor tła (lewa kolumna) */
.skin-blue .main-sidebar,
.skin-blue .left-side {
    background-color: #222222;
}

/* Sidebar header/logo obszar */
.skin-blue .main-header .logo {
    background-color: var(--main-color);
}

.skin-blue .main-header .logo:hover {
    background-color: var(--main-color2);
}

/* Top navbar */
.skin-blue .main-header .navbar {
    background-color: var(--color-white);
}

.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:active,
.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:hover,
.skin-blue .main-header .navbar .nav .open > a:focus {
    background: var(--main-color2);
}

/* Sidebar toggle button */
.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background-color: var(--main-color2);
}

/* Sidebar menu — aktywny/hover element */
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a {
    border-left: 3px solid var(--main-color);
    background-color: var(--main-color2);
}

/* --------------------------------------------------------------------------
   5. Bootstrap — przyciski
   -------------------------------------------------------------------------- */

.btn,
.btn-xs,
.btn-primary,
.btn.btn-dark,
a.btn,
a.btn-dark,
a.btn.btn-dark,
.centered_layout_button {
    background-color: var(--main-color);
    border-color: #7a0826;
    color: var(--color-white);
}

.btn:hover,
.btn-primary:hover,
.btn.btn-primary:hover,
.btn.btn-dark:hover,
a.btn:hover,
a.btn-dark:hover,
a.btn.btn-dark:hover {
    background-color: var(--main-color2);
    border-color: var(--main-color);
    color: var(--color-white);
}

.btn:active,
.btn-primary:active,
.btn.btn-primary:active,
.btn.btn-dark:active,
a.btn:active,
a.btn-dark:active,
a.btn.btn-dark:active {
    background-color: #7a0826;
    border-color: #7a0826;
    color: var(--color-white);
}

.btn:focus,
.btn-primary:focus,
.btn.btn-dark:focus,
a.btn-dark:focus {
    background-color: var(--main-color);
    border-color: #7a0826;
    color: var(--color-white);
    outline: none;
}

/* --------------------------------------------------------------------------
   6. AdminLTE — box i widget kolory
   -------------------------------------------------------------------------- */

.box.box-primary {
    border-top-color: var(--main-color);
}

.box-primary > .box-header {
    background-color: var(--color-white);
    color: var(--color-white);
}

.box-primary > .box-header .box-title,
.box-primary > .box-header .btn {
    color: var(--color-white);
}

.box-header h3 {
    color: #444444;
}

/* --------------------------------------------------------------------------
   7. Tabs — aktywna zakładka
   -------------------------------------------------------------------------- */

.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--main-color) !important;
}

/* Vue.js tabs (data-v-82963a40) */
li.active[data-v-82963a40] > a,
li.active[data-v-82963a40] > a:hover,
li.active[data-v-82963a40] > a:focus {
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   8. Loader / spinner
   -------------------------------------------------------------------------- */

.lds-dual-ring:after {
    border: 6px solid var(--main-color);
    border-color: var(--main-color) transparent var(--main-color) transparent;
}

/* --------------------------------------------------------------------------
   9. Inne elementy
   -------------------------------------------------------------------------- */

.label-primary,
.badge-primary {
    background-color: var(--main-color);
}

.progress-bar-primary {
    background-color: var(--main-color);
}

.icheckbox_flat-blue.checked,
.iradio_flat-blue.checked {
    border-color: var(--main-color);
    background-color: var(--main-color);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

a:hover {
    color: var(--main-color);
}

.content-wrapper, .right-side {
    background-color: var(--color-light-gray);
}

/* --------------------------------------------------------------------------
   10. IE9+ fallback (media hack — CSS variables nie działają w IE)
   -------------------------------------------------------------------------- */

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
    .centered_layout_button { background-color: #91092d; }

    .skin-blue .sidebar-menu > li:hover > a,
    .skin-blue .sidebar-menu > li.active > a {
        border-left: 3px solid #91092d;
        background-color: #b30f3a !important;
    }

    .btn, .btn-xs, .btn-primary { background-color: #91092d; }
    .box.box-primary { border-top-color: #91092d; }
    .nav-tabs-custom > .nav-tabs > li.active { border-top-color: #91092d !important; }

    li.active[data-v-82963a40] > a,
    li.active[data-v-82963a40] > a:hover,
    li.active[data-v-82963a40] > a:focus {
        background-color: #91092d;
        border: 1px solid #91092d;
    }

    .lds-dual-ring:after {
        border: 6px solid #91092d;
        border-color: #91092d transparent #91092d transparent;
    }

    .btn:hover, .btn-primary:hover, .btn.btn-primary:hover,
    a.btn:hover, a.btn-dark:hover, .btn-dark:hover, a.btn.btn-dark:hover {
        background-color: #b30f3a !important;
    }

    .btn:active, .btn-primary:active, .btn.btn-primary:active,
    a.btn:active, a.btn-dark:active, .btn-dark:active, a.btn.btn-dark:active {
        background-color: #7a0826 !important;
    }
}