/* OnCallCX Style Theme for ASM VOIP Enterprise PBX (Tiếng Việt + Modal Popups + Action Dropdown) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
    --header-bg: #8bbce5;
    --header-text: #0f2232;
    --sidebar-bg: #132737;
    --sidebar-hover: #1c364c;
    --sidebar-active: #22435e;
    --sidebar-text: #d0e1f0;
    --card-header-bg: #0f2b3c;
    --card-header-text: #ffffff;
    --body-bg: #f2f5f8;
    --card-bg: #ffffff;
    --border-color: #dce3e9;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --accent-green: #22c55e;
    --accent-red: #ef4444;
    --accent-blue: #2563eb;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 300; }

body {
    background-color: var(--body-bg);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* TOP HEADER BAR (OnCallCX Soft Blue) */
.top-header {
    height: 48px;
    background: var(--header-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    color: var(--header-text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: relative;
    z-index: 100;
}
.header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 500;
    color: #0d2131;
}
.header-brand span { font-weight: 700; color: #000; }

/* LAYOUT CONTAINER & APP-LAYOUT */
.app-container, .app-layout {
    display: flex;
    flex: 1;
    min-height: calc(100vh - 48px);
}

/* LEFT SIDEBAR (OnCallCX Dark Navy) */
.left-sidebar {
    width: 240px;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    color: var(--sidebar-text);
    flex-shrink: 0;
}
.sidebar-tenant-selector {
    padding: 14px 16px;
    background: #0c1a26;
    border-bottom: 1px solid #1c364c;
    font-size: 13px;
    font-weight: 400;
    color: #90b3d1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tenant-name { font-weight: 500; color: #ffffff; }

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    overflow-y: auto;
}
.sidebar-section-title, .nav-section-title {
    font-size: 10px;
    font-weight: 700;
    color: #648dae;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 20px 4px 20px;
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    color: #b0cadf;
    text-decoration: none;
    font-size: 13px;
    font-weight: 300;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}
.sidebar-link:hover {
    background: var(--sidebar-hover);
    color: #ffffff;
}
.sidebar-link.active {
    background: var(--sidebar-active);
    color: #ffffff;
    font-weight: 400;
    border-left-color: #5bb3f0;
}

/* MAIN CONTENT AREA */
.main-content {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
    background: var(--body-bg);
}
/* UNIFORM PAGE HEADER TITLE SYSTEM FOR ALL PAGES */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}
.page-header h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    display: block !important;
}
.page-header .page-sub, .page-header .page-sub-text {
    font-size: 12px !important;
    color: #64748b !important;
    margin-top: 4px !important;
    font-weight: 400 !important;
    display: block !important;
    margin-bottom: 0 !important;
}
.page-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* CARDS & CONTAINERS */
.cx-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    overflow: hidden;
}
.cx-card-header {
    background: var(--card-header-bg);
    color: var(--card-header-text);
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cx-card-body {
    padding: 18px;
}

/* KPI GRID & CARDS */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.kpi-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.kpi-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.kpi-icon-blue { background: #eff6ff; color: #2563eb; }
.kpi-icon-green { background: #f0fdf4; color: #16a34a; }
.kpi-icon-orange { background: #fff7ed; color: #ea580c; }
.kpi-icon-purple { background: #faf5ff; color: #9333ea; }

.kpi-content { display: flex; flex-direction: column; }
.kpi-title { font-size: 11px; color: #6b7280; font-weight: 400; text-transform: uppercase; }
.kpi-value { font-size: 20px; font-weight: 500; color: #111827; margin: 2px 0; }
.kpi-sub { font-size: 11px; color: #9ca3af; font-weight: 300; }

/* 2-COLUMN GRID */
.grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

/* BUTTONS & BADGES */
.btn-cx {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    background: #4b5563;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}
.btn-cx:hover { opacity: 0.9; }
.btn-cx-green { background: #16a34a; }
.btn-cx-blue { background: #0284c7; }
.btn-cx-red, .btn-cx-danger { background: #ef4444; }
.btn-cx-secondary { background: #6b7280; }

.badge-cx {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 400;
}
.badge-open { background: #dbeafe; color: #1d4ed8; }
.badge-progress { background: #fef3c7; color: #b45309; }
.badge-closed { background: #dcfce7; color: #15803d; }
.badge-answered { background: #dcfce7; color: #15803d; }
.badge-missed { background: #fee2e2; color: #b91c1c; }
.badge-busy { background: #fef3c7; color: #b45309; }

/* FORMS & INPUTS */
.form-input-cx, .form-select-cx, .form-control-cx {
    width: 100%;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #1f2937;
    font-size: 13px;
    font-weight: 300;
    outline: none;
}
.form-input-cx:focus, .form-select-cx:focus, .form-control-cx:focus {
    border-color: #2563eb;
}

/* TABLES */
.cx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.cx-table th {
    background: #f8fafc;
    color: #475569;
    text-align: left;
    padding: 10px 14px;
    font-weight: 500;
    border-bottom: 1px solid #e2e8f0;
}
.cx-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    font-weight: 300;
}

.action-select-cx {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.15s;
}
.action-select-cx:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }

/* EXTENSION ICONS GRID */
.ext-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}
.ext-icon-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}
.ext-phone-icon {
    font-size: 20px;
    color: #16a34a;
    margin-bottom: 6px;
}
.ext-phone-icon.offline { color: #94a3b8; }
.ext-num { font-weight: 500; color: #1e293b; font-size: 14px; }
.ext-name { font-size: 11px; color: #64748b; margin-top: 2px; font-weight: 300; }

/* INFO LIST STYLING FOR REAL-TIME WIDGET */
.info-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}
.info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.info-label {
    color: #475569;
    font-weight: 300;
}
.info-val {
    font-weight: 500;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 6px;
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.dot-green {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}
.dot-red {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}

/* MODALS & OVERLAYS */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.modal-box {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2);
    overflow: hidden;
}
.modal-header {
    background: #0f2b3c;
    color: #ffffff;
    padding: 12px 18px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-close { cursor: pointer; color: #94a3b8; font-size: 18px; }
.modal-body { padding: 18px; }

/* RESPONSIVE GRID UTILITIES */
.grid-2col-responsive {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.grid-3col-responsive {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.grid-main-sidebar {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}
.grid-2col-modal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.grid-3col-modal {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
.grid-urls-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
}

/* MOBILE RESPONSIVE MEDIA QUERIES */
@media (min-width: 769px) {
    .mobile-menu-toggle-btn {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Tự động chuyển đổi toàn bộ các thẻ div có thuộc tính grid inline thành 1 cột trên mobile */
    div[style*="display: grid"],
    div[style*="display:grid"],
    .kpi-grid,
    .grid-2col-responsive,
    .grid-3col-responsive,
    .grid-main-sidebar,
    .grid-2col-modal,
    .grid-3col-modal,
    .grid-urls-list {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .kpi-card {
        padding: 12px !important;
    }

    /* Tự động cho phép cuộn ngang bảng dữ liệu trên mobile */
    .table-responsive,
    .table-container,
    .data-table-wrapper {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 12px !important;
    }

    .left-sidebar {
        position: fixed !important;
        top: 48px !important;
        bottom: 0 !important;
        height: auto !important;
        left: -285px !important;
        width: 270px !important;
        min-width: 270px !important;
        z-index: 99999 !important;
        background: var(--sidebar-bg) !important;
        transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 6px 0 20px rgba(0,0,0,0.3) !important;
        overflow: hidden !important;
        border-right: 1px solid var(--border-color) !important;
        display: block !important;
    }

    .left-sidebar .sidebar-tenant-selector {
        height: 50px !important;
        box-sizing: border-box !important;
    }

    .left-sidebar .sidebar-nav {
        display: block !important;
        height: calc(100% - 50px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding-bottom: 60px !important;
    }

    .left-sidebar.mobile-show {
        left: 0 !important;
    }

    .mobile-menu-toggle-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        background: rgba(255,255,255,0.25);
        color: #0f2232;
        border-radius: 6px;
        cursor: pointer;
        font-size: 16px;
        margin-right: 8px;
        transition: background 0.15s;
    }
    .mobile-menu-toggle-btn:hover {
        background: rgba(255,255,255,0.4);
    }

    .main-content {
        padding: 12px !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .top-header {
        height: 48px !important;
        padding: 0 12px !important;
        flex-wrap: nowrap !important;
    }

    .header-brand span {
        font-size: 14px !important;
    }

    .header-right-tools {
        gap: 8px !important;
    }

    .grid-4-cols, .grid-3-cols, .grid-2-cols {
        grid-template-columns: 1fr !important;
    }

    /* Ẩn chữ trong các nút/thẻ có class .icon-only-mobile trên di động, chỉ giữ lại icon */
    .icon-only-mobile {
        font-size: 0 !important;
        padding: 8px 12px !important;
        justify-content: center !important;
        min-width: 38px !important;
    }
    .icon-only-mobile i,
    .icon-only-mobile span.spinner-preview {
        font-size: 14px !important;
        margin-right: 0 !important;
    }
    
    /* Ẩn các dòng mô tả phụ dài dòng và các cột được chọn trên di động */
    .page-sub,
    .page-sub-text,
    small,
    .cx-card-header span a,
    .zalo-badges,
    .hide-mobile,
    .kpi-icon-box,
    .kpi-sub {
        display: none !important;
    }
    
    /* Thiết lập lưới KPI dạng 2x2 cực gọn, phẳng trên mobile */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    .kpi-card {
        padding: 10px !important;
        gap: 4px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        border-radius: 6px !important;
        text-align: center !important;
        align-items: center !important;
        flex-direction: column !important;
    }
    .kpi-value {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        margin: 2px 0 0 0 !important;
    }
    .kpi-title {
        font-size: 8.5px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        text-align: center !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }

    /* Thu nhỏ tiêu đề trang và giảm khoảng cách đệm trên mobile */
    .page-header h2 {
        font-size: 15px !important;
    }
    .page-header {
        padding-bottom: 8px !important;
        margin-bottom: 12px !important;
    }

    /* Thu gọn card padding trên di động */
    .cx-card-header {
        padding: 8px 12px !important;
        font-size: 11.5px !important;
    }
    .cx-card-body {
        padding: 10px !important;
    }

    /* Biến đổi bảng dữ liệu cồng kềnh thành danh sách cột dọc phẳng cực kỳ thoáng */
    .cx-table thead {
        display: none !important;
    }
    .cx-table tr {
        display: block !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 10px 8px !important;
    }
    .cx-table tr:last-child {
        border-bottom: none !important;
    }
    .cx-table td {
        display: inline-block !important;
        padding: 0 4px !important;
        border: none !important;
    }
    /* Mã Ticket hiển thị nổi bật */
    .cx-table td:nth-child(1) {
        font-weight: 700 !important;
        font-size: 11px !important;
    }
    /* Tên Ticket chuyển thành hàng riêng rộng hơn */
    .cx-table td:nth-child(2) {
        display: block !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #1e293b !important;
        margin: 4px 0 !important;
        padding: 0 !important;
    }
    /* Trạng thái hiển thị inline kế bên mã ticket */
    .cx-table td:nth-child(4) {
        float: right !important;
        margin-top: -2px !important;
    }

    /* Thu gọn User Dropdown Button thành icon hình tròn trên điện thoại */
    .user-dropdown-btn span,
    .user-dropdown-btn .fa-chevron-down {
        display: none !important;
    }
    .user-dropdown-btn {
        padding: 0 !important;
        border-radius: 50% !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        justify-content: center !important;
        align-items: center !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    .user-dropdown-btn i {
        font-size: 15px !important;
        margin-right: 0 !important;
        color: #ffffff !important;
    }

    /* Rút ngắn nhãn WebRTC Status Pill trên điện thoại (chỉ giữ lại trạng thái + máy nhánh) */
    .header-pill-badge span:nth-of-type(2),
    .header-pill-badge span:nth-of-type(3),
    .header-pill-badge span:nth-of-type(4),
    .header-pill-badge span:nth-of-type(5) {
        display: none !important;
    }
    .header-pill-badge {
        padding: 4px 8px !important;
        gap: 4px !important;
        font-size: 11px !important;
    }

    /* Khóa cứng hoàn toàn viewport của trình duyệt khi đang ở giao diện Zalo Chat để triệt tiêu hiện tượng trượt trang */
    html:has(.zalo-chat-container),
    body:has(.zalo-chat-container) {
        height: 100% !important;
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
    body:has(.zalo-chat-container) .app-layout {
        height: calc(100% - 48px) !important;
        overflow: hidden !important;
    }
    body:has(.zalo-chat-container) .main-content {
        height: 100% !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    /* Thiết lập bộ lọc tìm kiếm dàn đều, thẳng hàng trên di động */
    .filter-form-responsive {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .filter-form-responsive > div {
        width: 100% !important;
    }
    .filter-form-responsive .form-control-cx {
        width: 100% !important;
    }
    .filter-form-responsive button {
        width: 100% !important;
        justify-content: center !important;
        height: 38px !important;
    }
}