html, body {
    margin: 0;
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #07101b;
    color: #e2e8f0;
}

.nav-link { display:flex; align-items:center; gap:10px; }
.nav-link .icon { color: #cbd5e1; }
.nav-link:hover .icon { color: #fff; }

a { color: #93c5fd; }

h1, h2, h3, h4, h5 { color: #f8fafc; margin-top: 0; }

.admin-page-title { font-size: 1.7rem; font-weight: 800; margin-bottom: 16px; }

.admin-panel {
    background: #ffffff;
    color: #0f172a;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 60px rgba(2, 6, 23, 0.2);
    padding: 18px;
    margin-bottom: 16px;
}

.admin-grid { display: grid; gap: 12px; }
.admin-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Ensure two-column grids align items at the top and allow children to shrink correctly */
.admin-grid-2 { align-items: start; }
.admin-grid-2 > .admin-panel { min-width: 0; }

.metric-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}

.metric-label { color: #64748b; font-size: 0.85rem; margin-bottom: 6px; }
.metric-value { color: #07101b; font-size: 1.7rem; font-weight: 800; }

.chart-row {
    display: grid;
    grid-template-columns: 90px 1fr 52px;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.chart-label { color: #334155; font-size: 0.9rem; font-weight: 600; text-transform: capitalize; }
.chart-bar-wrap { height: 10px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.chart-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0ea5e9, #2563eb); }
.chart-bar-alt { background: linear-gradient(90deg, #22c55e, #0ea5e9); }
.chart-value { color: #0f172a; font-weight: 700; text-align: right; }

.db-health-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.db-health-db { color: #475569; font-size: .88rem; font-weight: 600; }
.db-health-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; color: #334155; border-bottom: 1px solid #e2e8f0; }
.db-health-missing { margin-top: 10px; padding: 10px; border-radius: 8px; background: #fff7ed; border: 1px solid #fed7aa; }
.db-health-missing-title { color: #9a3412; font-weight: 700; margin-bottom: 6px; }
.db-health-item { color: #7c2d12; font-size: .88rem; }
.db-health-time { margin-top: 10px; color: #64748b; font-size: .82rem; }

.form-control, .form-select, textarea, input {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 10px;
    box-sizing: border-box;
}

.form-control:focus, .form-select:focus, textarea:focus, input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.2) !important;
    outline: none;
}

/* Modern button styles used for Save / Clear / Edit actions */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 140ms ease, background-color 120ms ease, color 120ms ease;
}
.btn:active { transform: translateY(1px) scale(0.998); }
.btn-sm { padding: 0.35rem 0.6rem; font-size: 0.85rem; border-radius: 8px; }

.btn-primary {
    background: linear-gradient(90deg,#0ea5e9,#2563eb);
    border-color: rgba(37,99,235,0.9);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(37,99,235,0.12);
}
.btn-primary:hover { background: linear-gradient(90deg,#0b8fc6,#1e63c9); box-shadow: 0 10px 28px rgba(37,99,235,0.16); }


.admin-table-wrap { overflow: auto; }
.table { color: #0f172a; width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 8px; border-bottom: 1px solid #e2e8f0; }
.table td { vertical-align: middle; }

/* For alphabet config table, add left padding to non-id columns so they are spaced away from the id column */
.alph-table td:not(:first-child), .alph-table th:not(:first-child) {
    padding-left: 18px;
}

/* Add extra spacing specifically between the Id column and the Language column */
.alph-table td:first-child, .alph-table th:first-child {
    padding-right: 28px;
}
.table thead th { color: #334155; font-size: 0.85rem; text-transform: uppercase; letter-spacing: .03em; }

.status-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.status-active { background: #dcfce7; color: #166534; }
.status-inactive { background: #fee2e2; color: #991b1b; }
.alert { border-radius: 10px; padding: 10px; }
.alert-warning { background:#fef3c7; color:#78350f; }
.alert-info { background:#dbeafe; color:#1e3a8a; }
.alert-danger { background:#fee2e2; color:#991b1b; }

.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #07101b 0%, #0f172a 50%, #0b2440 100%);
    padding: 20px;
}

.login-card {
    width: 400px;
    max-width: 100%;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 25px 60px rgba(2, 6, 23, .45);
}

.login-title { font-size: 1.35rem; font-weight: 800; color: #f8fafc; }
.login-subtitle { color: #94a3b8; margin-bottom: 14px; }
.login-card label { color: #cbd5e1; margin-bottom: 6px; display: block; }
.login-card input { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #475569; background: #0b1220; color: #fff; }
.login-card button { width: 100%; margin-top: 8px; padding: 10px; border: 0; border-radius: 8px; background: #0ea5e9; color: #fff; font-weight: 700; }

.field-label {
    display: flex;
    align-items: center;
    color: #334155;
    font-weight: 600;
    font-size: 0.9rem;
}

.alpha-stack .form-group { margin-bottom: 10px; }

/* Make alpha textareas use full card width and prevent dragging resize from corner */
.alpha-stack .form-group textarea {
    width: 100%;
    box-sizing: border-box;
    resize: none; /* disable manual corner resize */
}

/* Modern file browse button */
.file-btn { display: inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; border:1px solid #cbd5e1; background:#fff; cursor:pointer; }
.file-btn:hover { background:#f3f7fb; transform:translateY(-1px); }
.file-name { margin-top:6px; }

.alpha-stack .form-group .file-name { margin-top: 6px; }


.small-muted {
    color: #64748b;
    font-size: 0.9rem;
}

.log-viewer {
    background: #0b1220;
    color: #e2e8f0;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 12px;
    max-height: 580px;
    overflow: auto;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-size: 0.82rem;
    line-height: 1.35;
}

.log-line {
    white-space: pre-wrap;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    padding: 2px 0;
}

.log-line:last-child {
    border-bottom: none;
}

.btn-light {
    background: #ffffff;
    border-color: #e6eef8;
    color: #0f172a;
    box-shadow: 0 6px 16px rgba(2,6,23,0.06);
}
.btn-light:hover { background: #f3f7fb; transform: translateY(-1px); }

.btn-warning {
    background: linear-gradient(90deg,#f59e0b,#f97316);
    border-color: #d97706;
    color: #fff;
}
.btn-warning:hover { background: linear-gradient(90deg,#f29a05,#d97706); }

.btn-danger { background: linear-gradient(90deg,#ef4444,#dc2626); color: #fff; border-color: rgba(220,38,38,0.9); box-shadow: 0 8px 24px rgba(220,38,38,0.08); }
.btn-danger:hover { background: linear-gradient(90deg,#e02424,#b91c1c); }

@media (max-width: 1100px) { .admin-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
    .admin-grid-2, .admin-grid-3, .admin-grid-4 { grid-template-columns: 1fr; }
    .chart-row { grid-template-columns: 76px 1fr 40px; }
}