/* My translations (/projects/user-subtitles): page layout only; the list components come from orders.css */
.dst-orders {
    padding: 32px 0 64px;
    background: linear-gradient(180deg, var(--hdr-accent-soft) 0, var(--bg-color) 360px, var(--bg-color) calc(100% - 220px), var(--hdr-accent-soft) 100%);
}
body.dark .dst-orders {
    background: linear-gradient(180deg, color-mix(in srgb, #fff 6%, var(--bg-color)) 0, var(--bg-color) 360px, var(--bg-color) calc(100% - 220px), color-mix(in srgb, #000 16%, var(--bg-color)) 100%);
}

/* Title, totals and search */
.dst-orders #top-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 0 0 16px;
}
.dst-orders .dst-orders-head {
    padding-left: 14px;
}
.dst-orders .dst-orders-title {
    margin: 0 0 8px;
    color: var(--text-color);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
}

/* Columns */
.dst-orders-table { table-layout: fixed; }
.dst-orders-table .col-date { width: 112px; }
.dst-orders-table .col-lines,
.dst-orders-table .col-amount { width: 82px; }
.dst-orders-table .col-api { width: 160px; }
.dst-orders-table .col-order { width: 200px; }
.dst-orders-table .col-actions { width: 190px; }
.dst-orders-table td.col-info,
.dst-orders-table td.col-order { overflow: hidden; }
.dst-orders .dst-api-model {
    margin-top: 5px;
}

/* The model sits in the API column; show the inline copy only once that column is hidden */
.dst-orders .ol-chips .dst-model-inline {
    display: none;
}

/* Narrow screens: drop the Order and API columns, then stack each order as a card */
@media (max-width: 991px) {
    .dst-orders-table .col-order,
    .dst-orders-table .col-api { display: none; }
    .dst-orders .ol-chips .dst-model-inline { display: inline-block; }
}
@media (max-width: 680px) {
    .dst-orders .ol-search,
    .dst-orders .ol-search input { width: 100%; }
    .dst-orders-table thead { display: none; }
    .dst-orders-table,
    .dst-orders-table tbody { display: block; }
    .dst-orders-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 4px 16px;
        padding: 12px 14px;
        border-bottom: 1px solid #edf0f3;
    }
    body.dark .dst-orders-table tbody tr { border-bottom-color: rgba(255, 255, 255, 0.07); }
    .dst-orders-table tbody tr:last-child { border-bottom: 0; }
    .dst-orders-table td {
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
    }
    .dst-orders-table td.col-date { grid-column: 1; grid-row: 1; }
    .dst-orders-table td.col-date .ol-date,
    .dst-orders-table td.col-date .ol-time { display: inline; margin-right: 6px; }
    .dst-orders-table td.ol-num { grid-row: 1; }
    .dst-orders-table td.ol-num::before {
        content: attr(data-label) " ";
        color: var(--muted-text-color);
        font-size: 12px;
        font-weight: 400;
    }
    .dst-orders-table td.col-info,
    .dst-orders-table td.col-actions { grid-column: 1 / -1; }
    .dst-orders .ol-actions { justify-content: flex-start; margin-left: -6px; }
}

/* Order logs dialog: the logs view repeats the dialog title and has an empty first column */
.ol-dialog #orderLogsContainer > #top-action-bar {
    display: none;
}
.ol-dialog #orderLogsContainer th:first-child,
.ol-dialog #orderLogsContainer td:first-child {
    display: none;
}
.ol-dialog #orderLogsContainer td:nth-child(2) {
    width: 170px;
    color: var(--muted-text-color);
    white-space: nowrap;
}

/* Signed-out state (invalid-session view): a centred sign-in prompt on the shared hero gradient */
.dst-signin {
    padding: 56px 0 80px;
    background: linear-gradient(180deg, var(--hdr-accent-soft) 0%, var(--bg-color) 70%);
}
body.dark .dst-signin {
    background: linear-gradient(180deg, color-mix(in srgb, #fff 6%, var(--bg-color)) 0%, var(--bg-color) 70%);
}
.dst-signin-card {
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 36px 28px;
    border: 1px solid rgba(15, 35, 60, 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 35, 60, 0.06), 0 12px 32px rgba(15, 35, 60, 0.10);
    text-align: center;
}
body.dark .dst-signin-card {
    border-color: rgba(255, 255, 255, 0.08);
    background: color-mix(in srgb, #fff 5%, var(--bg-color));
    box-shadow: none;
}
.dst-signin-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--hdr-accent-soft);
    color: var(--hdr-accent);
}
body.dark .dst-signin-ico {
    background: rgba(108, 178, 255, 0.14);
}
.dst-signin-ico svg,
.dst-signin-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dst-signin-ico svg {
    width: 30px;
    height: 30px;
}
.dst-signin h1 {
    margin: 0 0 10px;
    color: var(--text-color);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
}
.dst-signin-text {
    margin: 0 auto 26px;
    max-width: 440px;
    color: var(--muted-text-color);
    font-size: 15px;
    line-height: 1.6;
}
.dst-signin-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.dst-signin-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 20px;
    border: 1px solid #1f63c4;
    border-radius: 10px;
    background: #1f63c4;
    box-shadow: 0 1px 2px rgba(31, 99, 196, 0.3);
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dst-signin-btn svg {
    width: 18px;
    height: 18px;
}
.dst-signin-btn:hover {
    border-color: #1a54a8;
    background: #1a54a8;
}
.dst-signin-btn.is-ghost {
    border-color: #d0d7de;
    background: #fff;
    box-shadow: 0 1px 1px rgba(15, 35, 60, 0.04);
    color: var(--text-color) !important;
    font-weight: 500;
}
.dst-signin-btn.is-ghost:hover {
    border-color: var(--hdr-accent);
    background: var(--hdr-accent-soft);
    color: var(--hdr-accent) !important;
}
body.dark .dst-signin-btn.is-ghost {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.18);
    box-shadow: none;
}
body.dark .dst-signin-btn.is-ghost:hover {
    border-color: var(--hdr-accent);
    background: rgba(255, 255, 255, 0.08);
}
.dst-signin-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hdr-accent) 30%, transparent);
}
.dst-signin-notes {
    margin: 30px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid #edf0f3;
    color: var(--muted-text-color);
    font-size: 13.5px;
    line-height: 1.6;
    list-style: none;
}
body.dark .dst-signin-notes {
    border-top-color: rgba(255, 255, 255, 0.08);
}
.dst-signin-notes li + li {
    margin-top: 4px;
}
.dst-signin-notes a {
    color: var(--hdr-accent);
}
@media (max-width: 520px) {
    .dst-signin { padding: 32px 0 56px; }
    .dst-signin-card { padding: 28px 20px 22px; }
    .dst-signin h1 { font-size: 22px; }
    .dst-signin-btn { width: 100%; justify-content: center; }
}