/*
 * mobile.css - Mejoras responsive para DBA Timeclock.
 *
 * Se carga después del CSS de AdminLTE/Bootstrap (ver theme/templates/header.inc)
 * para sobrescribir lo justo sin romper la interfaz de escritorio.
 *
 * Convenciones:
 *  - Breakpoint principal: 768px (coherente con Bootstrap 3).
 *  - Los botones y controles de formulario mantienen un alto mínimo de 44px
 *    (recomendación de Apple HIG / Material Design para touch targets).
 */

/* ---------- Global ---------- */

/* Evita que iOS haga zoom automático al enfocar un input */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="search"],
select,
textarea {
    font-size: 16px !important;
}

/* Tap targets mínimos en toda la app */
.btn,
button,
input[type="submit"],
input[type="button"],
.form-control {
    min-height: 44px;
}

/* ---------- Tablas con scroll horizontal en móvil ---------- */

/*
 * Las páginas originales usan <table width=100%> sin wrapper responsive.
 * Aquí forzamos que CUALQUIER <table> dentro del área de contenido se
 * desplace horizontalmente en vez de reventar el layout.
 */
@media (max-width: 767px) {
    .content-wrapper .box-body,
    .content-wrapper > section,
    .content-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tablas simples: que al menos no se desborden hacia fuera */
    .content-wrapper table {
        max-width: 100%;
    }

    /* Tablas con clase .table (Bootstrap): mantener scroll suave */
    .table-responsive {
        border: 0;
    }
}

/* ---------- Tablas-a-tarjetas: formato "stacked" en móvil ---------- */

/*
 * Para reports de horas, status, etc. añadiendo la clase `table-stacked`
 * al <table> se convierte en una lista de tarjetas en móvil.
 * Requiere usar data-label="..." en cada <td>.
 *
 * Las páginas legacy seguirán mostrando la tabla normal con scroll
 * horizontal (el comportamiento anterior). Solo se convierte a tarjetas
 * donde explícitamente se aplique la clase.
 */
@media (max-width: 767px) {
    table.table-stacked,
    table.table-stacked thead,
    table.table-stacked tbody,
    table.table-stacked th,
    table.table-stacked td,
    table.table-stacked tr {
        display: block;
    }

    table.table-stacked thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    table.table-stacked tr {
        margin-bottom: 12px;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        background: #fff;
        padding: 6px 10px;
    }

    table.table-stacked td {
        border: none;
        border-bottom: 1px solid #f0f0f0;
        position: relative;
        padding: 8px 0 8px 45%;
        min-height: 36px;
    }

    table.table-stacked td:last-child {
        border-bottom: 0;
    }

    table.table-stacked td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 8px;
        width: 42%;
        padding-right: 10px;
        font-weight: 600;
        color: #555;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ---------- Formularios en móvil ---------- */

@media (max-width: 767px) {
    /* Los selects y controles del AdminLTE que llevan width: 50% por inline
       style los forzamos al 100% para que sean usables en móvil. */
    .form-control,
    .form-group select,
    .form-group input[type="text"],
    .form-group input[type="password"],
    .form-group input[type="email"],
    .form-group .date,
    .form-group .input-group {
        width: 100% !important;
    }

    /* Los botones en formularios: a ancho completo es más cómodo de tapear */
    .box-footer .btn,
    .form-group .btn {
        width: 100%;
        margin-top: 6px;
    }

    /* Separación vertical entre etiqueta y campo */
    .form-group label {
        display: block;
        margin-bottom: 6px;
    }
}

/* ---------- Topbar y contenido principal ---------- */

@media (max-width: 767px) {
    /* Título de sección: que no desborde */
    .content-header h1 {
        font-size: 22px;
    }

    .content-header h1 small {
        display: block;
        margin-top: 4px;
        font-size: 13px;
    }

    /* Breadcrumb: ocultar en móvil para ganar espacio (opcional) */
    .content-header .breadcrumb {
        display: none;
    }

    /* Las .box con padding interno: reducimos un poco */
    .box-body {
        padding: 10px;
    }

    /* Reducir márgenes de cards */
    .box {
        margin-bottom: 15px;
    }
}

/* ---------- Panel lateral (sidebar) en móvil ---------- */

/*
 * AdminLTE ya colapsa la sidebar en móvil por defecto.
 * Aquí nos aseguramos de que los ítems del menú lateral tengan
 * tap targets de al menos 44px y de que el contenido principal
 * ocupe el 100% del ancho cuando la sidebar está cerrada.
 */
.sidebar-menu > li > a {
    min-height: 44px;
    display: flex;
    align-items: center;
}

.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > i {
    margin-right: 8px;
}

@media (max-width: 767px) {
    body.sidebar-collapse .content-wrapper,
    body:not(.sidebar-open) .content-wrapper {
        margin-left: 0 !important;
    }
}

/* ---------- Mensaje "Message of the day" ---------- */

@media (max-width: 767px) {
    .motd,
    td.motd {
        display: block;
        width: 100%;
        padding: 10px;
        background: #fff8d5;
        border-left: 4px solid #f39c12;
        font-size: 14px;
    }
}

/* ---------- Logo en la cabecera ---------- */

@media (max-width: 767px) {
    .main-header .logo img {
        max-height: 40px;
        width: auto;
    }
}