/* ==========================================================
   TREND hosting – Client Dashboard Styles
   Werkt bovenop Blesta + Bootstrap
   ========================================================== */

:root {
    --th-accent: #ee5b44;
    --th-dark: #161616;
}

/* Container */
.th-dashboard {
    max-width: 1120px;
    margin: 0 auto 2.5rem;
    padding: 1.5rem 1rem 2.5rem;
}

/* Header boven de kaarten */
.th-dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

.th-page-title {
    font-size: 1.7rem;
    font-weight: 600;
    margin: 0 0 0.4rem;
    color: var(--th-dark);
}

.th-page-subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: #70737a;
}

/* ----------------------------------------------------------
   Kaarten bovenaan (Diensten / Domeinen / Facturen / Support)
   ---------------------------------------------------------- */

.th-card-row {
    margin-bottom: 2rem;      /* iets meer verticale ruimte */
    row-gap: 1rem;
}

.th-card {
    border-radius: 1rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.th-card-link {
    text-decoration: none !important;   /* nooit underline */
    color: inherit;
    display: block;
}

.th-card-link:hover {
    text-decoration: none !important;   /* ook niet op hover */
}

.th-card-main {
    padding: 0;
}

.th-card-body {
    padding: 1.2rem 1.25rem 0.8rem;
}

/* header + icoontje in de kaart */
.th-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.th-card-icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--th-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
}

/* optioneel fijnslijpen per type icoon */
.th-card-icon-domains span,
.th-card-icon-services span,
.th-card-icon-invoices span,
.th-card-icon-support span {
    color: #ffffff;
}

/* headers van de cards – bold en zwart */
.th-card-label {
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--th-dark);
    font-weight: 600;
    text-decoration: none;   /* geen underline */
}

.th-card-count {
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--th-dark);
    margin-bottom: 0.3rem;
    text-decoration: none;
}

.th-card-text {
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.45;
    text-decoration: none;
}

/* Footer – duidelijk klikbaar */
.th-card-footer {
    padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid #f2f4f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
}

.th-card-cta {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--th-dark);
    text-decoration: none;
}

/* pijltje altijd accentkleur */
.th-card-chevron {
    font-size: 1.2rem;
    line-height: 1;
    color: var(--th-accent);
}

/* Hover: kaart + footer + CTA */
.th-card-link:hover .th-card {
    border-color: #d1d5db;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.th-card-link:hover .th-card-footer {
    background: #f9fafb;
}

.th-card-link:hover .th-card-cta {
    color: var(--th-accent);
    text-decoration: none;
}

/* extra zekerheid: nooit underline in content op hover */
.th-card-link:hover .th-card-label,
.th-card-link:hover .th-card-count,
.th-card-link:hover .th-card-text {
    text-decoration: none;
}

/* ----------------------------------------------------------
   Statistiek-tegels (Domains / Orders / Tickets)
   ---------------------------------------------------------- */

.th-stats-row {
    margin-bottom: 2rem;      /* meer ruimte naar de panels */
    row-gap: 1rem;
}

.th-stat-card {
    border-radius: 0.9rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    height: 100%;
    transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

.th-stat-label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--th-dark);
    font-weight: 600;
}

.th-stat-value {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--th-dark);
}

.th-stat-subtext {
    font-size: 0.8rem;
    color: #6b7280;
}

.th-stat-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

/* ----------------------------------------------------------
   Panel-styling (Hosting/Plesk, Facturen, Tickets)
   ---------------------------------------------------------- */

.th-lower-row {
    row-gap: 2rem;         /* iets meer ruimte tussen panel-rijen */
}

.th-panel {
    border-radius: 1rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
}

.th-panel-stack {
    margin-bottom: 1.1rem;
}

.th-panel-header {
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid #f2f4f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.th-panel-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.2rem;
    color: var(--th-dark);
}

.th-panel-subtitle {
    margin: 0;
    font-size: 0.86rem;
    color: #6b7280;
}

.th-panel-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.th-panel-body {
    padding: 0.95rem 1.25rem 1.1rem;
}

/* ----------------------------------------------------------
   Plesk / Hostingsectie
   ---------------------------------------------------------- */

.th-plesk-section {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.th-plesk-service {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.th-plesk-service-main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.th-plesk-service-title {
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--th-dark);
}

.th-plesk-service-text {
    font-size: 0.86rem;
    color: #6b7280;
}

.th-plesk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.th-plesk-note {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: #9ca3af;
}

/* ----------------------------------------------------------
   Buttons (TREND hosting-stijl)
   ---------------------------------------------------------- */

.th-btn {
    border-radius: 10px;
    font-size: 0.86rem;
    padding: 0.4rem 0.95rem;
    font-weight: 500;
    border-width: 1px;
    border-style: solid;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.12s ease,
        box-shadow 0.12s ease;
}

.th-btn-sm {
    padding: 0.25rem 0.8rem;
    font-size: 0.82rem;
}

/* Primair: rood in rust, zwart in hover (Nieuw ticket) */
.th-btn-primary {
    background: var(--th-accent);
    border-color: var(--th-accent);
    color: #ffffff;
    box-shadow: none;
}

.th-btn-primary:hover,
.th-btn-primary:focus {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
    transform: translateY(0);
}

/* Ghost / secundaire knoppen (Plesk etc.) */
.th-btn-ghost {
    background: #ffffff;
    border-color: #ee5b44;
    color: var(--th-dark);
}

.th-btn-ghost:hover,
.th-btn-ghost:focus {
    background: #f9fafb;
    border-color: #111827;
    color: var(--th-dark);
}

/* Klein tekstlinkje */
.th-link-small {
    font-size: 0.84rem;
    color: #4b5563;
    text-decoration: none;
}

.th-link-small:hover {
    text-decoration: underline;
    color: var(--th-accent);
}

/* ----------------------------------------------------------
   Lists (facturen / tickets)
   ---------------------------------------------------------- */

.th-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.th-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #f2f4f7;
}

.th-list-item:last-child {
    border-bottom: none;
}

.th-list-main {
    min-width: 0;
}

.th-list-title {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--th-dark);
    margin-bottom: 0.15rem;
}

.th-list-meta {
    font-size: 0.8rem;
    color: #6b7280;
}

.th-list-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   Generic empty state text
   ---------------------------------------------------------- */

.th-empty-text {
    font-size: 0.86rem;
    color: #9ca3af;
    margin: 0.15rem 0 0;
}

/* ----------------------------------------------------------
   Responsiveness
   ---------------------------------------------------------- */

@media (max-width: 991.98px) {
    .th-dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    .th-dashboard {
        padding: 1rem 0.75rem 2rem;
    }

    .th-panel-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .th-panel-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .th-card-row > [class*="col-"] {
        margin-bottom: 0.5rem;
    }

    .th-stats-row > [class*="col-"] {
        margin-bottom: 0.5rem;
    }
}

/* Nieuw ticket-knop iets groter maken */
.th-panel-header-actions .th-btn-primary {
    padding: 0.5rem 1.4rem;   /* hoger + breder */
    font-size: 0.9rem;        /* iets grotere tekst */
}

/* Services overzicht */
.th-table-wrapper {
    margin-top: 0.75rem;
}

.th-table-services thead th {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

.th-table-services tbody td {
    font-size: 0.9rem;
    color: #111827;
    vertical-align: middle;
}

.th-table-services tbody tr.expand:hover {
    background: #f9fafb;
}
/* ===========================================
   Services widget (client_services)
   =========================================== */

/* De hele widget-box */
#client_services .widget,
#client_services .panel {
    border-radius: 1rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

/* Header-balk bovenaan (titel "Services") */
#client_services .widget-header,
#client_services .panel-heading {
    background: #ffffff;
    border-bottom: 1px solid #f2f4f7;
    padding: 0.9rem 1.25rem;
    color: var(--th-dark);
}

#client_services .widget-header h3,
#client_services .panel-heading h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

/* Het filter-icoon rechts in de header */
#client_services .widget-header .pull-right a,
#client_services .panel-heading .pull-right a {
    color: #9ca3af;
}

#client_services .widget-header .pull-right a:hover,
#client_services .panel-heading .pull-right a:hover {
    color: var(--th-accent);
}

/* Tabs: Active / Pending / Suspended / Canceled */
#client_services .widget-tabs,
#client_services .nav,
#client_services .nav-tabs,
#client_services .nav-pills {
    border: none;
    margin: 0 1.25rem;
    padding: 0.6rem 0 0.4rem;
}

#client_services .nav > li > a {
    border-radius: 999px;
    padding: 0.25rem 0.9rem;
    font-size: 0.84rem;
    color: #6b7280;
    border: none;
    background: transparent;
}

#client_services .nav > li > a:hover {
    background: #f3f4f6;
    color: var(--th-dark);
}

/* Actieve tab */
#client_services .nav > li.active > a,
#client_services .nav > li.active > a:hover,
#client_services .nav > li.active > a:focus {
    background: #111827;
    color: #ffffff;
}

/* Badgejes achter de status (0, 1, 2, ...) */
#client_services .nav > li > a .badge {
    background: transparent;
    color: #9ca3af;
    font-weight: 500;
}
/* Lege-state melding in services-widget */
#client_services .alert-info {
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    color: #4b5563;
    border-radius: 0.9rem;
    margin: 0.8rem 1.25rem 1.1rem;
    padding: 0.9rem 1rem;
}
/* ===========================================
   Algemene link-styling in client area
   =========================================== */
/* Footer links */
.footer a {
    color: #161616;
    text-decoration: none;
}

.footer a:hover,
.footer a:focus {
    color: #111827;
    text-decoration: underline;
}

/* ===========================================
   Services-tabs (Active / Pending / Suspended / Canceled)
   =========================================== */

/* Basis van de tab-links */
#client_services .nav > li > a,
#client_services .nav > li > a:link,
#client_services .nav > li > a:visited {
    color: var(--th-accent) !important;   /* onze accentkleur ipv blauw */
    text-decoration: none;
    border: none;
    background: transparent;
}

/* Hover/focus */
#client_services .nav > li > a:hover,
#client_services .nav > li > a:focus {
    color: #111827 !important;            /* donker/zwart bij hover */
    text-decoration: underline;
    background: transparent;
}

/* Actieve tab (bijv. Active) */
#client_services .nav > li.active > a,
#client_services .nav > li.active > a:hover,
#client_services .nav > li.active > a:focus {
    color: #111827 !important;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
}
/* ===========================================
   Services-tabs (Active / Pending / Suspended / Canceled)
   =========================================== */

/* Basis tab-links */
#client_services .nav-tabs > li > a,
#client_services .nav > li > a,
#client_services .nav > li > a:link,
#client_services .nav > li > a:visited {
    color: var(--th-accent) !important;
    text-decoration: none;
    border: none;
    background: transparent;
}

/* Hover/focus state */
#client_services .nav-tabs > li > a:hover,
#client_services .nav > li > a:hover,
#client_services .nav > li > a:focus {
    color: #111827 !important;
    text-decoration: underline;
    background: transparent;
}

/* Actieve tab (bijv. Active) */
#client_services .nav-tabs > li.active > a,
#client_services .nav-tabs > li.active > a:hover,
#client_services .nav-tabs > li.active > a:focus,
#client_services .nav > li.active > a,
#client_services .nav > li.active > a:hover,
#client_services .nav > li.active > a:focus {
    color: #111827 !important;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
}

/* Knop-tekst altijd wit, ongeacht andere link-styling */
.th-btn-primary,
.th-btn-primary:hover,
.th-btn-primary:focus {
    color: #ffffff !important;
}

/* ===========================================
   Widget tabs (Active / Pending / Suspended / Canceled)
   Geldt voor alle client-widgets (services, invoices, etc.)
   =========================================== */

/* Basisstijl voor tab-links in widgets */
.widget-client .nav > li > a,
.widget-client .nav > li > a:link,
.widget-client .nav > li > a:visited {
    color: var(--th-accent) !important;
    text-decoration: none;
    background: transparent;
    border: none;
}

/* Hover/focus */
.widget-client .nav > li > a:hover,
.widget-client .nav > li > a:focus {
    color: #111827 !important;
    text-decoration: underline;
    background: transparent;
}

/* Actieve tab (class 'active') en 'highlight' tab */
.widget-client .nav > li.active > a,
.widget-client .nav > li.active > a:hover,
.widget-client .nav > li.active > a:focus,
.widget-client .nav > li.highlight > a,
.widget-client .nav > li.highlight > a:hover,
.widget-client .nav > li.highlight > a:focus {
    color: #111827 !important;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
}
/* ===========================================
   Services-tab links forceren in TREND-stijl
   =========================================== */

/* Alle links binnen de services-widget standaard accentkleur */
#client_services ul.nav li a,
#client_services ul.nav li a:link,
#client_services ul.nav li a:visited {
    color: var(--th-accent) !important;
    text-decoration: none;
    background: transparent !important;
    border: none !important;
}

/* Hover/focus */
#client_services ul.nav li a:hover,
#client_services ul.nav li a:focus {
    color: #111827 !important;
    text-decoration: underline;
    background: transparent !important;
}

/* Actieve tab (Active / Pending / Suspended / Canceled) */
#client_services ul.nav li.active a,
#client_services ul.nav li.active a:hover,
#client_services ul.nav li.active a:focus {
    color: #111827 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* ===========================================
   Algemene linkkleur in de client area
   =========================================== */

#content a,
#content a:visited {
    color: var(--th-accent);
    text-decoration: none;
}

#content a:hover,
#content a:focus {
    color: #111827;
    text-decoration: underline;
}

/* Knoppen: tekst netjes houden, onafhankelijk van link-styling */

/* Primaire knoppen (Nieuw ticket) */
.th-btn-primary,
.th-btn-primary:hover,
.th-btn-primary:focus {
    color: #ffffff !important;
}

/* Ghost knoppen (Open Plesk, Website bouwen, etc.) */
.th-btn-ghost,
.th-btn-ghost:hover,
.th-btn-ghost:focus {
    color: var(--th-dark) !important;
}

/* ===========================================
   FINAL OVERRIDE: linkkleur in client area
   =========================================== */

/* Alle links in de client-omgeving in accentkleur */
body.client a,
body.client a:visited {
    color: #ee5b44 !important;
    text-decoration: none;
}

/* Hover/focus */
body.client a:hover,
body.client a:focus {
    color: #111827 !important;
    text-decoration: underline;
}

/* -------------------------------------------
   Knoppen beschermen tegen bovenstaande
   ------------------------------------------- */

/* Alle "echte" knoppen met .btn-class */
body.client a.btn,
body.client a.btn:visited,
body.client button.btn {
    text-decoration: none !important;
}

/* Primaire knoppen (oranje, zoals Nieuw ticket) */
body.client .btn-primary,
body.client .btn-primary:hover,
body.client .btn-primary:focus,
body.client .th-btn-primary,
body.client .th-btn-primary:hover,
body.client .th-btn-primary:focus {
    color: #ffffff !important;
}

/* Ghost / secondary knoppen (Open Plesk etc.) */
body.client .btn-default,
body.client .btn-light,
body.client .th-btn-ghost,
body.client .th-btn-ghost:hover,
body.client .th-btn-ghost:focus {
    color: #111827 !important;
}

/* TREND Hosting - Navbar kleur override */
.navbar.navbar-dark {
    background-color: #161616 !important;
}

.nav-content {
    background-color: #161616 !important;
}
/* =========================
 * Login page (TREND Hosting)
 * ======================= */

.th-login-wrapper {
    max-width: 420px;
    margin: 70px auto 90px;
}

.th-login-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 28px 30px 22px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06);
}

.th-login-header h2 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #161616;
    margin-bottom: 4px;
}

.th-login-subtitle {
    font-size: 0.95rem;
    font-weight: 500;
    color: #555555;
    margin-bottom: 4px;
}

.th-login-description {
    font-size: 0.9rem;
    color: #777777;
    margin-bottom: 18px;
}

.th-login-icon {
    font-size: 40px;
    color: #ee5b44;
    margin-bottom: 8px;
}

.th-login-body .form-group label {
    font-weight: 500;
    color: #161616;
}

.th-login-body .form-control {
    border-radius: 10px;
    border-color: #e0e0e0;
    box-shadow: none;
}

.th-login-body .form-control:focus {
    border-color: #ee5b44;
    box-shadow: 0 0 0 1px rgba(238, 91, 68, 0.15);
}

.th-login-remember {
    margin: 8px 0 14px;
    font-size: 0.9rem;
    color: #555555;
}

.th-login-captcha {
    margin-bottom: 14px;
}

.th-login-submit {
    background-color: #ee5b44;
    border-color: #ee5b44;
    border-radius: 999px;
    font-weight: 600;
    padding: 10px 16px;
}

.th-login-submit:hover,
.th-login-submit:focus {
    background-color: #161616;
    border-color: #161616;
}

.th-login-footer {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

.th-login-footer a {
    color: #555555;
    text-decoration: none;
}

.th-login-footer a:hover {
    color: #ee5b44;
    text-decoration: underline;
}

/* Klein beetje extra padding boven de login in de container */
.row.login {
    padding-top: 20px;
    padding-bottom: 30px;
}

/* Logo boven het loginformulier */
.th-login-logo {
    height: 52px;
    margin-bottom: 12px;
}

/* Form velden: wit, zachte rand */
.row.login .form-control,
.th-login-body .form-control {
    background-color: #ffffff;
    border-radius: 10px;
    border-color: #e0e0e0;
    box-shadow: none;
}

.row.login .form-control:focus,
.th-login-body .form-control:focus {
    border-color: #ee5b44;
    box-shadow: 0 0 0 1px rgba(238, 91, 68, 0.15);
}

/* Login-knop in TREND-oranje, geen blauw meer */
.th-login-submit,
.btn-primary.th-login-submit,
.btn-primary.th-login-submit:active,
.btn-primary.th-login-submit:focus,
.btn-primary.th-login-submit:hover {
    background-color: #ee5b44 !important;
    border-color: #ee5b44 !important;
}

/* Hover/focus van de login-knop: bijna zwart */
.th-login-submit:hover,
.th-login-submit:focus {
    background-color: #161616 !important;
    border-color: #161616 !important;
}

/* Logo in de login-card */
.th-login-logo {
    height: 44px;
    margin-bottom: 10px;
}

/* Titel & subtitels */
.th-login-title {
    font-size: 28px;
    font-weight: 700;
    color: #161616;
    margin-bottom: 4px;
}

.th-login-subtitle {
    font-size: 16px;
    font-weight: 500;
    color: #555555;
    margin-bottom: 4px;
}

.th-login-description {
    font-size: 14px;
    color: #777777;
    margin-bottom: 24px;
}

/* Velden (extra, voor de zekerheid) */
.row.login .form-control,
.th-login-body .form-control {
    background-color: #ffffff;
    border-radius: 10px;
    border-color: #e0e0e0;
    box-shadow: none;
}

.row.login .form-control:focus,
.th-login-body .form-control:focus {
    border-color: #ee5b44;
    box-shadow: 0 0 0 1px rgba(238, 91, 68, 0.15);
}

/* Login-knop in TREND-oranje, geen blauw meer */
.th-login-submit,
.btn-primary.th-login-submit,
.btn-primary.th-login-submit:active,
.btn-primary.th-login-submit:focus,
.btn-primary.th-login-submit:hover {
    background-color: #ee5b44 !important;
    border-color: #ee5b44 !important;
}

/* Hover/focus van de login-knop: bijna zwart */
.th-login-submit:hover,
.th-login-submit:focus {
    background-color: #161616 !important;
    border-color: #161616 !important;
}

/* Basis styling van de login inputs */
.th-login-card .form-control {
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 9999px;
    padding: 12px 20px;
    font-size: 15px;
    color: #161616;
    box-shadow: none;
}

.th-login-card .form-control:focus {
    border-color: #ee5b44;
    box-shadow: 0 0 0 2px rgba(238, 91, 68, 0.12);
    outline: none;
}

/* Autofill (Chrome/WebKit) naar wit forceren */
.th-login-card input:-webkit-autofill,
.th-login-card input:-webkit-autofill:hover,
.th-login-card input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #161616 !important;
    transition: background-color 5000s ease-in-out 0s; /* hack om geel te verbergen */
}
/* =========================================
   TREND Hosting - Global Messages (message.pdt)
   ========================================= */

.th-alert {
    border-radius: 12px;
    border: none;
    padding: 14px 16px;
    margin-bottom: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    position: relative;
    background-color: #f9f7f4; /* neutrale, lichte base */
    color: #161616;
}

.th-alert-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.th-alert-title {
    font-weight: 600;
    color: #161616;
    margin-bottom: 2px;
}

.th-alert-text {
    font-size: 0.95rem;
    color: #666666;
}

.th-alert-actions {
    margin: 8px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Close button netjes uitlijnen met onze stijl */
.th-alert .close {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.15s ease-in-out;
}

.th-alert .close:hover {
    opacity: 0.9;
}

/* Basis voor alle varianten: subtiele border-left */
.th-alert-success,
.th-alert-danger,
.th-alert-warning,
.th-alert-info {
    border-left: 4px solid transparent;
}

/* Success (groen maar subtiel, primary-knoppen doen de rest) */
.th-alert-success {
    border-left-color: #27ae60;
    background-color: #f3fbf6;
}

/* Danger / Error */
.th-alert-danger {
    border-left-color: #e74c3c;
    background-color: #fdf3f2;
}

/* Warning */
.th-alert-warning {
    border-left-color: #f39c12;
    background-color: #fff8ec;
}

/* Info */
.th-alert-info {
    border-left-color: #3498db;
    background-color: #f4f8fd;
}

/* Buttons in alerts (we gebruiken th-btn uit je basisstijl) */
.th-alert-actions .th-btn {
    font-size: 0.85rem;
    padding: 6px 10px;
}

/* Extra: kleine icon spacing in knoppen */
.th-alert-actions .th-btn i {
    margin-right: 4px;
}

/* Globale layout voor pagina-meldingen in een full-width kolom */
.col-md-12 > .th-alert {
    margin-top: 8px;
    margin-bottom: 16px;
}

/* Als er meerdere alerts onder elkaar staan: iets meer ruimte */
.col-md-12 > .th-alert + .th-alert {
    margin-top: 10px;
}
/* =========================================
   TREND Hosting - Unauthorized page (unauthorized.pdt)
   ========================================= */

.th-card-unauthorized {
    max-width: 520px;
    margin: 40px auto;
    text-align: center;
    padding: 32px 24px;
}

.th-status-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.th-status-icon-danger {
    background: rgba(238, 91, 68, 0.08); /* #ee5b44 heel subtiel */
    color: #ee5b44;
    font-size: 1.4rem;
}

.th-card-unauthorized .th-card-title {
    margin-bottom: 8px;
    color: #161616;
}

.th-card-unauthorized .th-card-subtitle {
    color: #666666;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.th-card-unauthorized .th-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
/* ================================
   TREND Hosting - Invoices tabel
   ================================ */

/* Wrapper rondom de factuurtabel binnen de widget */
.th-table-wrapper {
    margin-top: 0.75rem;
}

/* Algemene tabelstyling voor invoices */
.th-table-invoices {
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* Table header: strak, minimalistisch */
.th-table-invoices thead th {
    border-bottom: 1px solid rgba(17, 24, 39, 0.08); /* zacht donker */
    font-weight: 600;
    white-space: nowrap;
}

/* Sorteerbare kolom-links in de header */
.th-table-invoices thead th a.ajax {
    color: #161616;
    text-decoration: none;
}

.th-table-invoices thead th a.ajax:hover {
    color: #ee5b44;
    text-decoration: none;
}

/* Rijen: lichte scheiding, nette hover */
.th-table-invoices tbody tr {
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.th-table-invoices tbody tr:hover {
    background-color: rgba(249, 247, 244, 0.7);
}

/* Past-due facturen extra subtiele highlight */
.th-row-past-due td {
    background: rgba(238, 91, 68, 0.03);
    border-left: 3px solid #ee5b44;
}

/* Optie-kolom rechts uitlijnen en compact houden */
.th-table-invoices td.text-right {
    white-space: nowrap;
}

/* Kleine knopgroep netjes groeperen */
.th-table-invoices .btn-group .btn {
    border-radius: 999px !important; /* pill-style knoppen */
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
}

/* Dropdown-menu rechts uitgelijnd bij opties */
.th-table-invoices .dropdown-menu {
    font-size: 0.85rem;
    min-width: 12rem;
}

.th-table-invoices .dropdown-menu .dropdown-item i {
    margin-right: 0.35rem;
}
/* ================================
   TREND Hosting - Invoice detail
   ================================ */

.th-invoice-view {
    margin-top: 0.5rem;
}

/* Header met factuurnummer + statusbadge */
.th-invoice-header h4 {
    font-weight: 600;
    color: #161616;
}

.th-invoice-status {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.th-invoice-status i {
    margin-right: 0.35rem;
}

/* Betaald */
.th-invoice-status-paid {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
    color: #047857;
}

/* Open (nog niet betaald) */
.th-invoice-status-open {
    background: rgba(238, 91, 68, 0.06);
    border-color: rgba(238, 91, 68, 0.4);
    color: #b33923;
}

/* Adreskaarten */
.th-invoice-address-card {
    border-radius: 8px;
    border: 1px solid rgba(17, 24, 39, 0.06);
    background: #ffffff;
}

.th-invoice-subheading {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

/* Regels-tabel */
.th-invoice-lines-wrapper {
    margin-top: 1rem;
}

.th-table-invoice-lines {
    font-size: 0.9rem;
}

.th-table-invoice-lines thead th {
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    font-weight: 600;
    white-space: nowrap;
}

.th-table-invoice-lines tbody tr:hover {
    background-color: rgba(249, 247, 244, 0.7);
}

/* Notes / meta */
.th-invoice-meta-row {
    margin-top: 1rem;
}

.th-invoice-notes {
    border-radius: 8px;
    border: 1px solid rgba(17, 24, 39, 0.06);
    background: #ffffff;
}

/* Totalen */
.th-invoice-totals-box {
    max-width: 100%;
}

.th-invoice-totals {
    font-size: 0.9rem;
}

.th-invoice-totals td {
    border-top: none;
    padding: 0.35rem 0.75rem;
}

.th-invoice-total-row td {
    border-top: 1px solid rgba(17, 24, 39, 0.1);
    font-weight: 600;
}

/* Voorwaardenblok */
.th-invoice-terms {
    border-radius: 8px;
    border: 1px solid rgba(17, 24, 39, 0.06);
    background: #f9f7f4;
}

/* Actieknoppen onderaan */
.th-invoice-actions .btn {
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
}

.th-invoice-actions .btn i {
    margin-right: 0.3rem;
}

/* Mobile tweaks */
@media (max-width: 767.98px) {
    .th-invoice-header {
        align-items: flex-start;
    }

    .th-invoice-totals-box {
        float: none !important;
    }

    .th-invoice-actions {
        text-align: left;
    }

    .th-invoice-actions .btn {
        display: inline-flex;
        margin-top: 0.25rem;
    }
}
/* ======================================
   TREND Hosting - Invoice applied table
   ====================================== */

.th-table-invoice-applied-wrapper {
    margin-top: 0.5rem;
}

/* Tabel met toegepaste betalingen */
.th-table-invoice-applied {
    font-size: 0.9rem;
    margin-bottom: 0;
}

.th-table-invoice-applied thead th {
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    font-weight: 600;
    white-space: nowrap;
}

/* Indicator-kolom (eerste kolom) */
.th-table-invoice-applied .th-col-indicator {
    width: 32px;
    text-align: center;
}

/* Klein gekleurd puntje voor visuele guidance */
.th-applied-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ee5b44;
    box-shadow: 0 0 0 3px rgba(238, 91, 68, 0.18);
}

/* Hoverstate subtiel */
.th-table-invoice-applied tbody tr {
    transition: background-color 0.15s ease;
}

.th-table-invoice-applied tbody tr:hover {
    background-color: rgba(249, 247, 244, 0.7);
}

/* Right-aligned numeric columns */
.th-table-invoice-applied td.text-right {
    white-space: nowrap;
}

/* Lege-staat melding onder factuur */
.th-invoice-applied-empty {
    margin-top: 0.5rem;
    margin-bottom: 0;
}
/* ================================
   TREND Hosting - Auth / Reset
   ================================ */

.th-auth-container {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Linkerkant met titel/tekst */
.th-auth-intro {
    padding-right: 1.5rem;
}

.th-auth-title {
    font-weight: 600;
    color: #161616;
    margin-bottom: 0.5rem;
}

.th-auth-title i {
    margin-right: 0.4rem;
    color: #ee5b44;
}

.th-auth-subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: #111827;
    margin-bottom: 0.5rem;
}

.th-auth-description {
    color: #4b5563;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.th-auth-divider {
    border-color: rgba(17, 24, 39, 0.08);
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Rechterkant met kaart/formulier */
.th-auth-card {
    border-radius: 10px;
    border: 1px solid rgba(17, 24, 39, 0.06);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    background: #ffffff;
}

.th-auth-card .card-body {
    padding: 1.75rem;
}

.th-auth-form .form-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #4b5563;
}

.th-auth-form .form-control {
    border-radius: 999px;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
}

/* Primary / secondary buttons */
.th-auth-primary-btn,
.th-auth-secondary-btn {
    border-radius: 999px;
    font-size: 0.9rem;
    padding: 0.5rem 0.9rem;
    margin-top: 0.35rem;
}

.th-auth-primary-btn i,
.th-auth-secondary-btn i {
    margin-right: 0.35rem;
}

/* Mobile tweaks */
@media (max-width: 767.98px) {
    .th-auth-container {
        margin-top: 1.5rem;
    }

    .th-auth-intro {
        padding-right: 0;
        margin-bottom: 1.25rem;
    }

    .th-auth-card .card-body {
        padding: 1.25rem;
    }
}
/* ================================
   TREND Hosting - Login / Forgot
   ================================ */

.th-login-wrapper {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.th-login-card {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    border-radius: 14px;
    border: 1px solid rgba(17, 24, 39, 0.06);
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.th-login-header {
    padding: 1.75rem 1.75rem 0.75rem;
}

.th-login-logo {
    max-width: 180px;
    height: auto;
    margin-bottom: 1rem;
}

.th-login-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: #161616;
    margin-bottom: 0.35rem;
}

.th-login-description {
    font-size: 0.95rem;
    color: #4b5563;
    margin-bottom: 0;
}

/* Body / form */
.th-login-body {
    padding: 1.5rem 1.75rem 1.25rem;
}

.th-login-form .form-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #4b5563;
}

.th-login-input {
    border-radius: 999px;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
}

/* Captcha blok */
.th-login-captcha {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Submit-knop */
.th-login-submit {
    border-radius: 999px;
    font-size: 0.9rem;
    padding: 0.55rem 0.9rem;
    margin-top: 0.35rem;
}

.th-login-submit i {
    margin-right: 0.35rem;
}

/* Footer links */
.th-login-footer {
    border-top: 1px solid rgba(17, 24, 39, 0.06);
    padding: 0.9rem 1.75rem 1.1rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.th-login-footer a {
    color: #ee5b44;
    text-decoration: none;
}

.th-login-footer a:hover {
    color: #111827;
    text-decoration: underline;
}

/* Mobile tweaks */
@media (max-width: 575.98px) {
    .th-login-card {
        margin: 0 1rem;
    }

    .th-login-header,
    .th-login-body,
    .th-login-footer {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .th-login-footer {
        flex-direction: column;
        gap: 0.25rem;
    }
}