/* style.css */
:root { 
    --primary: #ffcc00; 
    --dark: #121212; 
    --bg: #f4f7f6; 
}

body { font-family: 'Segoe UI', sans-serif; margin: 0; background: var(--bg); color: #333; }

/* Dashboard Structure */
.app-container { display: flex; height: 100vh; overflow: hidden; }

.sidebar { 
    width: 240px; 
    background: var(--dark); 
    color: white; 
    display: flex; 
    flex-direction: column; 
    flex-shrink: 0; /* Sidebar ko dabne se rokta hai */
}

.sidebar-header { 
    padding: 25px; 
    text-align: center; 
    font-size: 22px; 
    font-weight: bold; 
    color: var(--primary); 
    border-bottom: 1px solid #333; 
}

.nav-link { padding: 15px 20px; color: #ccc; text-decoration: none; border-bottom: 1px solid #1e1e1e; transition: 0.3s; }
.nav-link:hover { background: #1e1e1e; color: var(--primary); }

.content-area { flex-grow: 1; border: none; height: 100vh; width: 100%; }

/* Common UI Elements */
.card { 
    background: white; 
    padding: 20px; 
    border-radius: 10px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    margin: 15px; 
}

/* Inputs & Buttons - Mobile par inhe tap karna asaan hona chahiye */
input, select, textarea { 
    width: 100%; 
    padding: 12px; /* Thoda zyada padding touch ke liye */
    margin: 8px 0; 
    border: 1px solid #ddd; 
    border-radius: 5px; 
    box-sizing: border-box; 
    font-size: 16px; /* 16px se kam hone par iPhone zoom karne lagta hai */
}

button { 
    padding: 12px 20px; 
    border: none; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: bold; 
    transition: 0.2s; 
    font-size: 16px;
}

.btn-save { background: #27ae60; color: white; }
.btn-save:hover { background: #219150; }

/* Table Style - Sabse zyada problem yahi aati hai */
.table-container {
    width: 100%;
    overflow-x: auto; /* Mobile par table ko scrollable banane ke liye */
}

table { width: 100%; border-collapse: collapse; margin-top: 15px; min-width: 600px; /* Table ko sikudne se rokta hai */ }
th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
th { background: #f8f9fa; }

/* ==========================================
   MOBILE RESPONSIVE SETTINGS (Media Query)
   ========================================== */

@media screen and (max-width: 768px) {
    .app-container {
        flex-direction: column; /* Sidebar upar, content niche */
    }

    .sidebar {
        width: 100%;
        height: auto;
    }

    .sidebar-header {
        padding: 15px;
        font-size: 18px;
    }

    .nav-link {
        padding: 12px;
        font-size: 14px;
        text-align: center;
        flex: 1;
    }

    /* Cards ki margin kam karein taaki screen waste na ho */
    .card {
        margin: 10px;
        padding: 15px;
    }

    /* Table horizontal scrollable rahegi */
    .table-container {
        border: 1px solid #ddd;
        border-radius: 8px;
    }
}