/* General Styles */
body {
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
    color: #333;
}

/* Tab Navigation */
.tab {
    display: flex;
    flex-wrap: wrap;  /* Allow tabs to wrap on smaller screens */
    justify-content: flex-start;  /* Left align tabs */
    background-color: #54e4af;
    padding: 10px;
    border-bottom: 2px solid #ccc;
    gap: 10px;  /* Add space between wrapped items */
}

.t {
    flex: 1;  /* Allow tabs to grow */
    min-width: 150px;  /* Minimum width before wrapping */
    max-width: 200px;  /* Maximum width to maintain consistency */
    padding: 10px;
    margin: 0;
    border-radius: 5px;
    font-size: 14px;  /* Slightly smaller font for mobile */
    text-align: center;
    white-space: nowrap;  /* Prevent text wrapping within tabs */
}

.t.clickable:hover {
    background-color: #45cda3;
    cursor: pointer;
    color: white;
}

.t.active {
    background-color: #3bb18c;
    color: white;
}

/* Tab Content */
.tab-content {
    padding: 20px;
    background-color: white;
    margin: 20px auto;
    border-radius: 8px;
    max-width: 90%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;  /* Smooth scrolling on iOS */
    max-width: 100%;
    margin: 10px;  /* Reduce margins on mobile */
    padding: 10px;  /* Reduce padding on mobile */
}

/* Dialog Box */
.dialog {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #3bb18c;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    font-weight: bold;
    transition: transform 0.3s, background-color 0.3s;
}

.dialog:hover {
    background-color: #2e9371;
    transform: scale(1.1);
    cursor: pointer;
}

/* Entry Modal */
.entry {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    padding: 20px;
    background-color: white;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    z-index: 1000;
    grid-template-rows: auto auto;
}

.entry label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

.entry input, .entry select {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.submit-btn {
    background-color: #54e4af;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
    width: 48%;
}

.submit-btn:hover {
    background-color: #45cda3;
}

.close-btn {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    width: 48%;
    transition: background-color 0.3s;
    float: none;
}

.close-btn:hover {
    background-color: #d32f2f;
}

/* Add a container for the buttons */
.button-container {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .entry {
        width: 95%;
        margin: 10px;
        padding: 15px;
    }

    .tab {
        flex-direction: column;
        align-items: stretch;
    }

    .t {
        max-width: none;
        margin: 2px 0;
    }

    .patient-name {
        font-size: 18px;
    }

    .nikshay-id {
        font-size: 14px;
    }

    .dispensation-due {
        font-size: 14px;
    }

    /* Adjust button container for mobile */
    .button-container {
        flex-direction: column;
        gap: 10px;
    }

    .button-container button {
        width: 100%;
    }

    /* Make the dialog button ('+') smaller on mobile */
    .dialog {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    /* Adjust logs display for mobile */
    #fu_logs, #pfu_logs {
        margin: 10px;
    }

    .log-entry {
        padding: 8px;
    }
}

/* Add styles for better touch targets on mobile */
button, 
.complete-fu, 
.complete-pfu, 
.case {
    min-height: 44px;  /* Minimum touch target size */
    min-width: 44px;
}

/* Add smooth transitions */
.t, 
.case, 
.complete-fu, 
.complete-pfu,
.dialog {
    transition: all 0.3s ease;
}

table {
    width: 100%;
    transform: none;  /* Remove the scaling */
    font-size: 14px;  /* Smaller font size for mobile */
    table-layout:auto;
    border-collapse:collapse;
    background-color: #ffffff;
}
  
th, td {
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #ddd;/* Prevent word breaking */
}
  
th {
    background-color: #f2f2f2;
    font-weight: bold;
}
  
tr:nth-child(even) {
    background-color: #f9f9f9;
}
  
tr:hover {
    background-color: #f1f1f1;
}

.patient-info {
    display: flex;
    flex-direction: column;
    padding: 15px 10px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    margin: 10px 5px;
}

.patient-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.patient-name-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.patient-name {
    display: flex;
    flex-wrap: wrap;  /* Allow name and ID to wrap on mobile */
    gap: 5px;
    font-size: 20px;  /* Smaller font size for mobile */
}

.nikshay-id {
    font-size: 16px;
    color: #666;
    margin-left: 10px;
}

.dispensation-due {
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
    color: #ff0000;
}

.treatment-phase, .num-tabs {
    font-size: 14px;
    margin-top: 5px;
    color: #292121;
}

.edit-button button {
    margin-top: 10px;
    padding: 5px 10px;
    font-size: 14px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

.edit-button button:hover {
    background-color: #0056b3;
}

.case {
    
    background-color: #954949; /* Light background to match the div */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 4px; /* Rounded corners */
    color: #ffffff; /* Text color */
    padding: 5px 10px; /* Adjust padding for a clean size */
    font-size: 14px; /* Match font size to div text */
    cursor: pointer; /* Show pointer cursor on hover */
    margin-left: 10px; /* Add space from "juni" text */
    vertical-align: middle; /* Align vertically in line with text */
  }
  
.case:hover {
background-color: #e0e0e0; /* Slight hover effect */
}
  
.case:active {
background-color: #d6d6d6; /* Slight click effect */
}
  

.cases {
    position: static;  /* Remove relative positioning */
    margin-top: 10px;  /* Add space above buttons */
    display: flex;
    justify-content: flex-end;
}

/* Style the close button in the first tab */
.case.close-case {
    position: static;
    background-color: #954949;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    margin-left: auto; /* This will push the button to the right */
}

/* Form input fields */
form input[type="text"],
form input[type="number"],
form input[type="date"],
form select {
    width: 100%;
    padding: 8px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

form select {
    background-color: white;
}

form label {
    font-weight: bold;
    margin-top: 10px;
    display: block;
}

.complete-fu, .complete-pfu {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
}

.complete-fu:disabled, .complete-pfu:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.log-entry {
    margin-bottom: 20px;
    padding: 10px;
    border-left: 4px solid #4CAF50;
    background-color: #f9f9f9;
}

#fu_logs, #pfu_logs {
    margin: 20px;
}

#fu_logs h2, #pfu_logs h2 {
    color: #333;
    border-bottom: 2px solid #4CAF50;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.completed-followup {
    margin-top: 10px;
    padding: 5px 0;
    border-bottom: 1px solid #e0e0e0;
}

.completed-followup:last-child {
    border-bottom: none;
}

.log-entry .patient-info {
    background-color: #f0f8f0;
    border-color: #4CAF50;
}

.log-entry .dispensation-due {
    color: #4CAF50;
}

@media (max-width: 768px) {
    .patient-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .case.close-case {
        margin-left: 0;
        margin-top: 10px;
        width: 100%; /* Full width on mobile */
    }
}