/* === CyfrowaSzkolaAI Utility Classes === */

/* Spacing */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-1 { margin-top: var(--cs-space-1) !important; }
.u-mt-2 { margin-top: var(--cs-space-2) !important; }
.u-mt-3 { margin-top: var(--cs-space-3) !important; }
.u-mt-4 { margin-top: var(--cs-space-4) !important; }
.u-mt-6 { margin-top: var(--cs-space-6) !important; }
.u-mt-8 { margin-top: var(--cs-space-8) !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-2 { margin-bottom: var(--cs-space-2) !important; }
.u-mb-4 { margin-bottom: var(--cs-space-4) !important; }
.u-mb-6 { margin-bottom: var(--cs-space-6) !important; }
.u-mb-8 { margin-bottom: var(--cs-space-8) !important; }
.u-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.u-p-0 { padding: 0 !important; }
.u-p-4 { padding: var(--cs-space-4) !important; }
.u-p-6 { padding: var(--cs-space-6) !important; }

/* Display */
.u-flex { display: flex !important; }
.u-inline-flex { display: inline-flex !important; }
.u-grid { display: grid !important; }
.u-hidden { display: none !important; }
.u-block { display: block !important; }

/* Flex helpers */
.u-flex-col { flex-direction: column !important; }
.u-items-center { align-items: center !important; }
.u-items-start { align-items: flex-start !important; }
.u-justify-center { justify-content: center !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-end { justify-content: flex-end !important; }
.u-gap-1 { gap: var(--cs-space-1) !important; }
.u-gap-2 { gap: var(--cs-space-2) !important; }
.u-gap-3 { gap: var(--cs-space-3) !important; }
.u-gap-4 { gap: var(--cs-space-4) !important; }
.u-gap-6 { gap: var(--cs-space-6) !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-flex-1 { flex: 1 !important; }

/* Width */
.u-w-full { width: 100% !important; }
.u-w-auto { width: auto !important; }
.u-max-w-sm  { max-width: 420px !important; }
.u-max-w-md  { max-width: 600px !important; }
.u-max-w-lg  { max-width: 800px !important; }
.u-max-w-xl  { max-width: 1024px !important; }

/* Text */
.u-text-xs   { font-size: var(--cs-text-xs) !important; }
.u-text-sm   { font-size: var(--cs-text-sm) !important; }
.u-text-base { font-size: var(--cs-text-base) !important; }
.u-text-lg   { font-size: var(--cs-text-lg) !important; }
.u-text-xl   { font-size: var(--cs-text-xl) !important; }
.u-text-2xl  { font-size: var(--cs-text-2xl) !important; }
.u-text-muted   { color: var(--cs-text-muted) !important; }
.u-text-secondary { color: var(--cs-text-secondary) !important; }
.u-text-primary-color { color: var(--cs-primary-light) !important; }
.u-text-success { color: var(--cs-success) !important; }
.u-text-danger  { color: var(--cs-danger) !important; }
.u-text-warning { color: var(--cs-warning) !important; }
.u-font-semibold { font-weight: var(--cs-font-semibold) !important; }
.u-font-bold     { font-weight: var(--cs-font-bold) !important; }
.u-text-center   { text-align: center !important; }
.u-text-right    { text-align: right !important; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Border & background */
.u-rounded    { border-radius: var(--cs-radius) !important; }
.u-rounded-lg { border-radius: var(--cs-radius-lg) !important; }
.u-rounded-full { border-radius: var(--cs-radius-full) !important; }
.u-border { border: 1px solid var(--cs-border) !important; }
.u-bg-elevated { background: var(--cs-bg-elevated) !important; }
.u-bg-card { background: var(--cs-bg-card) !important; }

/* Overflow */
.u-overflow-hidden { overflow: hidden !important; }
.u-overflow-auto   { overflow: auto !important; }

/* Position */
.u-relative { position: relative !important; }
.u-absolute { position: absolute !important; }

/* Opacity */
.u-opacity-50 { opacity: 0.5 !important; }
.u-opacity-0  { opacity: 0 !important; }

/* Cursor */
.u-cursor-pointer { cursor: pointer !important; }

/* Accessibility: skip to main content (WCAG 2.4.1) */
.skip-to-main-content {
    position: absolute;
    top: -9999px;
    left: 0.5rem;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: var(--rz-primary, #1976d2);
    color: #fff;
    border-radius: 0 0 4px 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: top 0.1s;
}
.skip-to-main-content:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Mobile helpers */
@media (max-width: 768px) {
    .u-hide-mobile { display: none !important; }
    .u-show-mobile { display: block !important; }
}
@media (min-width: 769px) {
    .u-hide-desktop { display: none !important; }
    .u-show-desktop { display: block !important; }
}