body { background: #f0f2f4; font-size: 0.9rem; }

/* Top bar */
.top-bar { background: #1a2533; padding: 0 1.5rem; }
.top-bar .top-bar-left .menu-text {
    color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: 0.03em;
}
.top-bar .top-bar-left .menu-text i { color: #4db8ff; margin-right: 0.4rem; }
.top-bar ul { background-color: #1a2533; }

/* Interface language switcher */
.top-bar .top-bar-right .menu-text {
    color: #c8d3df; font-weight: 600; font-size: 0.85rem;
}
#ui-lang-switcher {
    margin: 0; height: 2.1rem; padding: 0 1.6rem 0 0.6rem;
    font-size: 0.85rem; color: #1a2533; background-color: #fff;
    border: none; border-radius: 4px; min-width: 150px;
}

/* API Docs button in the top bar */
.api-docs-btn {
    margin: 0 0.6rem 0 0; background: transparent; color: #c8d3df;
    border: 1px solid #3a4a5e; padding: 0.45rem 0.8rem; font-size: 0.82rem;
}
.api-docs-btn:hover, .api-docs-btn:focus { background: #24364a; color: #fff; }
.api-docs-btn i { color: #4db8ff; }
.api-docs-btn .fa-caret-down { margin-left: 0.25rem; font-size: 0.7rem; }

/* API Docs dropdown menu */
.dropdown-pane.api-docs-menu { padding: 0.3rem; min-width: 200px; border-radius: 6px; }
.dropdown-pane.api-docs-menu .menu.vertical { background: transparent; }
.dropdown-pane.api-docs-menu a {
    color: #1a2533; font-size: 0.85rem; padding: 0.5rem 0.7rem; border-radius: 4px;
}
.dropdown-pane.api-docs-menu a:hover { background: #f0f4f9; }
.dropdown-pane.api-docs-menu a i { color: #1a6fb5; margin-right: 0.45rem; width: 1rem; text-align: center; }
.dropdown-pane.api-docs-menu .api-docs-divider { border-top: 1px solid #e2e8f0; margin: 0.3rem 0; }

/* Live preview banner */
.i18n-preview {
    background: linear-gradient(90deg, #1a2533, #24364a);
    color: #e8eef5; padding: 0.9rem 1.5rem; border-bottom: 1px solid #d8dde3;
}
.i18n-preview h5 { color: #fff; margin: 0 0 0.15rem; font-size: 1.05rem; font-weight: 700; }
.i18n-preview p  { margin: 0; font-size: 0.85rem; color: #aebccd; }

/* Tabs */
.main-tabs-wrap { background: #fff; border-bottom: 1px solid #d8dde3; padding: 0 1.5rem; }
ul.tabs { background: transparent; border: none; margin: 0; }
ul.tabs .tabs-title > a {
    padding: 0.9rem 1.2rem; color: #5a6473; font-weight: 500;
    border-bottom: 3px solid transparent; font-size: 0.88rem;
}
ul.tabs .tabs-title > a:hover { color: #1a2533; background: transparent; }
ul.tabs .tabs-title.is-active > a { color: #1a6fb5; border-bottom-color: #1a6fb5; background: transparent; }

/* Content panels */
.tabs-content { background: transparent; border: none; }
.tabs-panel { padding: 1.5rem; }

/* Filter bar */
.filter-bar {
    background: #fff; border: 1px solid #d8dde3; border-radius: 6px;
    padding: 0.9rem 1rem; margin-bottom: 1rem;
}
.filter-bar select, .filter-bar input[type=text] { margin-bottom: 0; font-size: 0.875rem; }

/* Table */
.i18n-table-wrap { background: #fff; border: 1px solid #d8dde3; border-radius: 6px; overflow: hidden; }
table.i18n-table { margin-bottom: 0; width: 100%; font-size: 0.85rem; }
table.i18n-table thead th {
    background: #1a2533; color: #c8d3df; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; padding: 0.7rem 0.9rem;
}
table.i18n-table tbody tr:hover td { background: #f5f8fc; }
table.i18n-table td { vertical-align: middle; padding: 0.6rem 0.9rem; border-bottom: 1px solid #eaecef; }
.key-name { font-family: 'Courier New', monospace; color: #1a6fb5; font-size: 0.82rem; font-weight: 600; }

/* Badges */
.badge-ns   { background: #4a5568; color: #fff; padding: 2px 7px; border-radius: 10px; font-size: 0.72rem; white-space: nowrap; }
.badge-html { background: #c05621; color: #fff; padding: 2px 7px; border-radius: 10px; font-size: 0.72rem; }

/* Coverage */
.cov-full    { color: #276749; font-weight: 700; }
.cov-partial { color: #b7791f; font-weight: 700; }
.cov-empty   { color: #c53030; font-weight: 700; }
.cov-bar { display: inline-block; width: 60px; height: 5px; background: #e2e8f0; border-radius: 3px; vertical-align: middle; margin-left: 6px; }
.cov-bar-fill { height: 100%; border-radius: 3px; }

/* Reviewed badge */
.badge-reviewed { background: #276749; color: #fff; padding: 1px 6px; border-radius: 8px; font-size: 0.7rem; }
.badge-unreviewed { background: #718096; color: #fff; padding: 1px 6px; border-radius: 8px; font-size: 0.7rem; }

/* Status bar */
.status-bar { color: #718096; font-size: 0.8rem; margin-bottom: 0.6rem; padding: 0 0.1rem; }

/* Pagination */
ul.pagination { margin-top: 1rem; }

/* Modal */
.reveal { border-radius: 8px; }
.reveal h4 { font-size: 1.1rem; color: #1a2533; margin-bottom: 1.2rem; }
.lang-pair { margin-bottom: 0.5rem; }
.lang-label {
    font-size: 0.75rem; font-weight: 700; color: #4a5568;
    text-transform: uppercase; margin-bottom: 0.2rem; display: flex; align-items: center; gap: 0.4rem;
}
.lang-label .lang-code {
    background: #2b6cb0; color: #fff; padding: 1px 6px; border-radius: 4px; font-size: 0.7rem;
}
textarea.lang-ta { font-size: 0.82rem; min-height: 70px; margin-bottom: 0; resize: vertical; }

/* Import */
.import-wrap { background: #fff; border: 1px solid #d8dde3; border-radius: 6px; padding: 1.2rem; }
.import-key-new    { color: #276749; font-weight: 600; }
.import-key-exists { color: #718096; }
.import-preview-wrap { background: #fff; border: 1px solid #d8dde3; border-radius: 6px; padding: 1.2rem; margin-top: 1.2rem; }

/* Loading */
.loading-cell { text-align: center; color: #718096; padding: 2.5rem !important; }

/* Languages tab */
.langs-wrap { background: #fff; border: 1px solid #d8dde3; border-radius: 6px; overflow: hidden; max-width: 520px; }

/* Action buttons */
.btn-icon { padding: 0.3rem 0.55rem; font-size: 0.78rem; margin: 0 1px; }

/* Callout alert auto-dismiss */
.top-alert { position: fixed; top: 50px; right: 1rem; z-index: 9999; min-width: 280px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* Export modal */
.export-format-btn { margin: 0.3rem; }
.export-format-btn.selected { box-shadow: 0 0 0 2px #1a6fb5; }
.export-scope-note { font-size: 0.78rem; color: #718096; margin-top: 0.3rem; }

/* ============================================================ */
/* Responsive / mobile                                          */
/* ============================================================ */

/* Tablet and below: tighten generous paddings */
@media screen and (max-width: 63.9375em) {
    .tabs-panel { padding: 1rem; }
    .top-bar, .main-tabs-wrap, .i18n-preview { padding-left: 1rem; padding-right: 1rem; }
}

/* Phones */
@media screen and (max-width: 39.9375em) {
    body { font-size: 0.92rem; }

    /* Top bar — stack and centre, let the controls wrap */
    .top-bar { flex-direction: column; padding: 0.4rem 0.8rem; }
    .top-bar .top-bar-left, .top-bar .top-bar-right { width: 100%; }
    .top-bar .menu { justify-content: center; flex-wrap: wrap; }
    .top-bar .top-bar-left .menu-text { font-size: 0.9rem; line-height: 1.3; text-align: center; padding: 0.4rem; }
    .top-bar-right .menu { gap: 0.4rem; padding-bottom: 0.4rem; align-items: center; }
    .api-docs-btn { margin: 0; }
    #ui-lang-switcher { min-width: 120px; height: 2.3rem; }
    .top-bar-right .menu-text { padding: 0 0.2rem; }
    .dropdown-pane.api-docs-menu { max-width: calc(100vw - 1.5rem); }

    /* Preview banner */
    .i18n-preview { padding: 0.8rem 1rem; }
    .i18n-preview h5 { font-size: 0.98rem; }

    /* Tabs — equal-width, wrap, smaller labels */
    .main-tabs-wrap { padding: 0; }
    ul.tabs { display: flex; flex-wrap: wrap; }
    ul.tabs .tabs-title { flex: 1 1 auto; text-align: center; }
    ul.tabs .tabs-title > a { padding: 0.7rem 0.5rem; font-size: 0.8rem; }

    /* Filter bar — full-width controls and buttons */
    .filter-bar { padding: 0.8rem; }
    .filter-bar .cell.shrink { flex: 1 1 auto; }
    .filter-bar .cell.shrink .button { width: 100%; margin-bottom: 0; }

    /* Data tables → stacked cards */
    .i18n-table-wrap { background: transparent; border: none; overflow: visible; }
    .langs-wrap { background: transparent; border: none; overflow: visible; max-width: none; }
    table.i18n-table, table.langs-table { font-size: 0.9rem; }
    /* Hide the header row visually but keep it for the data-label JS */
    table.i18n-table thead, table.langs-table thead { position: absolute; left: -9999px; top: -9999px; }
    table.i18n-table tbody, table.i18n-table tr, table.i18n-table td,
    table.langs-table tbody, table.langs-table tr, table.langs-table td { display: block; width: 100%; }
    table.i18n-table tr, table.langs-table tr {
        background: #fff; border: 1px solid #d8dde3; border-radius: 8px;
        margin-bottom: 0.8rem; padding: 0.15rem 0; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    table.i18n-table tbody tr:hover td, table.langs-table tbody tr:hover td { background: transparent; }
    table.i18n-table td, table.langs-table td {
        border: none; border-bottom: 1px solid #f0f2f4;
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        padding: 0.5rem 0.9rem;
    }
    table.i18n-table tr td:last-child, table.langs-table tr td:last-child { border-bottom: none; }
    table.i18n-table td[data-label]::before, table.langs-table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 38%; font-weight: 700; color: #4a5568;
        font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
    }
    /* Action cell sits on the right */
    table.i18n-table td[data-label]:last-child, table.langs-table td[data-label]:last-child { justify-content: flex-end; }
    /* Loading / empty rows stay as a single centred block */
    table.i18n-table td.loading-cell, table.langs-table td.loading-cell {
        display: block; text-align: center; padding: 1.5rem !important;
    }
    .cov-bar { width: 90px; }
    .btn-icon { padding: 0.45rem 0.7rem; font-size: 0.85rem; }

    /* Toast alerts fit the viewport (anchored to the bottom) */
    .top-alert { left: 0.5rem; right: 0.5rem; top: auto; bottom: 0.5rem; min-width: 0; max-width: none; }

    /* Modals — let the export action buttons wrap */
    .reveal .button-group { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .reveal .button-group .button { margin-bottom: 0; }
    .export-format-btn { flex: 1 1 auto; margin: 0.2rem 0; }
}