/* =========================================================
   HRMS Mobile Responsive CSS
   ملف تحسين عرض لوحة HR على الجوال
   ضع الملف هنا:
   public/assets/css/hr-mobile.css
   ثم استدعه قبل </head>:
   <link rel="stylesheet" href="{{ asset('assets/css/hr-mobile.css') }}?v=20260625">
   ========================================================= */

@media (max-width: 1200px){
    html,body{
        width:100%;
        max-width:100%;
        overflow-x:hidden!important;
    }

    *{
        max-width:100%;
    }

    img,video,iframe{
        max-width:100%;
        height:auto;
    }

    .stats,
    .cards,
    .grid,
    .filter-grid,
    .salary-grid,
    .dashboard-cards,
    .summary-grid,
    .reports-grid,
    .notifications-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }

    .table-box,
    .table-wrap,
    .wrap,
    .box,
    .panel{
        max-width:100%;
        overflow-x:auto!important;
    }

    table{
        min-width:900px;
    }
}

@media (max-width: 900px){

    html,body{
        width:100%;
        max-width:100%;
        overflow-x:hidden!important;
        background:#F4F7FB!important;
    }

    body{
        font-size:14px!important;
    }

    /* =============================
       Layout / Sidebar
       ============================= */

    .layout{
        display:block!important;
        width:100%!important;
        min-height:100vh!important;
    }

    .sidebar{
        position:relative!important;
        top:auto!important;
        right:auto!important;
        width:100%!important;
        height:auto!important;
        min-height:auto!important;
        padding:18px!important;
        border-radius:0 0 28px 28px!important;
        box-shadow:0 12px 30px rgba(0,0,0,.12)!important;
        overflow:visible!important;
        z-index:10!important;
    }

    .brand,
    .logo{
        font-size:26px!important;
        margin-bottom:5px!important;
    }

    .brand-sub,
    .logo-sub{
        font-size:12px!important;
        margin-bottom:16px!important;
    }

    .menu{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:10px!important;
    }

    .menu a{
        padding:12px 13px!important;
        border-radius:16px!important;
        font-size:13px!important;
        min-height:48px!important;
        gap:8px!important;
    }

    .menu a:hover{
        transform:none!important;
    }

    .notify-count{
        min-width:22px!important;
        height:22px!important;
        font-size:11px!important;
        padding:0 7px!important;
    }

    .content,
    .main,
    .main-content,
    main{
        margin-right:0!important;
        width:100%!important;
        max-width:100%!important;
        padding:14px!important;
        overflow-x:hidden!important;
    }

    /* =============================
       Hero / Header
       ============================= */

    .hero{
        border-radius:24px!important;
        padding:22px!important;
        margin-bottom:18px!important;
        overflow:hidden!important;
    }

    .hero h1{
        font-size:28px!important;
        line-height:1.35!important;
        margin-bottom:8px!important;
    }

    .hero p,
    .subtitle{
        font-size:13px!important;
        line-height:1.8!important;
    }

    .top-header{
        flex-direction:column!important;
        align-items:flex-start!important;
        gap:12px!important;
        padding:16px!important;
        border-radius:20px!important;
    }

    .page-title{
        font-size:24px!important;
    }

    /* =============================
       Stats / Cards
       ============================= */

    .stats,
    .cards,
    .grid,
    .filter-grid,
    .salary-grid,
    .dashboard-cards,
    .summary-grid,
    .reports-grid,
    .notifications-grid{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:14px!important;
        width:100%!important;
    }

    .stat,
    .stat-card,
    .card,
    .box,
    .panel,
    .salary-item,
    .employee-card,
    .notification{
        border-radius:22px!important;
        padding:18px!important;
        width:100%!important;
        max-width:100%!important;
    }

    .stat strong,
    .stat-value,
    .salary-item strong{
        font-size:26px!important;
        line-height:1.3!important;
    }

    .stat span,
    .stat-title,
    .salary-item span{
        font-size:13px!important;
    }

    /* =============================
       Forms / Toolbar
       ============================= */

    .toolbar,
    .topbar,
    .actions-box,
    .actions,
    .search{
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
        width:100%!important;
        gap:10px!important;
    }

    form{
        max-width:100%!important;
    }

    input,
    select,
    textarea,
    button,
    .btn,
    .btn-gold,
    .filter-btn{
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        padding:13px 14px!important;
        border-radius:15px!important;
        font-size:14px!important;
    }

    input[type="month"],
    input[type="date"],
    input[type="time"],
    input[type="number"],
    input[type="text"],
    input[type="email"],
    input[type="password"],
    select{
        height:auto!important;
    }

    a.btn,
    .btn{
        display:block!important;
        text-align:center!important;
    }

    /* =============================
       Tables
       ============================= */

    .table-box,
    .table-wrap,
    .wrap,
    .panel:has(table),
    .box:has(table){
        width:100%!important;
        max-width:100%!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        -webkit-overflow-scrolling:touch!important;
        border-radius:20px!important;
    }

    table{
        width:100%!important;
        min-width:850px!important;
        border-collapse:collapse!important;
    }

    th{
        font-size:12px!important;
        padding:12px!important;
        white-space:nowrap!important;
    }

    td{
        font-size:12px!important;
        padding:12px!important;
        white-space:nowrap!important;
    }

    .details,
    .muted,
    .meta{
        font-size:12px!important;
        line-height:1.7!important;
    }

    .badge{
        font-size:11px!important;
        padding:6px 10px!important;
    }

    /* =============================
       Employee / Avatar
       ============================= */

    .emp,
    .employee-card{
        align-items:center!important;
        gap:12px!important;
    }

    .avatar{
        width:48px!important;
        height:48px!important;
        min-width:48px!important;
        border-radius:16px!important;
        font-size:18px!important;
    }

    .emp-name{
        font-size:14px!important;
    }

    .emp-id{
        font-size:11px!important;
    }

    /* =============================
       Notifications
       ============================= */

    .notification{
        display:flex!important;
        gap:14px!important;
        align-items:flex-start!important;
    }

    .notification .icon,
    .icon{
        width:52px!important;
        height:52px!important;
        min-width:52px!important;
        border-radius:18px!important;
        font-size:22px!important;
    }

    .title{
        font-size:17px!important;
        line-height:1.5!important;
    }

    .message{
        font-size:13px!important;
        line-height:1.8!important;
    }

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

    .modal-bg{
        padding:12px!important;
        align-items:flex-end!important;
    }

    .modal{
        width:100%!important;
        max-width:100%!important;
        border-radius:26px 26px 0 0!important;
        padding:20px!important;
        max-height:90vh!important;
        overflow-y:auto!important;
    }

    .modal h2{
        font-size:22px!important;
    }

    .modal-actions{
        flex-direction:column!important;
        width:100%!important;
    }

    /* =============================
       PDF / Reports Preview Tables
       ============================= */

    .info-row{
        flex-direction:column!important;
        align-items:flex-start!important;
        gap:5px!important;
    }

    .progress{
        width:100%!important;
    }

    /* =============================
       Prevent broken overflow
       ============================= */

    [style*="grid-column"]{
        grid-column:auto!important;
    }

    [style*="width"]{
        max-width:100%!important;
    }

    .hero::before,
    .hero::after{
        opacity:.35!important;
    }
}

@media (max-width: 520px){

    body{
        font-size:13px!important;
    }

    .sidebar{
        padding:14px!important;
    }

    .brand,
    .logo{
        font-size:23px!important;
    }

    .menu{
        grid-template-columns:1fr!important;
        gap:8px!important;
    }

    .menu a{
        font-size:13px!important;
        padding:12px!important;
    }

    .content,
    .main,
    .main-content,
    main{
        padding:12px!important;
    }

    .hero{
        padding:18px!important;
        border-radius:22px!important;
    }

    .hero h1{
        font-size:24px!important;
    }

    .hero p,
    .subtitle{
        font-size:12.5px!important;
    }

    .stat,
    .stat-card,
    .card,
    .box,
    .panel,
    .salary-item,
    .employee-card,
    .notification{
        padding:15px!important;
        border-radius:20px!important;
    }

    .stat strong,
    .stat-value,
    .salary-item strong{
        font-size:23px!important;
    }

    input,
    select,
    textarea,
    button,
    .btn,
    .btn-gold,
    .filter-btn{
        font-size:13px!important;
        padding:12px!important;
    }

    table{
        min-width:760px!important;
    }

    th,td{
        font-size:11.5px!important;
        padding:10px!important;
    }

    .avatar{
        width:44px!important;
        height:44px!important;
        min-width:44px!important;
    }

    .notification .icon,
    .icon{
        width:46px!important;
        height:46px!important;
        min-width:46px!important;
        font-size:20px!important;
    }

    .title{
        font-size:16px!important;
    }

    .message{
        font-size:12.5px!important;
    }
}

/* =========================================================
   Optional: Mobile card style for very small tables
   ملاحظة: الجداول الكبيرة ستظهر بسكرول أفقي حتى لا تنكسر.
   ========================================================= */

@media (max-width: 420px){
    .table-box,
    .table-wrap,
    .wrap{
        border:1px solid #EEF0F4!important;
    }

    .table-box::after,
    .table-wrap::after,
    .wrap::after{
        content:"اسحب الجدول يمين/يسار لعرض باقي البيانات";
        display:block;
        padding:10px;
        text-align:center;
        color:#667085;
        font-size:12px;
        background:#F8FAFC;
    }
}