/* ================================================================
   Dashboard – responsive layout
   KEY RULE: NO blanket float:none rules anywhere.
   Badge rows (.w-row) rely on float:left – those stay intact.
   Layout is controlled via flexbox on .db-header container.
   ================================================================ */

.dashboard-page { overflow-x: hidden; }

/* ---- Colour helpers ---- */
.dashboard-page .bg-color-bluegray  { border-width:0; background-color:#20728ca6; color:#fff; border-radius:5px; box-shadow:8px 6px 20px #6ca7c5ad; }
.dashboard-page .bg-color-greengray { background-color:#b4c6b0; color:#fff; }
.dashboard-page .border-color-bluegray   { border-color:#5f92a2; }
.dashboard-page .border-color-greengray  { border-color:#b4c6b0; }
.dashboard-page .border-color-transp     { border-color:transparent; }
.dashboard-page .bg-color-transp         { background-color:transparent; }

/* ---- Badge legend colours ---- */
.dashboard-page .w-row-badge           { color:#fff; font-weight:bold; }
.dashboard-page .w-row-bagge-gravada   { background-color:#a3d8e8; }
.dashboard-page .w-row-bagge-submetida { background-color:#f3be8b; }
.dashboard-page .w-row-bagge-aprovada  { background-color:#a9c7a9; }
.dashboard-page .w-row-bagge-rejeitada { background-color:#db8e8c; }

/* ---- Badge row layout (floats are intentional here) ---- */
.dashboard-page .w-row-info  { padding:8px 5px 15px 8px; }
.dashboard-page .w-row       { float:left; width:140px; }
.dashboard-page .w-row-col-1 { float:left; width:40px; }
.dashboard-page .w-row-col-2 { float:left; font-size:10pt; font-weight:500; padding-top:8px; }

/* Remove fixed height:30px that was clipping wrapped content on narrow screens */
.dashboard-page .holyee-number-square-body {
    float:left; width:100%; height:auto; min-height:30px;
    font-size:14pt; font-weight:500; overflow:hidden;
}
.dashboard-page .holyee-number-square        { float:left; width:120px; margin-left:5px; text-align:center; font-weight:bold; }
.dashboard-page .holyee-number-square-header { float:left; width:100%; height:25px; padding-top:3px; font-size:10pt; }

/* Scroll panels */
.dashboard-page .divScroll       { height:300px; overflow:hidden; }
.dashboard-page .divScroll:hover { overflow:auto; }

/* Widget card variants */
.dashboard-page .widget2 { position:relative; background:#fff; color:#5b5b5b; margin-bottom:20px; border-radius:2px; }
.dashboard-page .widget2-header,
.dashboard-page .widget2-content { display:block; width:100%; clear:both; }
.dashboard-page .widget2-header { border-radius:2px 2px 0 0; background:rgba(0,0,0,.02); border-bottom:1px solid rgba(0,0,0,.1); }
.dashboard-page .widget.green-1       { background-color:#5f99b7ad; color:#fff; border-radius:5px; box-shadow:8px 6px 20px #6ca7c5ad; cursor:pointer; }
.dashboard-page .widget.green-1:hover { background:linear-gradient(-45deg,#5f99b7ad,#5fb1b7b3); }
.dashboard-page .widget-content.padding { padding:10px; }
.dashboard-page .widget .widget-icon { font-size:30px; position:absolute; right:12%; top:10px; color:#fff; }
.dashboard-page .widget .text-box .maindata   { font-size:14px; color:#fff; font-family:"Open Sans",sans-serif; }
.dashboard-page .widget .text-box .maindata b { font-size:12px; }
.dashboard-page .widget .widget-footer          { background:rgba(0,0,0,.1); padding:4px 15px; font-size:12px; color:rgba(255,255,255,.9); }
.dashboard-page .widget .widget-footer .rel-change { font-size:14px; color:#fff; margin-right:7px; }

/* ================================================================
   Header section (db-header / db-profile / db-counter)

   display:flex on .db-header means child float:left is ignored by
   the browser automatically – no float:none !important needed.
   ================================================================ */

/* Mobile-first: column stack */
.db-header {
    display:flex;
    flex-direction:column;
    gap:12px;
    padding-bottom:12px;
    overflow:hidden;
}

/* Profile photo block - hidden on mobile */
.db-profile {
    width:120px;
    flex-shrink:0;
    display:none;
}

/* Counter block – reset only the inline margin-left */
.db-counter {
    margin-left:0 !important;
    min-width:0;
}

/* Progress bar wrapper: full width on mobile */
.db-counter .db-progress-wrap,
.db-progress-wrap {
    float:none !important;
    width:100% !important;
    margin-left:0 !important;
    box-sizing:border-box;
}

/* Hide divDayCounter + divTimeTrack on mobile + fallback */
@media (max-width:767px) {
    #divDayCounter,
    #divTimeTrack  { display:none !important; }
    #divDayCounter [style*="width:350px"] {
        width:100% !important;
        float:none !important;
        margin-left:0 !important;
    }
}

/* Status widgets (Ausencias / Teletrabalho legend cards)
   Use inline-block so they sit side-by-side without float */
#divDayCounter  .widget,
#divDayCounter2 .widget {
    display:inline-block !important;
    float:none !important;
    vertical-align:top;
    margin-bottom:8px;
    margin-right:8px;
}

/* ================================================================
   Action buttons – col-xs-12 col-sm-6 col-md-3 with inline 195px
   ================================================================ */

/* Mobile < 576px: full-width single column */
@media (max-width:575px) {
    .dashboard-page .row .col-xs-6.col-sm-3.col-md-2 {
        float:none !important;
        width:100% !important;
        height:auto !important;
        margin-bottom:10px;
        padding-left:4px;
        padding-right:4px;
    }
    .dashboard-page .row .col-xs-6.col-sm-3.col-md-2 .btn-lg {
        min-height:60px;
        font-size:14px !important;
        white-space:normal;
        line-height:1.4;
    }
}

/* Tablet 576–767px: 2-column grid */
@media (min-width:576px) and (max-width:767px) {
    .dashboard-page .row .col-xs-6.col-sm-3.col-md-2 {
        float:left !important;
        width:50% !important;
        height:auto !important;
        min-height:90px;
        margin-bottom:8px;
        box-sizing:border-box;
    }
    .dashboard-page .row .col-xs-6.col-sm-3.col-md-2 .btn-lg {
        font-size:13px !important;
        white-space:normal;
        line-height:1.4;
        height:100%;
        min-height:80px;
    }
}

/* Desktop >= 768px: action button grid – proper spacing */
@media (min-width:768px) {
    .dashboard-page .row .col-xs-6.col-sm-3.col-md-2 {
        margin-bottom:12px;
        box-sizing:border-box;
        padding-left:8px;
        padding-right:8px;
    }
    .dashboard-page .row .col-xs-6.col-sm-3.col-md-2 .btn-lg {
        min-height:80px;
        white-space:normal;
        line-height:1.5;
        height:100%;
    }
}

/* ================================================================
   Modals
   ================================================================ */

@media (max-width:767px) {
    .dashboard-wide-modal {
        min-width:0 !important;
        width:95% !important;
        margin:10px auto !important;
    }
    .dashboard-page .modal-body [style*="width:330px"],
    .dashboard-page .modal-body [style*="width:300px"] {
        width:100% !important;
        box-sizing:border-box;
    }
    .dashboard-page .modal-body select { max-width:100%; }
    .dashboard-page #divPub1    { margin-left:0 !important; }
    .dashboard-page #divChatUsers {
        position:static !important;
        top:auto !important;
        right:auto !important;
    }
}

@media (min-width:768px) and (max-width:1024px) {
    .dashboard-wide-modal { min-width:0 !important; width:90%; margin:30px auto; }
}

/* ================================================================
   Desktop >= 768px: restore horizontal layout
   ================================================================ */

@media (min-width:768px) {
    /* Switch header back to row */
    .db-header {
        flex-direction:row;
        align-items:flex-start;
        min-height:180px;
    }
    .db-profile { display:block; width:130px; }
    .db-counter {
        margin-left:20px !important;
        flex:1;
    }
    .db-counter .db-progress-wrap,
    .db-progress-wrap {
        float:right !important;
        width:350px !important;
        margin-left:5px !important;
    }
    #divDayCounter,
    #divTimeTrack  { display:block !important; }
    /* Restore float on legend widgets for desktop side-by-side */
    #divDayCounter  .widget,
    #divDayCounter2 .widget {
        display:block !important;
        float:left !important;
    }
    .dashboard-wide-modal {
        min-width:700px !important;
        width:auto;
    }
}

/* ================================================================
   Progress bar label overflow
   Inline style has float:right/float:left + padding-right:96px
   which overflows on screens narrower than ~420px.
   ================================================================ */

@media (max-width:480px) {
    .db-progress-wrap [style*="float:right"],
    .db-progress-wrap [style*="float: right"] {
        float:none !important;
        margin-top:0 !important;
        width:100%;
        text-align:left;
    }
    .db-progress-wrap [style*="padding-right:96px"],
    .db-progress-wrap [style*="padding-right: 96px"] {
        padding-right:0 !important;
    }
}

/* ================================================================
   Safari iOS – button appearance override (mobile only)
   Scoped to mobile: changing appearance on desktop can alter the
   native button rendering in Chrome/Edge.
   ================================================================ */

@media (max-width: 767px) {
    .dashboard-page .btn {
        -webkit-appearance: none;
    }
}