/**
 * Cardify Design System, Components.
 * Consumes cardify-tokens.css. Provides drop-in classes used by admin,
 * portal, and printshop pages. Everything is RTL-safe via logical
 * properties so no per-side overrides are needed.
 *
 * Classes in this file are NEVER Tailwind-utility-soup substitutes; they
 * wrap semantic intent (primary action, outline action, form field,
 * data-table row, badge, chip, dialog) so future redesigns touch one file.
 */

/* ==================================================================
   Buttons
   .cardify-btn                 base
   modifiers: .cardify-btn--primary | --secondary | --ghost | --danger
              .cardify-btn--sm | --lg | --icon
              .cardify-btn[disabled]  + .cardify-btn.is-loading
================================================================== */
.cardify-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cardify-space-2);
    padding: var(--cardify-space-2) var(--cardify-space-4);
    font-family: var(--cardify-font-sans);
    font-size: var(--cardify-text-sm);
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--cardify-radius-md);
    background: transparent;
    color: var(--cardify-text);
    cursor: pointer;
    transition: background var(--cardify-duration-normal) var(--cardify-ease-out),
                color      var(--cardify-duration-normal) var(--cardify-ease-out),
                border-color var(--cardify-duration-normal) var(--cardify-ease-out),
                box-shadow var(--cardify-duration-normal) var(--cardify-ease-out),
                transform  var(--cardify-duration-fast)   var(--cardify-ease-out);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}
.cardify-btn:focus-visible {
    outline: none;
    box-shadow: var(--cardify-shadow-focus);
}
.cardify-btn[disabled], .cardify-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
.cardify-btn.is-loading { pointer-events: none; opacity: 0.85; }
.cardify-btn.is-loading::before {
    content: "";
    width: 0.9em; height: 0.9em;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%;
    animation: cardifySpin 0.6s linear infinite;
}
@keyframes cardifySpin { to { transform: rotate(360deg); } }

.cardify-btn--primary {
    background: var(--cardify-primary-500);
    color: #ffffff;
    border-color: var(--cardify-primary-500);
}
.cardify-btn--primary:hover { background: var(--cardify-primary-600); border-color: var(--cardify-primary-600); }
.cardify-btn--primary:active { transform: translateY(1px); }

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

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

.cardify-btn--danger {
    background: var(--cardify-danger-500);
    color: #ffffff;
    border-color: var(--cardify-danger-500);
}
.cardify-btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }

.cardify-btn--sm { padding: 6px 10px; font-size: var(--cardify-text-xs); }
.cardify-btn--lg { padding: 12px 20px; font-size: var(--cardify-text-base); }
.cardify-btn--icon {
    width: 36px; height: 36px;
    padding: 0;
    border-radius: var(--cardify-radius-md);
}

/* ==================================================================
   Form field base, .cardify-input / .cardify-select / .cardify-textarea
================================================================== */
.cardify-input,
.cardify-select,
.cardify-textarea {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--cardify-font-sans);
    font-size: var(--cardify-text-sm);
    line-height: var(--cardify-leading-normal);
    color: var(--cardify-text);
    background: var(--cardify-bg);
    border: 1px solid var(--cardify-border);
    border-radius: var(--cardify-radius-md);
    transition: border-color var(--cardify-duration-normal) var(--cardify-ease-out),
                box-shadow   var(--cardify-duration-normal) var(--cardify-ease-out);
}
.cardify-textarea { min-height: 96px; resize: vertical; }
.cardify-input:focus,
.cardify-select:focus,
.cardify-textarea:focus {
    outline: none;
    border-color: var(--cardify-primary-500);
    box-shadow: var(--cardify-shadow-focus);
}
.cardify-input[aria-invalid="true"],
.cardify-textarea[aria-invalid="true"] {
    border-color: var(--cardify-danger-500);
}
.cardify-field { margin-bottom: var(--cardify-space-4); }
.cardify-field__label { display: block; font-size: var(--cardify-text-sm); font-weight: 500; color: var(--cardify-text); margin-bottom: 6px; }
.cardify-field__help  { margin-top: 4px; font-size: var(--cardify-text-xs); color: var(--cardify-text-muted); }
.cardify-field__error { margin-top: 4px; font-size: var(--cardify-text-xs); color: var(--cardify-danger-500); }

/* Toggle switch */
.cardify-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.cardify-switch input { opacity: 0; width: 0; height: 0; }
.cardify-switch__slider {
    position: absolute; inset: 0;
    background: var(--cardify-gray-300);
    border-radius: var(--cardify-radius-full);
    transition: background var(--cardify-duration-normal) var(--cardify-ease-out);
    cursor: pointer;
}
.cardify-switch__slider::before {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #ffffff; box-shadow: var(--cardify-shadow-sm);
    transition: transform var(--cardify-duration-normal) var(--cardify-ease-out);
}
.cardify-switch input:checked + .cardify-switch__slider { background: var(--cardify-primary-500); }
.cardify-switch input:checked + .cardify-switch__slider::before { transform: translateX(18px); }
html[dir="rtl"] .cardify-switch input:checked + .cardify-switch__slider::before { transform: translateX(-18px); }

/* ==================================================================
   Cards
================================================================== */
.cardify-card {
    background: var(--cardify-surface);
    border: 1px solid var(--cardify-border);
    border-radius: var(--cardify-radius-xl);
    box-shadow: var(--cardify-shadow-sm);
    padding: var(--cardify-space-6);
}
.cardify-card--compact { padding: var(--cardify-space-4); }
.cardify-card--flat    { box-shadow: none; }
.cardify-card__title   { font-size: var(--cardify-text-lg); font-weight: 600; margin: 0 0 var(--cardify-space-2); }
.cardify-card__body    { color: var(--cardify-text-muted); font-size: var(--cardify-text-sm); line-height: var(--cardify-leading-relaxed); }

/* ==================================================================
   Tables
================================================================== */
.cardify-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--cardify-text-sm);
}
.cardify-table thead th {
    background: var(--cardify-gray-50);
    color: var(--cardify-text-muted);
    font-weight: 600;
    font-size: var(--cardify-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cardify-border);
    text-align: start;
}
.cardify-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--cardify-border);
    color: var(--cardify-text);
    vertical-align: middle;
}
.cardify-table tbody tr:hover { background: var(--cardify-gray-50); }
.cardify-table tbody tr:last-child td { border-bottom: 0; }
.cardify-table--striped tbody tr:nth-child(odd) { background: var(--cardify-gray-50); }

/* ==================================================================
   Badges + chips
================================================================== */
.cardify-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    font-size: var(--cardify-text-xs);
    font-weight: 600;
    border-radius: var(--cardify-radius-full);
    background: var(--cardify-gray-100);
    color: var(--cardify-text);
    white-space: nowrap;
}
.cardify-badge--success { background: #dcfce7; color: #166534; }
.cardify-badge--warn    { background: #fef3c7; color: #92400e; }
.cardify-badge--danger  { background: #fee2e2; color: #991b1b; }
.cardify-badge--info    { background: var(--cardify-primary-50); color: var(--cardify-primary-700); }

.cardify-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    font-size: var(--cardify-text-sm);
    border-radius: var(--cardify-radius-full);
    background: var(--cardify-gray-100);
    border: 1px solid var(--cardify-border);
    color: var(--cardify-text);
    cursor: pointer;
    transition: background var(--cardify-duration-normal) var(--cardify-ease-out),
                border-color var(--cardify-duration-normal) var(--cardify-ease-out);
}
.cardify-chip:hover       { background: var(--cardify-gray-200); }
.cardify-chip--active,
.cardify-chip[aria-pressed="true"] {
    background: var(--cardify-primary-50);
    border-color: var(--cardify-primary-300);
    color: var(--cardify-primary-800);
}
.cardify-chip__x {
    width: 16px; height: 16px;
    border: 0; padding: 0;
    background: transparent; color: currentColor; cursor: pointer;
    border-radius: var(--cardify-radius-full);
    display: inline-flex; align-items: center; justify-content: center;
}
.cardify-chip__x:hover { background: rgba(0,0,0,0.06); }

/* ==================================================================
   Modal / dialog base
================================================================== */
.cardify-modal__backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: calc(var(--cardify-z-modal) - 1);
    animation: cardifyFadeIn var(--cardify-duration-normal) var(--cardify-ease-out);
}
.cardify-modal {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: var(--cardify-space-4);
    z-index: var(--cardify-z-modal);
    pointer-events: none;
}
.cardify-modal > * { pointer-events: auto; }
.cardify-modal__dialog {
    background: var(--cardify-surface);
    border-radius: var(--cardify-radius-xl);
    box-shadow: var(--cardify-shadow-lg);
    width: 100%; max-width: 560px;
    max-height: 90vh; overflow: auto;
    animation: cardifyDialogIn var(--cardify-duration-slow) var(--cardify-ease-out);
}
.cardify-modal__header { padding: var(--cardify-space-4) var(--cardify-space-6); border-bottom: 1px solid var(--cardify-border); font-weight: 600; font-size: var(--cardify-text-lg); }
.cardify-modal__body   { padding: var(--cardify-space-6); }
.cardify-modal__footer { padding: var(--cardify-space-4) var(--cardify-space-6); border-top: 1px solid var(--cardify-border); display: flex; justify-content: flex-end; gap: var(--cardify-space-2); }

@keyframes cardifyFadeIn   { from { opacity: 0; }                                  to { opacity: 1; } }
@keyframes cardifyDialogIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ==================================================================
   Accessibility, focus rings on keyboard users only.
================================================================== */
:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--cardify-shadow-focus);
}

/* Visually-hidden helper for aria-only text */
.cardify-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ==================================================================
   Tooltip primitive (Cardify v2.0 Category L, action 280/295/339)
   Usage:
     <button class="cardify-tip-trigger" data-tip="Helpful hint">
       <i class="fa-regular fa-circle-question"></i>
     </button>
   Or with <label>Field <i class="cardify-tip" data-tip="explanation"></i></label>
================================================================== */
.cardify-tip,
.cardify-tip-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cardify-text-muted);
    cursor: help;
    background: transparent;
    border: 0;
    padding: 0;
}
.cardify-tip::before,
.cardify-tip-trigger::before {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--cardify-gray-900);
    color: #ffffff;
    font-size: var(--cardify-text-xs);
    font-weight: 500;
    font-family: var(--cardify-font-sans);
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: var(--cardify-radius-sm);
    white-space: normal;
    width: max-content;
    max-width: 240px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--cardify-duration-normal) var(--cardify-ease-out),
                transform var(--cardify-duration-normal) var(--cardify-ease-out);
    z-index: var(--cardify-z-toast);
}
.cardify-tip::after,
.cardify-tip-trigger::after {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--cardify-gray-900);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--cardify-duration-normal) var(--cardify-ease-out);
}
.cardify-tip:hover::before,
.cardify-tip:focus-visible::before,
.cardify-tip-trigger:hover::before,
.cardify-tip-trigger:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.cardify-tip:hover::after,
.cardify-tip:focus-visible::after,
.cardify-tip-trigger:hover::after,
.cardify-tip-trigger:focus-visible::after { opacity: 1; }

/* Below-variant for tooltips near top edges (add class .cardify-tip--below) */
.cardify-tip--below::before, .cardify-tip-trigger.cardify-tip--below::before {
    bottom: auto; top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}
.cardify-tip--below::after, .cardify-tip-trigger.cardify-tip--below::after {
    bottom: auto; top: calc(100% + 2px);
    border-top-color: transparent;
    border-bottom-color: var(--cardify-gray-900);
}

/* RTL-safe: centred tooltip, no directional flip needed. But arrow+popover
   live over the trigger so margin/inset are agnostic. */

/* Help-icon next to a form label (consistent look across admin) */
.cardify-help-icon {
    display: inline-flex;
    width: 16px; height: 16px;
    margin-inline-start: 6px;
    border-radius: var(--cardify-radius-full);
    color: var(--cardify-text-muted);
    cursor: help;
    font-size: 13px;
    align-items: center; justify-content: center;
}
.cardify-help-icon:hover { color: var(--cardify-primary-500); }