/* ================================================================
   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 block – compact greeting row on mobile (name + small photo) */
.db-profile {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}
@media (max-width:767px) {
    .db-profile h4  { margin:0; font-size:15px; }
    .db-profile img { max-width:44px; height:auto; border-radius:50%; }
}

/* 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;
}

/* ----------------------------------------------------------------
   Mobile (<768px): SHOW the status summary in a stacked, fluid
   layout instead of hiding it. The partial injected into
   #divDayCounter uses inline fixed widths (350px progress block,
   140px badge rows) and floats – neutralised below so everything
   fits a ~360px screen without horizontal scroll.
   ---------------------------------------------------------------- */
@media (max-width:767px) {
    /* Outer float:left wrapper around the progress block */
    #divDayCounter [style*="float:left"][style*="margin-top:5px"] {
        float:none !important;
        width:100% !important;
    }
    /* Progress block was inline float:right; width:350px */
    #divDayCounter [style*="width:350px"],
    #divDayCounter [style*="width: 350px"] {
        width:100% !important;
        float:none !important;
        margin-left:0 !important;
        box-sizing:border-box;
    }
    /* Any float:right inside the counter (progress label) -> full line */
    #divDayCounter [style*="float:right"] {
        float:none !important;
        margin-top:0 !important;
    }
    /* TimeTrack can be a wide table – let it scroll instead of overflowing */
    #divTimeTrack {
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
}

/* 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;
}

/* Mobile: stack the legend cards full-width for easy reading */
@media (max-width:767px) {
    #divDayCounter  .widget,
    #divDayCounter2 .widget {
        display:block !important;
        width:100% !important;
        max-width:420px;
        margin-right:0 !important;
    }
}

/* ================================================================
   Action buttons – uniform grid across breakpoints
   The row wrapping col-xs-6.col-sm-3.col-md-2 becomes a CSS grid so
   every tile shares the same width/height regardless of how many
   siblings are rendered (Bootstrap floats made this inconsistent –
   a row of 3 vs 4 vs 8 tiles produced different tile heights).
   ================================================================ */
.dashboard-page .db-actions-grid {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
    margin:0 0 12px;
    max-width:640px;
}

/* Bootstrap's .row:before/:after clearfix (display:table) becomes a
   real grid item once the row switches to display:grid, eating the
   first cell. Neutralise it here only. */
.dashboard-page .db-actions-grid:before,
.dashboard-page .db-actions-grid:after {
    content:none;
    display:none;
}

.dashboard-page .row .col-xs-6.col-sm-3.col-md-2 {
    float:none !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
}

/* The markup sets style="font-size:11pt" inline on every tile –
   inline styles beat any class selector regardless of specificity,
   so the compact sizing below needs !important to actually win. */
.dashboard-page .row .col-xs-6.col-sm-3.col-md-2 .btn-lg {
    position:relative;
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    width:100%;
    height:100%;
    min-height:62px;
    padding:6px 6px;
    font-size:13px !important;
    white-space:normal;
    line-height:1.25;
    text-align:center;
    box-sizing:border-box;
}

.dashboard-page .row .col-xs-6.col-sm-3.col-md-2 .btn-lg .fa-lg {
    font-size:1.15em;
}

/* Pending-count badge – anchored to the tile, not clipped by padding */
.dashboard-page .row .col-xs-6.col-sm-3.col-md-2 .btn-lg > div[style*="position:absolute"] {
    position:absolute !important;
    top:6px !important;
    right:6px !important;
}
.dashboard-page .row .col-xs-6.col-sm-3.col-md-2 .btn-lg .badge {
    font-size:11px;
    min-width:18px;
    padding:2px 6px;
}

/* Tablet 576–767px: 2-column grid stays, tiles get a touch more room */
@media (min-width:576px) and (max-width:767px) {
    .dashboard-page .row .col-xs-6.col-sm-3.col-md-2 .btn-lg {
        min-height:68px;
        font-size:14px !important;
    }
}

/* Desktop >= 768px: 4-column grid, compact tiles */
@media (min-width:768px) {
    .dashboard-page .db-actions-grid {
        grid-template-columns:repeat(4, 1fr);
        gap:10px;
        max-width:900px;
    }
    .dashboard-page .row .col-xs-6.col-sm-3.col-md-2 .btn-lg {
        min-height:64px;
        font-size:14px !important;
        padding:8px 8px;
    }
}

/* ================================================================
   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;
        max-width:100%;
        overflow-x:auto;
    }
    .dashboard-page #divPub1 img,
    .dashboard-page #divPub1 iframe {
        max-width:100% !important;
        height:auto !important;
    }
    /* Team timeline (managers) can be wide – scroll instead of overflow */
    .dashboard-page #divTimelineHolidayScheduled {
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
    .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;
    }
}