/* Border-box voor eigen layoutdragers - voorkomt dat padding bovenop
   100% breedte komt en zo het scherm oprekt op mobiel. */
#container, #header, #nav, #content, #footer,
[class^="att-"], [class*=" att-"] {
    box-sizing: border-box;
}

/*
 * ATTComputer Customer Portal
 * Visual Theme v2
 */

:root {
    --att-blue: #006cae;
    --att-blue-dark: #004d7c;
    --att-blue-deep: #073653;
    --att-blue-light: #e9f5fb;
    --att-text: #14212b;
    --att-muted: #667085;
    --att-border: #e2e8f0;
    --att-background: #f3f6f9;
    --att-white: #ffffff;
}

/* =========================================================
   BASE
   ========================================================= */

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    padding: 0;
    background:
        radial-gradient(circle at 15% 5%, rgba(0,108,174,.08), transparent 28%),
        #f3f6f9;
    color: var(--att-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

a {
    color: var(--att-blue);
}

#container {
    width: min(1180px, calc(100% - 48px));
    min-height: calc(100vh - 135px);
    margin: 24px auto 0;
    overflow: hidden;

    background: #fff;
    border: 1px solid rgba(214, 223, 232, .9);
    border-radius: 18px;

    box-shadow:
        0 18px 50px rgba(16, 40, 60, .08),
        0 2px 8px rgba(16, 40, 60, .03);
}

/* =========================================================
   HEADER
   ========================================================= */

#header {
    box-sizing: border-box;
    width: 100%;
    height: 92px;
    padding: 17px 30px;

    background: rgba(255,255,255,.98);
    border-bottom: 1px solid #edf1f4;
}

#header #logo {
    display: flex;
    align-items: center;
    height: 58px;
    text-decoration: none;
}

#header #logo .valign-helper {
    display: none;
}

#header #logo img {
    display: block;
    width: auto;
    max-width: 250px;
    max-height: 58px;
    object-fit: contain;
}

#header .pull-right {
    padding-top: 11px;
    color: var(--att-muted);
    font-size: 13px;
}

#header .pull-right p {
    margin: 0 0 7px;
}

#header .pull-right a {
    color: #344054;
    text-decoration: none;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

#nav {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 5px;

    width: 100%;
    min-height: 62px;
    margin: 0 !important;
    padding: 9px 29px !important;

    background: #fff;
    border: 0;
    border-bottom: 1px solid #e9eef2;
    list-style: none;
}

#nav li {
    display: block;
    margin: 0;
    padding: 0;
    background: none !important;
    border: 0 !important;
}

#nav li a {
    display: block;
    padding: 11px 15px !important;

    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 9px;

    color: #475467;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;

    box-shadow: none !important;
    transition: .15s ease;
}

#nav li a:hover {
    background: #f1f6f9 !important;
    color: var(--att-blue);
}

#nav li a.active {
    background: var(--att-blue-light) !important;
    color: var(--att-blue);
}

#nav li a:before,
#nav li a:after {
    background-image: none !important;
}

/* =========================================================
   CONTENT
   ========================================================= */

#content {
    box-sizing: border-box;
    width: 100%;
    min-height: 520px;
    padding: 0;
    background: #fff;
}

/* =========================================================
   HOMEPAGE HERO
   ========================================================= */

.att-home {
    width: 100%;
}

.att-hero {
    position: relative;
    overflow: hidden;
    padding: 68px 40px 112px;
    text-align: center;

    background:
        radial-gradient(circle at 10% 20%, rgba(77,190,241,.24), transparent 28%),
        radial-gradient(circle at 88% 0%, rgba(71,177,228,.18), transparent 32%),
        linear-gradient(135deg, #073653 0%, #005e96 55%, #0077b8 100%);
}

/* subtle graphical circles */
.att-hero:before {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    top: -210px;
    right: 6%;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
}

.att-hero:after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    left: -100px;
    bottom: -150px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
}

.att-hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
}

.att-eyebrow {
    display: inline-block;
    margin-bottom: 13px;
    padding: 7px 13px;

    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 20px;

    color: #d9f2ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.att-hero h1 {
    margin: 0 0 15px !important;

    color: #fff !important;
    font-size: 44px;
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -.035em;
}

.att-hero p {
    max-width: 650px;
    margin: 0 auto;

    color: rgba(255,255,255,.82);
    font-size: 17px;
    line-height: 1.65;
}

/* =========================================================
   ACTION AREA
   ========================================================= */

.att-actions {
    position: relative;
    z-index: 5;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;

    max-width: 1080px;
    margin: -67px auto 30px;
    padding: 0 30px;
}

.att-action-card {
    position: relative;

    display: flex;
    gap: 20px;

    box-sizing: border-box;
    min-height: 215px;
    padding: 30px;

    background: rgba(255,255,255,.98);
    border: 1px solid rgba(218,225,232,.95);
    border-radius: 16px;

    color: var(--att-text) !important;
    text-decoration: none !important;

    box-shadow:
        0 14px 35px rgba(12, 45, 67, .10),
        0 2px 5px rgba(12, 45, 67, .04);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.att-action-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0,108,174,.35);

    box-shadow:
        0 20px 42px rgba(12,45,67,.15),
        0 3px 7px rgba(12,45,67,.05);
}

.att-action-incident {
    border-color: rgba(0,108,174,.42);
    box-shadow:
        0 16px 38px rgba(0,76,124,.16),
        0 2px 5px rgba(12,45,67,.05);
}

.att-action-incident .att-action-icon {
    background: linear-gradient(145deg, #dff3fc, #cdeaf7);
    color: #005f99;
}

.att-action-icon {
    flex: 0 0 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    background: linear-gradient(145deg, #e9f6fc, #dceef7);
    border-radius: 14px;

    color: var(--att-blue);
    font-size: 23px;
}

.att-action-content {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.att-action-content h2 {
    margin: 4px 0 9px !important;

    color: #14212b !important;
    font-size: 20px;
    font-weight: 700;
}

.att-action-content p {
    margin: 0 0 22px;

    color: var(--att-muted);
    font-size: 14px;
    line-height: 1.6;
}

.att-action-link {
    margin-top: auto;

    color: var(--att-blue);
    font-size: 14px;
    font-weight: 700;
}

.att-action-link span {
    display: inline-block;
    margin-left: 6px;
    transition: transform .15s ease;
}

.att-action-card:hover .att-action-link span {
    transform: translateX(5px);
}

/* =========================================================
   SUPPORT BAR
   ========================================================= */

.att-support-info {
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    max-width: 1080px;
    margin: 0 auto 42px;
    padding: 22px 26px;

    background: #f6f9fb;
    border: 1px solid #e3eaf0;
    border-radius: 13px;
}

.att-support-label {
    display: block;
    margin-bottom: 4px;

    color: var(--att-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.att-support-info strong {
    color: #18232d;
    font-size: 16px;
}

.att-support-details {
    display: flex;
    flex-direction: column;
    gap: 7px;

    color: #475467;
    font-size: 13px;
}

.att-support-details span,
.att-support-details a {
    color: #475467;
    text-decoration: none;
}

.att-support-details a:hover {
    color: var(--att-blue);
}

.att-support-details i {
    display: inline-block;
    width: 21px;
    color: var(--att-blue);
}

/* =========================================================
   GENERAL FORM STYLING
   Used later by open.php / view.php too
   ========================================================= */

#content input[type="text"],
#content input[type="email"],
#content input[type="password"],
#content select,
#content textarea {
    box-sizing: border-box;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
}

#content input[type="text"]:focus,
#content input[type="email"]:focus,
#content input[type="password"]:focus,
#content select:focus,
#content textarea:focus {
    border-color: var(--att-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,108,174,.10);
}

/* =========================================================
   FOOTER
   ========================================================= */

#footer {
    box-sizing: border-box;

    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 21px 24px 27px;

    border: 0;

    color: #778392;
    font-size: 12px;
    text-align: center;
}

#footer p {
    margin: 0;
}

#poweredBy {
    display: none !important;
}

/* =========================================================
   MESSAGES
   ========================================================= */

#msg_error,
#msg_warning,
#msg_notice {
    border-radius: 9px;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 760px) {

    body {
        background: #fff;
    }

    #container {
        width: 100%;
        min-width: 0;
        margin: 0;

        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    #header {
        height: auto;
        min-height: 76px;
        padding: 13px 17px;
    }

    #header #logo {
        height: 49px;
    }

    #header #logo img {
        max-width: 190px;
        max-height: 49px;
    }

    #header .pull-right {
        float: none !important;
        clear: both;
        padding-top: 6px;
        text-align: left;
    }

    #nav {
        min-height: 0;
        padding: 7px 10px !important;

        overflow-x: auto;
        white-space: nowrap;

        -webkit-overflow-scrolling: touch;
    }

    #nav li {
        flex: 0 0 auto;
    }

    #nav li a {
        padding: 9px 11px !important;
        font-size: 13px;
    }

    #content {
        width: 100%;
        min-width: 0;
    }

    .att-hero {
        padding: 46px 22px 92px;
    }

    .att-eyebrow {
        margin-bottom: 12px;
        font-size: 10px;
    }

    .att-hero h1 {
        font-size: 34px;
    }

    .att-hero p {
        font-size: 15px;
        line-height: 1.55;
    }

    .att-actions {
        grid-template-columns: 1fr;
        gap: 14px;

        margin-top: -55px;
        padding: 0 16px;
    }

    .att-action-card {
        min-height: 175px;
        padding: 22px;
    }

    .att-action-icon {
        flex-basis: 49px;
        width: 49px;
        height: 49px;
        font-size: 20px;
    }

    .att-action-content h2 {
        font-size: 18px;
    }

    .att-support-info {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;

        margin: 0 16px 28px;
        padding: 20px;
    }

    #footer {
        width: 100%;
        padding: 18px 16px 24px;
    }
}

/* =========================================================
   ATTComputer - New Support Request
   ========================================================= */

.att-ticket-page {
    box-sizing: border-box;
    max-width: 980px;
    margin: 0 auto;
    padding: 48px 32px 55px;
}

.att-ticket-heading {
    max-width: 720px;
    margin: 0 auto 30px;
    text-align: center;
}

.att-ticket-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--att-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.att-ticket-heading h1 {
    margin: 0 0 10px !important;
    color: #101828 !important;
    font-size: 34px;
    font-weight: 750;
    letter-spacing: -.025em;
}

.att-ticket-heading p {
    margin: 0;
    color: #667085;
    font-size: 15px;
    line-height: 1.6;
}

.att-ticket-card {
    padding: 34px 38px 30px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 40, 60, .07);
}

/* Override old fixed osTicket table */
#ticketForm > table {
    width: 100% !important;
    max-width: none !important;
    border-collapse: separate;
    border-spacing: 0;
}

#ticketForm td {
    box-sizing: border-box;
    padding: 7px 8px;
    vertical-align: top;
}

#ticketForm hr {
    height: 1px;
    margin: 22px 0;
    background: #e7edf2;
    border: 0;
}

/* Section titles */
#ticketForm .form-header {
    margin: 0 0 12px !important;
    color: #17212b;
    font-size: 16px;
    font-weight: 700;
}

#ticketForm .form-header b {
    font-weight: 700;
}

/* Labels */
#ticketForm label,
#ticketForm td.required,
#ticketForm td:first-child {
    color: #344054;
    font-size: 13px;
    font-weight: 600;
}

/* Inputs */
#ticketForm input[type="text"],
#ticketForm input[type="email"],
#ticketForm input[type="tel"],
#ticketForm select,
#ticketForm textarea {
    box-sizing: border-box;
    min-height: 42px;
    padding: 9px 11px;

    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;

    color: #17212b;
    font-size: 14px;
}

#ticketForm input[type="text"]:focus,
#ticketForm input[type="email"]:focus,
#ticketForm input[type="tel"]:focus,
#ticketForm select:focus,
#ticketForm textarea:focus {
    border-color: var(--att-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,108,174,.10);
}

/* Normal fields get useful width */
#ticketForm input[type="text"],
#ticketForm input[type="email"] {
    max-width: 520px;
}

/* Help topic */
#ticketForm #topicId {
    width: 100%;
    max-width: 520px;
}

/* Dynamic form */
#dynamic-form td {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Rich text editor */
#ticketForm .redactor-box {
    width: 100% !important;
    margin-top: 5px;
    overflow: hidden;

    border: 1px solid #d0d5dd !important;
    border-radius: 10px !important;

    box-shadow: none !important;
}

#ticketForm .redactor-toolbar {
    padding: 6px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e5e9ef !important;
}

#ticketForm .redactor-editor {
    box-sizing: border-box;
    min-height: 190px !important;
    padding: 16px !important;

    color: #17212b;
    font-size: 14px;
    line-height: 1.6;
}

/* Attachments */
#ticketForm .dropzone,
#ticketForm .filedrop {
    border-radius: 8px;
}

/* CAPTCHA */
#ticketForm .captchaRow td {
    padding-top: 20px;
}

#ticketForm .captcha img {
    margin-right: 12px;
    border-radius: 6px;
}

#ticketForm #captcha {
    width: 110px;
    min-height: 38px;
}

/* Validation */
#ticketForm .error {
    color: #d92d20;
    font-size: 12px;
}

/* Bottom actions */
#ticketForm .buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    margin: 25px 0 0 !important;
}

#ticketForm .buttons input {
    min-height: 42px;
    padding: 0 18px;

    border: 1px solid #d0d5dd;
    border-radius: 8px;

    background: #fff;
    color: #344054;

    font-size: 14px;
    font-weight: 650;

    cursor: pointer;
}

#ticketForm .buttons input[type="submit"] {
    padding: 0 24px;

    background: linear-gradient(135deg, #006cae, #00598f);
    border-color: #006cae;

    color: #fff;

    box-shadow: 0 3px 8px rgba(0,108,174,.20);
}

#ticketForm .buttons input[type="submit"]:hover {
    background: #00598f;
}

@media screen and (max-width: 760px) {

    .att-ticket-page {
        padding: 30px 15px 38px;
    }

    .att-ticket-heading {
        margin-bottom: 22px;
    }

    .att-ticket-heading h1 {
        font-size: 28px;
    }

    .att-ticket-card {
        padding: 20px 15px;
        border-radius: 12px;
    }

    #ticketForm > table,
    #ticketForm > table tbody,
    #ticketForm > table tr,
    #ticketForm > table td {
        box-sizing: border-box;
        width: 100% !important;
    }

    #ticketForm input[type="text"],
    #ticketForm input[type="email"],
    #ticketForm input[type="tel"],
    #ticketForm select,
    #ticketForm textarea {
        width: 100% !important;
        max-width: none !important;
    }

    #ticketForm .buttons {
        flex-direction: column;
    }

    #ticketForm .buttons input {
        width: 100%;
    }
}

/* ATTComputer CAPTCHA */
#ticketForm .captchaRow td {
    vertical-align: middle;
}

#ticketForm .captchaRow td.required {
    padding-top: 28px;
    color: #344054;
    font-weight: 600;
}

#ticketForm .captchaRow td:last-child {
    padding-top: 20px;
}

#ticketForm .captcha {
    display: inline-block;
    vertical-align: middle;
}

#ticketForm .captcha img {
    float: none !important;
    vertical-align: middle;
    margin: 0 12px 0 0;
}

#ticketForm #captcha {
    display: inline-block;
    vertical-align: middle;
    width: 120px;
    margin-right: 10px;
}

#ticketForm .captchaRow em {
    display: inline-block;
    vertical-align: middle;
    color: #667085;
    font-size: 12px;
}

/* =========================================================
   NEW TICKET FORM (open.php)
   Table structure retained deliberately: the help-topic
   AJAX injects <tr>-shaped markup into #dynamic-form.
   ========================================================= */

#ticketForm table {
    width: 100% !important;
    max-width: 100%;
    border-collapse: collapse;
}

#ticketForm td {
    padding: 8px 0;
    vertical-align: top;
    font-size: 14px;
    color: var(--att-text);
}

#ticketForm hr {
    border: 0;
    border-top: 1px solid var(--att-border);
    margin: 18px 0;
}

#ticketForm .form-header b {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--att-muted);
}

#ticketForm input[type=text],
#ticketForm input[type=email],
#ticketForm input[type=tel],
#ticketForm select,
#ticketForm textarea {
    width: 100%;
    max-width: 520px;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--att-text);
    background: var(--att-white);
    border: 1px solid var(--att-border);
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

#ticketForm input:focus,
#ticketForm select:focus,
#ticketForm textarea:focus {
    outline: none;
    border-color: var(--att-blue);
    box-shadow: 0 0 0 3px rgba(0,108,174,.15);
}

#ticketForm font.error,
#ticketForm .error {
    display: inline-block;
    font-family: inherit;
    font-size: 12.5px;
    color: #c0392b;
    margin-top: 4px;
}

#ticketForm .captchaRow img { border-radius: 4px; }
#ticketForm #captcha { max-width: 140px; }

#ticketForm .redactor-box {
    border: 1px solid var(--att-border);
    border-radius: 6px;
    overflow: hidden;
    max-width: 100%;
}

#ticketForm p.buttons {
    text-align: left !important;
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

#ticketForm p.buttons input[type=submit] {
    background: var(--att-blue);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
#ticketForm p.buttons input[type=submit]:hover { background: var(--att-blue-dark); }

#ticketForm p.buttons input[name=cancel] {
    background: transparent;
    color: var(--att-muted);
    border: 1px solid var(--att-border);
    border-radius: 6px;
    padding: 12px 20px;
    font-size: 14px;
    cursor: pointer;
}

/* Reset wipes a long description in one click. Hide it. */
#ticketForm p.buttons input[type=reset] { display: none; }

@media (max-width: 640px) {
    #ticketForm td { display: block; width: 100%; }
    #ticketForm input[type=text],
    #ticketForm select,
    #ticketForm textarea { max-width: 100%; }
}

/* =========================================================
   HOMEPAGE ACTION CARDS - interaction layer
   ========================================================= */

.att-action-card {
    position: relative;
    transition: transform .18s ease,
                box-shadow .18s ease,
                border-color .18s ease;
}

.att-action-card:hover,
.att-action-card:focus-within {
    transform: translateY(-4px);
    border-color: var(--att-blue);
    box-shadow: 0 14px 30px -10px rgba(0, 108, 174, .40);
}

/* the primary action carries a little more weight */
.att-action-card.att-action-primary:hover,
.att-action-card.att-action-primary:focus-within {
    box-shadow: 0 18px 38px -10px rgba(0, 108, 174, .52);
}

/* icon tile inverts to solid brand blue */
.att-action-icon {
    transition: background .18s ease, color .18s ease;
}

.att-action-card:hover .att-action-icon {
    background: var(--att-blue);
    color: #fff;
}

/* whole card clickable, arrow nudges */
.att-action-link {
    display: inline-block;
    transition: transform .18s ease;
}

.att-action-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.att-action-card:hover .att-action-link {
    transform: translateX(3px);
}

/* keyboard focus ring follows the card's own corner radius */
.att-action-card:has(.att-action-link:focus-visible) {
    outline: 2px solid var(--att-blue);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .att-action-card,
    .att-action-icon,
    .att-action-link { transition: none; }
    .att-action-card:hover,
    .att-action-card:hover .att-action-link { transform: none; }
}

/* =========================================================
   NAV - hover, matching the action cards' colour language
   Classes sit on the <a>, not the <li>.
   ========================================================= */

#nav a {
    border-radius: 8px;
    transition: background .18s ease, color .18s ease;
}

#nav a:not(.active):hover,
#nav a:not(.active):focus-visible {
    background: var(--att-blue-light);
    color: var(--att-blue);
}

#nav a:focus-visible {
    outline: 2px solid var(--att-blue);
    outline-offset: 2px;
}

/* =========================================================
   CHECK TICKET STATUS (accesslink.inc.php)
   Inline style="display:table-row" on the wrapper forces
   the !important below.
   ========================================================= */

#content:has(#clientLogin) h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--att-text);
    margin: 0 0 8px;
}

#content:has(#clientLogin) > p {
    color: var(--att-muted);
    font-size: 14px;
    margin-bottom: 24px;
}

#clientLogin > div[style] {
    display: block !important;
}

#clientLogin .login-box {
    display: block;
    width: 100%;
    max-width: 460px;
    padding: 24px;
    margin: 0;
    background: var(--att-white);
    border: 1px solid var(--att-border);
    border-radius: 12px;
    box-shadow: none;
}

/* removes the stock padlock background */
#clientLogin .instructions {
    background: none !important;
    width: auto;
    min-height: 0;
    padding: 0;
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--att-muted);
}

#clientLogin label {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--att-text);
}

#clientLogin input[type=text] {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--att-text);
    background: var(--att-white);
    border: 1px solid var(--att-border);
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

#clientLogin input[type=text]:focus {
    outline: none;
    border-color: var(--att-blue);
    box-shadow: 0 0 0 3px rgba(0, 108, 174, .15);
}

#clientLogin input.btn {
    padding: 12px 22px;
    border: 0;
    border-radius: 6px;
    background: var(--att-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}

#clientLogin input.btn:hover {
    background: var(--att-blue-dark);
}

/* =========================================================
   MOBIEL - overflow-fixes (gemeten op 375px)
   ========================================================= */

@media screen and (max-width: 760px) {

    /* theme.css zet hier margin-left:20px, samen met width:100%
       loopt #content 20px buiten beeld */
    #content {
        margin-left: 0;
    }

    /* "Log in" en de vlaggen staan op een vaste width:400px */
    #header .pull-right p {
        width: auto;
        max-width: 100%;
    }
}

@media screen and (max-width: 760px) {

    /* nav afbreken over twee regels i.p.v. verborgen horizontaal scrollen
       (inhoud is 465px breed op een scherm van 375px) */
    #nav {
        flex-wrap: wrap;
        white-space: normal;
        overflow-x: visible;
        row-gap: 2px;
    }
}

@media screen and (max-width: 760px) {

    /* nav heeft een vaste height van 20px; die moet meegroeien
       nu de items over twee regels lopen */
    #nav {
        height: auto;
        min-height: 0;
    }
}

@media screen and (max-width: 760px) {

    /* kortere labels op mobiel - de volledige tekst blijft in de HTML
       staan voor screenreaders en zoekmachines */
    #nav a.new,
    #nav a.status {
        font-size: 0;
    }

    #nav a.new::after {
        content: "Nieuw verzoek";
        font-size: 13px;
    }

    #nav a.status::after {
        content: "Mijn verzoeken";
        font-size: 13px;
    }
}

@media screen and (max-width: 760px) {

    /* drie gelijke kolommen - past op elke telefoonbreedte */
    #nav {
        flex-wrap: nowrap;
    }

    #nav li {
        flex: 1 1 0;
        min-width: 0;
    }

    #nav li a {
        display: block;
        text-align: center;
        padding: 9px 4px !important;
        white-space: nowrap;
    }

    #nav li a.home { font-size: 0; }

    #nav li a.home::after   { content: "Start";          font-size: 12.5px; }
    #nav li a.new::after    { content: "Nieuw";          font-size: 12.5px; }
    #nav li a.status::after { content: "Mijn verzoeken"; font-size: 12.5px; }
}

/* accesslink-formulier valt buiten de att-* border-box reset */
#clientLogin,
#clientLogin .login-box {
    box-sizing: border-box;
}

@media screen and (max-width: 760px) {

    /* theme.css zet marge links en rechts; links was al weg, rechts nog niet */
    #content {
        margin-right: 0;
    }
}

/* =========================================================
   HEADER + NAV
   ========================================================= */

/* "Log in" en de taalvlaggen uit de header */
#header .pull-right {
    display: none;
}

/* donkere menubalk in merkkleur */
#nav {
    background: var(--att-blue-deep);
    border-bottom: 0;
}

#nav li a {
    color: #cfe0ee;
    background: transparent;
}

#nav li a:not(.active):hover,
#nav li a:not(.active):focus-visible {
    background: rgba(255, 255, 255, .10);
    color: #ffffff;
}

#nav li a.active {
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
}

/* actieve pil is lichtblauw - tekst moet donker, niet wit */
#nav li a.active {
    color: var(--att-blue-deep);
}

@media screen and (max-width: 760px) {

    /* kop en alinea's op de accesslink-pagina staan los in #content
       en missen daardoor zijmarge */
    #content:has(#clientLogin) > h1,
    #content:has(#clientLogin) > p {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* header in dezelfde donkere tint als de menubalk - één blok,
   zoals in het agentpaneel */
#header {
    background: var(--att-blue-deep);
    border-bottom: 0;
}

/* lichte logovariant uit het agentpaneel, alleen hier -
   /logo.php blijft het gewone logo voor e-mails */
#header #logo img {
    content: url("/assets/attcomputer/logo-header.png");
}

#nav {
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* logo gecentreerd in de donkere header */
#header {
    text-align: center;
}

#header #logo {
    float: none !important;
    display: inline-block;
}

/* lichte rand en schaduw rond het portaal weg */
#container {
    border: 0;
    box-shadow: none;
}

/* portaal over de volle schermbreedte */
#container {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* theme.css zet margin: 0 20px op #content, waardoor de inhoud
   20px naar rechts schuift t.o.v. header en menu - op alle breedtes */
#content {
    margin-left: 0;
    margin-right: 0;
}

#nav {
    border-top: 0;          /* scheidingslijn weg - één donker blok */
    justify-content: center; /* menuknoppen gecentreerd */
}

/* donkere ondergrond rond het portaal */
body {
    background: #061f31;
}

/* werkgebied in dezelfde tint als de footer; kaarten blijven wit */
#container {
    background: #061f31;
}

/* losse teksten staan direct op die ondergrond en moeten licht worden */
#content > h1,
#content > p {
    color: #dce9f4;
}

#content > p a {
    color: #7cc0f0;
}

/* werkgebied in dezelfde tint als de footer; kaarten blijven wit */
#container {
    background: #061f31;
}

/* losse teksten staan direct op die ondergrond en moeten licht worden */
#content > h1,
#content > p {
    color: #dce9f4;
}

#content > p a {
    color: #7cc0f0;
}

/* één donkere tint voor header, menu, werkgebied en footer */
body,
#container,
#footer {
    background: var(--att-blue-deep);
}

/* witte laag over de donkere container weghalen */
#content {
    background: transparent;
}

/* losse teksten staan direct op die ondergrond */
#container #content > h1,
#container #content > p {
    color: #dce9f4;
}

#container #content > p a {
    color: #7cc0f0;
}

/* =========================================================
   HERO-BAND op de formulierpagina's, identiek aan de homepage
   ========================================================= */

.att-ticket-page {
    max-width: none;
    padding: 0 0 55px;
}

.att-ticket-heading {
    max-width: none;
    margin: 0 0 30px;
    padding: 68px 40px 72px;
    text-align: center;
    background:
        radial-gradient(circle at 10% 20%, rgba(77,190,241,.24), transparent 28%),
        radial-gradient(circle at 88% 0%, rgba(71,177,228,.18), transparent 32%),
        linear-gradient(135deg, #073653 0%, #005e96 55%, #0077b8 100%);
}

.att-ticket-heading .att-ticket-eyebrow {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 20px;
    background: rgba(255,255,255,.10);
    color: #d9f2ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.08px;
    text-transform: uppercase;
}

.att-ticket-heading h1 {
    margin: 15px 0;
    color: #ffffff;
    font-size: 44px;
    font-weight: 750;
    letter-spacing: -1.54px;
    line-height: 1.12;
}

.att-ticket-heading p {
    max-width: 650px;
    margin: 0 auto;
    color: rgba(255,255,255,.82);
    font-size: 17px;
    line-height: 1.65;
}

.att-ticket-card {
    max-width: 980px;
    margin: 0 auto;
}

@media screen and (max-width: 760px) {
    .att-ticket-heading {
        padding: 46px 22px 52px;
    }
    .att-ticket-heading h1 {
        font-size: 28px;
        letter-spacing: -.5px;
    }
    .att-ticket-heading p {
        font-size: 15px;
    }
    .att-ticket-card {
        margin: 0 15px;
    }
}

/* eerdere regel zet color met !important - alleen zo te overschrijven */
.att-ticket-heading h1 {
    color: #ffffff !important;
    margin: 15px 0 !important;
}

/* hangslot-illustratie van osTicket staat op het formulier zelf */
#clientLogin {
    background-image: none;
    padding: 0;
}

/* login-box zit nu in att-ticket-card - geen tweede kader nodig */
.att-ticket-card .login-box {
    max-width: 460px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.att-ticket-card .instructions {
    max-width: 460px;
    margin: 16px auto 0;
    text-align: center;
}

/* formulier zelf heeft grijze achtergrond + rand uit theme.css */
#clientLogin {
    background: transparent;
    border: 0;
}

/* id-selector nodig, anders verliest deze van een eerdere regel */
#clientLogin .login-box {
    max-width: 460px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

#clientLogin .instructions {
    max-width: 460px;
    margin: 16px auto 0;
    text-align: center;
}

/* instructieregel zit in een table-cell naast het formulier */
#clientLogin .instructions {
    display: block;
}

/* captcha-rij uitlijnen met de rest van het formulier */
#ticketForm .captchaRow td {
    display: block;
    width: 100%;
    padding: 0 !important;
    text-align: left;
}

#ticketForm .captchaRow .captcha {
    display: block;
    margin: 6px 0;
}

#ticketForm .captchaRow #captcha {
    display: block;
    max-width: 160px;
}

/* captcha: float van het align-attribuut weg, alles op één lijn */
#ticketForm .captchaRow td:first-child {
    padding-top: 22px !important;
    font-weight: 600;
}

#ticketForm .captchaRow .captcha {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

#ticketForm .captchaRow .captcha img {
    float: none !important;
    vertical-align: middle;
    border-radius: 4px;
}

#ticketForm .captchaRow #captcha {
    display: inline-block;
    vertical-align: middle;
    max-width: 140px;
    margin: 0;
}

#ticketForm .captchaRow em {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
}

/* hulptekst en verplicht-teken op één regel achter het veld */
#ticketForm .captchaRow em {
    display: inline;
    margin-left: 10px;
}

#ticketForm .captchaRow font.error {
    display: inline;
    margin-left: 4px;
}

/* regel 1: afbeelding + invoerveld, regel 2: hulptekst + verplicht-teken */
#ticketForm .captchaRow .captcha,
#ticketForm .captchaRow #captcha {
    float: left;
    margin: 0 10px 0 0;
}

#ticketForm .captchaRow em {
    display: inline;
    float: left;
    clear: left;
    margin: 10px 0 0;
}

#ticketForm .captchaRow font.error {
    display: inline;
    float: left;
    margin: 10px 0 0 4px;
}

#ticketForm .captchaRow td:last-child::after {
    content: "";
    display: block;
    clear: both;
}

/* =========================================================
   ATTComputer - Customer Dashboard / Mijn supportverzoeken
   ========================================================= */

.att-dashboard {
    box-sizing: border-box;
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 32px 60px;
}

/* Header */
.att-dashboard-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.att-dashboard-head h1 {
    margin: 4px 0 8px !important;
    color: #ffffff !important;
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.att-dashboard-head p {
    margin: 0;
    color: #aebfcd;
    font-size: 14px;
    line-height: 1.55;
}

.att-new-ticket-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;

    min-height: 44px;
    padding: 0 18px;

    background: var(--att-blue);
    border-radius: 9px;

    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;

    box-shadow: 0 5px 15px rgba(0,108,174,.22);
    transition: .16s ease;
}

.att-new-ticket-button:hover {
    background: #0080c8;
    transform: translateY(-1px);
}

/* Statistics */
.att-ticket-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 22px;
}

.att-stat-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 5px;

    min-height: 105px;
    padding: 20px 22px;

    background: #ffffff;
    border: 1px solid #e3e9ee;
    border-radius: 13px;

    color: var(--att-text) !important;
    text-decoration: none !important;

    box-shadow: 0 5px 18px rgba(7, 54, 83, .07);
}

a.att-stat-card {
    transition: transform .15s ease, border-color .15s ease;
}

a.att-stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0,108,174,.35);
}

.att-stat-number {
    color: #102a3b;
    font-size: 29px;
    font-weight: 750;
    line-height: 1;
}

.att-stat-label {
    color: #667085;
    font-size: 13px;
    font-weight: 600;
}

.att-stat-attention {
    border-color: #f2c46d;
    background: #fffdf7;
}

/* Search / filter */
.att-ticket-toolbar {
    box-sizing: border-box;
    margin-bottom: 16px;
    padding: 14px;

    background: rgba(255,255,255,.97);
    border: 1px solid #e3e9ee;
    border-radius: 12px;
}

.att-ticket-toolbar form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.att-search-field {
    position: relative;
    flex: 1 1 auto;
}

.att-search-field i {
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    color: #98a2b3;
    pointer-events: none;
}

#content .att-search-field input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 42px;
    padding: 0 13px 0 37px;

    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;

    color: #17212b;
    font-size: 14px;
}

#content .att-ticket-toolbar select {
    box-sizing: border-box;
    width: 220px;
    height: 42px;
    padding: 0 10px;

    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;

    color: #344054;
    font-size: 13px;
}

.att-search-button {
    height: 42px;
    padding: 0 18px;

    background: #eef5f9;
    border: 1px solid #d7e4ec;
    border-radius: 8px;

    color: var(--att-blue);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.att-search-button:hover {
    background: #21384d;
    border-color: #3f6688;
    color: #ffffff;
}

.att-clear-filter {
    padding: 0 7px;
    color: #667085 !important;
    font-size: 12px;
    white-space: nowrap;
    text-decoration: none !important;
}

/* Ticket list */
.att-ticket-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.att-ticket-item {
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    min-height: 118px;
    padding: 20px 22px;

    background: #ffffff;
    border: 1px solid #e3e9ee;
    border-radius: 13px;

    color: var(--att-text) !important;
    text-decoration: none !important;

    box-shadow: 0 3px 12px rgba(7,54,83,.05);

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.att-ticket-item:hover {
    transform: translateY(-2px);
    border-color: rgba(0,108,174,.32);
    box-shadow: 0 8px 22px rgba(7,54,83,.10);
}

.att-ticket-item-main {
    flex: 1;
    min-width: 0;
}

.att-ticket-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 8px;
}

.att-ticket-number {
    color: var(--att-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .025em;
}

.att-ticket-subject {
    overflow: hidden;
    margin-bottom: 12px;

    color: #14212b;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.att-ticket-subject i {
    margin-right: 5px;
    color: #98a2b3;
}

.att-ticket-meta {
    display: flex;
    align-items: center;
    gap: 22px;

    color: #667085;
    font-size: 12.5px;
}

.att-ticket-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.att-ticket-meta i {
    color: #98a2b3;
}

.att-ticket-arrow {
    flex: 0 0 28px;
    color: #98a2b3;
    font-size: 15px;
    text-align: center;
}

/* Status badges */
.att-status-badge {
    display: inline-flex;
    align-items: center;

    padding: 6px 10px;
    border-radius: 20px;

    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.att-status-open {
    background: #eaf4fb;
    color: #006cae;
}

.att-status-processing {
    background: #e8f5ee;
    color: #18794e;
}

.att-status-customer {
    background: #fff3d9;
    color: #9a6700;
}

.att-status-supplier {
    background: #f1edff;
    color: #6941c6;
}

.att-status-resolved {
    background: #e9f7ef;
    color: #16794b;
}

.att-status-closed {
    background: #eef1f4;
    color: #59636e;
}

.att-status-default {
    background: #eef1f4;
    color: #59636e;
}

/* Empty state */
.att-empty-tickets {
    padding: 55px 25px;

    background: #ffffff;
    border: 1px solid #e3e9ee;
    border-radius: 13px;

    text-align: center;
}

.att-empty-tickets > i {
    display: block;
    margin-bottom: 14px;

    color: #98a2b3;
    font-size: 30px;
}

.att-empty-tickets h2 {
    margin: 0 0 6px !important;
    color: #17212b !important;
    font-size: 18px;
}

.att-empty-tickets p {
    margin: 0;
    color: #667085;
    font-size: 13px;
}

/* Pagination */
.att-pagination {
    margin-top: 20px;
    color: #aebfcd;
    font-size: 13px;
    text-align: center;
}

.att-pagination a {
    color: #ffffff;
}

/* =========================================================
   CUSTOMER DASHBOARD - MOBILE
   ========================================================= */

@media screen and (max-width: 760px) {

    .att-dashboard {
        padding: 30px 15px 40px;
    }

    .att-dashboard-head {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 22px;
    }

    .att-dashboard-head h1 {
        font-size: 27px;
    }

    .att-dashboard-head p {
        font-size: 13.5px;
    }

    .att-new-ticket-button {
        width: 100%;
        min-height: 46px;
        box-sizing: border-box;
    }

    .att-ticket-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin-bottom: 15px;
    }

    .att-stat-card {
        min-height: 88px;
        padding: 16px;
    }

    .att-stat-number {
        font-size: 25px;
    }

    .att-ticket-toolbar {
        padding: 11px;
    }

    .att-ticket-toolbar form {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    #content .att-ticket-toolbar select,
    .att-search-button {
        width: 100%;
    }

    .att-clear-filter {
        padding: 6px 2px 2px;
        text-align: center;
    }

    .att-ticket-list {
        gap: 9px;
    }

    .att-ticket-item {
        min-height: 0;
        padding: 17px 16px;
    }

    .att-ticket-item-top {
        align-items: flex-start;
        gap: 10px;
    }

    .att-ticket-subject {
        margin-bottom: 10px;
        font-size: 15px;
        white-space: normal;
    }

    .att-ticket-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .att-ticket-arrow {
        display: none;
    }

    .att-status-badge {
        padding: 5px 8px;
        font-size: 10.5px;
    }
}



/* =========================================================
   ATTComputer - definitieve mobiele klantnavigatie
   ========================================================= */
@media screen and (max-width: 760px) {

    #nav {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;

        width: 100% !important;
        height: 58px !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 7px 10px !important;

        overflow: visible !important;
        white-space: normal !important;
    }

    #nav li {
        display: flex !important;
        align-items: center !important;
        flex: 1 1 0 !important;

        height: 44px !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #nav li a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 4px !important;

        overflow: hidden !important;
        white-space: nowrap !important;

        font-size: 0 !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    #nav li a.home::after,
    #nav li a.new::after,
    #nav li a.status::after,
    #nav li a.tickets::after {
        display: block !important;
        font-size: 12.5px !important;
        line-height: 18px !important;
    }

    #nav li a.home::after {
        content: "Start" !important;
    }

    #nav li a.new::after {
        content: "Nieuw" !important;
    }

    #nav li a.status::after,
    #nav li a.tickets::after {
        content: "Mijn verzoeken" !important;
    }
}

/* =========================================================
   ATTComputer - Customer ticket detail
   ========================================================= */

.att-ticket-view {
    width: min(1400px, calc(100% - 64px));
    margin: 0 auto;
    padding: 42px 0 70px;
    box-sizing: border-box;
}

.att-ticket-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    color: #8fbce3 !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
}

.att-ticket-back:hover {
    color: #fff !important;
}

.att-ticket-view-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.att-ticket-view-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.att-ticket-view-number {
    margin-bottom: 6px;
    color: var(--att-blue);
    font-size: 14px;
    font-weight: 800;
}

.att-ticket-view-title h1 {
    margin: 0 !important;
    padding: 0 !important;
    color: #102638 !important;
    font-size: 28px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.att-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
}

.att-status-open {
    background: #e9f3ff;
    color: #1768a5;
}

.att-status-processing {
    background: #e9f3ff;
    color: #1768a5;
}

.att-status-customer {
    background: #fff3d6;
    color: #8b6200;
}

.att-status-supplier {
    background: #f2ebff;
    color: #6742a0;
}

.att-status-resolved {
    background: #e8f7ec;
    color: #277640;
}

.att-status-closed {
    background: #eef1f4;
    color: #56616d;
}

.att-status-default {
    background: #eef1f4;
    color: #56616d;
}

.att-ticket-view-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 42px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e6ebef;
}

.att-ticket-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.att-ticket-meta-label {
    color: #788795;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.att-ticket-meta-item strong {
    color: #1c3041;
    font-size: 15px;
}

.att-ticket-custom-data {
    background: #fff;
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 24px;
}

.att-ticket-custom-data h2 {
    margin: 0 0 16px !important;
    color: #102638 !important;
    font-size: 18px !important;
}

.att-ticket-custom-row {
    display: flex;
    gap: 20px;
    padding: 9px 0;
    border-top: 1px solid #edf0f2;
}

.att-ticket-custom-row span {
    min-width: 180px;
    color: #71808d;
}

.att-ticket-custom-row strong {
    color: #1c3041;
}

.att-ticket-conversation {
    width: 100%;
    box-sizing: border-box;
}


/* -------------------------
   Mobiel
   ------------------------- */

@media screen and (max-width: 760px) {

    .att-ticket-view {
        width: 100% !important;
        margin: 0 !important;
        padding: 18px 16px 45px !important;
    }

    .att-ticket-back {
        margin-bottom: 14px;
        font-size: 14px;
    }

    .att-ticket-view-card {
        padding: 20px !important;
        margin-bottom: 18px !important;
        border-radius: 14px !important;
    }

    .att-ticket-view-head {
        display: block;
    }

    .att-ticket-view-number {
        font-size: 13px;
    }

    .att-ticket-view-title h1 {
        font-size: 23px !important;
        line-height: 1.25 !important;
        margin-bottom: 13px !important;
    }

    .att-status-badge {
        padding: 7px 12px;
        font-size: 12px;
    }

    .att-ticket-view-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 18px;
        padding-top: 17px;
    }

    .att-ticket-meta-label {
        font-size: 10px;
    }

    .att-ticket-meta-item strong {
        font-size: 13px;
        line-height: 1.35;
    }

    .att-ticket-custom-data {
        padding: 18px;
        border-radius: 14px;
        margin-bottom: 18px;
    }

    .att-ticket-custom-row {
        display: block;
    }

    .att-ticket-custom-row span,
    .att-ticket-custom-row strong {
        display: block;
        min-width: 0;
    }

    .att-ticket-custom-row strong {
        margin-top: 3px;
    }

    .att-ticket-conversation {
        width: 100% !important;
        overflow: visible !important;
    }
}

/* =========================================================
   ATTComputer - Customer ticket conversation
   ========================================================= */

#ticketThread {
    width: 100%;
    max-width: 100%;
    margin-top: 24px;
}

/* Iedere conversatieregel */
#ticketThread .thread-entry {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: 72px;
    margin: 0 0 18px;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
}

/* Oude osTicket ballon-pijlen / tijdlijn verwijderen */
#ticketThread .thread-entry:before,
#ticketThread .thread-entry:after,
#ticketThread .thread-entry .header:before,
#ticketThread .thread-entry .header:after {
    display: none !important;
    content: none !important;
}

/* Avatar */
#ticketThread .thread-entry > .avatar {
    position: absolute;
    top: 12px;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

#ticketThread .thread-entry.message > .avatar {
    left: 0;
}

#ticketThread .thread-entry.response > .avatar {
    right: 0;
}

#ticketThread .thread-entry > .avatar img {
    width: 54px !important;
    height: 54px !important;
    max-width: 54px !important;
    max-height: 54px !important;
    object-fit: cover;
    border-radius: 50%;
}

/* Medewerkerfoto's zoals Hassan mogen volledig zichtbaar blijven */
#ticketThread .thread-entry.response > .avatar img {
    object-fit: contain;
    border-radius: 10px;
}

/* Berichtkaart */
#ticketThread .thread-entry .header,
#ticketThread .thread-entry .thread-body {
    box-sizing: border-box;
}

#ticketThread .thread-entry.message .header,
#ticketThread .thread-entry.message .thread-body {
    margin-left: 72px !important;
    margin-right: 0 !important;
}

#ticketThread .thread-entry.response .header,
#ticketThread .thread-entry.response .thread-body {
    margin-left: 0 !important;
    margin-right: 72px !important;
}

/* Header van bericht */
#ticketThread .thread-entry .header {
    min-height: 0 !important;
    padding: 14px 18px 5px !important;
    border: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    background: #ffffff !important;
    color: #14212b !important;
    font-size: 14px;
    line-height: 1.45;
}

/* Klant subtiel lichtblauw */
#ticketThread .thread-entry.message .header {
    background: #eef6fc !important;
}

/* Body */
#ticketThread .thread-entry .thread-body {
    min-height: 54px;
    padding: 8px 18px 18px !important;
    border: 0 !important;
    border-radius: 0 0 14px 14px !important;
    background: #ffffff !important;
    color: #14212b !important;
    font-size: 15px;
    line-height: 1.6;
    box-shadow: 0 2px 10px rgba(6, 31, 49, .10);
}

#ticketThread .thread-entry.message .thread-body {
    background: #eef6fc !important;
}

/* Naam */
#ticketThread .thread-entry .header b {
    color: #14212b;
    font-weight: 700;
}

/* Datum minder prominent */
#ticketThread .thread-entry .header time {
    color: #667085;
    font-size: 13px;
}

/* Onderwerp in berichtheader */
#ticketThread .thread-entry .header .title {
    display: block;
    max-width: none !important;
    margin-top: 2px;
    color: #667085 !important;
    font-size: 13px;
}

/* Berichttekst */
#ticketThread .thread-body p:first-child {
    margin-top: 0;
}

#ticketThread .thread-body p:last-child {
    margin-bottom: 0;
}

/* Bijlagen */
#ticketThread .attachments {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

/* =========================================================
   Mobile conversation
   ========================================================= */

@media screen and (max-width: 760px) {

    #ticketThread {
        margin-top: 18px;
    }

    #ticketThread .thread-entry {
        margin-bottom: 16px;
        padding-top: 46px;
    }

    #ticketThread .thread-entry > .avatar {
        top: 0;
        width: 38px !important;
        height: 38px !important;
    }

    #ticketThread .thread-entry.message > .avatar {
        left: 4px;
    }

    #ticketThread .thread-entry.response > .avatar {
        left: auto;
        right: 4px;
    }

    #ticketThread .thread-entry > .avatar img {
        width: 38px !important;
        height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
    }

    #ticketThread .thread-entry.message .header,
    #ticketThread .thread-entry.message .thread-body,
    #ticketThread .thread-entry.response .header,
    #ticketThread .thread-entry.response .thread-body {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #ticketThread .thread-entry .header {
        padding: 13px 14px 4px !important;
        font-size: 13px;
    }

    #ticketThread .thread-entry .header time {
        font-size: 12px;
    }

    #ticketThread .thread-entry .thread-body {
        padding: 8px 14px 15px !important;
        font-size: 14px;
        line-height: 1.55;
    }
}


/* =========================================================
   ATTComputer - Conversation cleanup
   ========================================================= */

/* Interne/tijdlijn-events niet tonen in klantportaal */
#ticketThread .thread-event {
    display: none !important;
}

/* Event/tijdlijn lijnen verwijderen */
#ticketThread:before,
#ticketThread:after,
#ticketThread .thread-entry:before,
#ticketThread .thread-entry:after {
    border: 0 !important;
    border-left: 0 !important;
    background-image: none !important;
}

/* Mobiel: avatar direct boven de betreffende kaart */
@media screen and (max-width: 760px) {

    #ticketThread .thread-entry {
        padding-top: 48px !important;
    }

    #ticketThread .thread-entry.message > .avatar {
        top: 4px !important;
        left: 8px !important;
    }

    #ticketThread .thread-entry.response > .avatar {
        top: 0 !important;
        right: 8px !important;
        left: auto !important;
    }

    /* Medewerkerfoto iets groter en beter zichtbaar */
    #ticketThread .thread-entry.response > .avatar,
    #ticketThread .thread-entry.response > .avatar img {
        width: 44px !important;
        height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
    }
}

/* ATTComputer - moderne berichtkop */

#ticketThread .att-thread-author {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

#ticketThread .att-thread-author b {
    font-size: 15px;
    color: #14212b;
}

#ticketThread .att-thread-role {
    padding-left: 8px;
    border-left: 1px solid #ccd5dc;
    color: #3976ad;
    font-size: 12px;
    font-weight: 700;
}

#ticketThread .att-thread-date {
    display: block;
    margin-top: 2px;
    color: #778694 !important;
    font-size: 12px !important;
}

@media screen and (max-width: 760px) {
    #ticketThread .att-thread-author b {
        font-size: 14px;
    }

    #ticketThread .att-thread-role {
        font-size: 11px;
    }

    #ticketThread .att-thread-date {
        font-size: 11px !important;
    }
}

/* =========================================================
   ATTComputer - avatar geïntegreerd in berichtkop
   ========================================================= */

#ticketThread .thread-entry {
    padding-top: 0 !important;
}

#ticketThread .att-thread-author-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

#ticketThread .att-thread-avatar {
    display: flex;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
}

#ticketThread .att-thread-avatar img {
    display: block;
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: cover;
    border-radius: 50%;
}

/* Medewerkerfoto volledig tonen */
#ticketThread .thread-entry.response .att-thread-avatar img {
    object-fit: contain;
    border-radius: 7px;
}

#ticketThread .att-thread-author-info {
    min-width: 0;
}

#ticketThread .att-thread-date {
    margin-top: 3px;
}

@media screen and (max-width: 760px) {

    #ticketThread .thread-entry {
        padding-top: 0 !important;
    }

    #ticketThread .att-thread-author-row {
        gap: 10px;
    }

    #ticketThread .att-thread-avatar,
    #ticketThread .att-thread-avatar img {
        width: 38px !important;
        height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
        flex-basis: 38px;
    }

    #ticketThread .thread-entry .header {
        padding: 12px 14px 8px !important;
    }
}

/* =========================================================
   ATTComputer - klant reactieformulier
   ========================================================= */

#reply.att-reply-card {
    box-sizing: border-box;
    width: 100%;
    margin: 28px 0 0 !important;
    padding: 28px 30px !important;

    background: #ffffff;
    border: 0 !important;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(6, 31, 49, .10);
}

#reply .att-reply-heading {
    margin-bottom: 22px;
}

#reply .att-reply-heading h2 {
    margin: 0 0 6px !important;
    padding: 0 !important;

    color: #14212b !important;
    font-size: 20px !important;
    line-height: 1.3;
    font-weight: 700;
}

#reply .att-reply-heading p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.5;
}

#reply .att-reply-editor {
    width: 100%;
}

/* Normale textarea + rich-text editor */
#reply textarea,
#reply .redactor-box,
#reply .redactor-editor,
#reply .redactor-styles {
    box-sizing: border-box;
    max-width: 100% !important;
}

#reply textarea {
    width: 100% !important;
    min-height: 180px;
    padding: 14px;

    border: 1px solid #d5dde3;
    border-radius: 10px;

    font-size: 15px;
    line-height: 1.55;
}

#reply .redactor-box {
    width: 100% !important;
    margin: 0 !important;

    border: 1px solid #d5dde3 !important;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: none !important;
}

#reply .redactor-toolbar {
    border: 0 !important;
    border-bottom: 1px solid #e3e8ec !important;
    box-shadow: none !important;
}

#reply .redactor-editor,
#reply .redactor-styles {
    min-height: 170px !important;
    padding: 16px !important;
    color: #14212b;
    font-size: 15px;
    line-height: 1.55;
}

/* Validatiefout */
#reply .att-reply-error {
    margin-bottom: 10px;
    padding: 10px 12px;

    background: #fff1f0;
    border-radius: 8px;

    color: #b42318;
    font-size: 13px;
}

/* Bijlagengebied */
#reply .attachments {
    box-sizing: border-box;
    width: 100%;
    margin-top: 14px;
}

/* Acties */
#reply .att-reply-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

#reply input.att-reply-submit {
    width: auto !important;
    min-width: 170px;
    height: auto !important;

    margin: 0 !important;
    padding: 12px 20px !important;

    background: var(--att-blue) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 9px !important;

    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 20px;
    font-weight: 700;

    cursor: pointer;
    box-shadow: none !important;
}

#reply input.att-reply-submit:hover {
    background: var(--att-blue-dark) !important;
}

/* =========================================================
   Mobiel
   ========================================================= */

@media screen and (max-width: 760px) {

    #reply.att-reply-card {
        margin-top: 20px !important;
        padding: 20px 16px !important;
        border-radius: 14px;
    }

    #reply .att-reply-heading {
        margin-bottom: 17px;
    }

    #reply .att-reply-heading h2 {
        font-size: 18px !important;
    }

    #reply .att-reply-heading p {
        font-size: 13px;
    }

    #reply textarea {
        min-height: 150px;
        font-size: 14px;
    }

    #reply .redactor-editor,
    #reply .redactor-styles {
        min-height: 150px !important;
        padding: 13px !important;
        font-size: 14px;
    }

    #reply .att-reply-actions {
        display: block;
        margin-top: 16px;
    }

    #reply input.att-reply-submit {
        display: block;
        width: 100% !important;
        min-width: 0;
        padding: 12px 16px !important;
    }
}

/* =========================================================
   ATTComputer - Customer portal dark theme
   Eén consistente donkere weergave voor start, formulier,
   ticketstatus, ticketoverzicht en ticketdetail.
   ========================================================= */

:root {
    --att-text: #dce7f1;
    --att-muted: #91a4b7;
    --att-border: #2b4053;
    --att-background: #0b1420;
    --att-white: #142333;
    --att-blue-light: #183b57;
}

html,
body,
#container,
#content,
#header,
#nav,
#footer {
    background-color: #0b1420 !important;
    color: #dce7f1;
}

body {
    background-image:
        radial-gradient(circle at 15% 5%, rgba(0,108,174,.16), transparent 28%) !important;
}

#container {
    border-color: #223649;
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
}

#header,
#nav {
    border-color: #24384b !important;
}

#nav li a {
    color: #b9c9d8 !important;
}

#nav li a:hover {
    background: #162a3d !important;
    color: #ffffff !important;
}

#nav li a.active {
    background: #1b3a55 !important;
    color: #ffffff !important;
}

.att-action-card,
.att-support-info,
.att-ticket-card,
.att-stat-card,
.att-ticket-row,
.att-empty-tickets,
.att-ticket-view-card,
.att-ticket-custom-data,
#reply.att-reply-card {
    background: #142333 !important;
    border-color: #2b4053 !important;
    color: #dce7f1 !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
}

.att-action-card:hover,
.att-ticket-row:hover,
.att-stat-card:hover {
    background: #182a3c !important;
    border-color: #3f6688 !important;
}

.att-action-incident {
    border-color: #3c6d94 !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;
}

.att-action-icon,
.att-action-incident .att-action-icon {
    background: #193a55 !important;
    color: #80caff !important;
}

.att-action-content h2,
.att-support-info strong,
.att-ticket-heading h1,
.att-ticket-view-title h1,
.att-ticket-custom-data h2,
.att-empty-tickets h2,
#reply .att-reply-heading h2 {
    color: #f2f7fb !important;
}

.att-action-content p,
.att-support-details,
.att-support-details span,
.att-support-details a,
.att-ticket-heading p,
.att-ticket-meta-label,
.att-ticket-custom-row span,
.att-empty-tickets p,
#reply .att-reply-heading p {
    color: #9fb1c2 !important;
}

.att-action-link,
.att-support-label,
.att-ticket-eyebrow,
.att-ticket-view-number,
.att-ticket-back,
#content a {
    color: #7fc4f7;
}

#content input[type="text"],
#content input[type="email"],
#content input[type="tel"],
#content input[type="password"],
#content input[type="search"],
#content select,
#content textarea,
#ticketForm input[type="text"],
#ticketForm input[type="email"],
#ticketForm input[type="tel"],
#ticketForm select,
#ticketForm textarea,
#content .att-search-field input[type="text"],
#content .att-ticket-toolbar select {
    background: #0d1926 !important;
    border-color: #34495e !important;
    color: #e2ebf4 !important;
}

#content input::placeholder,
#content textarea::placeholder {
    color: #71869a !important;
    opacity: 1;
}

#content input:focus,
#content select:focus,
#content textarea:focus,
#ticketForm input:focus,
#ticketForm select:focus,
#ticketForm textarea:focus {
    border-color: #4d94c5 !important;
    box-shadow: 0 0 0 3px rgba(77,148,197,.18) !important;
}

#ticketForm td,
#ticketForm label,
#ticketForm td.required,
#ticketForm td:first-child,
#ticketForm .form-header,
#ticketForm .form-header b,
#clientLogin label,
#clientLogin td {
    color: #c9d6e2 !important;
}

#ticketForm hr,
.att-ticket-view-meta,
.att-ticket-custom-row {
    border-color: #2b4053 !important;
}

#ticketForm .redactor-box,
#reply .redactor-box {
    background: #0d1926 !important;
    border-color: #34495e !important;
}

#ticketForm .redactor-toolbar,
#reply .redactor-toolbar {
    background: #182a3c !important;
    border-color: #2b4053 !important;
}

#ticketForm .redactor-editor,
#ticketForm .redactor-styles,
#reply .redactor-editor,
#reply .redactor-styles {
    background: #0d1926 !important;
    color: #dce7f1 !important;
}

.att-ticket-subject,
.att-stat-number,
.att-ticket-meta-item strong,
.att-ticket-custom-row strong {
    color: #e6eef6 !important;
}

.att-stat-attention {
    background: #2d291c !important;
    border-color: #66562d !important;
}

#ticketThread .thread-entry .header,
#ticketThread .thread-entry .thread-body,
#ticketThread .thread-entry.message .header,
#ticketThread .thread-entry.message .thread-body {
    background: #142333 !important;
    color: #dce7f1 !important;
}

#ticketThread .thread-entry.message .header,
#ticketThread .thread-entry.message .thread-body {
    background: #182d40 !important;
}

#ticketThread .thread-entry .header b,
#ticketThread .att-thread-author b {
    color: #eef5fb !important;
}

#ticketThread .thread-entry .header time,
#ticketThread .thread-entry .header .title,
#ticketThread .att-thread-date {
    color: #91a4b7 !important;
}

#footer,
#footer p {
    color: #8297aa !important;
}

#footer a {
    color: #9db4c7 !important;
    text-decoration: none;
}

#footer a:hover,
#footer a:focus-visible {
    color: #ffffff !important;
    text-decoration: underline;
}

@media screen and (max-width: 760px) {
    body,
    #container,
    #content {
        background-color: #0b1420 !important;
    }
}