/* EyeConnect - Custom Styles */

/* HTMX loading indicator */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }

/* Refresh button: spin the icon while its HTMX request is in flight.
   htmx adds `htmx-request` to the triggering element automatically. */
@keyframes ec-spin { to { transform: rotate(360deg); } }
.ec-refresh-btn.htmx-request .ec-refresh-icon { animation: ec-spin 0.7s linear infinite; }

/* Sale form: flag a quantity that exceeds the specific lens variant's stock. */
@keyframes ec-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.ec-shake { animation: ec-shake 0.4s; }
.ec-input-error { border-color: #dc2626 !important; background-color: #fef2f2; }


/* Clickable table rows */
tr.clickable-row { cursor: pointer; }

/* Form inputs base */
input[type="text"], input[type="number"], input[type="date"], input[type="password"], input[type="email"],
select, textarea {
    font-size: 0.875rem;
}

/* Login form: add padding for icons */
#id_username, #id_password {
    padding-left: 2.25rem;
}

/* Smooth rendering */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Pulse animation for attention indicators */
@keyframes gentle-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.animate-pulse { animation: gentle-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Progress stepper responsive fix */
@media (max-width: 640px) {
    .progress-stepper span { display: none; }
}

/* ── Bidi: force LTR on phone numbers / SKUs / refs / ID-like values ──
   On Arabic (RTL) pages, mixed digit+punctuation strings (phones with
   "+", refs like "PRD-2026-AB12", etc.) render in the wrong visual
   position because their characters have weak BiDi direction.
   Marking them as LTR + isolate keeps them readable AND positioned
   correctly inside RTL cells/labels. */
input[type="tel"],
input[name*="phone" i],
input[id*="phone" i],
.phone, .ltr-num, .sku, .ref, bdi {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}
/* Inline phone/number badges keep their own LTR run inside RTL flow. */
.phone, .ltr-num, .sku, .ref { display: inline-block; }

/* ── Bidi: table headers/cells use Tailwind's text-left/text-right, which are
   physical (always literal left/right) — so on Arabic (RTL) pages the header
   stayed pinned to the visual left while the cell content below it (numbers,
   translated text) is right-aligned by the browser's RTL default, misaligning
   header vs. data. Swap to logical start/end so both follow reading direction
   and line up in either language. */
table th.text-left, table td.text-left { text-align: start; }
table th.text-right, table td.text-right { text-align: end; }

/* ── Custom scrollbars (site-wide) ─────────────────────────────────────────
   Slim, rounded thumb tinted with the brand palette. Chromium/WebView2 use the
   ::-webkit-scrollbar pseudo-elements; Firefox uses scrollbar-width/-color.  */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #a8cdb8 transparent;   /* thumb / track */
}

/* Chromium, Edge, WebView2, Safari */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #a8cdb8;              /* brand-200 */
    border-radius: 9999px;
    border: 2px solid transparent;         /* inset padding so the thumb looks slimmer */
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #7a9e8a;              /* brand-300 */
}
::-webkit-scrollbar-thumb:active {
    background-color: #55716a;              /* brand-400 */
}
::-webkit-scrollbar-corner {
    background: transparent;
}