/* =========================================================
   DASHBOARD UI REFRESH - SAFE CSS ONLY
   ========================================================= */

/* tło głównej części */
#main > .content,
.page-content {
    background: #f5f7fb;
}

/* podstawowa karta dashleta */
.dashlet,
.panel.dashlet,
.dashboard .panel,
.grid-stack-item .panel {
    border-radius: 16px;
    border: 1px solid rgba(11, 31, 59, 0.08);
    box-shadow: 0 8px 24px rgba(11, 31, 59, 0.08);
    overflow: hidden;
    background: #ffffff;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* hover */
.dashlet:hover,
.panel.dashlet:hover,
.dashboard .panel:hover,
.grid-stack-item .panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(11, 31, 59, 0.12);
    border-color: rgba(214, 40, 40, 0.18);
}

/* header dashleta */
.dashlet .panel-heading,
.panel.dashlet > .panel-heading,
.grid-stack-item .panel > .panel-heading,
.dashboard .panel > .panel-heading {
    position: relative;
    background: linear-gradient(135deg, #0b1f3b 0%, #18365f 100%);
    color: #ffffff;
    border-bottom: 0;
    padding: 10px 16px;
    min-height: 46px;
}

/* NIE wymuszamy flex - Espo samo układa title + menu poprawnie */

/* tytuł */
.dashlet .panel-heading h4,
.dashlet .panel-title,
.panel.dashlet .panel-title,
.dashboard .panel .panel-title {
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: .1px;
    font-size: 14px;
    line-height: 1.25;
    margin: 0;
    padding-right: 36px; /* miejsce na menu po prawej */
}

/* trzymamy akcje po prawej tak jak chce Espo */
.dashlet .panel-heading .pull-right,
.panel.dashlet > .panel-heading .pull-right,
.dashboard .panel > .panel-heading .pull-right,
.dashlet .panel-heading .header-buttons,
.panel.dashlet > .panel-heading .header-buttons,
.dashboard .panel > .panel-heading .header-buttons {
    float: right !important;
}

/* linki i ikony w headerze */
.dashlet .panel-heading a,
.panel.dashlet > .panel-heading a,
.dashboard .panel > .panel-heading a,
.dashlet .panel-heading .action,
.dashboard .panel-heading .action,
.dashlet .panel-heading .fas,
.dashlet .panel-heading .fa {
    color: rgba(255,255,255,.88) !important;
}

.dashlet .panel-heading a:hover,
.dashboard .panel-heading a:hover {
    color: #ffffff !important;
    opacity: 1;
}

/* 3 kropki */
.dashlet .panel-heading .dropdown-toggle,
.panel.dashlet > .panel-heading .dropdown-toggle,
.dashboard .panel > .panel-heading .dropdown-toggle {
    color: rgba(255,255,255,.78) !important;
}

.dashlet .panel-heading .dropdown-toggle:hover,
.panel.dashlet > .panel-heading .dropdown-toggle:hover,
.dashboard .panel > .panel-heading .dropdown-toggle:hover {
    color: #ffffff !important;
}

/* dropdown ma otwierać się od prawej */
.dashlet .panel-heading .dropdown-menu,
.panel.dashlet > .panel-heading .dropdown-menu,
.dashboard .panel > .panel-heading .dropdown-menu {
    left: auto !important;
    right: 0 !important;
    background: #ffffff;
    border: 1px solid rgba(11, 31, 59, 0.10);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(11, 31, 59, 0.14);
    padding: 6px 0;
    min-width: 180px;
}

.dashlet .panel-heading .dropdown-menu > li > a,
.panel.dashlet > .panel-heading .dropdown-menu > li > a,
.dashboard .panel > .panel-heading .dropdown-menu > li > a,
.dashlet .panel-heading .dropdown-menu a,
.panel.dashlet > .panel-heading .dropdown-menu a,
.dashboard .panel > .panel-heading .dropdown-menu a {
    color: #24364d !important;
    background: #ffffff !important;
    padding: 10px 14px;
}

.dashlet .panel-heading .dropdown-menu > li > a:hover,
.panel.dashlet > .panel-heading .dropdown-menu > li > a:hover,
.dashboard .panel > .panel-heading .dropdown-menu > li > a:hover,
.dashlet .panel-heading .dropdown-menu a:hover,
.panel.dashlet > .panel-heading .dropdown-menu a:hover,
.dashboard .panel > .panel-heading .dropdown-menu a:hover {
    color: #0b1f3b !important;
    background: #f5f8fc !important;
}

/* body */
.dashlet .panel-body,
.panel.dashlet > .panel-body,
.dashboard .panel > .panel-body,
.grid-stack-item .panel > .panel-body {
    background: #ffffff;
    padding: 16px 18px;
}

/* tabelki */
.dashlet table,
.dashboard .panel table {
    background: #ffffff;
    border-collapse: separate;
    border-spacing: 0;
}

.dashlet table thead th,
.dashboard .panel table thead th {
    background: #f4f7fb;
    color: #29415f;
    font-weight: 700;
    border-bottom: 1px solid #e5ebf3;
}

.dashlet table tbody tr:hover,
.dashboard .panel table tbody tr:hover {
    background: #f9fbff;
}

/* listy */
.dashlet .list-group-item,
.dashboard .panel .list-group-item {
    border-left: 0;
    border-right: 0;
    border-color: #edf2f7;
    padding-top: 12px;
    padding-bottom: 12px;
}

.dashlet .list-group-item:hover,
.dashboard .panel .list-group-item:hover {
    background: #f8fbff;
}

/* badge */
.dashlet .badge,
.dashboard .panel .badge {
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 700;
}

/* przyciski */
.dashlet .btn-default,
.dashboard .panel .btn-default {
    border-radius: 10px;
    border-color: #d9e2ec;
    background: #ffffff;
}

.dashlet .btn-primary,
.dashboard .panel .btn-primary {
    border-radius: 10px;
}

/* inputy */
.dashlet .form-control,
.dashboard .panel .form-control {
    border-radius: 10px;
    border-color: #d7e0ea;
    box-shadow: none;
}

.dashlet .form-control:focus,
.dashboard .panel .form-control:focus {
    border-color: #d62828;
    box-shadow: 0 0 0 3px rgba(214, 40, 40, 0.10);
}

/* resize handle */
.grid-stack-item .ui-resizable-handle {
    opacity: .45;
}

/* stream */
.dashlet .stream-item,
.dashboard .stream-item {
    border-bottom: 1px solid #eef2f7;
    padding: 10px 0;
}

/* wykresy */
.dashlet canvas,
.dashboard canvas,
.dashlet svg,
.dashboard svg {
    border-radius: 10px;
}

/* mobile */
@media (max-width: 767px) {
    .dashlet .panel-heading,
    .panel.dashlet > .panel-heading,
    .dashboard .panel > .panel-heading {
        padding: 8px 12px;
        min-height: 42px;
    }

    .dashlet .panel-body,
    .panel.dashlet > .panel-body,
    .dashboard .panel > .panel-body {
        padding: 14px;
    }

    .dashlet .panel-heading h4,
    .dashlet .panel-title,
    .panel.dashlet .panel-title,
    .dashboard .panel .panel-title {
        font-size: 13px;
        padding-right: 30px;
    }

    .dashlet .panel-heading .dropdown-menu,
    .panel.dashlet > .panel-heading .dropdown-menu,
    .dashboard .panel > .panel-heading .dropdown-menu {
        right: 0 !important;
        left: auto !important;
    }
}