/*================================================================================== Base & Global Styles ==*/
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Consolidated font-family */
  overflow-x: hidden; /* Prevent horizontal scroll on smaller screens */
}
*, *::before, *::after {
  box-sizing: inherit;
}
/* Common button styling */
.btn,
.btn-green,
.btn-red,
.time-in,
.time-out,
.btn-create-user,
.save-button,
.filter-button,
.excel-button,
.view-more-btn,
.leave-button { /* Included here for common properties if not already there */
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  min-width: 120px; /* Ensure a minimum width for better touch target */
  text-align: center; /* Center text within buttons */
  padding: 15px 35px; /* Increased padding for consistent size with other large buttons */
  font-size: 16px; /* Increased font size for readability */
  color: white; /* Ensure text color is set */
  border: none; /* Ensure buttons have no default border */
  width:auto;
}
/* Specific button colors (overrides common where needed) */
.btn-green, .time-in { background-color: #28a745; }
.btn-green:hover, .time-in:hover { background-color: #218838; }
.btn-red, .time-out { background-color: #dc3545; }
.btn-red:hover, .time-out:hover { background-color: #c82333; }
.btn { background-color: #2596be; }
.btn:hover { background-color: #1b7fa4; }

/* Common input/select styling (default size and style for all similar fields) */
/* Remark field width control */
.remark-group {
    max-width: 80%;
    width: 100%;
    padding: 0 15px;
}

.remark-group textarea {
    width: 98%;
    resize: vertical;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="search"],
input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]), /* Catches other generic input types */
select {
    width: auto; /* Default width for all such fields */
    max-width: 100%; /* Ensures responsiveness */
    padding: 10px 12px; /* Consistent padding for a larger feel */
    font-size: 16px; /* Consistent font size for readability */
    border: 1px solid #ccc; /* Ensure consistent border */
    border-radius: 8px; /* Consistent rounded corners */
    box-sizing: border-box; /* Include padding and border in the element's total width */
    transition: border-color 0.3s ease; /* Smooth transition on focus */
}

/* Optional: Focus state for all inputs and selects */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):focus,
select:focus {
    border-color: #2596be; /* Change border color on focus, matching your theme */
    outline: none; /* Remove default outline */
}

/* Common label styling */
label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
    display: block; /* Make labels block-level for better stacking on mobile */
}

/* For general form sections or containers, use flexbox for better layout control */
.filter-section,
.form-section {
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    gap: 10px; /* Space between fields/groups */
    margin-bottom: 20px; /* Space below the entire section */
    align-items: flex-end; /* Align items to the bottom, useful for different height elements */
}

.filter-group,
.form-group {
    flex: 1; /* Allow groups to take equal space */
    min-width: 250px; /* Minimum width before wrapping to next line */
}

/*================================================================================== Sidebar Design Start ==*/
.sidebar {
  background: linear-gradient(180deg, #2596be, #1e7bbf);
  width: 320px;
  position: fixed;
  top: 63px;
  bottom: 0;
  left: 0;
  height: calc(100vh - 63px);
  overflow-y: auto;
  padding-top: 20px;
  z-index: 1000;
  transition: transform 0.3s ease;
  transform: translateX(0);
}
.sidebar.collapsed {
  transform: translateX(-100%);
}
/* Toggle Button for Desktop */
.sidebar-toggle-btn.desktop-only {
  position: fixed;
  top: 50%;
  left: 300px;
  transform: translateY(-50%);
  z-index: 1100;
  background-color: #2596be;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: left 0.3s ease;
}
body.sidebar-collapsed .sidebar-toggle-btn.desktop-only {
  left: 10px;
}
.sidebar-toggle-btn i {
  font-size: 14px;
  transition: transform 0.3s ease;
}
/* Sidebar Menu */
.sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-top: 5px;
}
.sidebar li {
  margin-bottom: 5px;
}
.sidebar a,
.sidebar .menu-title {
  text-decoration: none;
  color: white;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: all 0.3s ease;
  border-radius: 6px;
  margin: 5px 0;
  width: auto;
  font-size: 18px;
  line-height: 1.5;
}
.sidebar .icon {
  margin-right: 10px;
  width: 20px;
}
.sidebar a:hover,
.sidebar .menu-title:hover {
  background-color: #1781a1;
  transform: translateX(10px);
}
/* Submenu */
.sidebar .submenu {
  display: none;
  margin-top: 5px;
  margin-left: 20px;
  margin-right: 15px;
  padding-left: 25px;
  width: auto;
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s ease-in-out;
  background-color: transparent;
  border-radius: 25px;
  color:black;
}
.sidebar .submenu.open {
  display: block;
  padding-top: 10px;
}
.sidebar .submenu li a {
  font-size: 16px;
  padding: 10px;
  color: #444;
  transition: background-color 0.3s ease;
  width: auto;
}
.sidebar .submenu li a:hover {
  background-color: #146f8f;
  color: white;
  margin-left: 5px;
  margin-right: 5px;
  padding-left: 5px;
}
.sidebar .menu-title .arrow {
  font-size: 12px;
  transition: transform 0.3s ease;
  margin-left: 7px;
  margin-top: 6px;
}
.sidebar .menu-title.open .arrow {
  transform: rotate(180deg);
}
.sidebar .logout a {
  color: #ff4040;
  font-weight: bold;
  background-color: #ffecec;
  padding: 15px;
  border-radius: 6px;
  transition: all 0.3s ease;
  margin-left: 25px;
}
.sidebar .logout a:hover {
  background-color: #ff7f7f;
  color: #a00000;
  transform: translateX(10px);
}
.sidebar a.active {
  background-color: #146f8f;
  color: white;
  transform: translateX(10px);
}
/* Backdrop for mobile overlay */
.sidebar-backdrop {
  display: none;
  position: fixed;
  top: 63px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
}
body.sidebar-open .sidebar-backdrop {
  display: block;
}
/* Hide mobile-only buttons on desktop */
@media (min-width: 992px) {
  .sidebar-toggle-btn.mobile-only,
  .sidebar .close-btn {
    display: none;
  }
.sidebar .submenu.nested-submenu {
  background-color: transparent; /* remove the white look */
  margin-left: 10px;
  border-left: none; /* optional, since it’s already inside a bordered block */
  padding-left: 15px;
}

.sidebar .submenu.nested-submenu li a {
  color: black; /* Make nested items white like parent */
  padding: 8px 12px;
  font-size: 15px;
  transition: all 0.3s ease;
}

.sidebar .submenu.nested-submenu li a:hover {
  background-color: #1781a1;
  color: white;
  transform: translateX(10px);
}


}
/*================================================================================== Sidebar Design End ==*/
/*================================================================================== Header Design Start ==*/
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: #2596be;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  box-sizing: border-box;
  flex-wrap: wrap;
  padding-left: 60px; /* Prevent content overlap with fixed logo */
  min-height: 70px;
}
/*==================== Logo Section ====================*/
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 100%;
}
/* ✅ Pin image to top-left corner without gap */
.logo img {
  width: 70px;
  height: auto;
  position: fixed;
  top: 1px;
  left: 1px;
  z-index: 1100;
  margin: 0;
  padding: 0;
}
/*==================== Company Name ====================*/
.company-name {
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap; /* Prevent line breaks */
  overflow: hidden; /* Prevent overflow issues */
  text-overflow: ellipsis; /* ✅ Add "..." if it overflows */
  max-width: 100%; /* Adjust based on layout width */
  line-height: 1.1;
  margin-left: 15px;
}
/*==================== Greeting ====================*/
.greeting {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: right;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}
/*================================================================================== Header Design End ==*/
/*================================================================================== Footer Design Start ==*/
footer {
  background-color: #1e7bbf;
  color: #fff;
  text-align: center;
  padding: 10px 15px;
  font-size: 14px;
  width: 100%;
  position: relative;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
}
/* Footer Text Replacement */
p1 {
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 5px 0;
}
/*================================================================================== Footer Design End ==*/
/*================================================================================== Content Design Start ==*/
/*============================ Content Layout ============================*/
.content {
  width: 100%;
  padding: 20px;
  background-color: #fff;
  overflow-x: hidden;
  box-sizing: border-box;
  min-height: 100vh;
  transition: margin-left 0.3s ease;
  margin-left: 22%; /* Desktop: leave space for sidebar */
}
/*============================ Headings ============================*/
h1 {
  font-size: 30px;
  font-weight: bold;
  color: #2596be;
  text-align: center;
  margin-top: 70px;
  margin-bottom: 20px;
  padding: 0 15px;
}
h2 {
  font-size: 26px;
  font-weight: bold;
  color: #2596be;
  text-align: center;
  margin: 50px 0 15px;
  padding: 0 15px;
}
h3 {
  font-size: 22px;
  font-weight: bold;
  color: #2596be;
  text-align: center;
  margin: 20px 0 10px;
}
h4, h5, h6 {
  font-weight: bold;
  color: #2596be;
  margin-bottom: 10px;
  text-align: left;
}
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
/* Paragraph */
p {
  font-size: 14px;
  color: #000;
  margin-bottom: 15px;
  text-align: justify;
  line-height: 1.6;
}
/*================================================================================== Content Design End ==*/
/*========================================================================= Attendance Page styling Start */
table {
  width: 90%;
  margin: 20px auto 0 auto;
  border-collapse: collapse;
  table-layout: fixed;
  overflow-x: auto;
  word-wrap: break-word;
}
table th,
table td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
table th {
  background-color: #2596be;
  color: white;
}
table td {
  font-size: 16px;
}
table tr:nth-child(even) {
  background-color: #f9f9f9;
}
table tr:hover {
  background-color: #f1f1f1;
}
.attendance-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  margin-top: 1rem;
}
.attendance-table th,
.attendance-table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  color: #000;
  font-size: 14px;
}
/* Row backgrounds */
.attendance-table .green { background-color: #e6f4ea; }
.attendance-table .yellow { background-color: #fff9e6; }
.attendance-table .red { background-color: #fdecea; }
.attendance-table .gray { background-color: #f0f0f0; }
/* Status Colors (consolidated) */
.green { background-color: #28a745; color: white; }
.yellow { background-color: #ffc107; color: black; }
.red { background-color: #dc3545; color: white; }
/* Attendance Button Group */
.attendance-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}
#camera_section {
  text-align: center;
  margin-top: 40px;
}
.table-container {
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}
/*========================================================================= Attendance Page styling End */
/*============================================================= Consolidated Attendance & Leave Report Start*/
.status-summary-row {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 20px 0;
  flex-wrap: wrap;
}
.status-button {
  padding: 8px 20px;
  border-radius: 25px;
  color: white;
  font-weight: bold;
  font-size: 14px;
  cursor: default;
  text-align: center;
}
.status-button.present { background-color: #28a745; /* Green */ }
.status-button.late { background-color: #fd7e14; /* Orange */ }
.status-button.absent { background-color: #dc3545; /* Red */ }
.status-button.paid-leave { background-color: #ffc107; /* Yellow */ color: black; /* Better contrast */ }
/*============================================================= Consolidated Attendance & Leave Report End*/
/*========================================================================= Create Users Form Styling Start */
.create_users .form-section {
  background-color: #fff;
  padding: 20px;
  margin-top: 10px;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 98%;
  margin-right: 1%;
  overflow-x: hidden;
  /*max-width: 98%;*/
  flex: 1;
  margin-left: 1%;
  margin-right: 5%;
  flex-grow: 1;
  overflow-y: auto;
  min-height: auto;
  box-sizing: border-box;
}
.create_users .form-section h2 {
  margin-top: 30px;
  color: #2596be;
  font-size: 24px;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 5px;
}
.create_users .form-row {
  display: flex;
  flex-wrap: wrap;
}
.create_users .form-group {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-direction: block;
  padding: 20px;
}
.create_users .form-group.full {
  flex: 1 1 100%;
}
.create_users .form-group label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}
/* The following styles for create_users form group inputs/selects will be overridden by the more general ones above.
   If you need specific styling for create_users that differs from the default, you would add them here
   with higher specificity or `!important`. For now, they inherit the new default. */
/*
.create_users .form-group input,
.create_users .form-group select {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  transition: border-color 0.3s;
  font-size: 14px;
}
.create_users .form-group input:focus,
.create_users .form-group select:focus {
  outline: none;
  border-color: #2596be;
}
*/
.create_users .submit-row {
  text-align: center;
  margin-top: 30px;
}
.create_users button[type="submit"] {
  background-color: #2596be;
  color: #fff;
  padding: 12px 30px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  max-width:250px;
}
.create_users button[type="submit"]:hover {
  background-color: #1b7ca1;
}
/*========================================================================= Create Users Form Styling End */
/*======================================================= Manage Employee Page (manage_employee.php) Start */
/* Container for employee cards */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 20px;
  box-sizing: border-box;
  justify-content: space-between;
  margin-bottom: 40px; /* ensures enough space after last row */
}
/* Individual employee card */
.employee-card {
  background-color: #fffff0;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: calc(25% - 15px); /* Default for larger screens */
  text-align: center;
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}
.employee-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
/* Employee image styling to make it circular */
.employee-card img {
  width: 100px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #2596be;
  margin-bottom: 15px;
}
/* Employee name styling */
.employee-card h3 {
  margin: 20px 0 2px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #2596be;
}
/* Employee designation styling */
.employee-card p {
  margin: 0 0 15px;
  font-size: 0.95rem;
  color: #333;
  text-align: center;
}
/* View More button styling (now inherits from common button styling, explicitly setting appearance properties) */
.view-more-btn {
  display: inline-block !important; /* Force visibility and display type */
  opacity: 1 !important;    /* Ensure full opacity */
  visibility: visible !important; /* Ensure visibility */
  background-color: #2596be; /* Explicitly set color */
  color: white; /* Explicitly set text color */
  border-radius: 6px;       /* Explicitly set curve */
  text-decoration: none; /* Remove underline for links acting as buttons */
  /* Other properties (padding, font-size, min-width, text-align, cursor, transition, border) will be inherited from the common button styles.
  */
}
.view-more-btn:hover {
  background-color: #1b7ca2; /* Keep specific hover effect */
}
/* Status badge */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  color: white;
}
.badge.green { background-color: #28a745; }
.badge.yellow { background-color: #ffc107; color: black; }
.badge.red { background-color: #dc3545; }
/*======================================================= Manage Employee Page (manage_employee.php) End */
/*==================================================== View Leave Page (view_leave_applications.php) Start */
.leave-btn {
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    border: none;
    transition: background-color 0.3s ease;
    width: auto;
}
.leave-btn-approve {
    background-color: green;
    color: white;
}
.leave-btn-approve:hover {
    background-color: darkgreen;
}
.leave-btn-reject {
    background-color: red;
    color: white;
}
.leave-btn-reject:hover {
    background-color: darkred;
}
input[name="comment"] {
    width: 140px;
    font-size: 12px;
    margin-left: 5px;
}
/*==================================================== View Leave Page (view_leave_applications.php) End */
/*=========================================================== View Employee Page (view_employee.php) Start */
/* Container holding entire profile and image */
.employee-profile-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding: 20px;
}
/* Status toggle aligned top right */
.status-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 20px;
}
/* Image placed above the table, aligned right */
.profile-photo {
    align-self: flex-end;
}
.employee-img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #ccc;
    margin-left: 80%; /* Adjust for desktop */
    margin-top: 10px;
}
/* Table styling */
.employee-info-table {
    width: 100%;
    max-width: 800px;
    border-collapse: collapse;
    table-layout: fixed;
}
.employee-info-table th,
.employee-info-table td {
    padding: 12px 15px;
    vertical-align: top;
    border: 1px solid #ddd;
    word-wrap: break-word;
}
.employee-info-table th {
    color: #333;
    width: 30%;
    background-color: #f2f2f2;
    font-weight: bold;
    text-align: left;
}
.employee-info-table td {
    width: 70%;
    text-align: right;
}
.employee-info-table tr {
    margin-bottom: 15px;
    display: block; /* Default to block for stacking */
}
/* Form action buttons container */
.form-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}
/* Edit Button - Yellow */
.btn-edit {
    background-color: #f0ad4e;
    border: none;
    padding: 14px 30px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
    margin-left: 650px; /* Adjust for desktop */
}
.btn-edit:hover {
    background-color: #ec971f;
}
/* Delete Button - Red */
.btn-delete {
    background-color: #d9534f;
    border: none;
    padding: 14px 30px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}
.btn-delete:hover {
    background-color: #c9302c;
}
/* Toggle Switch (optional enhancement) */
.toggle-btn {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    margin-left: 85%; /* Adjust for desktop */
}
.toggle-btn input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 24px;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: .4s;
}
.toggle-btn input:checked + .slider {
    background-color: #4CAF50;
}
.toggle-btn input:checked + .slider:before {
    transform: translateX(26px);
}
.status-label {
    font-weight: bold;
    font-size: 14px;
}
/*=========================================================== View Employee Page (view_employee.php) End */
/*============================================================ Role Management (role_management.php) Start */
/* Main container for the role management page */
.main-content {
    display: flex;
    flex-direction: row; /* Default for desktop */
}
/* Permissions Table Styling */
.permissions-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    table-layout: auto;
}
.permissions-table th,
.permissions-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}
/* Header cells style */
.permissions-table th {
    background-color: #f4f9fd;
    color: #2596be;
    font-weight: bold;
}
/* Checkbox styling */
.permissions-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
/* Save Changes Button */
.save-button {
    background-color: #2596be;
    color: white;
    font-size: 16px;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: block;
    margin: 20px auto;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.save-button:hover {
    background-color: #1e7ea8;
    transform: scale(1.05);
}
/* Popup Message */
.popup {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2596be;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 16px;
    display: none;
    z-index: 1000;
}
.popup.success { background-color: #4CAF50; }
.popup.error { background-color: #e74c3c; }
/*============================================================ Role Management (role_management.php) End */
/*================================================================================= AT&T Policy Page Start */
.policy-container {
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    margin-top: 20px;
    color: #333;
    font-size: 16px;
    line-height: 1.6;
}
.policy-meta {
    font-size: 14px;
    color: #777;
    margin-bottom: 15px;
    text-align: right;
}
.policy-greeting {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #222;
}
/* This .save-button is specifically for policy page, keeping separate for now */
.policy-container .save-button {
    padding: 10px 20px;
    background: #2596be;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
}
.policy-container .save-button:hover {
    background-color: #1e7fa3;
}
.policy-view {
    white-space: normal;
    color: black;
    font-size: 16px;
    line-height: 1.7;
    text-align:justify;
}
.policy-view h1,
.policy-view h2,
.policy-view h3 {
    color: #2596be;
    margin-top: 20px;
}
.policy-view p {
    margin-bottom: 15px;
}
/*================================================================================= AT&T Policy Page End */

/*================================================================================= Form Design and Table Start */
.performance-filter-form {
    background-color: #f9f9f9;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    justify-content: space-between;
}

.performance-filter-form .form-group {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    flex: 1;
}

.performance-filter-form .form-group label {
    font-weight: bold;
    margin-bottom: 5px;
}

.performance-filter-form .form-group input,
.performance-filter-form .form-group select {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    width: 100%;
}

.performance-filter-form .button-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.performance-filter-form .button-group button {
    padding: 8px 16px;
    background-color: #2596be;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.performance-filter-form .button-group button:hover {
    background-color: #1f7ea0;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.data-table th, .data-table td {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: center;
}
.data-table th {
    font-weight: 600;
}
.data-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Highlight CRM No. when profit is negative */
.highlight-loss {
    background-color: #f8d7da !important; /* light red */
    color: #000 !important;
}

/* Highlight Unconfirmed Amount if > 0 */
.highlight-unconfirmed {
    background-color: #fff3cd !important; /* light yellow */
    color: #000 !important;
}

/* Highlight if Sale and Purchase both 0 */
.highlight-zero-sale-purchase {
    background-color: #fff3cd !important;
    color: #000 !important;
}

/* Highlight Balance Amount if not 0 */
.highlight-balance {
    background-color: #fff3cd !important;
    color: #000 !important;
}
.highlight-warning {
    background-color: #fff9c4; /* Light yellow */
    color: #000;
}

/*================================================================================= Form Design and Table End */


/*================================================================================= Setting Page Start */
.form-section {
    background-color: #fff;
    padding: 20px;
    margin-top: 20px;
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    width: 90%;
    margin-right: auto;
    overflow-x: hidden;
    max-width: 100%;
    flex: 1;
    margin-left: 5%;
    flex-grow: 1;
    overflow-y: auto;
    min-height: 100vh;
    box-sizing: border-box;
}
.form-section h2 {
    margin-top: 30px;
    color: #2596be;
    font-size: 20px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 5px;
}
.form-row {
    display: flex;
    flex-wrap: wrap;
}
.form-group {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    padding:20px;
}
.form-group.full {
    flex: 1 1 100%;
}
.form-group label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}
/* The following styles for setting page form group inputs/selects will be overridden by the more general ones above.
   If you need specific styling for setting page that differs from the default, you would add them here
   with higher specificity or `!important`. For now, they inherit the new default. */
/*
.form-group input,
.form-group select {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    transition: border-color 0.3s;
    font-size: 14px;
}
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #2596be;
}
*/
.submit-row {
    text-align: center;
    margin-top: 30px;
}
/*================================================================================= Setting Page End */
/*--------------------------------------------------------------------------------------
                               Common Layout and Elements
---------------------------------------------------------------------------------------*/
/* Make the main container take full height */
.main-content {
    display: flex;
    min-height: 93vh; /* Adjust for header/footer */
    width: 100%;
    flex-direction: row; /* Default for desktop */
}
.category-header {
    background-color: #2596be;
    color: white;
    padding: 10px 20px;
    margin: 10px 0;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px; /* Default desktop font size */
}
.category-header .icon {
    font-size: 22px;
    font-weight: bold;
}
.expanded {
    max-height: auto; /* large enough for content */
    opacity: 1;
    transition: max-height 0.5s ease, opacity 0.4s ease;
    overflow: hidden;
}
.collapsed {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.4s ease;
    overflow: hidden;
}
.search-bar {
    width: 300px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 15px;
}
.top-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 10px;
    flex-wrap: wrap;
}
.hidden { display: none !important; }

body.sidebar-collapsed .content {
  margin-left: 0 !important;
  width: 100% !important;
  transition: margin-left 0.3s ease, width 0.3s ease;
}

body.sidebar-collapsed .main-content {
  margin-left: 0 !important;
  width: 100% !important;
}
/* Performance Dashboard Layout */
.dashboard-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    margin-top: 20px;
}

.dashboard-box {
    flex: 1 1 calc(33.333% - 20px); /* 3 boxes per row */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 15px;
    box-sizing: border-box;
    min-width: 250px;
}

.dashboard-box h3 {
    font-size: 16px;
    margin-bottom: 10px;
    text-align: center;
}

.dashboard-box canvas {
    width: 100% !important;
    height: 180px !important;
    max-height: 180px;
    display: block;
    margin: 0 auto;
}

.dashboard-box p {
    text-align: center;
    font-size: 14px;
    margin-top: 10px;
}

/*------------------------------------------------------------------------- Leave Management*/
.leave-balance { text-align: center; }
.leave-balance h2 { margin-top: 20px; color: #333; }
.leave-buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
/* .leave-button is now part of common button styling */
.earned-leave { background-color: #28a745; /* Green */ }
.half-pay-leave { background-color: #ffc107; /* Yellow */ color: #000; }
/* Input field styling */
input.form-control { background-color: #f9f9f9; }
input.form-control:focus { background-color: #fff; }
/* Submit button styling */
.submit-row { text-align: center; margin-top: 20px; }
/*---------------------------------------------------------------------pagination design*/
.pagination { margin-top: 20px; text-align: center; }
.pagination a { display: inline-block; padding: 8px 12px; margin: 0 2px; background: #2596be; color: white; border-radius: 4px; text-decoration: none; }
.pagination a.active { background: #1d6b8b; font-weight: bold; }
.pagination a:hover { background: #1b5a70; }
/* Create User Button in Manage User */
.manage-users-header { display: flex; justify-content: center; align-items: center; padding: 10px 0; margin: 0; position: relative; }
/* Align Create User Button to the Right */
.manage-users-header .btn-create-user { position: absolute; right: 0; /* Positions the button on the right */
    padding: 10px 20px; background-color: #2596be; color: white; font-size: 16px; font-weight: bold; text-decoration: none; border-radius: 5px; transition: background-color 0.3s ease; }
.btn-create-user:hover { background-color: #1f7a9d; }
.btn-create-user:focus, .btn-create-user:active { background-color: #1f7a9d; outline: none; }
.filter-section { display: flex; /*flex-wrap: wrap;*/ gap: 10px; justify-content: center; /*margin-bottom: 20px;*/ }
.export-buttons { display: flex; justify-content: center; gap: 20px; margin: 20px 0; }
.export-buttons form button { padding: 8px 16px; background-color: #2596be; color: white; border: none; border-radius: 5px; cursor: pointer; }
.export-buttons form button:hover { background-color: #1e7ca8; }
.table-container table { width: 100%; border-collapse: collapse; }
.table-container th, .table-container td { padding: 10px; border: 1px solid #ccc; text-align: center; }
.no-records { text-align: center; font-weight: bold; padding: 20px; color: #999; }
.ui-datepicker-trigger { margin-left: 5px; vertical-align: middle; cursor: pointer; }
/* Attendance Report Design (consolidated common styles) */
.filter-form { /*display: flex; flex-wrap: wrap;*/ flex-direction: row; align-items: center; align-items: flex-start; margin-bottom: 1px; margin-top: 50px; width: 90%; margin-left: 5%; margin-right: 5%; }
.filter-form label { font-weight: bold; }
.filter-form .form-row {display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end;}
.filter-form .form-group { flex: 1; min-width: 15%; display: flex; flex-direction: column; gap:10px; }
.filter-button { background-color: #2596be; color: white; border: none; }
.excel-button { background-color: green; color: white; text-decoration: none; }
/* Leave Balance & Buttons (consolidated common styles) */
.leave-balance h2 { margin-bottom: 10px; }
.leave-buttons { display: flex; gap: 20px; margin-bottom: 30px; }
/* .leave-button is now included in the common button styling */
.earned-leave { background-color: green; }
.half-pay-leave { background-color: goldenrod; }

/*================================================================================== Responsive Design Suites ==*/


/*================================================================================== Responsive Design Suites ==*/
/*========================================================== Media Query: max-width: 991px (Larger Tablets & Landscape Phones) ==========================================================*/
@media (max-width: 991px) {
  /* Global Adjustments */
  body { padding-top: 60px; /* Adjust for potential header height changes */ }
  /* Header Adjustments */
  header { flex-direction: column; padding: 10px; padding-left: 10px; /* Reduce padding when logo moves */ min-height: 60px; }
  .logo { justify-content: center; margin-bottom: 5px; padding-left: 0; }
  .company-name { font-size: 18px; margin-left: 0; }
  .greeting { font-size: 16px; text-align: center; }
  /* Sidebar Adjustments */
  .sidebar { width: 250px; transform: translateX(-100%); /* Hidden by default on mobile */ }
  .sidebar.open { transform: translateX(0); /* Shown when toggled */ }
  .sidebar-toggle-btn.desktop-only { display: none; } /* Hide desktop toggle */
  .sidebar-toggle-btn.mobile-only { /* New Mobile Toggle */
    display: block;
    position: fixed;
    top: 44px;
    left: 0;
    z-index: 1100;
    background-color: #2596be;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
  }
  .sidebar .close-btn { /* Close button inside sidebar for mobile */
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
  }
  /* Content Layout Adjustments */
  .content { margin-left: 0; padding: 15px; } /* Content takes full width */
  /* Typography Adjustments */
  h1 { font-size: 24px; margin-top: 60px; }
  h2 { font-size: 22px; margin-top: 40px; }
  h3 { font-size: 18px; }
  h4 { font-size: 16px; }
  h5 { font-size: 14px; }
  h6 { font-size: 12px; }
  p, p1 { font-size: 13px; }
  /* Table Adjustments */
  table { width: 100%; }
  table th, table td { font-size: 14px; padding: 8px; }
  .attendance-table th, .attendance-table td { font-size: 12px; padding: 6px; }
  /* Form Adjustments (General for all forms) */
  .filter-section,
  .form-section {
    flex-direction: column; /* Stack elements vertically on small screens */
    align-items: stretch; /* Stretch to fill width */
    gap: 15px; /* Adjust gap for smaller screens */
  }
  .filter-group,
  .form-group {
    min-width: unset; /* Remove min-width constraint on small screens */
    width: 100%; /* Ensure full width */
    padding: 10px; /* Adjust padding for form groups */
  }
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="number"],
  input[type="search"],
  input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
  select {
      width: 100%; /* Make them full width on small screens */
      font-size: 14px; /* Slightly reduce font size for smaller screens */
      padding: 8px 10px; /* Adjust padding for smaller screens */
  }
  /* Employee Card Adjustments */
  .card-container { justify-content: center; }
  .employee-card { width: calc(50% - 15px); /* Two cards per row */ }
  /* View Employee Page Adjustments */
  .employee-img { margin-left: auto; margin-right: auto; }
  .employee-info-table th, .employee-info-table td { font-size: 13px; padding: 10px; }
  .form-actions { flex-direction: column; gap: 10px; }
  .btn-edit, .btn-delete { width: 100%; margin-left: 0; }
  .toggle-btn { margin-left: auto; margin-right: auto; }
  /* Role Management Table Adjustments */
  .permissions-table th, .permissions-table td { font-size: 13px; padding: 8px; }
  /* Attendance Report */
  .filter-form { width: 100%; margin-left: 0; margin-right: 0; }
  .filter-form .form-row { flex-direction: column; gap: 10px; align-items: stretch; }
  .filter-form .form-group { width: 100%; }
}
/* Responsive for Tablet and Mobile */
@media (max-width: 991px) {
    .dashboard-box {
        flex: 1 1 calc(50% - 20px); /* 2 per row */
    }
}
/*========================================================== Media Query: max-width: 768px (Smaller Tablets & Mobile Phones) ==========================================================*/
@media (max-width: 768px) {
  /* Global Adjustments */
  body { padding-top: 50px; }
  /* Header Adjustments */
  header { padding: 8px 10px; min-height: 50px; }
  .logo img { width: 60px; }
  .company-name { font-size: 16px; }
  .greeting { font-size: 14px; }
  /* Sidebar Adjustments */
  .sidebar { width: 220px; }
  .sidebar a, .sidebar .menu-title { font-size: 16px; padding: 8px; }
  .sidebar .submenu li a { font-size: 14px; padding: 8px; width: auto; }
  .sidebar .logout a { padding: 12px; margin-left: 15px; }
  /* Content Layout Adjustments */
  .content { padding: 10px; }
  /* Typography Adjustments */
  h1 { font-size: 20px; margin-top: 50px; }
  h2 { font-size: 18px; margin-top: 30px; }
  h3 { font-size: 16px; }
  h4 { font-size: 14px; }
  h5 { font-size: 13px; }
  h6 { font-size: 11px; }
  p, p1 { font-size: 12px; }
  /* Table Adjustments */
  table th, table td { font-size: 12px; padding: 6px; }
  .attendance-table th, .attendance-table td { font-size: 10px; padding: 4px; }
  /* Form Adjustments */
  .create_users .form-section { padding: 15px; }
  .create_users .form-section h2 { font-size: 18px; }
  .create_users .form-group { padding: 10px; }
  .create_users button[type="submit"] { padding: 10px 20px; font-size: 14px; }
  .employee-card { width: 100%; } /* One card per row on very small screens */
  .view-more-btn { padding: 10px 20px; font-size: 14px; }
  .badge { font-size: 10px; padding: 3px 8px; }
  .employee-info-table th, .employee-info-table td { font-size: 12px; padding: 8px; }
  .btn-edit, .btn-delete { padding: 10px 20px; font-size: 14px; }
  .toggle-btn { width: 40px; height: 20px; }
  .slider:before { height: 16px; width: 16px; left: 2px; bottom: 2px; }
  .toggle-btn input:checked + .slider:before { transform: translateX(20px); }
  .status-label { font-size: 12px; }
  .permissions-table th, .permissions-table td { font-size: 11px; padding: 6px; }
  .permissions-table input[type="checkbox"] { width: 16px; height: 16px; }
  .save-button { padding: 10px 20px; font-size: 14px; }
  .popup { font-size: 14px; padding: 8px 15px; }
  .policy-container { padding: 15px; font-size: 14px; }
  .policy-meta { font-size: 12px; }
  .policy-greeting { font-size: 14px; }
  .policy-container .save-button { padding: 8px 15px; font-size: 13px; }
  .policy-view { font-size: 14px; }
  .form-section { padding: 15px; }
  .form-section h2 { font-size: 18px; }
  .form-group { padding: 10px; }
  .search-bar { width: 100%; }
  .top-controls { flex-direction: column; align-items: stretch; gap: 10px; }
  .pagination a { padding: 6px 10px; font-size: 12px; }
  .manage-users-header { flex-direction: column; align-items: stretch; }
  .manage-users-header .btn-create-user { position: static; width: 100%; margin-top: 10px; }
  .filter-form .form-group { min-width: unset; width: 100%; }
}
/*========================================================== Media Query: max-width: 600px (Small Mobile Phones) ==========================================================*/
@media (max-width: 600px) {
    .dashboard-box {
        flex: 1 1 100%; /* Full width on mobile */
    }
}
/*========================================================== Media Query: max-width: 480px (Small Mobile Phones) ==========================================================*/
@media (max-width: 480px) {
  /* Global Adjustments */
  body { padding-top: 45px; }
  /* Header Adjustments */
  header { padding: 5px 8px; min-height: 70px; }
  .logo img { width: 50px; }
  .company-name { font-size: 16px; margin-left:35px;}
  .greeting { font-size: 12px; }
  /* Sidebar Adjustments */
  .sidebar { width: 200px; }
  .sidebar a, .sidebar .menu-title { font-size: 14px; padding: 6px; }
  .sidebar .submenu li a { font-size: 12px; padding: 6px; }
  .sidebar .logout a { padding: 10px; margin-left: 10px; }
  /* Content Layout Adjustments */
  .content { padding: 5px; }
  /* Typography Adjustments */
  h1 { font-size: 18px; margin-top: 40px; }
  h2 { font-size: 16px; margin-top: 20px; }
  h3 { font-size: 14px; }
  h4 { font-size: 13px; }
  h5 { font-size: 12px; }
  h6 { font-size: 10px; }
  p, p1 { font-size: 11px; }
  /* Table Adjustments */
  table th, table td { font-size: 10px; padding: 4px; }
  .attendance-table th, .attendance-table td { font-size: 9px; padding: 3px; }
  /* Form Adjustments */
  .create_users .form-section { padding: 10px; }
  .create_users .form-section h2 { font-size: 16px; }
  .create_users .form-group { padding: 5px; }
  .create_users button[type="submit"] { padding: 8px 15px; font-size: 12px; }
  .employee-card { padding: 15px; }
  .employee-card img { width: 80px; height: 100px; }
  .employee-card h3 { font-size: 1rem; }
  .employee-card p { font-size: 0.85rem; }
  .view-more-btn { padding: 8px 15px; font-size: 12px; }
  .badge { font-size: 9px; padding: 2px 6px; }
  .employee-info-table th, .employee-info-table td { font-size: 10px; padding: 6px; }
  .btn-edit, .btn-delete { padding: 8px 15px; font-size: 12px; }
  .toggle-btn { width: 35px; height: 18px; }
  .slider:before { height: 14px; width: 14px; left: 2px; bottom: 2px; }
  .toggle-btn input:checked + .slider:before { transform: translateX(16px); }
  .status-label { font-size: 10px; }
  .permissions-table th, .permissions-table td { font-size: 10px; padding: 4px; }
  .permissions-table input[type="checkbox"] { width: 14px; height: 14px; }
  .save-button { padding: 8px 15px; font-size: 12px; }
  .popup { font-size: 12px; padding: 6px 12px; }
  .policy-container { padding: 10px; font-size: 12px; }
  .policy-meta { font-size: 10px; }
  .policy-greeting { font-size: 12px; }
  .policy-container .save-button { padding: 6px 12px; font-size: 11px; }
  .policy-view { font-size: 12px; }
  .form-section { padding: 10px; }
  .form-section h2 { font-size: 16px; }
  .form-group { padding: 5px; }
  .pagination a { padding: 4px 8px; font-size: 10px; }
  .manage-users-header .btn-create-user { padding: 8px 15px; font-size: 12px; }
  .filter-form .form-group { min-width: unset; width: 100%; }
}