/*
 * Client area UX fixes, loaded after app.css on every client area page (includes/head.tpl).
 * Kept separate from app.css so the fixes are easy to find and review.
 */

:root {
    --ux-accent: #1654E0;
    --ux-primary: #1654e0;
    --ux-surface: rgba(255, 255, 255, .04);
    --ux-border: rgba(255, 255, 255, .09);
    --ux-text-muted: rgba(230, 236, 248, .72);
}

/* ---- Keyboard focus is always visible ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ux-accent) !important;
    outline-offset: 2px;
}

/* ---- Header ---- */
.ux-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ux-primary), var(--ux-accent));
    color: var(--th-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}
.header-panel__menu__user {
    cursor: pointer;
}
.ux-credit {
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}
.ux-credit strong {
    font-weight: 700;
}
/* some page templates color every <strong>; the header keeps its own colors */
.header-panel .ux-credit,
.header-panel .ux-credit strong,
.header-panel__menu__user__container strong,
.header-panel__menu__user__container span {
    color: var(--th-text) !important;
}
a.ux-credit:hover {
    color: var(--ux-accent);
}
.ux-cart {
    position: relative;
}
.ux-cart__count {
    position: absolute;
    top: 2px;
    left: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--nc-error, #B91C1C);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
button.mobile-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--th-text);
    cursor: pointer;
}
button.mobile-nav:hover {
    background: var(--th-overlay);
}

/* ---- Mobile navigation drawer ----
 * app.css only hid the sidebar below 576px while the menu button shows below 768px,
 * so between 577px and 767px the sidebar covered a third of the page and could not be closed. */
.ux-backdrop {
    display: none;
}
@media (max-width: 767.98px) {
    .sidebar-panel {
        opacity: 0;
        right: -240px !important;
        visibility: hidden;
        transition: right .2s ease-in, opacity .2s ease-in, visibility 0s linear .2s;
        z-index: 1040 !important;
    }
    .sidebar-panel.active {
        opacity: 1;
        right: 0 !important;
        visibility: visible;
        transition: right .2s ease-out, opacity .2s ease-out;
        overflow-y: auto;
    }
    .ux-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1030;
        background: rgba(0, 8, 24, .6);
    }
    body.ux-nav-open .ux-backdrop {
        display: block;
    }
    body.ux-nav-open {
        overflow: hidden;
    }
    #body.main-panel {
        margin-right: 0 !important;
        width: 100% !important;
    }
}

/* ---- Tables become cards on phones ----
 * Every list (services, domains, invoices, tickets) uses .tbl__container__table. On phones the
 * columns scrolled sideways and the status and action buttons were off screen. Labels come from
 * the table header (js/ux.js adds data-label to each cell). */
@media (max-width: 767.98px) {
    .tbl__container,
    .dataTables_wrapper {
        overflow: visible !important;
    }
    table.tbl__container__table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    table.tbl__container__table thead {
        display: none !important;
    }
    table.tbl__container__table tbody {
        display: block;
    }
    table.tbl__container__table tbody tr {
        display: block;
        margin: 0 0 12px;
        padding: 12px 14px;
        border: 1px solid var(--ux-border) !important;
        border-radius: 14px;
        background: var(--ux-surface) !important;
    }
    table.tbl__container__table tbody tr td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: auto !important;
        padding: 6px 0 !important;
        border: 0 !important;
        font-size: 14px;
        text-align: left !important;
    }
    table.tbl__container__table tbody tr td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 12px;
        color: var(--ux-text-muted);
        text-align: right;
    }
    /* first cell is the title of the card (product, domain, invoice, ticket) */
    table.tbl__container__table tbody tr td:first-child {
        display: block;
        padding: 0 0 8px !important;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--ux-border) !important;
        font-size: 15px;
        text-align: right !important;
    }
    table.tbl__container__table tbody tr td:first-child::before {
        display: none;
    }
    table.tbl__container__table tbody tr td:first-child a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    /* action cell: full width button */
    table.tbl__container__table tbody tr td.ux-actions {
        display: block;
        padding-top: 10px !important;
    }
    table.tbl__container__table tbody tr td.ux-actions::before {
        display: none;
    }
    table.tbl__container__table tbody tr td.ux-actions .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;
    }
    /* "no records" row */
    table.tbl__container__table tbody tr td[colspan] {
        display: block;
        text-align: center !important;
    }
    table.tbl__container__table tbody tr td[colspan]::before {
        display: none;
    }
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ---- Readable small text: statuses, dates, labels and table headers were 10-11px ---- */
.badge,
.tbl__container__table--default > thead > tr th,
.tbl__container__table small,
.tbl__container__table .text-muted,
.cli-ticket-meta span,
.cli-ticket-badge span,
.cli-ticket-badge,
.ticket-status-badge,
.custom-card .status,
.custom-card .tag {
    font-size: 12px !important;
}

/* ---- Comfortable tap targets on phones ---- */
@media (max-width: 767.98px) {
    .header-panel__menu__notification > a,
    .ux-cart > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    .ux-credit {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 4px;
    }
    .cli-card__btn,
    .cli-hero a,
    .main-panel a[href*="supporttickets.php"],
    .main-panel a[href*="/blog/"] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .paginate_button,
    .pagination a,
    .btn {
        min-height: 40px;
    }
    .paginate_button,
    .pagination a {
        min-width: 40px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* ---- "Action needed" strip on the dashboard ---- */
.ux-attention {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 24px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 196, 0, .35);
    border-radius: 16px;
    background: rgba(255, 196, 0, .08);
}
.ux-attention p {
    margin: 0;
    line-height: 1.9;
}
.ux-attention strong {
    font-size: 15px;
}

/* the smallest size of the theme scale was 11px; 12px is the readable minimum */
.fz--xxxx-small {
    font-size: 12px !important;
}

/* ---- Other tables (e.g. DNS records with inputs) scroll inside their own box on phones ---- */
@media (max-width: 767.98px) {
    .main-panel table.table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---- Green call-to-action buttons: readable text ----
 * White on the brand green (#6bb319) is 2.6:1, below the 4.5:1 WCAG AA minimum for button text.
 * Dark navy on the same green is 7.3:1 and keeps the brand color. */
.btn--green,
a.btn--green,
button.btn--green,
.btn--green:hover,
.btn--green:focus,
.btn--green:active {
    color: #00102a !important;
}