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

.vcardonline-btn--primary {
    background: var(--vcardonline-ink);
    color: #ffffff;
    border-color: var(--vcardonline-ink);
}
.vcardonline-btn--primary:hover { background: var(--vcardonline-primary-800); border-color: var(--vcardonline-primary-800); }
.vcardonline-btn--primary:active { transform: translateY(1px); }

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

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

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

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

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

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

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

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

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

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

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

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

/* ==================================================================
   Accessibility, focus rings on keyboard users only.
================================================================== */
:focus-visible {
    /* Visible outline (not transparent): elements with their own box-shadow
       (Tailwind shadow-* utilities, e.g. the Save Contact button and the
       homepage logo links) override the brand box-shadow ring, leaving NO
       focus indicator. A real outline survives that and keeps keyboard nav
       visible everywhere. */
    outline: 2px solid var(--bhd-teal-500, #009bc1);
    outline-offset: 2px;
    box-shadow: var(--vcardonline-shadow-focus);
}

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

/* Below-variant for tooltips near top edges (add class .vcardonline-tip--below) */
.vcardonline-tip--below::before, .vcardonline-tip-trigger.vcardonline-tip--below::before {
    bottom: auto; top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}
.vcardonline-tip--below::after, .vcardonline-tip-trigger.vcardonline-tip--below::after {
    bottom: auto; top: calc(100% + 2px);
    border-top-color: transparent;
    border-bottom-color: var(--vcardonline-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) */
.vcardonline-help-icon {
    display: inline-flex;
    width: 16px; height: 16px;
    margin-inline-start: 6px;
    border-radius: var(--vcardonline-radius-full);
    color: var(--vcardonline-text-muted);
    cursor: help;
    font-size: 13px;
    align-items: center; justify-content: center;
}
.vcardonline-help-icon:hover { color: var(--vcardonline-primary-500); }