/* OneTouch Lucky Draw - Winner Selection System
   House theme: deep indigo/violet gradient, clean cards, confident type. */

:root {
    --otd-navy: #1b1140;
    --otd-purple: #5b21b6;
    --otd-purple-2: #7c3aed;
    --otd-accent: #f59e0b;
    --otd-green: #16a34a;
    --otd-red: #dc2626;
    --otd-bg: #f4f5fb;
    --otd-card: #ffffff;
    --otd-text: #1f2333;
    --otd-muted: #6b7280;
    --otd-border: #e6e5f5;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--otd-bg);
    color: var(--otd-text);
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { text-decoration: none; }

.otd-topbar {
    background: linear-gradient(120deg, var(--otd-navy) 0%, var(--otd-purple) 55%, var(--otd-purple-2) 100%);
    color: #fff;
    box-shadow: 0 2px 14px rgba(27, 17, 64, .25);
}

.otd-topbar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.otd-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.otd-brand img {
    height: 38px;
    background: #fff;
    border-radius: 8px;
    padding: 4px 8px;
}

.otd-brand-text {
    line-height: 1.15;
}

.otd-brand-text .otd-title {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .2px;
}

.otd-brand-text .otd-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,.75);
}

.otd-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.otd-nav a {
    color: rgba(255,255,255,.88);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    transition: background .15s ease;
}

.otd-nav a:hover {
    background: rgba(255,255,255,.14);
    color: #fff;
}

.otd-nav a.active {
    background: rgba(255,255,255,.2);
    color: #fff;
}

.otd-nav a.otd-nav-danger {
    color: #fecaca;
}

.otd-nav a.otd-nav-danger:hover {
    background: rgba(220,38,38,.35);
    color: #fff;
}

.otd-user {
    font-size: 13px;
    color: rgba(255,255,255,.85);
    display: flex;
    align-items: center;
    gap: 10px;
}

.otd-user .otd-role-pill {
    background: rgba(255,255,255,.16);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .4px;
}

.otd-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 24px 60px;
}

.otd-card {
    background: var(--otd-card);
    border: 1px solid var(--otd-border);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(27, 17, 64, .06);
    padding: 28px;
}

.otd-page-title {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--otd-navy);
}

.otd-page-subtitle {
    color: var(--otd-muted);
    margin: 0 0 24px;
    font-size: 14px;
}

.otd-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.otd-stat {
    background: linear-gradient(160deg, #f7f5ff 0%, #ffffff 100%);
    border: 1px solid var(--otd-border);
    border-radius: 12px;
    padding: 16px 18px;
}

.otd-stat .otd-stat-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--otd-purple);
}

.otd-stat .otd-stat-label {
    font-size: 12px;
    color: var(--otd-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 2px;
}

.otd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 10px;
    padding: 13px 26px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .15s ease, opacity .15s ease;
}

.otd-btn:active { transform: translateY(1px); }
.otd-btn:disabled { opacity: .55; cursor: not-allowed; }

.otd-btn-primary {
    background: linear-gradient(120deg, var(--otd-purple) 0%, var(--otd-purple-2) 100%);
    color: #fff;
    box-shadow: 0 8px 22px rgba(91, 33, 182, .32);
}

.otd-btn-primary:hover:not(:disabled) { box-shadow: 0 10px 26px rgba(91, 33, 182, .42); }

.otd-btn-success {
    background: linear-gradient(120deg, #16a34a 0%, #22c55e 100%);
    color: #fff;
    box-shadow: 0 8px 22px rgba(22, 163, 74, .3);
}

.otd-btn-outline {
    background: #fff;
    color: var(--otd-purple);
    border: 1.5px solid var(--otd-purple);
}

.otd-btn-danger {
    background: linear-gradient(120deg, #b91c1c 0%, #dc2626 100%);
    color: #fff;
    box-shadow: 0 8px 22px rgba(220, 38, 38, .3);
}

.otd-btn-sm {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 8px;
}

.otd-alert {
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 18px;
}

.otd-alert-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.otd-alert-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.otd-alert-info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.otd-alert-warn {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* ---------- Login page ---------- */

.otd-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 15% 20%, #7c3aed33, transparent 45%),
                radial-gradient(circle at 85% 80%, #f59e0b2e, transparent 45%),
                linear-gradient(135deg, var(--otd-navy) 0%, #2d1b69 55%, var(--otd-purple) 100%);
    padding: 24px;
}

.otd-login-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 18px;
    padding: 36px 32px;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

.otd-login-logo {
    display: block;
    margin: 0 auto 18px;
    max-height: 56px;
}

.otd-login-card h1 {
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    color: var(--otd-navy);
    margin: 0 0 4px;
}

.otd-login-card .otd-login-sub {
    text-align: center;
    font-size: 13px;
    color: var(--otd-muted);
    margin-bottom: 26px;
}

.otd-field {
    margin-bottom: 16px;
}

.otd-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--otd-text);
    margin-bottom: 6px;
}

.otd-field input[type=text],
.otd-field input[type=password],
.otd-field input[type=email],
.otd-field select {
    width: 100%;
    padding: 11px 13px;
    border-radius: 9px;
    border: 1.5px solid var(--otd-border);
    font-size: 14px;
    background: #fbfaff;
}

.otd-field input:focus, .otd-field select:focus {
    outline: none;
    border-color: var(--otd-purple-2);
    background: #fff;
}

.otd-login-btn {
    width: 100%;
    margin-top: 6px;
}

/* ---------- Draw page animation ---------- */

.otd-city-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 460px;
    overflow-y: auto;
    padding-right: 4px;
    margin-top: 20px;
}

.otd-city-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--otd-border);
    background: #fafaff;
    transition: background .25s ease, border-color .25s ease, transform .2s ease;
}

.otd-city-row.pending { opacity: .55; }

.otd-city-row.processing {
    background: #f5f0ff;
    border-color: var(--otd-purple-2);
    transform: scale(1.01);
}

.otd-city-row.done {
    background: #f0fdf4;
    border-color: #86efac;
}

.otd-city-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    background: #e5e7eb;
    color: #6b7280;
}

.otd-city-row.processing .otd-city-icon {
    background: var(--otd-purple-2);
    color: #fff;
}

.otd-city-row.done .otd-city-icon {
    background: var(--otd-green);
    color: #fff;
}

.otd-spin {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: otd-spin .7s linear infinite;
}

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

.otd-city-name {
    font-weight: 700;
    font-size: 14px;
    flex: 1;
}

.otd-city-sub {
    font-size: 12px;
    color: var(--otd-muted);
}

.otd-city-status {
    font-size: 13px;
    font-weight: 700;
    color: var(--otd-purple);
    min-width: 130px;
    text-align: right;
}

.otd-city-row.done .otd-city-status { color: var(--otd-green); }

.otd-progress-wrap {
    margin-top: 22px;
}

.otd-progress-bar-track {
    height: 12px;
    border-radius: 999px;
    background: #ece9fb;
    overflow: hidden;
}

.otd-progress-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--otd-purple) 0%, var(--otd-accent) 100%);
    transition: width .35s ease;
}

.otd-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--otd-muted);
    margin-top: 6px;
}

.otd-celebrate {
    text-align: center;
    padding: 40px 20px;
}

.otd-celebrate .otd-emoji {
    font-size: 52px;
    animation: otd-pop .5s ease;
}

@keyframes otd-pop {
    0% { transform: scale(.4); opacity: 0; }
    70% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
}

.otd-celebrate h2 {
    color: var(--otd-navy);
    margin: 12px 0 4px;
}

.otd-celebrate p { color: var(--otd-muted); margin-bottom: 22px; }

/* ---------- Tables ---------- */

.otd-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--otd-border);
    border-radius: 12px;
}

table.otd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

table.otd-table th {
    background: #f4f2fd;
    color: var(--otd-navy);
    text-align: left;
    padding: 11px 14px;
    font-weight: 700;
    position: sticky;
    top: 0;
    white-space: nowrap;
}

table.otd-table td {
    padding: 10px 14px;
    border-top: 1px solid var(--otd-border);
    white-space: nowrap;
}

table.otd-table tr:hover td { background: #faf9ff; }

.otd-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.otd-toolbar input, .otd-toolbar select {
    padding: 9px 12px;
    border-radius: 8px;
    border: 1.5px solid var(--otd-border);
    font-size: 13.5px;
}

.otd-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: #ede9fe;
    color: var(--otd-purple);
}

.otd-footer {
    text-align: center;
    color: var(--otd-muted);
    font-size: 12px;
    padding: 24px;
}

.otd-lock-panel {
    text-align: center;
    padding: 48px 20px;
}

.otd-lock-panel .otd-lock-icon { font-size: 44px; margin-bottom: 10px; }

.otd-superadmin-only {
    border-top: 1px dashed var(--otd-border);
    margin-top: 26px;
    padding-top: 18px;
}