/* dd99 s-tracker — project-specific overrides on top of style.css
 * Add anything you want to tweak from the base design system here.
 */

/* ============================================================
 *  Auth pages (login, forgot, reset, first-time, 2FA, sessions)
 *  Ported from template/login.html inline <style> block.
 * ============================================================ */

.dd-auth-body {
    background: var(--paper);
    min-height: 100vh;
}

.dd-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.dd-auth-card {
    width: 460px;
    max-width: 100%;
    box-shadow: var(--shadow-lg, 0 12px 32px -8px rgba(15, 23, 42, .12));
    border: 1px solid var(--ink-200);
    border-radius: 14px;
}

.dd-brand-large {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}
.dd-brand-large .mk {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), oklch(58% 0.10 180));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 18px;
}
.dd-brand-large .nm {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.2px;
}

/* Password strength meter (forgot/reset/firstTime use this) */
.strength {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}
.strength i {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--ink-200);
}
.strength.s1 i:nth-child(1)        { background: var(--danger); }
.strength.s2 i:nth-child(-n+2)     { background: var(--warn); }
.strength.s3 i:nth-child(-n+3)     { background: oklch(58% 0.12 95); }
.strength.s4 i                     { background: var(--success); }

/* OTP input grid for 2FA verify */
.otp-input {
    width: 44px;
    height: 52px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    border: 1.5px solid var(--ink-300);
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
}
.otp-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent);
}

/* ============================================================
 *  DDTable — shared AJAX table chrome
 *  (skeleton rows, sortable headers, pagination + page-size)
 * ============================================================ */

@keyframes dd-skel-shimmer {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}
.dd-skel-bar {
    display: inline-block;
    height: 12px;
    min-width: 40px;
    background: var(--ink-100);
    background-image: linear-gradient(90deg, var(--ink-100) 0%, var(--ink-200) 50%, var(--ink-100) 100%);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    border-radius: 4px;
    animation: dd-skel-shimmer 1.2s ease-in-out infinite;
    vertical-align: middle;
}
.dd-skel-circle {
    display: inline-block;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--ink-100);
    background-image: linear-gradient(90deg, var(--ink-100) 0%, var(--ink-200) 50%, var(--ink-100) 100%);
    background-size: 200px 100%;
    animation: dd-skel-shimmer 1.2s ease-in-out infinite;
    vertical-align: middle;
}
.dd-skel-row td { padding: 14px; }
.dd-skel-row:hover { background: transparent !important; cursor: default; }

/* Sortable header columns */
.dd-table th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.dd-table th.sortable:hover { color: var(--primary-700); }
.dd-table th.sortable .sort-ind {
    display: inline-block;
    width: 10px;
    margin-left: 4px;
    color: var(--ink-400);
    font-size: 10px;
    line-height: 1;
}
.dd-table th.sortable .sort-ind::after { content: '⇅'; }
.dd-table th.sortable.sort-asc  .sort-ind::after { content: '▲'; color: var(--primary-700); }
.dd-table th.sortable.sort-desc .sort-ind::after { content: '▼'; color: var(--primary-700); }

/* Pagination — extends the existing .dd-pagination rules in style.css */
.dd-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--ink-100);
    background: var(--surface);
    font-size: 12.5px;
    color: var(--ink-600);
}
.dd-pagination .page-info { margin-right: auto; }
.dd-pagination .dd-page-size {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 10px;
}
.dd-pagination .dd-page-size label {
    font-size: 12px;
    color: var(--ink-500);
    margin: 0;
}
.dd-pagination .dd-page-size select.form-select-sm {
    width: auto;
    min-width: 64px;
    padding: 2px 24px 2px 8px;
    font-size: 12.5px;
}
.dd-pagination .dd-pager-btns {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}
.dd-pagination .pg-btn {
    min-width: 28px;
    padding: 4px 8px;
    border: 1px solid var(--ink-200);
    background: var(--surface);
    color: var(--ink-700);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}
.dd-pagination .pg-btn:hover:not(.disabled):not(.active) { background: var(--ink-100); }
.dd-pagination .pg-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.dd-pagination .pg-btn.disabled {
    color: var(--ink-400);
    cursor: not-allowed;
    background: var(--ink-50);
}
.dd-pagination .pg-ellipsis {
    padding: 0 4px;
    color: var(--ink-400);
    font-size: 12px;
}

/* Empty / error placeholder shown inside the tbody */
.dd-table-empty {
    text-align: center;
    padding: 42px 24px;
    color: var(--ink-500);
}
.dd-table-empty-icon { font-size: 26px; margin-bottom: 6px; }
.dd-table-empty-msg  { font-size: 13px; }
.dd-table tbody tr:has(.dd-table-empty):hover { background: transparent; cursor: default; }