/*
 * YallaSite theme for the Filament admin panel (task 5, T0.5).
 *
 * Plain CSS layered on Filament's own stylesheet, registered as a panel asset
 * in AdminPanelProvider, so the deploy needs no Tailwind 3 build (Q22). The
 * panel loads resources/css/yallasite-tokens.css first; every colour here is
 * a --ys-* token or a mix of one. Filament's palette (primary orange, gray
 * from Slate, success Lagoon, warning Saffron) comes from config/brand.php.
 */

/* Type ------------------------------------------------------------------ */

body.fi-body {
    font-family: var(--ys-font-body);
}

.fi-body .fi-header-heading,
.fi-body .fi-simple-header-heading,
.fi-body .fi-section-header-heading,
.fi-body .fi-modal-heading,
.fi-body .fi-wi-stats-overview-stat-value,
.fi-body .fi-ta-empty-state-heading {
    font-family: var(--ys-font-display);
    font-weight: 800;
    letter-spacing: var(--ys-tracking-display);
}

/* Prices, counts and timers line up: Inter with tabular numbers. */
.fi-body .fi-wi-stats-overview-stat-value,
.fi-body .fi-ta-text-item,
.fi-body .fi-in-text-item,
.ys-num {
    font-variant-numeric: tabular-nums;
}

[dir='rtl'] .fi-body,
:lang(ar) {
    font-family: var(--ys-font-arabic);
}

/* Surfaces: Sand page, Cloud cards, 14px radius, soft navy shadow ------- */

body.fi-body,
.fi-body .fi-simple-layout {
    background-color: var(--ys-sand);
}

.dark body.fi-body,
.dark .fi-body .fi-simple-layout {
    background-color: var(--ys-navy);
}

.fi-body .fi-section,
.fi-body .fi-simple-main,
.fi-body .fi-ta-ctn,
.fi-body .fi-wi-stats-overview-stat,
.fi-body .fi-wi-chart > .fi-section,
.fi-body .fi-modal-window,
.fi-body .fi-dropdown-panel,
.fi-body .fi-fo-tabs,
.fi-body .fi-tabs {
    border-radius: var(--ys-radius);
}

.fi-body .fi-section,
.fi-body .fi-simple-main,
.fi-body .fi-ta-ctn,
.fi-body .fi-wi-stats-overview-stat {
    background-color: var(--ys-cloud);
    box-shadow:
        var(--ys-shadow),
        0 0 0 1px color-mix(in srgb, var(--ys-navy) 6%, transparent);
}

.dark .fi-body .fi-section,
.dark .fi-body .fi-simple-main,
.dark .fi-body .fi-ta-ctn,
.dark .fi-body .fi-wi-stats-overview-stat {
    background-color: color-mix(in srgb, var(--ys-navy) 88%, var(--ys-cloud));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ys-cloud) 10%, transparent);
}

.fi-body .fi-sidebar,
.fi-body .fi-topbar > nav {
    background-color: var(--ys-cloud);
}

.dark .fi-body .fi-sidebar,
.dark .fi-body .fi-topbar > nav {
    background-color: var(--ys-navy);
}

/* Buttons: 12px radius. The one primary button is Yalla Orange with a white
 * label, which the guidelines allow only at 16px bold or larger. */

.fi-body .fi-btn,
.fi-body .fi-input-wrp,
.fi-body .fi-icon-btn {
    border-radius: var(--ys-radius-button);
}

.fi-body .fi-btn.fi-color-primary:not(.fi-btn-outlined) {
    background-color: var(--ys-orange);
    color: white;
    font-size: 1rem;
    font-weight: 700;
}

.fi-body .fi-btn.fi-color-primary:not(.fi-btn-outlined):hover {
    filter: brightness(1.07);
}

/* Orange text at body size is Ember; on dark backgrounds orange itself. */
.fi-body .fi-link.fi-color-primary,
.fi-body .fi-link.fi-color-primary > *,
.fi-body .fi-ta-text-item-label.fi-color-primary {
    color: var(--ys-ember);
}

.dark .fi-body .fi-link.fi-color-primary,
.dark .fi-body .fi-link.fi-color-primary > *,
.dark .fi-body .fi-ta-text-item-label.fi-color-primary {
    color: var(--ys-orange);
}

/* Chips and badges are pills. */
.fi-body .fi-badge,
.fi-body .fi-fo-field-wrp-hint .fi-badge,
.fi-body .fi-ta-filter-indicators .fi-badge {
    border-radius: var(--ys-radius-pill);
}

/* Offers and timers use Saffron; success and "live" use Lagoon. */
.ys-offer {
    background-color: color-mix(in srgb, var(--ys-saffron) 18%, transparent);
    color: var(--ys-navy);
}

.dark .ys-offer {
    color: var(--ys-saffron);
}

.ys-live {
    color: var(--ys-lagoon);
}

/* Build tab (task 9): check list, details and versions ------------------ */

.ys-build-upload {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
    margin-bottom: 1rem;
}

.ys-build-upload > :first-child {
    width: 100%;
}

.ys-checks {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.875rem 1rem;
    list-style: none;
    border-radius: var(--ys-radius);
    background-color: var(--ys-sand);
    font-size: 0.875rem;
}

.dark .ys-checks {
    background-color: color-mix(in srgb, var(--ys-cloud) 6%, transparent);
}

.ys-check {
    display: flex;
    gap: 0.625rem;
    align-items: baseline;
}

.ys-check-mark {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--ys-radius-pill);
    color: var(--ys-cloud);
    font-size: 0.75rem;
    font-weight: 700;
}

.ys-check-ok .ys-check-mark {
    background-color: var(--ys-lagoon);
}

.ys-check-warning .ys-check-mark {
    background-color: var(--ys-saffron);
    color: var(--ys-navy);
}

.ys-check-error .ys-check-mark {
    background-color: rgb(var(--danger-600));
}

.ys-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.25rem;
    margin: 0;
    font-size: 0.875rem;
}

.ys-kv dt {
    color: var(--ys-slate);
}

.ys-kv dd {
    margin: 0;
    display: grid;
    gap: 0.375rem;
}

.ys-kv a {
    color: var(--ys-ember);
}

.ys-version {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.ys-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ys-muted {
    color: var(--ys-slate);
}

/* WhatsApp tab (task 13): message preview, buttons and history ---------- */

.ys-wa-panel {
    display: grid;
    gap: 1rem;
}

.ys-wa-fields {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .ys-wa-fields {
        grid-template-columns: 1fr;
    }
}

.ys-wa-field {
    display: grid;
    gap: 0.375rem;
    font-size: 0.875rem;
}

.ys-wa-field label {
    font-weight: 500;
}

.ys-wa-field textarea {
    min-height: 9rem;
}

.ys-wa-hint {
    color: var(--ys-slate);
    font-size: 0.8rem;
}

.ys-wa-error {
    color: rgb(var(--danger-600));
    font-size: 0.8rem;
}

.ys-wa-shell {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.875rem;
    border-radius: 10px;
    background-color: var(--ys-whatsapp-chat);
}

.ys-wa-bubble {
    align-self: flex-end;
    max-width: 100%;
    padding: 0.625rem 0.75rem;
    border-radius: 10px 10px 2px 10px;
    background-color: var(--ys-whatsapp-bubble);
    color: var(--ys-whatsapp-ink);
    font-size: 0.875rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--ys-whatsapp-ink) 8%, transparent);
}

.dark .ys-wa-shell {
    background-color: var(--ys-whatsapp-chat-dark);
}

.dark .ys-wa-bubble {
    background-color: var(--ys-whatsapp-bubble-dark);
    color: var(--ys-whatsapp-ink-dark);
}

.ys-wa-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
}

.fi-body .fi-btn.fi-color-primary.ys-btn-whatsapp:not(.fi-btn-outlined) {
    background-color: var(--ys-whatsapp);
    color: var(--ys-cloud);
}

.fi-body .fi-btn.fi-color-primary.ys-btn-whatsapp:not(.fi-btn-outlined):hover {
    background-color: color-mix(in srgb, var(--ys-whatsapp) 88%, var(--ys-navy));
}

.ys-wa-notice {
    padding: 0.625rem 0.875rem;
    border-radius: var(--ys-radius-button);
    background-color: color-mix(in srgb, var(--ys-saffron) 18%, transparent);
    font-size: 0.875rem;
}

.ys-wa-history {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.ys-wa-history li {
    display: grid;
    gap: 0.25rem;
}

.ys-wa-history summary {
    cursor: pointer;
    color: var(--ys-ember);
}

.ys-wa-history .ys-wa-bubble {
    align-self: start;
    margin-top: 0.375rem;
}

/* Activity tab on a prospect ("Activity" in mockup.html, task 15). */
.ys-feed {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.ys-feed li {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0.625rem;
}

.ys-feed time {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: var(--ys-slate);
    white-space: nowrap;
}

.ys-feed b {
    font-weight: 700;
}

/* Change requests tab on a prospect (task 16). */
.ys-changes {
    display: grid;
    gap: 1rem;
}

.ys-changes-body {
    margin: 0;
    font-size: 0.875rem;
    white-space: pre-line;
}

.ys-changes-files {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.ys-changes-files li {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}

/* Dashboard (task 17): "Needs attention" and the funnel. */
.ys-attention-wrap {
    overflow-x: auto;
}

.ys-attention {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ys-attention th {
    padding: 0 0.75rem 0.5rem 0;
    text-align: start;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ys-slate);
}

.ys-attention td {
    padding: 0.625rem 0.75rem 0.625rem 0;
    border-top: 1px solid color-mix(in srgb, var(--ys-navy) 8%, transparent);
    vertical-align: top;
}

.dark .ys-attention td {
    border-top-color: color-mix(in srgb, var(--ys-cloud) 10%, transparent);
}

.ys-attention td a {
    display: block;
    font-weight: 600;
}

.ys-attention td .ys-muted {
    display: block;
    font-size: 0.75rem;
}

.ys-funnel {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.ys-funnel li {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr) 3rem;
    gap: 0.75rem;
    align-items: center;
}

.ys-funnel li > :last-child {
    text-align: end;
}

.ys-funnel-bar {
    display: block;
    height: 0.875rem;
    border-radius: 4px;
    background: var(--ys-sand);
    overflow: hidden;
}

.dark .ys-funnel-bar {
    background: color-mix(in srgb, var(--ys-cloud) 10%, transparent);
}

.ys-funnel-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ys-navy);
}

.dark .ys-funnel-bar i {
    background: var(--ys-sand);
}

/* Orange only on the last step, the one that matters most (mockup.html). */
.ys-funnel li:last-child .ys-funnel-bar i {
    background: var(--ys-orange);
}

/* Launch tab on a prospect (task 27). */
.ys-launch-list {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.ys-launch-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    align-items: center;
    justify-content: space-between;
}

.ys-launch-list label {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    cursor: pointer;
}

.ys-launch-done span {
    color: var(--ys-slate);
    text-decoration: line-through;
}

.ys-launch-note {
    margin: 1rem 0 0;
    font-size: 0.875rem;
}