/*
 * tailwind_style.css — supplementary styles for Tailwind-powered login pages
 * Loaded alongside the Tailwind Play CDN on admin, customer, and platform login pages.
 * Does NOT affect the rest of the panel (style.css is still used there).
 *
 * @author Jefferson Brown Esquivel
 */

/* ── Google Fonts — Inter ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800&display=swap');

/* ── Base reset for login pages ────────────────────────────────────────── */
.tw-login-page,
.tw-login-page * {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    box-sizing: border-box;
}

/* ── Animations ────────────────────────────────────────────────────────── */
@keyframes tw-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes tw-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes tw-slide-right {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0);     }
}
@keyframes tw-pulse-slow {
    0%, 100% { opacity: .6; transform: scale(1);    }
    50%       { opacity: 1;  transform: scale(1.04); }
}

.tw-anim-fade-up  { animation: tw-fade-up   0.5s ease both; }
.tw-anim-fade-in  { animation: tw-fade-in   0.4s ease both; }
.tw-anim-slide    { animation: tw-slide-right 0.5s ease both; }
.tw-delay-100     { animation-delay: 0.10s; }
.tw-delay-200     { animation-delay: 0.20s; }
.tw-delay-300     { animation-delay: 0.30s; }
.tw-delay-400     { animation-delay: 0.40s; }
.tw-delay-500     { animation-delay: 0.50s; }

/* ── Brand gradient backgrounds ────────────────────────────────────────── */
.tw-bg-admin {
    background: linear-gradient(145deg, #020617 0%, #0f172a 40%, #1e3a8a 100%);
}
.tw-bg-customer {
    background: linear-gradient(145deg, #1e1b4b 0%, #1e40af 50%, #0369a1 100%);
}
.tw-bg-platform {
    background: linear-gradient(145deg, #022c22 0%, #042f2e 40%, #0d6363 100%);
}

/* ── Dot-grid decorative pattern (overlaid on brand panels) ─────────────── */
.tw-dot-pattern {
    background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
}

/* ── Glass card ─────────────────────────────────────────────────────────── */
.tw-glass {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255,255,255,0.6) inset;
}

/* ── Form inputs ────────────────────────────────────────────────────────── */
.tw-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #1e293b;
    background: #f8fafc;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.tw-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3.5px rgba(59, 130, 246, 0.14);
    background: #ffffff;
}
.tw-input-teal:focus {
    border-color: #0d9488;
    box-shadow: 0 0 0 3.5px rgba(13, 148, 136, 0.14);
}
.tw-input-platform {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.14);
    color: #f1f5f9;
}
.tw-input-platform::placeholder { color: rgba(255,255,255,0.35); }
.tw-input-platform:focus {
    border-color: #2dd4bf;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18);
    background: rgba(255,255,255,0.1);
}

/* ── Password wrapper + toggle button ──────────────────────────────────── */
.tw-pw-wrap {
    position: relative;
}
.tw-pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    line-height: 0;
    transition: color 0.15s;
}
.tw-pw-toggle:hover { color: #475569; }
.tw-pw-toggle-platform { color: rgba(255,255,255,0.4); }
.tw-pw-toggle-platform:hover { color: rgba(255,255,255,0.8); }
.tw-pw-wrap .tw-input { padding-right: 42px; }

/* ── Primary buttons ────────────────────────────────────────────────────── */
.tw-btn {
    width: 100%;
    padding: 11px 20px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.15s, filter 0.15s;
}
.tw-btn:active { transform: scale(.98); }

.tw-btn-admin {
    background: linear-gradient(135deg, #1e40af, #1d4ed8);
    color: #fff;
    box-shadow: 0 4px 14px rgba(30, 64, 175, 0.35);
}
.tw-btn-admin:hover { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(30, 64, 175, 0.45); }

.tw-btn-customer {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
.tw-btn-customer:hover { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45); }

.tw-btn-platform {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #fff;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}
.tw-btn-platform:hover { filter: brightness(1.1); box-shadow: 0 6px 18px rgba(13, 148, 136, 0.45); }

/* ── Checkbox ───────────────────────────────────────────────────────────── */
.tw-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid #cbd5e1;
    background: #f8fafc;
    cursor: pointer;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}
.tw-checkbox:checked {
    background: #2563eb;
    border-color: #2563eb;
}
.tw-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 4px; top: 1px;
    width: 5px; height: 9px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(43deg);
}

/* ── Alert / flash messages ─────────────────────────────────────────────── */
.tw-alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 18px;
    border: 1px solid transparent;
    animation: tw-fade-up 0.35s ease both;
}
.tw-alert-error   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.tw-alert-success { background: #f0fdf4; color: #14532d; border-color: #bbf7d0; }
.tw-alert-warning { background: #fffbeb; color: #78350f; border-color: #fde68a; }

/* Dark variant for platform page */
.tw-alert-error-dark   { background: rgba(220,38,38,0.12); color: #fca5a5; border-color: rgba(220,38,38,0.25); }
.tw-alert-success-dark { background: rgba(16,185,129,0.12); color: #6ee7b7; border-color: rgba(16,185,129,0.25); }

/* ── Divider line ───────────────────────────────────────────────────────── */
.tw-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #94a3b8;
    font-size: 12px;
    margin: 18px 0;
}
.tw-divider::before,
.tw-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

/* ── Decorative blobs (admin left panel) ────────────────────────────────── */
.tw-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.18;
    pointer-events: none;
}
.tw-blob-1 { width: 220px; height: 220px; background: #3b82f6; top: -40px; right: -40px; }
.tw-blob-2 { width: 160px; height: 160px; background: #818cf8; bottom: 80px; left: -30px; }
.tw-blob-3 { width: 120px; height: 120px; background: #22d3ee; bottom: -20px; right: 60px; }

/* ── Select dropdown ────────────────────────────────────────────────────── */
.tw-select {
    width: 100%;
    padding: 11px 36px 11px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #1e293b;
    background-color: #f8fafc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 15px;
    transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.tw-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3.5px rgba(59, 130, 246, 0.14);
    background-color: #fff;
}
.tw-select optgroup { font-weight: 700; color: #374151; }
.tw-select option   { font-weight: 400; color: #1e293b; }

/* ── Info / notice box ──────────────────────────────────────────────────── */
.tw-info-box {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
    border: 1px solid transparent;
}
.tw-info-box-blue {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}
.tw-info-box-blue strong { color: #1e3a8a; }

/* ── Section heading inside form ────────────────────────────────────────── */
.tw-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
.tw-field-hint {
    font-size: 11.5px;
    font-weight: 400;
    color: #94a3b8;
}

/* ── Radio button term selector ─────────────────────────────────────────── */
.tw-term-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.tw-term-opt {
    flex: 1;
    min-width: 80px;
}
.tw-term-opt input[type="radio"] { display: none; }
.tw-term-opt label {
    display: block;
    text-align: center;
    padding: 9px 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.tw-term-opt input[type="radio"]:checked + label {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1e40af;
}
.tw-term-opt label:hover {
    border-color: #93c5fd;
    background: #f0f9ff;
}

/* ── Tracking number display box ────────────────────────────────────────── */
.tw-tn-box {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1.5px solid #bfdbfe;
    border-radius: 14px;
    padding: 18px 20px;
    text-align: center;
    margin-bottom: 20px;
}
.tw-tn-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 4px;
}
.tw-tn-value {
    font-family: 'Courier New', monospace;
    font-size: 22px;
    font-weight: 900;
    color: #1e40af;
    letter-spacing: 3px;
}

/* ── Result info grid ───────────────────────────────────────────────────── */
.tw-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    margin-bottom: 22px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}
.tw-result-grid-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    margin-bottom: 2px;
}
.tw-result-grid-value {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}

/* ── Status pill ────────────────────────────────────────────────────────── */
.tw-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.tw-status-pending  { background: #fef3c7; color: #92400e; }
.tw-status-approved { background: #dcfce7; color: #14532d; }
.tw-status-rejected { background: #fee2e2; color: #991b1b; }

/* ── Timeline ───────────────────────────────────────────────────────────── */
.tw-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.tw-timeline::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    background: #e2e8f0;
    border-radius: 2px;
}
.tw-tl-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-bottom: 24px;
    position: relative;
}
.tw-tl-step:last-child { padding-bottom: 0; }

.tw-tl-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    position: relative;
    z-index: 1;
    border: 2px solid;
    transition: transform 0.2s;
}
.tw-tl-dot-done     { background: #16a34a; border-color: #16a34a; color: #fff; }
.tw-tl-dot-active   { background: #fff;    border-color: #d97706; color: #d97706; box-shadow: 0 0 0 4px rgba(217,119,6,.12); }
.tw-tl-dot-pending  { background: #f1f5f9; border-color: #cbd5e1; color: #94a3b8; }
.tw-tl-dot-rejected { background: #fef2f2; border-color: #dc2626; color: #dc2626; }

.tw-tl-body { flex: 1; padding-top: 6px; }
.tw-tl-title { font-size: 14px; font-weight: 700; color: #1e293b; margin: 0 0 3px; }
.tw-tl-desc  { font-size: 13px; color: #64748b; margin: 0; line-height: 1.5; }

/* ── Responsive tweaks ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .tw-split-left  { display: none !important; }
    .tw-split-right { border-radius: 0 !important; min-height: 100vh; }
    .tw-result-grid { grid-template-columns: 1fr; }
}