/* CustomCDR Module Styles */

#customcdr-wrapper {
    padding: 10px 0;
}

/* Filter Panel */
.cdr-filters {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}

.cdr-filters .form-group {
    margin-bottom: 10px;
}

.cdr-filters label {
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 3px;
}

.cdr-filters .form-control {
    font-size: 13px;
}

.date-presets {
    margin-bottom: 10px;
}

.date-presets .btn {
    margin-right: 4px;
    margin-bottom: 4px;
}

/* Stats Bar */
.cdr-stats {
    margin-bottom: 20px;
}

.cdr-stats .panel {
    text-align: center;
    margin-bottom: 10px;
}

.cdr-stats .panel-body {
    padding: 10px;
}

.cdr-stats .stat-value {
    font-size: 24px;
    font-weight: 700;
    display: block;
}

.cdr-stats .stat-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #777;
}

/* Charts */
.cdr-charts {
    margin-bottom: 20px;
}

.chart-container {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
}

.chart-container h4 {
    margin-top: 0;
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

.chart-container canvas {
    max-height: 300px;
}

/* Table */
.cdr-table-wrapper {
    margin-bottom: 20px;
}

#cdr-table {
    font-size: 13px;
}

#cdr-table th {
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

#cdr-table th:hover {
    background: #e8e8e8;
}

#cdr-table th .sort-icon {
    margin-left: 4px;
    color: #aaa;
}

#cdr-table th .sort-icon.active {
    color: #333;
}

#cdr-table td {
    vertical-align: middle;
}

/* Disposition labels */
.disp-answered { color: #fff; background: #5cb85c; }
.disp-noanswer { color: #fff; background: #f0ad4e; }
.disp-busy { color: #fff; background: #d9534f; }
.disp-failed { color: #fff; background: #777; }

/* Direction labels */
.dir-inbound { color: #fff; background: #5bc0de; }
.dir-outbound { color: #fff; background: #337ab7; }
.dir-internal { color: #333; background: #e0e0e0; }
.dir-other { color: #333; background: #f5f5f5; }

/* Toolbar */
.cdr-toolbar {
    margin-bottom: 15px;
}

.cdr-toolbar .btn {
    margin-right: 5px;
}

/* Loading overlay */
.cdr-loading {
    position: relative;
    min-height: 100px;
}

.cdr-loading::after {
    content: 'Loading...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #999;
}

/* Pagination */
.cdr-pagination {
    text-align: center;
}

.cdr-pagination .pagination {
    margin: 10px 0;
}

.cdr-pagination .pagination > li > a {
    min-width: 38px;
    text-align: center;
    margin: 0 2px;
    border-radius: 3px;
}

.cdr-pagination .pagination > li.active > a {
    font-weight: 700;
}

.cdr-pagination .pagination > li.disabled > .pag-ellipsis {
    border: none;
    background: transparent;
    padding: 6px 8px;
    letter-spacing: 2px;
    cursor: default;
    display: inline-block;
}

/* Page jump */
.page-jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 13px;
    color: #555;
}

.page-jump input {
    width: 65px;
    text-align: center;
}

.page-jump .btn {
    padding: 4px 10px;
}

/* Recording play button */
.btn-play-recording {
    padding: 1px 6px;
    font-size: 12px;
}

/* Print Styles */
@media print {
    /* Hide non-printable elements */
    .cdr-filters,
    .cdr-toolbar,
    .cdr-pagination,
    .btn-play-recording,
    #fpbx-nav-top,
    #page_header,
    .nav-tabs,
    .fpbx-container > .row > .col-sm-3,
    footer {
        display: none !important;
    }

    .fpbx-container > .row > .col-sm-9 {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cdr-stats .panel {
        border: 1px solid #ddd !important;
        page-break-inside: avoid;
    }

    .chart-container {
        page-break-inside: avoid;
        border: 1px solid #ddd !important;
    }

    #cdr-table {
        font-size: 11px;
    }

    .chart-container canvas {
        max-height: 250px;
    }

    a[href]:after {
        content: none !important;
    }
}
