/*------------------------------------------------------------------
    File Name: custom.css
    Responsive overrides for Tecponto
-------------------------------------------------------------------*/

/* ===== GLOBAL: filter button rows ===== */
.filtro-actions,
.filter-btn-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* ===== TABLETS (max-width: 991px) ===== */
@media (max-width: 991px) {
    /* Cartão de ponto header */
    .cartao-header-row {
        flex-direction: column !important;
    }
    .cartao-meta {
        width: 100% !important;
        text-align: left !important;
        margin-top: 12px;
    }
    /* Cartão de ponto top section */
    .cartao-top {
        flex-direction: column !important;
    }
    .cartao-top .top-left {
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }
    .cartao-top .top-right {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }
    /* Company info: stack inline spans */
    .cartao-company-info .row-line span[style*="margin-left"] {
        display: block !important;
        margin-left: 0 !important;
        margin-top: 4px;
    }
    /* Summary cards (horas extras report) */
    .resumo-cards {
        flex-direction: column !important;
    }
    .resumo-cards > div {
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }
    /* Signatures */
    .assinaturas-row {
        flex-direction: column !important;
        gap: 30px !important;
    }
    .assinaturas-row > div {
        width: 100% !important;
    }
    /* Notification dropdown */
    .tp-notif-dropdown {
        min-width: 280px !important;
        max-width: calc(100vw - 30px) !important;
    }
}

/* ===== SMARTPHONES (max-width: 767px) ===== */
@media (max-width: 767px) {
    /* Reduce cartão title */
    .cartao-title {
        font-size: 24px !important;
    }
    .cartao-sub {
        font-size: 14px !important;
    }
    /* Clock on dashboard */
    .clock {
        font-size: 1.6em !important;
    }
    /* Filter form columns: full width */
    .filter-form .col-md-2,
    .filter-form .col-md-3,
    .filter-form .col-md-4 {
        margin-bottom: 10px;
    }
    /* Reduce table font */
    .cartao-tabela th,
    .cartao-tabela td {
        font-size: 9px !important;
        padding: 4px 3px !important;
        white-space: nowrap;
    }
    /* Espelho ponto table */
    .espelho-table th,
    .espelho-table td {
        font-size: 10px !important;
        padding: 4px 5px !important;
    }
    /* Content area padding */
    #content {
        padding: 60px 8px 15px 8px !important;
    }
    /* Page title */
    .page_title h2,
    .page_title h4 {
        font-size: 18px !important;
    }
    /* Cards on relatorio_ponto */
    .card-resumo {
        min-width: 100% !important;
    }
}

/* ===== FIX: show user profile/logout dropdown on mobile ===== */
@media (max-width: 1199px) {
    .right_topbar .icon_info ul.user_profile_dd {
        display: block !important;
    }
    .right_topbar .icon_info ul.user_profile_dd .name_user {
        display: none;
    }
}

/* ===== Sidebar logout link ===== */
.sidebar-logout a {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 8px;
    padding-top: 12px !important;
}
.sidebar-logout a:hover {
    color: #e74c3c !important;
}

/* ===== SIDEBAR CLOSE BUTTON (mobile) ===== */
.sidebar-close-btn {
    display: none;
}
@media (max-width: 1199px) {
    #sidebar.active .sidebar-close-btn {
        display: block;
        position: absolute;
        top: 12px;
        right: 12px;
        background: transparent;
        border: none;
        color: rgba(255,255,255,0.8);
        font-size: 22px;
        cursor: pointer;
        z-index: 15;
        padding: 4px 8px;
        line-height: 1;
    }
    #sidebar.active .sidebar-close-btn:hover {
        color: #e74c3c;
    }
}

/* ===== DESKTOP COLLAPSED: fix text overflow in 90px sidebar ===== */
@media (min-width: 1200px) {
    #sidebar.active ul li a span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }
}

/* ===== PAGE TITLE: flex layout for back button ===== */
.page_title {
    display: flex !important;
    align-items: center !important;
    gap: 15px;
}
.page_title h2,
.page_title h4 {
    flex: 1;
    min-width: 0;
}

/* ===== BACK BUTTON ===== */
.btn-voltar {
    background: #95a5a6;
    color: #fff !important;
    padding: 6px 14px;
    border-radius: 4px;
    text-decoration: none !important;
    font-size: 13px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.btn-voltar:hover {
    background: #7f8c8d;
    color: #fff !important;
    text-decoration: none !important;
}
.btn-voltar i {
    font-size: 12px;
}

/* ===== VERY SMALL PHONES (max-width: 480px) ===== */
@media (max-width: 480px) {
    .cartao-title {
        font-size: 20px !important;
    }
    .cartao-sub {
        font-size: 12px !important;
    }
    .cartao-tabela th,
    .cartao-tabela td {
        font-size: 8px !important;
        padding: 3px 2px !important;
    }
    /* Topbar logo */
    .topbar .logo_section img {
        max-width: 120px;
    }
    .tp-notif-dropdown {
        min-width: 250px !important;
        right: -60px !important;
    }
    /* Smaller back button on very small screens */
    .btn-voltar {
        padding: 5px 10px;
        font-size: 12px;
    }
}