/**
 * utils.css — Segédosztályok új fejlesztésekhez
 * Kompatibilis a meglévő oldal stílusával, de nem írja felül azt.
 */

/* ============================================================
   CSS változók (color palette, spacing)
   ============================================================ */

:root {
    /* Színek */
    --u-color-primary:    #89C037;
    --u-color-secondary:  #6c757d;
    --u-color-success:    #28a745;
    --u-color-danger:     #dc3545;
    --u-color-warning:    #ffc107;
    --u-color-info:       #17a2b8;
    --u-color-light:      #f8f9fa;
    --u-color-dark:       #343a40;
    --u-color-white:      #ffffff;
    --u-color-muted:      #6c757d;

    /* Háttérszínek (világos változatok) */
    --u-bg-primary:   #c6e29c;
    --u-bg-success:   #d4edda;
    --u-bg-danger:    #f8d7da;
    --u-bg-warning:   #fff3cd;
    --u-bg-info:      #d1ecf1;
    --u-bg-light:     #f8f9fa;

    /* Border */
    --u-border-color:         #dee2e6;
    --u-border-primary:       #a4d161;
    --u-border-success:       #c3e6cb;
    --u-border-danger:        #f5c6cb;
    --u-border-warning:       #ffeeba;
    --u-border-info:          #bee5eb;
    --u-border-radius:        4px;
    --u-border-radius-sm:     2px;
    --u-border-radius-lg:     8px;
    --u-border-radius-full:   9999px;

    /* Spacing lépcső */
    --u-space-0: 0;
    --u-space-1: 4px;
    --u-space-2: 8px;
    --u-space-3: 16px;
    --u-space-4: 24px;
    --u-space-5: 32px;
    --u-space-6: 48px;

    /* Font méretek */
    --u-font-xs:   11px;
    --u-font-sm:   12px;
    --u-font-base: 14px;
    --u-font-lg:   16px;
    --u-font-xl:   20px;
    --u-font-2xl:  24px;
}


/* ============================================================
   PANEL / CARD / BOX
   Használat:
     <div class="u-panel">
       <div class="u-panel-header">Cím</div>
       <div class="u-panel-body">Tartalom</div>
       <div class="u-panel-footer">Lábléc</div>
     </div>
   ============================================================ */

.u-panel {
    background-color: var(--u-color-white);
    border: 1px solid var(--u-border-color);
    border-radius: var(--u-border-radius);
    margin-bottom: var(--u-space-3);
    overflow: hidden;
}

.u-panel-header {
    padding: 10px 14px;
    background-color: hsl(84, 55%, 95%);
    border-bottom: 1px solid var(--u-border-color);
    font-weight: bold;
    font-size: var(--u-font-base);
    color: var(--u-color-dark);
}

.u-panel-body {
    padding: 14px;
    font-size: var(--u-font-base);
}

.u-panel-footer {
    padding: 8px 14px;
    background-color: #f8f9fa;
    border-top: 1px solid var(--u-border-color);
    font-size: var(--u-font-sm);
    color: var(--u-color-muted);
}

/* Panel színvariánsok — a header kap hangsúlyos hátteret */
.u-panel.u-panel-primary .u-panel-header {
    background-color: var(--u-color-primary);
    border-color: var(--u-border-primary);
    color: var(--u-color-white);
}
.u-panel.u-panel-primary {
    border-color: var(--u-border-primary);
}

.u-panel.u-panel-success .u-panel-header {
    background-color: var(--u-color-success);
    border-color: var(--u-border-success);
    color: var(--u-color-white);
}
.u-panel.u-panel-success {
    border-color: var(--u-border-success);
}

.u-panel.u-panel-danger .u-panel-header {
    background-color: var(--u-color-danger);
    border-color: var(--u-border-danger);
    color: var(--u-color-white);
}
.u-panel.u-panel-danger {
    border-color: var(--u-border-danger);
}

.u-panel.u-panel-warning .u-panel-header {
    background-color: var(--u-color-warning);
    border-color: var(--u-border-warning);
    color: var(--u-color-dark);
}
.u-panel.u-panel-warning {
    border-color: var(--u-border-warning);
}

.u-panel.u-panel-info .u-panel-header {
    background-color: var(--u-color-info);
    border-color: var(--u-border-info);
    color: var(--u-color-white);
}
.u-panel.u-panel-info {
    border-color: var(--u-border-info);
}


/* ============================================================
   ALERT — Figyelmeztető üzenetek
   Használat:
     <div class="u-alert u-alert-success">Sikeres művelet.</div>
     <div class="u-alert u-alert-danger">Hiba történt.</div>
   ============================================================ */

.u-alert {
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: var(--u-border-radius);
    margin-bottom: var(--u-space-3);
    font-size: var(--u-font-base);
    line-height: 1.5;
}

.u-alert-primary {
    background-color: var(--u-bg-primary);
    border-color: var(--u-border-primary);
    color: hsl(84, 55%, 25%);
}

.u-alert-success {
    background-color: var(--u-bg-success);
    border-color: var(--u-border-success);
    color: #155724;
}

.u-alert-danger {
    background-color: var(--u-bg-danger);
    border-color: var(--u-border-danger);
    color: #721c24;
}

.u-alert-warning {
    background-color: var(--u-bg-warning);
    border-color: var(--u-border-warning);
    color: #856404;
}

.u-alert-info {
    background-color: var(--u-bg-info);
    border-color: var(--u-border-info);
    color: #0c5460;
}


/* ============================================================
   FORM — Általános form elemek
   Használat:
     <div class="u-form-group">
       <label class="u-form-label">Név</label>
       <input type="text" class="u-form-control" />
       <span class="u-form-hint">Segítség szöveg</span>
     </div>
   ============================================================ */

.u-form-group {
    margin-bottom: var(--u-space-3);
}

.u-form-label {
    display: block;
    margin-bottom: var(--u-space-1);
    font-size: var(--u-font-base);
    font-weight: bold;
    color: var(--u-color-dark);
}

.u-form-label.required::after {
    content: ' *';
    color: var(--u-color-danger);
}

.u-form-control {
    display: block;
    width: 100%;
    padding: 5px 8px;
    font-size: var(--u-font-base);
    font-family: Arial, Helvetica, sans-serif;
    color: #333333;
    background-color: var(--u-color-white);
    border: 1px solid #aab4bd;
    border-radius: var(--u-border-radius-sm);
    box-sizing: border-box;
    height: 30px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.15s ease;
}

.u-form-control:focus {
    border-color: var(--u-color-primary);
    box-shadow: 0 0 0 2px rgba(71, 99, 29, 0.18);
}

.u-form-control:disabled,
.u-form-control[readonly] {
    background-color: #e9ecef;
    color: var(--u-color-muted);
    cursor: default;
}

.u-form-control.u-is-invalid {
    border-color: var(--u-color-danger);
}

.u-form-control.u-is-valid {
    border-color: var(--u-color-success);
}

textarea.u-form-control {
    height: auto;
    resize: vertical;
    min-height: 80px;
}

select.u-form-control {
    height: 30px;
    padding: 4px 6px;
}

.u-form-hint {
    display: block;
    margin-top: var(--u-space-1);
    font-size: var(--u-font-sm);
    color: var(--u-color-muted);
}

.u-form-error {
    display: block;
    margin-top: var(--u-space-1);
    font-size: var(--u-font-sm);
    color: var(--u-color-danger);
}

/* Gomb */
.u-btn {
    display: inline-block;
    padding: 5px 14px;
    font-size: var(--u-font-base);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--u-border-radius-sm);
    line-height: 1.4;
    white-space: nowrap;
    box-sizing: border-box;
    outline: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    text-transform: uppercase;
}

.u-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.u-btn-primary {
    background-color: var(--u-color-primary);
    border-color: #719e2e;
    color: var(--u-color-white);
}
.u-btn-primary:hover {
    background-color: hsl(84, 55%, 42%);
    color: var(--u-color-white);
}

.u-btn-secondary {
    background-color: var(--u-color-secondary);
    border-color: #545b62;
    color: var(--u-color-white);
}
.u-btn-secondary:hover {
    background-color: #545b62;
    color: var(--u-color-white);
}

.u-btn-success {
    background-color: var(--u-color-success);
    border-color: #1e7e34;
    color: var(--u-color-white);
}
.u-btn-success:hover {
    background-color: #1e7e34;
    color: var(--u-color-white);
}

.u-btn-danger {
    background-color: var(--u-color-danger);
    border-color: #bd2130;
    color: var(--u-color-white);
}
.u-btn-danger:hover {
    background-color: #bd2130;
    color: var(--u-color-white);
}

.u-btn-warning {
    background-color: var(--u-color-warning);
    border-color: #d39e00;
    color: var(--u-color-dark);
}
.u-btn-warning:hover {
    background-color: #d39e00;
    color: var(--u-color-dark);
}

.u-btn-sm {
    padding: 3px 9px;
    font-size: var(--u-font-sm);
}

.u-btn-lg {
    padding: 8px 20px;
    font-size: var(--u-font-lg);
}


/* ============================================================
   SPACING — Margin és Padding segédosztályok
   Elnevezési séma: u-{property}{side}-{lépcsőfok}
     property: m = margin, p = padding
     side: t=top, b=bottom, l=left, r=right, x=bal+jobb, y=fel+le (üres = mind a 4)
     lépcsőfok: 0..6
   ============================================================ */

/* Margin — mind a 4 oldal */
.u-m-0  { margin: var(--u-space-0) !important; }
.u-m-1  { margin: var(--u-space-1) !important; }
.u-m-2  { margin: var(--u-space-2) !important; }
.u-m-3  { margin: var(--u-space-3) !important; }
.u-m-4  { margin: var(--u-space-4) !important; }
.u-m-5  { margin: var(--u-space-5) !important; }
.u-m-6  { margin: var(--u-space-6) !important; }
.u-m-auto { margin: auto !important; }

/* Margin top */
.u-mt-0 { margin-top: var(--u-space-0) !important; }
.u-mt-1 { margin-top: var(--u-space-1) !important; }
.u-mt-2 { margin-top: var(--u-space-2) !important; }
.u-mt-3 { margin-top: var(--u-space-3) !important; }
.u-mt-4 { margin-top: var(--u-space-4) !important; }
.u-mt-5 { margin-top: var(--u-space-5) !important; }
.u-mt-6 { margin-top: var(--u-space-6) !important; }

/* Margin bottom */
.u-mb-0 { margin-bottom: var(--u-space-0) !important; }
.u-mb-1 { margin-bottom: var(--u-space-1) !important; }
.u-mb-2 { margin-bottom: var(--u-space-2) !important; }
.u-mb-3 { margin-bottom: var(--u-space-3) !important; }
.u-mb-4 { margin-bottom: var(--u-space-4) !important; }
.u-mb-5 { margin-bottom: var(--u-space-5) !important; }
.u-mb-6 { margin-bottom: var(--u-space-6) !important; }

/* Margin left */
.u-ml-0 { margin-left: var(--u-space-0) !important; }
.u-ml-1 { margin-left: var(--u-space-1) !important; }
.u-ml-2 { margin-left: var(--u-space-2) !important; }
.u-ml-3 { margin-left: var(--u-space-3) !important; }
.u-ml-4 { margin-left: var(--u-space-4) !important; }
.u-ml-5 { margin-left: var(--u-space-5) !important; }
.u-ml-6 { margin-left: var(--u-space-6) !important; }
.u-ml-auto { margin-left: auto !important; }

/* Margin right */
.u-mr-0 { margin-right: var(--u-space-0) !important; }
.u-mr-1 { margin-right: var(--u-space-1) !important; }
.u-mr-2 { margin-right: var(--u-space-2) !important; }
.u-mr-3 { margin-right: var(--u-space-3) !important; }
.u-mr-4 { margin-right: var(--u-space-4) !important; }
.u-mr-5 { margin-right: var(--u-space-5) !important; }
.u-mr-6 { margin-right: var(--u-space-6) !important; }
.u-mr-auto { margin-right: auto !important; }

/* Margin vízszintes (bal+jobb) */
.u-mx-0    { margin-left: var(--u-space-0) !important; margin-right: var(--u-space-0) !important; }
.u-mx-1    { margin-left: var(--u-space-1) !important; margin-right: var(--u-space-1) !important; }
.u-mx-2    { margin-left: var(--u-space-2) !important; margin-right: var(--u-space-2) !important; }
.u-mx-3    { margin-left: var(--u-space-3) !important; margin-right: var(--u-space-3) !important; }
.u-mx-4    { margin-left: var(--u-space-4) !important; margin-right: var(--u-space-4) !important; }
.u-mx-5    { margin-left: var(--u-space-5) !important; margin-right: var(--u-space-5) !important; }
.u-mx-auto { margin-left: auto !important;              margin-right: auto !important; }

/* Margin függőleges (fel+le) */
.u-my-0 { margin-top: var(--u-space-0) !important; margin-bottom: var(--u-space-0) !important; }
.u-my-1 { margin-top: var(--u-space-1) !important; margin-bottom: var(--u-space-1) !important; }
.u-my-2 { margin-top: var(--u-space-2) !important; margin-bottom: var(--u-space-2) !important; }
.u-my-3 { margin-top: var(--u-space-3) !important; margin-bottom: var(--u-space-3) !important; }
.u-my-4 { margin-top: var(--u-space-4) !important; margin-bottom: var(--u-space-4) !important; }
.u-my-5 { margin-top: var(--u-space-5) !important; margin-bottom: var(--u-space-5) !important; }

/* Padding — mind a 4 oldal */
.u-p-0 { padding: var(--u-space-0) !important; }
.u-p-1 { padding: var(--u-space-1) !important; }
.u-p-2 { padding: var(--u-space-2) !important; }
.u-p-3 { padding: var(--u-space-3) !important; }
.u-p-4 { padding: var(--u-space-4) !important; }
.u-p-5 { padding: var(--u-space-5) !important; }
.u-p-6 { padding: var(--u-space-6) !important; }

/* Padding top */
.u-pt-0 { padding-top: var(--u-space-0) !important; }
.u-pt-1 { padding-top: var(--u-space-1) !important; }
.u-pt-2 { padding-top: var(--u-space-2) !important; }
.u-pt-3 { padding-top: var(--u-space-3) !important; }
.u-pt-4 { padding-top: var(--u-space-4) !important; }
.u-pt-5 { padding-top: var(--u-space-5) !important; }
.u-pt-6 { padding-top: var(--u-space-6) !important; }

/* Padding bottom */
.u-pb-0 { padding-bottom: var(--u-space-0) !important; }
.u-pb-1 { padding-bottom: var(--u-space-1) !important; }
.u-pb-2 { padding-bottom: var(--u-space-2) !important; }
.u-pb-3 { padding-bottom: var(--u-space-3) !important; }
.u-pb-4 { padding-bottom: var(--u-space-4) !important; }
.u-pb-5 { padding-bottom: var(--u-space-5) !important; }
.u-pb-6 { padding-bottom: var(--u-space-6) !important; }

/* Padding left */
.u-pl-0 { padding-left: var(--u-space-0) !important; }
.u-pl-1 { padding-left: var(--u-space-1) !important; }
.u-pl-2 { padding-left: var(--u-space-2) !important; }
.u-pl-3 { padding-left: var(--u-space-3) !important; }
.u-pl-4 { padding-left: var(--u-space-4) !important; }
.u-pl-5 { padding-left: var(--u-space-5) !important; }
.u-pl-6 { padding-left: var(--u-space-6) !important; }

/* Padding right */
.u-pr-0 { padding-right: var(--u-space-0) !important; }
.u-pr-1 { padding-right: var(--u-space-1) !important; }
.u-pr-2 { padding-right: var(--u-space-2) !important; }
.u-pr-3 { padding-right: var(--u-space-3) !important; }
.u-pr-4 { padding-right: var(--u-space-4) !important; }
.u-pr-5 { padding-right: var(--u-space-5) !important; }
.u-pr-6 { padding-right: var(--u-space-6) !important; }

/* Padding vízszintes */
.u-px-0 { padding-left: var(--u-space-0) !important; padding-right: var(--u-space-0) !important; }
.u-px-1 { padding-left: var(--u-space-1) !important; padding-right: var(--u-space-1) !important; }
.u-px-2 { padding-left: var(--u-space-2) !important; padding-right: var(--u-space-2) !important; }
.u-px-3 { padding-left: var(--u-space-3) !important; padding-right: var(--u-space-3) !important; }
.u-px-4 { padding-left: var(--u-space-4) !important; padding-right: var(--u-space-4) !important; }
.u-px-5 { padding-left: var(--u-space-5) !important; padding-right: var(--u-space-5) !important; }

/* Padding függőleges */
.u-py-0 { padding-top: var(--u-space-0) !important; padding-bottom: var(--u-space-0) !important; }
.u-py-1 { padding-top: var(--u-space-1) !important; padding-bottom: var(--u-space-1) !important; }
.u-py-2 { padding-top: var(--u-space-2) !important; padding-bottom: var(--u-space-2) !important; }
.u-py-3 { padding-top: var(--u-space-3) !important; padding-bottom: var(--u-space-3) !important; }
.u-py-4 { padding-top: var(--u-space-4) !important; padding-bottom: var(--u-space-4) !important; }
.u-py-5 { padding-top: var(--u-space-5) !important; padding-bottom: var(--u-space-5) !important; }


/* ============================================================
   BORDER — Keret segédosztályok
   ============================================================ */

.u-border          { border: 1px solid var(--u-border-color) !important; }
.u-border-top      { border-top: 1px solid var(--u-border-color) !important; }
.u-border-bottom   { border-bottom: 1px solid var(--u-border-color) !important; }
.u-border-left     { border-left: 1px solid var(--u-border-color) !important; }
.u-border-right    { border-right: 1px solid var(--u-border-color) !important; }
.u-border-0        { border: 0 !important; }

.u-border-primary  { border-color: var(--u-border-primary) !important; }
.u-border-success  { border-color: var(--u-border-success) !important; }
.u-border-danger   { border-color: var(--u-border-danger) !important; }
.u-border-warning  { border-color: var(--u-border-warning) !important; }
.u-border-info     { border-color: var(--u-border-info) !important; }

.u-rounded         { border-radius: var(--u-border-radius) !important; }
.u-rounded-sm      { border-radius: var(--u-border-radius-sm) !important; }
.u-rounded-lg      { border-radius: var(--u-border-radius-lg) !important; }
.u-rounded-full    { border-radius: var(--u-border-radius-full) !important; }
.u-rounded-0       { border-radius: 0 !important; }


/* ============================================================
   FONT — Betűméret és stílus segédosztályok
   ============================================================ */

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

.u-fw-normal  { font-weight: normal !important; }
.u-fw-bold    { font-weight: bold !important; }
.u-fst-italic { font-style: italic !important; }
.u-fst-normal { font-style: normal !important; }

.u-text-left    { text-align: left !important; }
.u-text-center  { text-align: center !important; }
.u-text-right   { text-align: right !important; }

.u-text-nowrap  { white-space: nowrap !important; }
.u-text-break   { word-break: break-word !important; }
.u-text-upper   { text-transform: uppercase !important; }
.u-text-lower   { text-transform: lowercase !important; }
.u-text-underline   { text-decoration: underline !important; }
.u-text-no-underline { text-decoration: none !important; }

.u-lh-1   { line-height: 1 !important; }
.u-lh-sm  { line-height: 1.25 !important; }
.u-lh-base { line-height: 1.5 !important; }
.u-lh-lg  { line-height: 2 !important; }


/* ============================================================
   SZÍN — Szöveg- és háttérszín segédosztályok
   ============================================================ */

/* Szövegszínek */
.u-text-primary   { color: var(--u-color-primary) !important; }
.u-text-secondary { color: var(--u-color-secondary) !important; }
.u-text-success   { color: var(--u-color-success) !important; }
.u-text-danger    { color: var(--u-color-danger) !important; }
.u-text-warning   { color: #856404 !important; }
.u-text-info      { color: var(--u-color-info) !important; }
.u-text-muted     { color: var(--u-color-muted) !important; }
.u-text-dark      { color: var(--u-color-dark) !important; }
.u-text-white     { color: var(--u-color-white) !important; }

/* Háttérszínek */
.u-bg-primary   { background-color: var(--u-bg-primary) !important; }
.u-bg-success   { background-color: var(--u-bg-success) !important; }
.u-bg-danger    { background-color: var(--u-bg-danger) !important; }
.u-bg-warning   { background-color: var(--u-bg-warning) !important; }
.u-bg-info      { background-color: var(--u-bg-info) !important; }
.u-bg-light     { background-color: var(--u-bg-light) !important; }
.u-bg-white     { background-color: var(--u-color-white) !important; }
.u-bg-dark      { background-color: var(--u-color-dark) !important; }


/* ============================================================
   EGYÉB SEGÉDOSZTÁLYOK
   ============================================================ */

.u-d-none   { display: none !important; }
.u-d-block  { display: block !important; }
.u-d-inline { display: inline !important; }
.u-d-inline-block { display: inline-block !important; }

.u-w-100  { width: 100% !important; }
.u-w-auto { width: auto !important; }
.u-h-100  { height: 100% !important; }

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

.u-cursor-pointer { cursor: pointer !important; }
.u-cursor-default { cursor: default !important; }

.u-opacity-50  { opacity: 0.5 !important; }
.u-opacity-75  { opacity: 0.75 !important; }
.u-opacity-100 { opacity: 1 !important; }