/* =================================
   KanoMart Admin Support
================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


body {

    background: #f4f6f9;

    color: #172033;

}


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

.support-header {

    min-height: 72px;

    background: #0b6b4f;

    color: #fff;

    padding:
        15px 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}


.brand {

    font-size: 23px;

    font-weight: 900;

}


.brand span {

    display: block;

    margin-top: 4px;

    font-size: 12px;

    font-weight: 400;

    color: #d8eee7;

}


.back-btn {

    border: 1px solid
        rgba(255,255,255,.25);

    border-radius: 9px;

    background:
        rgba(255,255,255,.12);

    color: #fff;

    padding:
        10px 15px;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

}


/* =================================
   MAIN
================================= */

.support-container {

    width: 94%;

    max-width: 1450px;

    margin: 25px auto 40px;

}


/* =================================
   PAGE HEADING
================================= */

.page-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;

}


.eyebrow {

    color: #0b6b4f;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .8px;

    margin-bottom: 5px;

}


.page-heading h1 {

    font-size: 30px;

    color: #172033;

}


.page-heading p {

    margin-top: 6px;

    color: #737b76;

    font-size: 14px;

}


.refresh-btn {

    border: none;

    border-radius: 9px;

    padding:
        11px 17px;

    background: #0b6b4f;

    color: #fff;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

}


/* =================================
   STATS
================================= */

.support-stats {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;

    margin-bottom: 20px;

}


.support-stat {

    background: #fff;

    border:
        1px solid #e1e6e3;

    border-radius: 13px;

    padding: 17px;

    display: flex;

    align-items: center;

    gap: 13px;

    box-shadow:
        0 2px 9px rgba(0,0,0,.05);

}


.support-stat > span {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background: #eaf6f0;

    font-size: 20px;

}


.support-stat small {

    display: block;

    color: #7a827e;

    font-size: 11px;

    margin-bottom: 4px;

}


.support-stat strong {

    display: block;

    color: #172033;

    font-size: 22px;

}


/* =================================
   TICKET LAYOUT
================================= */

.ticket-layout {

    display: grid;

    grid-template-columns:
        430px 1fr;

    gap: 18px;

    align-items: stretch;

}


/* =================================
   PANELS
================================= */

.ticket-list-panel,
.conversation-panel {

    background: #fff;

    border:
        1px solid #e0e5e2;

    border-radius: 15px;

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

    overflow: hidden;

}


.ticket-list-panel {

    min-height: 650px;

}


.conversation-panel {

    min-height: 650px;

}


/* =================================
   PANEL HEADING
================================= */

.panel-heading {

    padding: 18px;

    border-bottom:
        1px solid #edf0ee;

}


.panel-heading h2 {

    font-size: 18px;

    color: #172033;

}


.panel-heading p {

    margin-top: 4px;

    color: #7a827e;

    font-size: 11px;

}


/* =================================
   FILTERS
================================= */

.filters {

    padding: 12px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    border-bottom:
        1px solid #edf0ee;

}


.filters input,
.filters select {

    width: 100%;

    border:
        1px solid #dce3df;

    border-radius: 8px;

    padding: 10px;

    outline: none;

    background: #f9fbfa;

    color: #172033;

    font-size: 11px;

}


.filters input {

    grid-column:
        1 / -1;

}


.filters input:focus,
.filters select:focus {

    border-color:
        #0b6b4f;

    background: #fff;

}


/* =================================
   TICKET LIST
================================= */

.ticket-list {

    max-height: 535px;

    overflow-y: auto;

}


.ticket-item {

    width: 100%;

    border: none;

    border-bottom:
        1px solid #edf0ee;

    background: #fff;

    padding: 15px;

    text-align: left;

    cursor: pointer;

    transition: .18s ease;

}


.ticket-item:hover {

    background: #f6faf8;

}


.ticket-item.active {

    background: #eef8f2;

    border-left:
        4px solid #0b6b4f;

    padding-left: 11px;

}


.ticket-top {

    display: flex;

    justify-content: space-between;

    gap: 10px;

    align-items: flex-start;

}


.ticket-subject {

    color: #172033;

    font-size: 13px;

    font-weight: 900;

    line-height: 1.35;

}


.ticket-number {

    color: #89918d;

    font-size: 9px;

    margin-top: 4px;

}


.ticket-time {

    color: #8a928e;

    font-size: 9px;

    white-space: nowrap;

}


.ticket-preview {

    color: #68716c;

    font-size: 10px;

    line-height: 1.4;

    margin-top: 8px;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}


.ticket-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 9px;

}


.badge {

    display: inline-flex;

    align-items: center;

    padding:
        4px 7px;

    border-radius: 20px;

    font-size: 8px;

    font-weight: 900;

}


.badge-user {

    background: #eef2f7;

    color: #526071;

}


.badge-open {

    background: #e6f7ed;

    color: #08743d;

}


.badge-pending {

    background: #fff5d8;

    color: #8a6700;

}


.badge-resolved {

    background: #e8f0ff;

    color: #315a9c;

}


.badge-closed {

    background: #f0f1f2;

    color: #687078;

}


.badge-urgent {

    background: #ffe7e7;

    color: #b42318;

}


/* =================================
   EMPTY / LOADING
================================= */

.loading-state,
.empty-list {

    padding: 40px 20px;

    text-align: center;

    color: #7b847f;

    font-size: 12px;

}


.error-state {

    padding: 25px;

    text-align: center;

    color: #b42318;

    font-size: 12px;

}


/* =================================
   CONVERSATION
================================= */

.conversation-wrapper {

    height: 650px;

    display: flex;

    flex-direction: column;

}


.conversation-header {

    padding: 17px 19px;

    border-bottom:
        1px solid #e7ece9;

    background: #fff;

}


.conversation-header-top {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 15px;

}


.conversation-title {

    color: #172033;

    font-size: 18px;

    font-weight: 900;

}


.conversation-ticket-number {

    color: #87908b;

    font-size: 10px;

    margin-top: 5px;

}


.conversation-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}


.conversation-info {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 12px;

    padding-top: 11px;

    border-top:
        1px solid #f0f2f1;

}


.info-chip {

    color: #65706a;

    font-size: 10px;

}


.info-chip strong {

    color: #26322c;

}


/* =================================
   STATUS CONTROLS
================================= */

.status-controls {

    display: flex;

    gap: 7px;

    margin-top: 12px;

}


.status-controls select {

    flex: 1;

    border:
        1px solid #dce3df;

    border-radius: 8px;

    padding: 9px;

    font-size: 10px;

    outline: none;

}


.status-controls button {

    border: none;

    border-radius: 8px;

    padding:
        9px 12px;

    background: #eef7f1;

    color: #0b6b4f;

    font-size: 10px;

    font-weight: 900;

    cursor: pointer;

}


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

.messages-area {

    flex: 1;

    overflow-y: auto;

    padding: 20px;

    background:
        #f8faf9;

}


.message-row {

    display: flex;

    margin-bottom: 14px;

}


.message-row.customer {

    justify-content: flex-start;

}


.message-row.admin {

    justify-content: flex-end;

}


.message-bubble {

    max-width: 72%;

    padding:
        11px 13px;

    border-radius: 13px;

    box-shadow:
        0 2px 5px rgba(0,0,0,.04);

}


.message-row.customer
.message-bubble {

    background: #fff;

    border:
        1px solid #e0e6e3;

    border-top-left-radius: 4px;

}


.message-row.admin
.message-bubble {

    background: #0b7a3b;

    color: #fff;

    border-top-right-radius: 4px;

}


.message-sender {

    font-size: 9px;

    font-weight: 900;

    margin-bottom: 5px;

}


.message-text {

    white-space: pre-wrap;

    word-break: break-word;

    font-size: 12px;

    line-height: 1.45;

}


.message-time {

    margin-top: 6px;

    font-size: 8px;

    opacity: .65;

}


.messages-empty {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #7d8681;

    font-size: 11px;

}


/* =================================
   REPLY
================================= */

.reply-area {

    padding: 13px;

    border-top:
        1px solid #e3e8e5;

    background: #fff;

}


.reply-form {

    display: flex;

    gap: 9px;

    align-items: flex-end;

}


.reply-form textarea {

    flex: 1;

    min-height: 47px;

    max-height: 120px;

    resize: vertical;

    border:
        1px solid #dce3df;

    border-radius: 10px;

    padding: 11px;

    outline: none;

    font-size: 12px;

}


.reply-form textarea:focus {

    border-color:
        #0b6b4f;

}


.reply-send-btn {

    width: 50px;

    height: 47px;

    border: none;

    border-radius: 10px;

    background: #0b7a3b;

    color: #fff;

    font-size: 19px;

    cursor: pointer;

}


.reply-send-btn:disabled {

    opacity: .55;

    cursor: not-allowed;

}


.reply-note {

    color: #8a928e;

    font-size: 8px;

    margin-top: 6px;

}


/* =================================
   EMPTY CONVERSATION
================================= */

.conversation-empty {

    min-height: 650px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 30px;

}


.empty-icon {

    width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 19px;

    background: #eef7f1;

    font-size: 30px;

    margin-bottom: 13px;

}


.conversation-empty h2 {

    color: #26312b;

    font-size: 19px;

}


.conversation-empty p {

    max-width: 330px;

    margin-top: 7px;

    color: #7b847f;

    font-size: 11px;

    line-height: 1.5;

}


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

@media (max-width: 1000px) {

    .ticket-layout {

        grid-template-columns:
            350px 1fr;

    }


    .support-stats {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 760px) {

    .support-header {

        padding: 14px 15px;

    }


    .brand {

        font-size: 20px;

    }


    .support-container {

        width: 94%;

        margin-top: 18px;

    }


    .page-heading {

        flex-direction: column;

        align-items: flex-start;

    }


    .refresh-btn {

        width: 100%;

    }


    .ticket-layout {

        grid-template-columns: 1fr;

    }


    .ticket-list-panel {

        min-height: auto;

    }


    .ticket-list {

        max-height: 430px;

    }


    .conversation-panel {

        min-height: 600px;

    }


    .conversation-wrapper {

        height: 650px;

    }


    .message-bubble {

        max-width: 86%;

    }

}


@media (max-width: 500px) {

    .support-stats {

        grid-template-columns: 1fr 1fr;

        gap: 9px;

    }


    .support-stat {

        padding: 12px;

    }


    .support-stat > span {

        width: 37px;

        height: 37px;

        font-size: 17px;

    }


    .support-stat strong {

        font-size: 19px;

    }


    .filters {

        grid-template-columns: 1fr;

    }


    .filters input {

        grid-column: auto;

    }


    .conversation-header-top {

        flex-direction: column;

    }


    .status-controls {

        flex-direction: column;

    }

}