/* ============================================================
   HEX SERWIS · ORGANIZER PRACY v3.0
   base.css — fundament całego systemu
   
   Zawiera:
     1. @font-face
     2. Design tokens (CSS variables)
     3. Reset
     4. Typografia bazowa
     5. Komponenty bazowe (przyciski, pola, odznaki, karty)
     6. Narzędziowe klasy pomocnicze
     7. Animacje
   
   Ładuj na każdej stronie (www i CRM).
   Nie zawiera stylów specyficznych dla www ani CRM —
   te są w www.css i crm.css.
   ============================================================ */


/* ████████████████████████████████████████████████████████████
   1. CZCIONKI
   ████████████████████████████████████████████████████████████ */

/* ── Plus Jakarta Sans ── */
@font-face {
    font-family: 'PlusJakartaSans';
    src: url(/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-ExtraLight.ttf) format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PlusJakartaSans';
    src: url(/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-ExtraLightItalic.ttf) format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'PlusJakartaSans';
    src: url(/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Light.ttf) format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PlusJakartaSans';
    src: url(/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-LightItalic.ttf) format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'PlusJakartaSans';
    src: url(/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PlusJakartaSans';
    src: url(/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Italic.ttf) format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'PlusJakartaSans';
    src: url(/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Medium.ttf) format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PlusJakartaSans';
    src: url(/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-MediumItalic.ttf) format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'PlusJakartaSans';
    src: url(/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-SemiBold.ttf) format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PlusJakartaSans';
    src: url(/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-SemiBoldItalic.ttf) format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'PlusJakartaSans';
    src: url(/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Bold.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PlusJakartaSans';
    src: url(/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-BoldItalic.ttf) format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'PlusJakartaSans';
    src: url(/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-ExtraBold.ttf) format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PlusJakartaSans';
    src: url(/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-ExtraBoldItalic.ttf) format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}


/* ── Inter ── */
@font-face {
    font-family: 'Inter';
    src: url(/fonts/Inter/static/Inter-Thin.ttf) format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url(/fonts/Inter/static/Inter-ThinItalic.ttf) format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url(/fonts/Inter/static/Inter-ExtraLight.ttf) format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url(/fonts/Inter/static/Inter-ExtraLightItalic.ttf) format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url(/fonts/Inter/static/Inter-Light.ttf) format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url(/fonts/Inter/static/Inter-LightItalic.ttf) format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url(/fonts/Inter/static/Inter-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url(/fonts/Inter/static/Inter-Italic.ttf) format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url(/fonts/Inter/static/Inter-Medium.ttf) format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url(/fonts/Inter/static/Inter-MediumItalic.ttf) format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url(/fonts/Inter/static/Inter-SemiBold.ttf) format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url(/fonts/Inter/static/Inter-SemiBoldItalic.ttf) format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url(/fonts/Inter/static/Inter-Bold.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url(/fonts/Inter/static/Inter-BoldItalic.ttf) format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url(/fonts/Inter/static/Inter-ExtraBold.ttf) format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url(/fonts/Inter/static/Inter-ExtraBoldItalic.ttf) format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url(/fonts/Inter/static/Inter-Black.ttf) format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url(/fonts/Inter/static/Inter-BlackItalic.ttf) format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}


/* ── JetBrains Mono ── */
@font-face {
    font-family: 'JetBrainsMono';
    src: url(/fonts/JetBrains_Mono/static/JetBrainsMono-Thin.ttf) format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrainsMono';
    src: url(/fonts/JetBrains_Mono/static/JetBrainsMono-ThinItalic.ttf) format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrainsMono';
    src: url(/fonts/JetBrains_Mono/static/JetBrainsMono-ExtraLight.ttf) format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrainsMono';
    src: url(/fonts/JetBrains_Mono/static/JetBrainsMono-ExtraLightItalic.ttf) format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrainsMono';
    src: url(/fonts/JetBrains_Mono/static/JetBrainsMono-Light.ttf) format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrainsMono';
    src: url(/fonts/JetBrains_Mono/static/JetBrainsMono-LightItalic.ttf) format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrainsMono';
    src: url(/fonts/JetBrains_Mono/static/JetBrainsMono-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrainsMono';
    src: url(/fonts/JetBrains_Mono/static/JetBrainsMono-Italic.ttf) format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrainsMono';
    src: url(/fonts/JetBrains_Mono/static/JetBrainsMono-Medium.ttf) format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrainsMono';
    src: url(/fonts/JetBrains_Mono/static/JetBrainsMono-MediumItalic.ttf) format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrainsMono';
    src: url(/fonts/JetBrains_Mono/static/JetBrainsMono-SemiBold.ttf) format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrainsMono';
    src: url(/fonts/JetBrains_Mono/static/JetBrainsMono-SemiBoldItalic.ttf) format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrainsMono';
    src: url(/fonts/JetBrains_Mono/static/JetBrainsMono-Bold.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrainsMono';
    src: url(/fonts/JetBrains_Mono/static/JetBrainsMono-BoldItalic.ttf) format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrainsMono';
    src: url(/fonts/JetBrains_Mono/static/JetBrainsMono-ExtraBold.ttf) format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrainsMono';
    src: url(/fonts/JetBrains_Mono/static/JetBrainsMono-ExtraBoldItalic.ttf) format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}


/* ── Nunito Sans (variable font) ── */
@font-face {
    font-family: 'Nunito Sans';
    src: url(/Fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf) format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nunito Sans';
    src: url(/Fonts/Nunito_Sans/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght.ttf) format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ── Oxygen ── */
@font-face {
    font-family: 'Oxygen';
    src: url(/Fonts/Oxygen/Oxygen-Light.ttf) format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Oxygen';
    src: url(/Fonts/Oxygen/Oxygen-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Oxygen';
    src: url(/Fonts/Oxygen/Oxygen-Bold.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── Open Sans (variable font) ── */
@font-face {
    font-family: 'Open Sans';
    src: url(/Fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf) format('truetype');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url(/Fonts/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.ttf) format('truetype');
    font-weight: 300 800;
    font-style: italic;
    font-display: swap;
}

/* ── Montserrat (variable font) ── */
@font-face {
    font-family: 'Montserrat';
    src: url(/Fonts/Montserrat/Montserrat-VariableFont_wght.ttf) format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url(/Fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf) format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}


/* ████████████████████████████████████████████████████████████
   2. DESIGN TOKENS
   Jeden centralny punkt definicji — zmień tu, zmienia się wszędzie.
   ████████████████████████████████████████████████████████████ */

:root {

    /* ── Typografia ── */
    --font-ui:   'PlusJakartaSans', sans-serif;  /* nagłówki, przyciski, etykiety, nawigacja */
    --font-body: 'Inter', sans-serif;            /* treść, tabele, opisy, dane */
    --font-mono: 'JetBrainsMono', monospace;     /* kody, ID zleceń, statusy, XP, znaczniki */

    /* ── Kolory — Akcent (niezmienne) ── */
    --color-primary:       #005aff;
    --color-primary-hover: #0044c2;
    --color-primary-dark:  #00318f;
    --color-primary-light: rgba(0, 90, 255, 0.08);
    --color-primary-glow:  rgba(0, 90, 255, 0.18);

    /* ── Kolory — Neutralne ── */
    --color-black:      #000000;
    --color-gray-900:   #0a0f1e;   /* najciemniejszy tekst */
    --color-gray-800:   #1a1f36;
    --color-gray-700:   #333333;   /* tekst główny */
    --color-gray-600:   #4b5563;
    --color-gray-500:   #6b7280;   /* tekst pomocniczy / muted */
    --color-gray-400:   #9ca3af;
    --color-gray-300:   #c2c2c2;   /* obramowania */
    --color-gray-200:   #e5e7eb;   /* subtelne obramowania */
    --color-gray-100:   #f4f6fb;   /* tło sekcji, inputów */
    --color-gray-50:    #f9fafb;   /* najjaśniejsze tło */
    --color-white:      #ffffff;

    /* ── Kolory — Semantyczne ── */
    --color-success:        #28cd41;
    --color-success-hover:  #06a558;
    --color-success-light:  rgba(40, 205, 65, 0.10);

    --color-error:          #ff3b30;
    --color-error-hover:    #d9261c;
    --color-error-light:    rgba(255, 59, 48, 0.10);

    --color-warning:        #ffaa00;
    --color-warning-hover:  #d98f00;
    --color-warning-light:  rgba(255, 170, 0, 0.10);

    --color-info:           #00b4d8;
    --color-info-light:     rgba(0, 180, 216, 0.10);

    /* ── Kolory — RPG (specyficzne dla CRM) ── */
    --color-xp:         #ffca28;
    --color-xp-light:   rgba(255, 202, 40, 0.12);
    --color-coin:       #ff9800;
    --color-coin-light: rgba(255, 152, 0, 0.12);
    --color-level:      #ce93d8;
    --color-level-light:rgba(206, 147, 216, 0.12);

    /* ── Tło i powierzchnie ── */
    --bg-page:      #f4f6fb;   /* tło całej strony */
    --bg-surface:   #ffffff;   /* karty, panele */
    --bg-subtle:    #f9fafb;   /* zagłębione sekcje */
    --bg-overlay:   rgba(0, 0, 0, 0.45);

    /* ── Obramowania ── */
    --border-color:       rgba(0, 0, 0, 0.08);
    --border-color-mid:   #e5e7eb;
    --border-color-dark:  #c2c2c2;
    --border-radius-sm:   8px;
    --border-radius-md:   12px;
    --border-radius-lg:   16px;
    --border-radius-xl:   24px;
    --border-radius-full: 9999px;

    /* ── Cienie ── */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);
    --shadow-primary: 0 4px 20px rgba(0, 90, 255, 0.25);

    /* ── Spacing (skala 8px) ── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ── Typografia — rozmiary ── */
    --text-xs:   0.625rem;   /* 10px — etykiety mono, tagi */
    --text-sm:   0.75rem;    /* 12px — helper text, podpisy */
    --text-base: 0.875rem;   /* 14px — treść tabeli, dane */
    --text-md:   1rem;       /* 16px — tekst główny */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px — nagłówki sekcji */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  2rem;       /* 32px */
    --text-4xl:  2.5rem;     /* 40px — duże nagłówki */

    /* ── Przejścia ── */
    --transition-fast:   all 0.15s ease;
    --transition-base:   all 0.20s ease;
    --transition-slow:   all 0.35s ease;
    --ease-out-cubic:    cubic-bezier(0.33, 1, 0.68, 1);
    --ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-index (hierarchia warstw) ── */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;
    --z-tooltip:  600;
}


/* ████████████████████████████████████████████████████████████
   3. RESET
   ████████████████████████████████████████████████████████████ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    height: 100%;
    scrollbar-gutter: stable;
}

body {
    background-color: var(--bg-page);
    color: var(--color-gray-700);
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    line-height: 1.6;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Resetuj style iOS dla inputów */
input,
textarea,
select,
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="file"] {
    display: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

ul,
ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}

/* ████████████████████████████████████████████████████████████
   4. TYPOGRAFIA BAZOWA
   ████████████████████████████████████████████████████████████ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-ui);
    font-weight: 800;
    color: var(--color-black);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl);  }
h5 { font-size: var(--text-lg);  }
h6 { font-size: var(--text-md);  }

p {
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.7;
    color: var(--color-gray-700);
}

/* Klasy pomocnicze typografii */
.text-ui   { font-family: var(--font-ui);   }
.text-body { font-family: var(--font-body); }
.text-mono { font-family: var(--font-mono); }

.text-xs   { font-size: var(--text-xs);   }
.text-sm   { font-size: var(--text-sm);   }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md);   }
.text-lg   { font-size: var(--text-lg);   }
.text-xl   { font-size: var(--text-xl);   }
.text-2xl  { font-size: var(--text-2xl);  }

.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }

.text-primary { color: var(--color-primary); }
.text-muted   { color: var(--color-gray-500); }
.text-black   { color: var(--color-black); }
.text-success { color: var(--color-success); }
.text-error   { color: var(--color-error); }
.text-warning { color: var(--color-warning); }

.uppercase { text-transform: uppercase; }
.tracking-wide  { letter-spacing: 0.08em; }
.tracking-wider { letter-spacing: 0.15em; }
.tracking-mono  { letter-spacing: 0.12em; }


/* ████████████████████████████████████████████████████████████
   5. KOMPONENTY BAZOWE
   ████████████████████████████████████████████████████████████ */

/* ── Przyciski ── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--border-radius-lg);
    border: 1.5px solid transparent;
    padding: var(--space-3) var(--space-6);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-base);
    outline: none;
    position: relative;
    overflow: hidden;
}

.btn:active {
    transform: scale(0.97);
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Rozmiary przycisków */
.btn-sm {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--border-radius-md);
}

.btn-lg {
    font-size: var(--text-base);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--border-radius-xl);
}

.btn-full {
    width: 100%;
}

/* Warianty kolorystyczne */
.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    box-shadow: 0 6px 28px rgba(0, 90, 255, 0.35);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--color-white);
    border-color: var(--border-color-dark);
    color: var(--color-gray-700);
}

.btn-secondary:hover {
    border-color: var(--color-gray-700);
    background: var(--color-gray-100);
}

.btn-success {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
}

.btn-success:hover {
    background: var(--color-success-hover);
    border-color: var(--color-success-hover);
}

.btn-danger {
    background: var(--color-error);
    border-color: var(--color-error);
    color: var(--color-white);
}

.btn-danger:hover {
    background: var(--color-error-hover);
    border-color: var(--color-error-hover);
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--color-gray-600);
}

.btn-ghost:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

/* Stan ładowania — użycie w HTML:
   <button class="btn btn-primary loading">
     <span class="btn-text">Wejdź do systemu</span>
     <span class="btn-loader">
       <span class="loader">
         <span class="loader-dot"></span>
         <span class="loader-dot"></span>
         <span class="loader-dot"></span>
       </span>
     </span>
   </button>
*/
.btn.loading {
    pointer-events: none;
    opacity: 0.75;
}

.btn.loading .btn-text {
    opacity: 0;
}

.btn .btn-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.btn.loading .btn-loader {
    opacity: 1;
}


/* ── Pola formularza ── */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    position: relative;
}

.field-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-black);
    margin-left: 2px;
}

.field-input,
.field-select,
.field-textarea {
    width: 100%;
    background: var(--color-gray-100);
    border: 1.5px solid var(--border-color-mid);
    border-radius: var(--border-radius-lg);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-gray-700);
    outline: none;
    transition: var(--transition-base);
}

.field-input::placeholder,
.field-textarea::placeholder {
    color: var(--color-gray-400);
}

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
    background: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-glow);
}

.field-input.is-error,
.field-select.is-error,
.field-textarea.is-error {
    border-color: var(--color-error);
    box-shadow: 0 0 0 4px var(--color-error-light);
}

.field-input.is-success,
.field-select.is-success {
    border-color: var(--color-success);
}

.field-error {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-error);
    letter-spacing: 0.05em;
    display: none;
    margin-left: 2px;
}

.field-error.show {
    display: block;
    animation: fadeSlideIn 0.2s ease;
}

.field-hint {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-left: 2px;
}

.field-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}


/* ── Odznaki / Badge ── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--border-radius-full);
    white-space: nowrap;
}

.badge-primary { background: var(--color-primary-light); color: var(--color-primary); }
.badge-success { background: var(--color-success-light); color: var(--color-success-hover); }
.badge-error   { background: var(--color-error-light);   color: var(--color-error); }
.badge-warning { background: var(--color-warning-light); color: var(--color-warning-hover); }
.badge-info    { background: var(--color-info-light);    color: var(--color-info); }
.badge-neutral { background: var(--color-gray-200);      color: var(--color-gray-600); }

/* Odznaki RPG */
.badge-xp     { background: var(--color-xp-light);    color: #b8860b; }
.badge-coin   { background: var(--color-coin-light);   color: #c17f00; }
.badge-level  { background: var(--color-level-light);  color: #8e24aa; }

/* Odznaki statusów zleceń */
.badge-status-new      { background: var(--color-primary-light);  color: var(--color-primary); }
.badge-status-assigned { background: rgba(108,10,255,.1);         color: #6c0aff; }
.badge-status-diag     { background: var(--color-warning-light);  color: var(--color-warning-hover); }
.badge-status-await    { background: rgba(255,140,0,.1);          color: #cc7000; }
.badge-status-lab      { background: var(--color-warning-light);  color: var(--color-warning-hover); }
.badge-status-waiting  { background: var(--color-info-light);     color: var(--color-info); }
.badge-status-recovery { background: rgba(241,91,181,.12);        color: #c4288e; }
.badge-status-accepted { background: rgba(40,205,65,.18);         color: #1a9e30; }
.badge-status-ready    { background: rgba(40,205,65,.12);         color: var(--color-success-hover); }
.badge-status-closed   { background: var(--color-gray-200);       color: var(--color-gray-600); }
.badge-status-cancelled{ background: var(--color-error-light);    color: var(--color-error); }
.badge-status-in-progress { background: var(--color-warning-light);  color: var(--color-warning-hover); }
.badge-status-done        { background: rgba(40,205,65,.12);         color: var(--color-success-hover); }


/* ── Karta ── */

.card {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-sm);
}

.card-body {
    padding: var(--space-6);
}

.card-header {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.card-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-color);
}


/* ── Tooltip błędu ── */

.tooltip-error {
    position: absolute;
    background: rgba(12, 12, 12, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--color-white);
    /*font-family: var(--font-mono);*/
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--border-radius-lg);
    white-space: nowrap;
    top: calc(100% + 8px);
    left: 0;
    z-index: var(--z-tooltip);
    animation: fadeSlideIn 0.2s ease;
    pointer-events: none;
}

.tooltip-error::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 16px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(12, 12, 12, 0.88);
}


/* ── Powiadomienie popup ── */

.popup-notification {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: var(--z-toast);
    background: rgba(12, 12, 12, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    text-align: center;
    pointer-events: none;
    animation: slideInRight 0.3s var(--ease-out-cubic);
}

.popup-notification.hide {
    display: none;
}

.popup-notification .text-success { color: var(--color-success); }
.popup-notification .text-error   { color: var(--color-error); }
.popup-notification .text-warning { color: var(--color-warning); }


/* ── Loader · Trzy kropki (dot pulse) ── */

.loader {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.loader-dot {
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    opacity: .3;
    animation: dotPulse 1.2s ease-in-out infinite;
}

.loader-dot:nth-child(1) { animation-delay: 0s;   }
.loader-dot:nth-child(2) { animation-delay: 0.2s; }
.loader-dot:nth-child(3) { animation-delay: 0.4s; }

/* Rozmiary */
.loader-sm .loader-dot { width: 4px; height: 4px; gap: 4px; }
.loader-lg .loader-dot { width: 8px; height: 8px; gap: 6px; }


/* ── Divider ── */

.divider {
    width: 100%;
    height: 1px;
    background: var(--border-color);
    border: none;
    margin: 0;
}

.divider-v {
    width: 1px;
    height: 100%;
    background: var(--border-color);
    flex-shrink: 0;
}


/* ── Avatar / Inicjały ── */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white);
    font-family: var(--font-ui);
    font-weight: 800;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.avatar-sm  { width: 28px;  height: 28px;  font-size: 0.6rem; }
.avatar-md  { width: 36px;  height: 36px;  font-size: 0.75rem; }
.avatar-lg  { width: 48px;  height: 48px;  font-size: 1rem; }
.avatar-xl  { width: 64px;  height: 64px;  font-size: 1.25rem; }


/* ── Etykieta sekcji (mono uppercase) ── */

.section-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gray-400);
}


/* ████████████████████████████████████████████████████████████
   6. KLASY POMOCNICZE
   ████████████████████████████████████████████████████████████ */

/* Flexbox */
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-end  { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* Display */
.hidden  { display: none !important; }
.block   { display: block; }
.inline  { display: inline; }

/* Szerokość */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* Margines auto */
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Pozycja */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* Kursor */
.cursor-pointer { cursor: pointer; }

/* Zaokrąglenia */
.rounded-sm   { border-radius: var(--border-radius-sm); }
.rounded-md   { border-radius: var(--border-radius-md); }
.rounded-lg   { border-radius: var(--border-radius-lg); }
.rounded-xl   { border-radius: var(--border-radius-xl); }
.rounded-full { border-radius: var(--border-radius-full); }

/* Tło */
.bg-white   { background: var(--color-white); }
.bg-page    { background: var(--bg-page); }
.bg-primary { background: var(--color-primary); }


/* ████████████████████████████████████████████████████████████
   7. ANIMACJE
   ████████████████████████████████████████████████████████████ */

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes dotPulse {
    0%, 80%, 100% { transform: scale(1);   opacity: .3; }
    40%           { transform: scale(1.4); opacity: 1;  }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

@keyframes popIn {
    from { transform: scale(0.8); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

@keyframes shake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-8px); }
    40%     { transform: translateX(8px); }
    60%     { transform: translateX(-5px); }
    80%     { transform: translateX(5px); }
}

/* Klasy animacji */
.anim-fade-in    { animation: fadeIn    0.25s ease forwards; }
.anim-slide-up   { animation: slideInUp 0.35s var(--ease-out-cubic) forwards; }
.anim-pop-in     { animation: popIn     0.30s var(--ease-out-cubic) forwards; }
.anim-pulse      { animation: pulse     1.5s ease infinite; }