/*
 * Customer panel — compact layer (2026-10-07)
 *
 * Loaded by includes/header.php AFTER style.css on /customer/ pages only, so it
 * can never touch the public site. Every rule is scoped to html.customer-portal-page.
 * Many base rules in style.css (and inline styles on the pages) carry !important,
 * so the overrides here do too.
 *
 * Mirrors the admin compact layer: same pages, same content, less air.
 * Biggest win is the "Customer Portal" header (≈240px → ≈95px on every page).
 */

/* ---------- Header: title + subtitle on one line, smaller nav buttons ---------- */
html.customer-portal-page nav.customer-nav,
html.customer-portal-page #customer-portal-nav {
    padding: 0.6rem 0 0.5rem !important;
    margin-bottom: 1rem !important;
}
html.customer-portal-page nav.customer-nav .customer-nav-title,
html.customer-portal-page #customer-portal-nav .customer-nav-title {
    display: flex !important;
    justify-content: center;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0 !important;
}
html.customer-portal-page nav.customer-nav .customer-nav-title::after { display: none; }
html.customer-portal-page nav.customer-nav .customer-nav-title h2,
html.customer-portal-page #customer-portal-nav .customer-nav-title h2 {
    font-size: 1.2rem !important;
    margin: 0 !important;
}
html.customer-portal-page nav.customer-nav .customer-nav-title .subtitle,
html.customer-portal-page #customer-portal-nav .customer-nav-title .subtitle {
    font-size: 0.72rem !important;
    margin: 0 !important;
}
html.customer-portal-page nav.customer-nav .customer-nav-links,
html.customer-portal-page #customer-portal-nav .customer-nav-links {
    gap: 0.35rem !important;
    padding-top: 2px !important;
    padding-bottom: 0.25rem !important;
}
html.customer-portal-page nav.customer-nav .customer-nav-links a,
html.customer-portal-page #customer-portal-nav .customer-nav-links a {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.78rem !important;
    border-radius: 8px !important;
}

/* ---------- Page body ---------- */
/* Pages open their content with an inline margin-top: 2rem. */
html.customer-portal-page .customer-portal-page > .container,
html.customer-portal-page .customer-nav ~ .container {
    margin-top: 0.5rem !important;
    padding-bottom: 1.5rem !important;
}
html.customer-portal-page .page-header {
    margin-bottom: 1rem !important;
}
html.customer-portal-page .page-header h1,
html.customer-portal-page .container > h1 {
    font-size: 1.45rem !important;
    margin-bottom: 0.25rem !important;
}
html.customer-portal-page .page-header p { margin-bottom: 0 !important; }

/* Section dividers inside cards (e.g. Manage VPS: Server Management / Backups). */
html.customer-portal-page [style*="margin-top: 2rem; padding-top: 2rem"] {
    margin-top: 1rem !important;
    padding-top: 1rem !important;
}
html.customer-portal-page h3[style*="margin-bottom: 1rem; font-size: 1.25rem"] {
    font-size: 1.05rem !important;
    margin-bottom: 0.6rem !important;
}

/* ---------- Cards ---------- */
html.customer-portal-page .admin-card,
html.customer-portal-page .recent-items,
html.customer-portal-page .vps-details-card,
html.customer-portal-page .payment-method-card {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
}
html.customer-portal-page .admin-card h2,
html.customer-portal-page .recent-items h2,
html.customer-portal-page .vps-details-card h2 {
    font-size: 1.1rem !important;
    margin-bottom: 0.6rem !important;
}
html.customer-portal-page .admin-card h3 { font-size: 1rem !important; margin-bottom: 0.5rem !important; }

html.customer-portal-page .stats-grid { gap: 0.75rem !important; margin-bottom: 1rem !important; }
html.customer-portal-page .stat-card { padding: 0.75rem !important; }
html.customer-portal-page .stat-card .stat-value { font-size: 1.3rem !important; }

/* Label/value tiles (Manage VPS, Manage Service, invoices) */
html.customer-portal-page .info-grid { gap: 0.6rem !important; margin-bottom: 1rem !important; }
html.customer-portal-page .info-item,
html.customer-portal-page .detail-item,
html.customer-portal-page .resource-stat-card { padding: 0.55rem 0.75rem !important; }
html.customer-portal-page .info-label,
html.customer-portal-page .detail-label,
html.customer-portal-page .resource-stat-label { font-size: 0.72rem !important; margin-bottom: 0.15rem !important; }
html.customer-portal-page .info-value,
html.customer-portal-page .detail-value { font-size: 0.92rem !important; }
html.customer-portal-page .resource-stats { margin: 0.75rem 0 !important; gap: 0.6rem !important; }

/* ---------- Tables ---------- */
html.customer-portal-page table th,
html.customer-portal-page table td {
    padding: 0.4rem 0.65rem !important;
    font-size: 0.85rem;
}

/* ---------- Forms, alerts, buttons ---------- */
html.customer-portal-page .form-group { margin-bottom: 0.85rem !important; }
html.customer-portal-page .form-group label { margin-bottom: 0.3rem !important; font-size: 0.88rem; }
html.customer-portal-page .form-control,
html.customer-portal-page .customer-form-input,
html.customer-portal-page .customer-form-select {
    padding: 0.55rem 0.75rem !important;
    font-size: 0.9rem !important;
}
html.customer-portal-page .alert {
    padding: 0.65rem 0.9rem !important;
    margin-bottom: 0.9rem !important;
    font-size: 0.9rem;
}
html.customer-portal-page .container .btn:not(.btn-sm):not(.btn-small) {
    padding: 0.55rem 1.1rem !important;
    font-size: 0.9rem !important;
}
html.customer-portal-page .vps-action-btn { padding: 0.55rem 0.9rem !important; }

/* ---------- Embedded panels (Site Restore inside the Manage VPS card) ---------- */
html.customer-portal-page .vps-details-card .admin-card {
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0.75rem !important;
}

/* ---------- Profile: details on the left, password + notifications on the right ---------- */
html.customer-portal-page form.customer-form { padding: 1rem !important; }
html.customer-portal-page .profile-columns { display: grid; grid-template-columns: 1fr; gap: 1rem; }
html.customer-portal-page .profile-col > form + form { margin-top: 1rem !important; }
html.customer-portal-page .profile-col > form:first-child { margin-top: 0 !important; }
@media (min-width: 1100px) {
    html.customer-portal-page .profile-columns { grid-template-columns: 3fr 2fr; align-items: start; }
}

/* Links in page intros (e.g. "Back to your service") — style.css has no bare link colour. */
html.customer-portal-page .page-header a:not(.btn) { color: #dc2626; text-decoration: none; }
html.customer-portal-page .page-header a:not(.btn):hover { color: #ef4444; text-decoration: underline; }

/* Phones: the one-line title would run under the ☰ menu button — show the title only. */
@media (max-width: 768px) {
    html.customer-portal-page nav.customer-nav .customer-nav-title .subtitle,
    html.customer-portal-page #customer-portal-nav .customer-nav-title .subtitle { display: none !important; }
}

/* ---------- Page buttons (« Prev 1 2 3 Next ») — ONE look on every list ----------
   Invoices had no pager styles at all; Domains and Credit History each had their own copy. */
html.customer-portal-page .pagination {
    display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 0.3rem !important; margin: 0.9rem 0 0.25rem !important; padding: 0 !important;
}
html.customer-portal-page .pagination a,
html.customer-portal-page .pagination span {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-width: 2.1rem; height: 2.1rem; padding: 0 0.7rem !important; box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important; color: var(--text-primary) !important;
    font-size: 0.85rem !important; font-weight: 500; line-height: 1; text-decoration: none !important;
    cursor: pointer; user-select: none; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
html.customer-portal-page .pagination a:hover {
    background: rgba(220, 38, 38, 0.15) !important; border-color: #dc2626 !important; color: #fff !important;
}
html.customer-portal-page .pagination .current {
    background: linear-gradient(135deg, #dc2626, #991b1b) !important; border-color: #dc2626 !important;
    color: #fff !important; font-weight: 700;
}
html.customer-portal-page .pagination .disabled {
    opacity: 0.35 !important; cursor: default !important; pointer-events: none;
}
html.customer-portal-page .pagination-summary {
    text-align: center; color: var(--text-secondary); font-size: 0.8rem !important;
    padding: 0.3rem 0 0 !important; margin: 0 !important;
}

/* ---------- Profile: fields in a two-column grid inside each card ---------- */
html.customer-portal-page .profile-columns form.customer-form {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.9rem; align-items: start;
}
/* Headings, the save button, alerts and the email (first field) take the full width;
   paired rows (.form-row) dissolve into the grid. */
html.customer-portal-page .profile-columns form.customer-form > h2,
html.customer-portal-page .profile-columns form.customer-form > h3,
html.customer-portal-page .profile-columns form.customer-form > p,
html.customer-portal-page .profile-columns form.customer-form > .alert,
html.customer-portal-page .profile-columns form.customer-form > button,
html.customer-portal-page .profile-columns form.customer-form > .btn,
html.customer-portal-page .profile-columns form.customer-form > .form-group:first-of-type { grid-column: 1 / -1; }
html.customer-portal-page .profile-columns form.customer-form > .form-row { display: contents !important; }
html.customer-portal-page .profile-columns form.customer-form > h2 {
    margin: 0.4rem 0 0.6rem !important; padding-bottom: 0.4rem; font-size: 0.95rem !important;
}
html.customer-portal-page .profile-columns form.customer-form > h2:first-of-type { margin-top: 0 !important; }
html.customer-portal-page .profile-columns form.customer-form small { margin-top: 0.25rem !important; font-size: 0.75rem !important; line-height: 1.35; }
html.customer-portal-page .profile-columns form.customer-form > button,
html.customer-portal-page .profile-columns form.customer-form > .btn { margin-top: 0.4rem !important; }
html.customer-portal-page .profile-columns form.customer-form input,
html.customer-portal-page .profile-columns form.customer-form select { padding: 0.5rem 0.7rem !important; font-size: 0.9rem !important; }
@media (max-width: 640px) {
    html.customer-portal-page .profile-columns form.customer-form { grid-template-columns: 1fr; }
}

/* ---------- "Show: 10 / 25 / 50 / All" pickers — same look on every list ---------- */
html.customer-portal-page .per-page-controls { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text-secondary); }
html.customer-portal-page .per-page-controls label { margin: 0 !important; font-size: 0.85rem !important; color: var(--text-secondary); white-space: nowrap; }
html.customer-portal-page .per-page-controls select,
html.customer-portal-page .sort-controls select {
    appearance: none; -webkit-appearance: none;
    height: 2.1rem; padding: 0 2rem 0 0.7rem !important; box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.05) !important; color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 8px !important;
    font-size: 0.85rem !important; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
    background-repeat: no-repeat !important; background-position: right 0.6rem center !important;
}
html.customer-portal-page .per-page-controls select:focus,
html.customer-portal-page .sort-controls select:focus { outline: none; border-color: #dc2626 !important; }
html.customer-portal-page .per-page-controls select option,
html.customer-portal-page .sort-controls select option { background: #1a1a1a; color: var(--text-primary); }

/* Same arrow on every customer dropdown (status filters on Invoices / Orders / Tickets / Credit History). */
html.customer-portal-page select.customer-form-select,
html.customer-portal-page .customer-portal-page form select[name="status"],
html.customer-portal-page .customer-portal-page form select[name="filter"] {
    appearance: none; -webkit-appearance: none; padding-right: 2rem !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
    background-repeat: no-repeat !important; background-position: right 0.65rem center !important;
}

/* ---------- Payment Methods: credit on the left, cards + auto-pay on the right ---------- */
html.customer-portal-page .pm-columns { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
@media (min-width: 1100px) { html.customer-portal-page .pm-columns { grid-template-columns: 2fr 3fr; } }
html.customer-portal-page .pm-col #credit { margin-bottom: 0 !important; }
html.customer-portal-page .pm-col #credit > h2 { font-size: 1.05rem !important; margin-bottom: 0.6rem !important; }
html.customer-portal-page .pm-col-spacer { display: none; }
@media (min-width: 1100px) { html.customer-portal-page .pm-col-spacer { display: block; visibility: hidden; font-size: 1.05rem !important; font-weight: 700; margin-bottom: 0.6rem !important; } }
html.customer-portal-page .pm-col #credit > div { padding: 1rem !important; margin-bottom: 0.75rem !important; }
html.customer-portal-page .pm-col #credit li { margin-bottom: 0.2rem; }

/* ---------- Links inside forms and text on customer pages (Register terms, "Log in here") ----------
   style.css has no bare link colour, so these fell back to browser blue. */
html.customer-portal-page form a:not(.btn),
html.customer-portal-page .container p a:not(.btn),
html.customer-portal-page .container label a:not(.btn) { color: #dc2626; text-decoration: none; }
html.customer-portal-page form a:not(.btn):hover,
html.customer-portal-page .container p a:not(.btn):hover,
html.customer-portal-page .container label a:not(.btn):hover { color: #ef4444; text-decoration: underline; }