@import url("../vendor/boxicons/css/boxicons.min.css");

:root {
    color-scheme: light;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    color: #172033;
    background: #f4f6fa;
}

/* App shell */
body {
    background:
        radial-gradient(circle at 8% 0%, rgb(37 99 235 / 7%), transparent 26rem),
        #f5f7fb;
}

.app-header {
    position: sticky;
    z-index: 50;
    top: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    min-height: 4.75rem;
    padding: 0.7rem max(1.25rem, calc((100% - 76rem) / 2));
    border-bottom: 1px solid rgb(203 213 225 / 80%);
    background: rgb(255 255 255 / 92%);
    box-shadow: 0 0.25rem 1rem rgb(15 23 42 / 4%);
    backdrop-filter: blur(14px);
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #172033;
    text-decoration: none;
}

.app-brand > span:last-child {
    display: grid;
    line-height: 1.1;
}

.app-brand strong {
    font-size: 1.08rem;
}

.app-brand small {
    margin-top: 0.22rem;
    color: #64748b;
    font-size: 0.68rem;
}

.brand-mark,
.avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.85rem;
    background: linear-gradient(145deg, #2563eb, #1d4ed8);
    color: #fff;
    box-shadow: 0 0.5rem 1rem rgb(37 99 235 / 22%);
    font-size: 1.45rem;
}

.brand-logo-mark {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #f3f3f0;
    box-shadow: 0 0.5rem 1rem rgb(15 23 42 / 14%);
}

.brand-logo-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.desktop-nav {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

.desktop-nav a {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.62rem 0.72rem;
    border-radius: 0.65rem;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 650;
    text-decoration: none;
}

.desktop-nav a:hover,
.desktop-nav a[aria-current="page"] {
    background: #eff6ff;
    color: #1d4ed8;
}

.desktop-nav i {
    font-size: 1.15rem;
}

.admin-profile {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.admin-profile form {
    display: block;
}

.avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #e2e8f0;
    box-shadow: none;
    color: #475569;
    font-size: 1.05rem;
}

.admin-name {
    max-width: 8rem;
    overflow: hidden;
    font-size: 0.84rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-button {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: #64748b;
    font-size: 1.25rem;
}

.icon-button:hover {
    background: #fee2e2;
    color: #b91c1c;
}

.confirmation-modal {
    width: min(28rem, calc(100% - 2rem));
    padding: 0;
    border: 0;
    border-radius: 1.15rem;
    background: transparent;
    box-shadow: 0 1.5rem 4rem rgb(15 23 42 / 25%);
}

.confirmation-modal[open] {
    animation: confirmation-modal-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.confirmation-modal.is-closing {
    animation: confirmation-modal-out 160ms ease-in both;
    pointer-events: none;
}

.confirmation-modal::backdrop {
    background: rgb(15 23 42 / 58%);
    backdrop-filter: blur(3px);
    animation: confirmation-backdrop-in 200ms ease-out both;
}

.confirmation-modal.is-closing::backdrop {
    animation: confirmation-backdrop-out 160ms ease-in both;
}

.confirmation-modal-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1.4rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.15rem;
    background: #fff;
}

.confirmation-modal-card h2 {
    margin: 0;
    color: #172033;
    font-size: 1.25rem;
}

.confirmation-modal-card p {
    margin: 0.4rem 0 0;
    color: #64748b;
    line-height: 1.5;
}

.confirmation-modal-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 1.45rem;
}

.confirmation-modal-actions {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 0.35rem;
}

.confirmation-modal-actions button {
    margin: 0;
}

@keyframes confirmation-modal-in {
    from { opacity: 0; transform: translateY(0.75rem) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes confirmation-modal-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(0.45rem) scale(0.98); }
}

@keyframes confirmation-backdrop-in {
    from { background: rgb(15 23 42 / 0%); backdrop-filter: blur(0); }
    to { background: rgb(15 23 42 / 58%); backdrop-filter: blur(3px); }
}

@keyframes confirmation-backdrop-out {
    from { background: rgb(15 23 42 / 58%); backdrop-filter: blur(3px); }
    to { background: rgb(15 23 42 / 0%); backdrop-filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    .confirmation-modal[open],
    .confirmation-modal.is-closing,
    .confirmation-modal::backdrop,
    .confirmation-modal.is-closing::backdrop {
        animation-duration: 1ms;
    }
}

.navigation-loader {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgb(15 23 42 / 48%);
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(4px);
    transition: opacity 180ms ease, visibility 180ms ease;
}

.navigation-loader.is-visible {
    opacity: 1;
    visibility: visible;
}

.navigation-loader-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    gap: 0.35rem;
    width: min(20rem, calc(100vw - 2rem));
    padding: 1.5rem 1.25rem 1.35rem;
    border: 1px solid #dbe3ef;
    border-radius: 1.15rem;
    background: #fff;
    box-shadow: 0 1.5rem 4rem rgb(15 23 42 / 24%);
    text-align: center;
    transform: translateY(0.5rem) scale(0.98);
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.navigation-loader.is-visible .navigation-loader-card {
    transform: translateY(0) scale(1);
}

.navigation-loader-mark {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    background: linear-gradient(145deg, #2563eb, #1d4ed8);
    color: #fff;
    box-shadow: 0 0.5rem 1rem rgb(37 99 235 / 22%);
    font-size: 1.5rem;
    margin: 0.4rem 0 0.75rem;
}

.navigation-loader-logo {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #f3f3f0;
    box-shadow: 0 0.5rem 1rem rgb(15 23 42 / 14%);
}

.navigation-loader-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.navigation-loader-card strong {
    color: #172033;
    font-size: 1rem;
}

.navigation-loader-card small {
    color: #64748b;
    font-size: 0.78rem;
}

.navigation-loader-spinner {
    grid-column: 1;
    grid-row: 1;
    width: 3.8rem;
    height: 3.8rem;
    margin: 0.4rem 0 0.75rem;
    border: 0.18rem solid #dbeafe;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: navigation-loader-spin 700ms linear infinite;
}

@keyframes navigation-loader-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .navigation-loader,
    .navigation-loader-card {
        transition-duration: 1ms;
    }

    .navigation-loader-spinner {
        animation-duration: 1.5s;
    }
}

.mobile-nav {
    display: none;
}

.container {
    width: min(76rem, calc(100% - 2.5rem));
    margin: 2rem auto 3rem;
}

.auth-storage-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border: 1px solid #bfdbfe;
    border-radius: 0.85rem;
    background: #eff6ff;
}

.auth-storage-summary > div {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.auth-storage-summary i {
    color: #2563eb;
    font-size: 1.55rem;
}

.auth-storage-summary small {
    display: block;
    margin-top: 0.15rem;
    color: #64748b;
}

.service-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    margin-top: 0.55rem;
}

.service-statuses > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 700;
}

.service-statuses .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.service-statuses .badge i {
    font-size: 0.95rem;
}

.welcome-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.welcome-heading h1 {
    margin: 0.15rem 0;
    font-size: clamp(1.7rem, 4vw, 2.35rem);
    letter-spacing: -0.04em;
}

.welcome-heading p {
    margin: 0;
    color: #64748b;
}

.eyebrow {
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.welcome-icon {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1.4rem;
    background: linear-gradient(145deg, #dbeafe, #eff6ff);
    color: #2563eb;
    font-size: 2.3rem;
}

.grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
}

.card {
    border-color: #e2e8f0;
    border-radius: 1.1rem;
    box-shadow: 0 0.65rem 2rem rgb(15 23 42 / 6%);
}

.grid > .card {
    display: flex;
    min-height: 18rem;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.35rem;
    transition: translate 160ms ease, box-shadow 160ms ease;
}

.grid > .card:hover {
    box-shadow: 0 1rem 2.5rem rgb(15 23 42 / 10%);
    translate: 0 -0.2rem;
}

.grid > .card p {
    color: #64748b;
}

.grid > .card .button-link {
    width: 100%;
    margin-top: auto;
    text-align: center;
}

.feature-icon {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
    font-size: 1.65rem;
}

.feature-icon.blue { background: #dbeafe; color: #2563eb; }
.feature-icon.purple { background: #ede9fe; color: #7c3aed; }
.feature-icon.green { background: #dcfce7; color: #16a34a; }
.feature-icon.orange { background: #ffedd5; color: #ea580c; }

.button-link,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    border-radius: 0.75rem;
    box-shadow: 0 0.35rem 0.8rem rgb(29 78 216 / 14%);
}

.action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0.42rem 0.72rem;
    border: 1px solid #bfdbfe;
    border-radius: 0.62rem;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease, translate 150ms ease;
}

.action-link i {
    font-size: 1.05rem;
}

.action-link:hover {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
    translate: 0 -1px;
}

.action-link:focus-visible {
    outline: 3px solid rgb(37 99 235 / 24%);
    outline-offset: 2px;
}

.action-link.back-link {
    border-color: #cbd5e1;
    background: #fff;
    color: #475569;
}

.action-link.back-link:hover {
    border-color: #475569;
    background: #475569;
    color: #fff;
}

.search-form,
.product-form,
.image-manager,
.danger-zone,
.instruction-form,
.instruction-card,
.table-wrap,
.empty-state {
    border-color: #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.8rem rgb(15 23 42 / 5%);
}

input,
textarea,
select {
    min-height: 2.8rem;
    border-color: #cbd5e1;
    border-radius: 0.7rem;
}

.page-heading h1 {
    font-size: clamp(1.55rem, 4vw, 2rem);
    letter-spacing: -0.035em;
}

.table-wrap {
    scrollbar-width: thin;
}

tbody tr:hover {
    background: #f8fafc;
}

.chat-thread {
    display: grid;
    align-content: start;
    gap: 0.7rem;
    height: min(62dvh, 44rem);
    min-height: 22rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #eef2f7;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #94a3b8 transparent;
    scrollbar-width: thin;
}

.conversation-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.55rem;
}

.recipient-create-card {
    display: grid;
    gap: 1.35rem;
    margin-bottom: 1rem;
    padding: 1.35rem;
}

.recipient-section-heading,
.recipient-card-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.recipient-section-heading h2,
.recipient-section-heading p,
.recipient-identity h2,
.recipient-identity p {
    margin: 0;
}

.recipient-section-heading p,
.recipient-identity p {
    margin-top: 0.22rem;
    color: #64748b;
    font-size: 0.88rem;
}

.recipient-heading-icon,
.recipient-avatar {
    display: grid;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: 0.85rem;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 1.35rem;
}

.recipient-list {
    display: grid;
    gap: 1rem;
}

.recipient-card {
    display: grid;
    gap: 1.15rem;
    padding: 1.25rem;
    border: 1px solid #dbe2ea;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 0.5rem 1.8rem rgb(15 23 42 / 5%);
}

.recipient-card-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.recipient-identity {
    min-width: 0;
}

.recipient-identity > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.recipient-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.recipient-form .field {
    margin: 0;
}

.recipient-toggle {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 3.4rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid #dbe2ea;
    border-radius: 0.75rem;
    background: #f8fafc;
    cursor: pointer;
}

.recipient-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.toggle-track {
    position: relative;
    flex: 0 0 auto;
    width: 2.65rem;
    height: 1.45rem;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 150ms ease;
}

.toggle-track::after {
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgb(15 23 42 / 25%);
    content: '';
    transition: translate 150ms ease;
}

.recipient-toggle input:checked + .toggle-track {
    background: #2563eb;
}

.recipient-toggle input:checked + .toggle-track::after {
    translate: 1.2rem 0;
}

.recipient-toggle input:focus-visible + .toggle-track {
    outline: 3px solid rgb(37 99 235 / 25%);
    outline-offset: 2px;
}

.recipient-toggle strong,
.recipient-toggle small {
    display: block;
}

.recipient-toggle strong {
    font-size: 0.88rem;
}

.recipient-toggle small {
    margin-top: 0.12rem;
    color: #64748b;
    font-size: 0.75rem;
}

.recipient-primary-action {
    align-self: start;
    min-height: 3.4rem;
    justify-self: stretch;
}

.recipient-delete-form {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.recipient-delete-button {
    min-height: 2.6rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid #fecaca;
    border-radius: 0.65rem;
    background: #fff;
    color: #b91c1c;
    box-shadow: none;
    font-size: 0.82rem;
}

.recipient-delete-button:hover {
    border-color: #dc2626;
    background: #fef2f2;
}

.conversation-statuses .badge,
td .badge[class*="conversation-"] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.conversation-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.conversation-heading-actions > .button-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.35rem;
}

.conversation-statuses .badge i,
td .badge[class*="conversation-"] i {
    font-size: 1rem;
}

.badge.conversation-bot {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge.conversation-human {
    background: #ede9fe;
    color: #6d28d9;
}

.badge.conversation-paused {
    background: #fef3c7;
    color: #92400e;
}

.badge.conversation-closed {
    background: #e2e8f0;
    color: #475569;
}

.badge.conversation-default {
    background: #f1f5f9;
    color: #475569;
}

.badge.conversation-stage {
    border: 1px solid #bae6fd;
    background: #ecfeff;
    color: #0e7490;
}

.chat-thread::-webkit-scrollbar {
    width: 0.55rem;
}

.chat-thread::-webkit-scrollbar-track {
    background: transparent;
}

.chat-thread::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #94a3b8;
    background-clip: padding-box;
}

.chat-thread:focus-visible {
    outline: 3px solid rgb(37 99 235 / 20%);
    outline-offset: 2px;
}

.chat-bubble {
    width: min(78%, 42rem);
    padding: 0.75rem 0.9rem;
    border-radius: 1rem 1rem 1rem 0.25rem;
    background: #fff;
    box-shadow: 0 0.25rem 0.9rem rgb(15 23 42 / 6%);
}

.chat-bubble.outgoing {
    justify-self: end;
    border-radius: 1rem 1rem 0.25rem 1rem;
    background: #dbeafe;
}

.chat-bubble p {
    margin: 0.35rem 0;
}

.chat-bubble small,
.chat-sender {
    color: #64748b;
    font-size: 0.72rem;
}

.chat-sender {
    font-weight: 750;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
}

.auth-page {
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.auth-card,
.card {
    background: #fff;
    border: 1px solid #dce2ea;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgb(15 23 42 / 8%);
}

.auth-card {
    width: min(100%, 26rem);
    padding: 2rem;
}

.auth-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.auth-title > span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    background: linear-gradient(145deg, #22c55e, #16a34a);
    color: #fff;
    box-shadow: 0 0.55rem 1.1rem rgb(34 197 94 / 24%);
    font-size: 1.65rem;
}

.auth-title h1 {
    margin: 0;
}

.app-version {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.16rem 0.42rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #64748b;
    font-size: 0.65rem;
    font-weight: 750;
    line-height: 1.2;
    vertical-align: middle;
    white-space: nowrap;
}

.remember-login {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem;
    border: 1px solid #dbe4f0;
    border-radius: 0.65rem;
    background: #f8fafc;
    cursor: pointer;
}

.remember-login input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: #2563eb;
}

.remember-login span {
    display: grid;
}

.remember-login strong {
    color: #253046;
    font-size: 0.9rem;
}

.remember-login small {
    margin-top: 0.1rem;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 500;
}

.pwa-install-gate {
    text-align: center;
}

.pwa-install-gate[hidden],
[data-pwa-login][hidden] {
    display: none;
}

.pwa-install-icon {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 0.9rem;
    place-items: center;
    border-radius: 1rem;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 1.8rem;
}

.pwa-install-gate h2 {
    margin: 0;
    font-size: 1.35rem;
}

.pwa-install-gate > p {
    margin: 0.45rem 0 1rem;
    color: #64748b;
}

.pwa-device {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.65rem;
    border-radius: 0.65rem;
    background: #eff6ff;
    color: #1e40af;
    font-size: 0.86rem;
}

.pwa-device i {
    font-size: 1.15rem;
}

.pwa-install-gate .pwa-instructions {
    margin: 0.9rem 0;
    color: #475569;
    font-size: 0.86rem;
    line-height: 1.55;
    text-align: left;
}

.pwa-install-status {
    font-size: 0.82rem;
    font-weight: 650;
}

.pwa-install-status.error {
    color: #b91c1c;
}

.pwa-install-gate button {
    width: 100%;
    margin-top: 0.65rem;
}

.pwa-install-gate button i {
    margin-right: 0.3rem;
}

.pwa-install-gate .pwa-reload-button {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    box-shadow: none;
}

form {
    display: grid;
    gap: 0.75rem;
}

label {
    font-weight: 650;
}

input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #b9c3d0;
    border-radius: 0.45rem;
    font: inherit;
}

textarea,
select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #b9c3d0;
    border-radius: 0.45rem;
    background: #fff;
    font: inherit;
}

textarea {
    resize: vertical;
}

a {
    color: #1d4ed8;
}

input:focus {
    outline: 3px solid rgb(37 99 235 / 20%);
    border-color: #2563eb;
}

button {
    border: 0;
    border-radius: 0.45rem;
    padding: 0.75rem 1rem;
    background: #1d4ed8;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

button.secondary {
    background: #334155;
}

button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.alert {
    margin: 1rem 0;
    padding: 0.75rem;
    border-radius: 0.45rem;
    background: #fee2e2;
    color: #991b1b;
}

.alert.success {
    background: #dcfce7;
    color: #166534;
}

.alert.error {
    background: #fee2e2;
    color: #991b1b;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid #dce2ea;
}

.topbar div {
    display: flex;
    gap: 1rem;
    align-items: baseline;
}

.container {
    width: min(70rem, calc(100% - 2rem));
    margin: 2rem auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.card {
    padding: 1.25rem;
}

.card h2 {
    margin-top: 0;
}

.button-link {
    display: inline-block;
    border-radius: 0.45rem;
    padding: 0.7rem 1rem;
    background: #1d4ed8;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.secondary-link {
    background: #475569;
}

.danger-button {
    background: #b91c1c;
}

.narrow {
    max-width: 62rem;
}

.page-heading,
.inline-actions,
.form-actions,
.search-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-heading h1,
.page-heading p {
    margin: 0;
}

.search-form {
    justify-content: flex-start;
    padding: 1rem;
    background: #fff;
    border: 1px solid #dce2ea;
    border-radius: 0.75rem;
}

.search-form input {
    max-width: 28rem;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid #dce2ea;
    border-radius: 0.75rem;
    background: #fff;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 0.9rem;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: middle;
}

th {
    background: #f8fafc;
}

.product-cell {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 15rem;
}

.product-cell img,
.image-placeholder {
    width: 4rem;
    height: 4rem;
    border-radius: 0.5rem;
    object-fit: cover;
    background: #e2e8f0;
}

.image-placeholder {
    display: grid;
    place-items: center;
    color: #64748b;
    font-size: 0.75rem;
}

.product-cell small,
.product-cell .badge {
    display: block;
    margin-top: 0.2rem;
}

.badge {
    display: inline-block;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.badge.success {
    background: #dcfce7;
    color: #166534;
}

.badge.danger {
    background: #fee2e2;
    color: #991b1b;
}

.badge.muted {
    background: #e2e8f0;
    color: #475569;
}

.badge.warning {
    background: #fef3c7;
    color: #92400e;
}

.badge.order-draft {
    background: #e2e8f0;
    color: #475569;
}

.badge.order-pending {
    background: #fef3c7;
    color: #92400e;
}

.badge.order-confirmed {
    background: #dbeafe;
    color: #1e40af;
}

.badge.order-paid {
    background: #ede9fe;
    color: #6d28d9;
}

.badge.order-shipped {
    background: #cffafe;
    color: #155e75;
}

.badge.order-completed {
    background: #dcfce7;
    color: #166534;
}

.badge.order-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.order-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 8rem;
}

.order-cell img,
.order-image-placeholder {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.5rem;
    object-fit: cover;
    background: #e2e8f0;
}

.order-image-placeholder {
    display: grid;
    place-items: center;
    padding: 0.25rem;
    color: #64748b;
    font-size: 0.68rem;
    text-align: center;
}

.order-summary {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
}

.whatsapp-control {
    display: grid;
    gap: 1.25rem;
}

.status-heading > div {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-heading h2,
.status-heading p,
.qr-panel p {
    margin: 0;
}

.qr-panel {
    max-width: 27rem;
    padding: 1rem;
    border: 1px solid #dce2ea;
    border-radius: 0.75rem;
    background: #f8fafc;
    text-align: center;
}

.qr-panel img {
    display: block;
    width: min(100%, 22.5rem);
    height: auto;
    margin: 0 auto 1rem;
    background: #fff;
}

.whatsapp-actions {
    justify-content: flex-start;
    margin: 0;
    flex-wrap: wrap;
}

.whatsapp-actions form {
    display: block;
}

.inactive-row {
    opacity: 0.68;
}

.empty-state {
    padding: 3rem;
    text-align: center;
    background: #fff;
    border: 1px dashed #94a3b8;
    border-radius: 0.75rem;
}

.pagination {
    display: flex;
    gap: 0.4rem;
    margin-top: 1rem;
}

.pagination a {
    padding: 0.45rem 0.7rem;
    border-radius: 0.35rem;
    background: #fff;
    text-decoration: none;
}

.pagination a.current {
    background: #1d4ed8;
    color: #fff;
}

.product-form,
.image-manager,
.danger-zone {
    padding: 1.4rem;
    border: 1px solid #dce2ea;
    border-radius: 0.75rem;
    background: #fff;
    margin-bottom: 1.5rem;
}

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

.field {
    display: grid;
    gap: 0.4rem;
}

.field-wide {
    grid-column: 1 / -1;
}

.field small {
    color: #64748b;
}

.product-colors {
    min-width: 0;
    padding: 1rem;
    border: 1px solid #dce2ea;
    border-radius: 0.75rem;
    background: #f8fafc;
}

.product-colors legend {
    padding: 0 0.35rem;
    font-weight: 800;
}

.product-color-rows {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.8rem;
}

.product-color-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 44px;
    gap: 0.75rem;
    align-items: end;
}

.product-color-row label {
    display: grid;
    gap: 0.4rem;
}

.product-color-row input[type="color"] {
    width: 100%;
    min-height: 46px;
    padding: 0.25rem;
    cursor: pointer;
}

.color-remove-button {
    display: grid;
    place-items: center;
    width: 44px;
    min-height: 46px;
    padding: 0;
    background: #fee2e2;
    color: #b91c1c;
}

.color-add-button {
    width: fit-content;
    margin-top: 0.9rem;
}

@media (max-width: 600px) {
    .product-color-row {
        grid-template-columns: minmax(0, 1fr) 74px 44px;
    }
}

.checkboxes {
    display: flex;
    gap: 1.5rem;
    margin: 1.25rem 0;
}

.checkboxes label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkboxes input {
    width: auto;
}

.form-actions,
.inline-actions {
    justify-content: flex-start;
    margin: 0;
}

.image-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.image-slot {
    display: grid;
    gap: 0.8rem;
    align-content: start;
    padding: 1rem;
    border: 1px solid #dce2ea;
    border-radius: 0.6rem;
}

.image-slot h3 {
    margin: 0;
}

.image-slot img,
.empty-image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 0.5rem;
    object-fit: contain;
    background: #f1f5f9;
}

.instruction-form {
    padding: 1.4rem;
    border: 1px solid #dce2ea;
    border-radius: 0.75rem;
    background: #fff;
    margin-bottom: 1.5rem;
}

.instruction-filters {
    align-items: end;
}

.instruction-filters .field:first-child {
    flex: 1;
}

.instruction-list {
    display: grid;
    gap: 1rem;
}

.instruction-card {
    padding: 1.25rem;
    border: 1px solid #dce2ea;
    border-radius: 0.75rem;
    background: #fff;
}

.instruction-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.instruction-card h2 {
    margin: 0.65rem 0 0;
    font-size: 1.15rem;
}

.instruction-content {
    white-space: normal;
    overflow-wrap: anywhere;
}

.category-badge {
    background: #dbeafe;
    color: #1e40af;
}

.priority {
    margin-left: 0.5rem;
    color: #64748b;
    font-size: 0.85rem;
}

.inactive-card {
    opacity: 0.65;
}

.notice {
    margin-bottom: 1rem;
    padding: 1rem;
    border-left: 4px solid #2563eb;
    background: #dbeafe;
    color: #1e3a8a;
}

.context-preview {
    overflow-x: auto;
    padding: 1.25rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    background: #0f172a;
    color: #e2e8f0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.empty-image {
    display: grid;
    place-items: center;
    color: #64748b;
}

@media (max-width: 35rem) {
    .topbar,
    .topbar div {
        align-items: stretch;
        flex-direction: column;
    }

    .form-grid,
    .image-slots {
        grid-template-columns: 1fr;
    }

    .checkboxes,
    .page-heading,
    .search-form,
    .inline-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .instruction-card-header {
        flex-direction: column;
    }

    .conversation-heading-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .conversation-heading-actions > .button-link {
        justify-content: center;
        width: 100%;
    }

    .confirmation-modal-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .confirmation-modal-icon {
        margin-inline: auto;
    }

    .confirmation-modal-actions {
        grid-column: 1;
        flex-direction: column-reverse;
    }

    .confirmation-modal-actions button {
        width: 100%;
    }
}

/* Responsive app layout (kept last to override legacy component rules). */
.container {
    width: min(76rem, calc(100% - 2.5rem));
}

.grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
}

.card,
.table-wrap,
.search-form,
.product-form,
.image-manager,
.danger-zone,
.instruction-form,
.instruction-card,
.empty-state {
    border-radius: 1rem;
}

@media (max-width: 68rem) {
    .app-header {
        grid-template-columns: auto 1fr;
    }

    .desktop-nav {
        order: 3;
        grid-column: 1 / -1;
    }

    .admin-profile {
        justify-self: end;
    }

    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    body {
        padding-bottom: calc(5.2rem + env(safe-area-inset-bottom));
    }

    .app-header {
        position: sticky;
        display: flex;
        min-height: 4.25rem;
        padding: 0.65rem 1rem;
    }

    .app-brand small,
    .desktop-nav,
    .admin-name,
    .admin-profile .avatar {
        display: none;
    }

    .admin-profile {
        margin-left: auto;
    }

    .mobile-nav {
        position: fixed;
        z-index: 100;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        padding: 0.42rem 0.25rem calc(0.42rem + env(safe-area-inset-bottom));
        border-top: 1px solid #dbe2ea;
        background: rgb(255 255 255 / 96%);
        box-shadow: 0 -0.75rem 2rem rgb(15 23 42 / 9%);
        backdrop-filter: blur(16px);
    }

    .mobile-nav a {
        display: grid;
        place-items: center;
        gap: 0.15rem;
        min-width: 0;
        padding: 0.35rem 0.1rem;
        border-radius: 0.65rem;
        color: #64748b;
        font-size: 0.61rem;
        font-weight: 700;
        text-decoration: none;
    }

    .mobile-nav i {
        font-size: 1.42rem;
    }

    .mobile-nav a[aria-current="page"] {
        background: #eff6ff;
        color: #2563eb;
    }

    .container {
        width: min(100% - 1.25rem, 42rem);
        margin: 1.15rem auto 1.5rem;
    }

    .welcome-icon {
        width: 3.6rem;
        height: 3.6rem;
        font-size: 1.8rem;
    }

    .grid {
        grid-template-columns: 1fr;
    }

    .grid > .card {
        min-height: auto;
    }

    .grid > .card .button-link {
        margin-top: 0.6rem;
    }

    .page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .page-heading > .button-link,
    .page-heading > .inline-actions,
    .form-actions button,
    .form-actions .button-link {
        width: 100%;
    }

    .search-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        width: 100%;
        padding: 0.9rem;
    }

    .search-form input,
    .search-form select,
    .search-form button,
    .search-form > .field {
        max-width: none;
        width: 100%;
    }

    .search-form > label,
    .search-form > a {
        width: 100%;
    }

    .search-form .field,
    .search-form .field input,
    .search-form .field select {
        max-width: none;
        width: 100%;
    }

    .search-form > a {
        text-align: center;
    }

    .table-wrap {
        margin-inline: -0.1rem;
        border-radius: 0.9rem;
    }

    table {
        min-width: 42rem;
    }

    th,
    td {
        padding: 0.75rem;
    }

    .instruction-card,
    .product-form,
    .image-manager,
    .danger-zone,
    .instruction-form,
    .card {
        padding: 1rem;
    }

    .qr-panel {
        max-width: none;
    }

    .chat-thread {
        height: 58dvh;
        min-height: 18rem;
        padding: 0.65rem;
    }

    .chat-bubble {
        width: 88%;
    }

    .recipient-form {
        grid-template-columns: 1fr;
    }

    .recipient-create-card,
    .recipient-card {
        padding: 1rem;
    }

    .recipient-primary-action,
    .recipient-delete-button {
        width: 100%;
    }

    .recipient-delete-form {
        justify-content: stretch;
    }
}

/* Detalle completo de pedidos */
.order-detail-page{display:grid;gap:1.15rem}
.order-detail-page .page-heading{margin-bottom:0}
.order-detail-heading>div:first-child{display:grid;gap:.55rem}
.order-detail-heading h1{font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:-.035em}
.order-back-link{display:inline-flex;align-items:center;gap:.35rem;width:max-content;color:#64748b;font-size:.84rem;font-weight:700;text-decoration:none}
.order-back-link:hover{color:#1d4ed8}
.order-heading-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1rem;color:#64748b;font-size:.83rem}
.order-heading-meta>span:not(.badge){display:inline-flex;align-items:center;gap:.32rem}
.order-status-form{display:grid;gap:.4rem;min-width:min(100%,25rem)}
.order-status-form>label{color:#64748b;font-size:.75rem;font-weight:750}
.order-status-form>div{display:grid;grid-template-columns:minmax(10rem,1fr) auto;gap:.65rem}
.order-status-form select,.order-status-form button{min-height:2.8rem}
.order-status-form button{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;white-space:nowrap}
.order-products-card{padding:1.25rem}
.order-section-title{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.order-section-title>i{display:grid;flex:0 0 2.7rem;place-items:center;width:2.7rem;height:2.7rem;border-radius:.8rem;background:#eaf2ff;color:#2563eb;font-size:1.35rem}
.order-section-title h2,.order-section-title p{margin:0}
.order-section-title h2{font-size:1.16rem}
.order-section-title p{margin-top:.12rem;color:#64748b;font-size:.78rem}
.order-products-table{border-radius:.8rem;box-shadow:none}
.order-products-table tbody tr:last-child td{border-bottom:0}
.order-products-table td:nth-child(n+2){white-space:nowrap}
.order-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
.order-detail-card{min-width:0;padding:1.25rem}
.order-detail-list,.order-total-list{display:grid;gap:0;margin:0}
.order-detail-list>div,.order-total-list>div{display:grid;grid-template-columns:minmax(8rem,.8fr) minmax(0,1.2fr);gap:1rem;padding:.68rem 0;border-bottom:1px solid #e8edf4}
.order-detail-list>div:last-child,.order-total-list>div:last-child{border-bottom:0}
.order-detail-list dt,.order-total-list dt{color:#64748b;font-size:.79rem;font-weight:650}
.order-detail-list dd,.order-total-list dd{min-width:0;margin:0;color:#172033;font-size:.88rem;font-weight:700;text-align:right}
.order-break-value{overflow-wrap:anywhere}
.order-totals-card{background:linear-gradient(145deg,#fff,#f4f8ff)}
.order-total-list .order-grand-total{margin-top:.35rem;padding-top:1rem;border-top:2px solid #cbd5e1;border-bottom:0}
.order-grand-total dt,.order-grand-total dd{color:#172033;font-size:1.08rem;font-weight:850}
.order-record-card{padding:1.25rem}
.order-record-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.order-record-grid>div{display:grid;gap:.18rem;padding:.85rem;border:1px solid #e2e8f0;border-radius:.7rem;background:#f8fafc}
.order-record-grid span{color:#64748b;font-size:.72rem;font-weight:650}
.order-record-grid strong{font-size:.88rem;overflow-wrap:anywhere}
.order-notes{margin-top:1rem;padding:1rem;border-left:4px solid #2563eb;border-radius:.65rem;background:#eff6ff}
.order-notes p{margin:.35rem 0 0;color:#475569}

@media(max-width:48rem){
    .order-detail-heading{gap:1rem}
    .order-status-form{width:100%}
    .order-status-form>div{grid-template-columns:minmax(0,1fr) auto}
    .order-detail-grid{grid-template-columns:1fr}
    .order-record-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .order-products-table{margin:0;overflow:visible;border:0;background:transparent}
    .order-products-table table{min-width:0}
    .order-products-table thead{display:none}
    .order-products-table tbody,.order-products-table tr,.order-products-table td{display:block;width:100%}
    .order-products-table tr{margin-bottom:.75rem;padding:.85rem;border:1px solid #e2e8f0;border-radius:.8rem;background:#f8fafc}
    .order-products-table tr:last-child{margin-bottom:0}
    .order-products-table td{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.48rem 0;border:0;text-align:right;white-space:normal!important}
    .order-products-table td::before{content:attr(data-label);color:#64748b;font-size:.73rem;font-weight:700;text-align:left}
    .order-products-table td:first-child{display:block;padding-top:0;text-align:left}
    .order-products-table td:first-child::before{display:none}
    .order-products-table .product-cell{min-width:0}
}

@media(max-width:32rem){
    .order-detail-page{gap:.85rem}
    .order-status-form>div{grid-template-columns:1fr}
    .order-detail-list>div,.order-total-list>div{grid-template-columns:1fr;gap:.2rem}
    .order-detail-list dd,.order-total-list dd{text-align:left}
    .order-record-grid{grid-template-columns:1fr}
}

/* Buscador de pedidos */
.orders-list-heading{margin-bottom:1rem}
.orders-list-heading p{margin-top:.2rem;color:#64748b;font-size:.86rem}
.order-search-form{display:grid;grid-template-columns:minmax(13rem,1fr) minmax(11rem,.7fr) auto auto;align-items:end;gap:.8rem;margin-bottom:1rem}
.order-search-form .field{display:grid;gap:.38rem;min-width:0}
.order-search-form .field>span{color:#334155;font-size:.78rem;font-weight:750}
.order-search-input{position:relative;min-width:0}
.order-search-input>i{position:absolute;z-index:1;top:50%;left:.85rem;translate:0 -50%;color:#64748b;font-size:1.08rem;pointer-events:none}
.order-search-input input{width:100%;max-width:none;min-height:2.8rem;padding-left:2.55rem}
.order-search-form>button,.order-search-form>.button-link{display:inline-flex;align-items:center;justify-content:center;gap:.38rem;min-height:2.8rem;white-space:nowrap}
.orders-empty-result{display:grid;justify-items:center;gap:.25rem;padding:2.5rem 1rem;color:#64748b;text-align:center}
.orders-empty-result>i{margin-bottom:.3rem;color:#94a3b8;font-size:2rem}
.orders-empty-result strong{color:#334155;font-size:1rem}
.orders-empty-result span{font-size:.82rem}

@media(max-width:48rem){
    .order-search-form{grid-template-columns:1fr;width:100%;padding:1rem}
    .order-search-form .field,.order-search-form>button,.order-search-form>.button-link{width:100%;max-width:none}
}
.order-product-color{display:flex!important;align-items:center;gap:5px;margin-top:7px;color:#586985!important;font-weight:650}
.order-product-color i{color:#6d46dc;font-size:15px}
.order-product-color span{font-weight:800}
.order-shipment-button{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:1rem;background:#2455dc;color:#fff;box-shadow:0 .45rem 1rem rgb(36 85 220 / 20%)}
.order-shipment-button:hover{background:#1945c5;transform:translateY(-1px)}
.shipment-modal-icon{background:#dbeafe;color:#2455dc}
.whatsapp-launch-page{display:grid;place-items:center;min-height:calc(100vh - 8rem)}
.whatsapp-launch-card{display:flex;align-items:center;flex-direction:column;width:min(100%,32rem);padding:2rem;text-align:center}
.whatsapp-launch-card h1{margin:.8rem 0 .35rem}
.whatsapp-launch-card p{max-width:26rem;margin:0 0 1.25rem;color:#64748b}
.whatsapp-launch-card .order-shipment-button{max-width:24rem}
.whatsapp-launch-card .button-link{width:100%;max-width:24rem;margin-top:.7rem}
.whatsapp-launch-card .continue-link{margin-top:1.25rem}
.whatsapp-launch-icon{display:grid;place-items:center;width:4rem;height:4rem;border-radius:1.2rem;background:#dcfce7;color:#16a34a;font-size:2.25rem}