/* Big, thumb-friendly UI meant for a shared iPad/iPhone at a shipping dock.
   Palette matches Tingue's own branding -- pulled directly from the same
   hex values TingueAnalytics/bot/email_utils.py uses for the daily report
   emails ("Tingue branding colors" block), not eyeballed from tingue.com,
   so this stays in sync if that ever changes. */

:root {
    --navy: #1E40AF;
    --dark-navy: #1E3A8A;
    --silver: #D1D5DB;
    --light-blue: #BFDBFE;
    --gold: #FBBF24;
    --white: #FFFFFF;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-700: #374151;
    --gray-900: #111827;
    --green: #059669;
    --red: #DC2626;

    --shadow-card: 0 1px 2px rgba(17, 24, 39, 0.06), 0 8px 20px -6px rgba(30, 64, 175, 0.16);
    --shadow-header: 0 2px 10px -2px rgba(17, 24, 39, 0.28);
    --radius: 14px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--gray-100);
    color: var(--gray-700);
    -webkit-font-smoothing: antialiased;
}

header {
    background: linear-gradient(180deg, var(--navy), var(--dark-navy));
    color: var(--white);
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-header);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* The TINGUE wordmark inside the logo is a semi-transparent cutout, not a
   solid fill -- it only reads crisp and high-contrast against a light
   background (verified against the source PNG), so it gets its own light
   chip here rather than sitting directly on the navy header. That also
   gives the mark real breathing room instead of butting against the bar. */
.logo-badge {
    background: var(--white);
    border-radius: 10px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.logo-badge img.logo {
    /* 38px + padding keeps the badge close to the previous 48px logo
       height, so the header bar's overall height barely shifts. */
    height: 38px;
    width: auto;
    display: block;
}

header h1 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 8px;
    /* Let the title (not the logo or version tag) give up space first on a
       narrow phone -- min-width:0 overrides flexbox's default auto-min,
       which otherwise refuses to shrink below the text's natural width. */
    min-width: 0;
}

header h1 .fa {
    color: var(--light-blue);
    font-size: 0.95rem;
    flex-shrink: 0;
}

header h1 .title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logo-badge,
.app-version {
    flex-shrink: 0;
}

.app-version {
    margin-left: auto;
    color: var(--light-blue);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.screen {
    max-width: 480px;
    margin: 0 auto;
    padding: 20px 16px 32px;
}

.card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--gray-100);
}

label {
    display: block;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    margin-bottom: 10px;
}

input[type="number"],
input[type="password"],
input[type="text"] {
    width: 100%;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 12px 14px;
    background: var(--gray-50);
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    color: var(--gray-900);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

input::placeholder { color: var(--gray-400); font-weight: 500; }

input:focus {
    outline: none;
    background: var(--white);
    border-color: var(--navy);
    box-shadow: 0 0 0 4px var(--light-blue);
}

.direction-toggle,
.doctype-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.toggle-btn {
    flex: 1;
    text-align: center;
    padding: 14px;
    border-radius: 10px;
    background: var(--gray-50);
    border: 1.5px solid var(--gray-200);
    color: var(--gray-700);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

input[name="direction"]:checked + .toggle-btn,
input[name="docType"]:checked + .toggle-btn {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}

input[name="direction"]:focus-visible + .toggle-btn,
input[name="docType"]:focus-visible + .toggle-btn {
    box-shadow: 0 0 0 4px var(--light-blue);
}

.lookup-row {
    display: flex;
    gap: 8px;
}

.lookup-row input { flex: 1; }

.btn {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 14px 18px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 10px;
    transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.btn:active { transform: scale(0.98); }

.btn-block { width: 100%; }

.btn-primary {
    background: var(--navy);
    color: var(--white);
    box-shadow: 0 4px 12px -3px rgba(30, 64, 175, 0.45);
}
.btn-primary:active { background: var(--dark-navy); box-shadow: 0 2px 6px -2px rgba(30, 64, 175, 0.4); }
.btn-primary:disabled {
    background: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-secondary { background: var(--light-blue); color: var(--dark-navy); }
.btn-secondary:active { background: var(--silver); }

.order-info {
    margin-top: 14px;
    padding: 14px;
    background: #ECFDF5;   /* light tint of --green */
    border-radius: 10px;
    color: var(--gray-900);
    line-height: 1.5;
}

.order-info .order-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-info .order-head::before {
    content: "\f00c"; /* fa-check */
    font-family: FontAwesome;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--green);
    color: var(--white);
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-info .order-line {
    margin-top: 2px;
    color: var(--gray-700);
}

.doc-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.doc-status.status-open { background: #D1FAE5; color: #065F46; }
.doc-status.status-closed { background: var(--gray-200); color: var(--gray-700); }

.order-info .warn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 10px;
    background: #FEF3C7;   /* light tint of --gold */
    color: #92650A;        /* dark tint of --gold, readable on light backgrounds */
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.error {
    color: var(--red);
    font-weight: 600;
    min-height: 1.2em;
    margin: 8px 2px 0;
}

.hint {
    color: var(--gray-500);
    font-size: 0.85rem;
    margin: 6px 2px 0;
}

.thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.thumb {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.12);
}

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

.thumb .remove {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(17, 24, 39, 0.65);
    color: var(--white);
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 0.8rem;
    backdrop-filter: blur(2px);
}

#uploadStatus {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.status-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.92rem;
}

.status-ok { color: #065F46; background: #ECFDF5; }
.status-fail { color: #991B1B; background: #FEF2F2; }

.footer-link {
    text-align: center;
    margin-top: 4px;
}

.footer-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--navy);
    font-weight: 600;
    text-decoration: none;
    padding: 8px 4px;
}

.footer-link a:active { color: var(--dark-navy); }

.log-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
    font-variant-numeric: tabular-nums;
}

.log-table th {
    text-align: left;
    padding: 10px 8px;
    background: var(--gray-50);
    color: var(--gray-500);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--gray-200);
}

.log-table td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.9rem;
    color: var(--gray-900);
}

.log-table tr:last-child td { border-bottom: none; }

.log-table .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.row-error .status-pill { color: #991B1B; background: #FEF2F2; }
.row-ok .status-pill { color: #065F46; background: #ECFDF5; }

.log-table td.log-empty {
    text-align: center;
    padding: 36px 8px;
    color: var(--gray-400);
    font-size: 0.95rem;
}

.log-empty .fa {
    font-size: 1.6rem;
    margin-bottom: 8px;
    display: block;
    color: var(--gray-200);
}