/* 2) Then target every placeholder pseudo-element globally */


	label.required::after {
  content: ' *';
  color: red;
  font-weight: bold;
  margin-left: 2px;
}

	
/* Tooltip styles */
.tooltip {
  display: inline-block;
  position: relative;
  cursor: help;
  color: #2B6CB0;
  margin-left: 0px;

	vertical-align : top;
 
}
.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-10%);
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 5px 8px;
  border-radius: 4px;
 width : 250px!important;
	

  z-index: 100;
}


	
	/* Eye-catching toggle */
.toggle-link { background:#ff0;color:#000;padding:4px 4px;border-radius:2px;display:inline-block;font-weight:bold;text-decoration:none;font-size:14px!important;}

	
	
.container {
    display: flex;
    flex-wrap: wrap; /* Allows containers to wrap on smaller screens */
    width: 100%;
}

/* Left Container */
.left-container {
 min-width : 320px!important;
    flex: 1; /* Allows it to expand */
    padding: 7px;
    
	width : 65%!important;

  font-weight: bold;
	
}

.right-container {

  font-weight: bold;
	width : 35%!important;
	    padding: 7px;
	min-width : 320px!important;
	
}


	.srd-blocks {
 
  padding: 15px;
  border-radius: 8px;
  /* black inset shadow */
  box-shadow: inset 1px 1px 1px 1px ;
  margin-top: 8px;
  margin-bottom: 10px;
		min-width : 320px!important;
}

   
	
	
}

/* Work Done Form */
.work-done-form {
  
    gap: 5px;
    align-items: center;
}

.work-done-form input
	
	{
    padding: 5px;
   
}

 .work-fees, .work-paid, .work-mode, .work-doctor {
    width: 19%;
}

	.work-date, .work-time {
		 width: 15%;
	}	
.work-done {
    width: 80%;
}



	


	
	
	
/* Work History Table */
.work-history {
    width: 98%!important; /* Ensures table occupies full left container width */
    border-collapse: collapse;
	
}





/* Allow columns to have width based on content */
.work-history th:nth-child(1),
.work-history td:nth-child(1) {
   
	 width: 16%!important; /* Allows Work Done column to expand naturally */
    white-space: normal; /* Allows multi-line wrapping if necessary */
}

.work-history th:nth-child(2),
.work-history td:nth-child(2) {
    width: auto; /* Allows Work Done column to expand naturally */
    white-space: normal; /* Allows multi-line wrapping if necessary */
}

.work-history th:nth-child(3),
.work-history td:nth-child(3) {
    width: 10%;
}

.work-history th:nth-child(4),
.work-history td:nth-child(4),
.work-history th:nth-child(5),
.work-history td:nth-child(5) {
    width: 10%!important;
}

	
	
	
	/* Image Upload & Display */
.image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.image-preview img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border: 1px solid #ccc;
    padding: 5px;
    background-color: white;
	
	
	
	
}

	
	


.work-button {
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    white-space: nowrap; /* Prevent text wrapping */
    flex: 1; /* Make buttons share equal space */
	min-width: 75px; /* Maintain a minimum width */
   max-width:  200px;
     margin: 2px 2px 0px 0px;    /* 4px top/bottom, 8px right, 0 left */
   text-align: center;
   padding: 4px 6px  ; /* Reduce padding for smaller screens */
    text-align: left;
	font-size: 25px;
	font-weight  :bold;
	 text-decoration: none;
    color: white;
}
	
	

	
	



/* 0) Ensure your global base font is 25px */
body {
  font-size: 25px;
}

/* Chrome, Safari, Opera */
::-webkit-input-placeholder {
  font-size : 20px;
}
	

/* 1) Container for horizontal scroll + shadow */
.table-container {
  overflow-x: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  margin-bottom: 1em;
	
	table-layout: auto;
  width: 100%; /* or whatever your container width is */
}

/* 2) Detached borders for rounded corners */
.table-container table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
	
}

/* 3) Header styling */
.table-container th {
  background-color: #2B6CB0;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;

  letter-spacing: 0.05em;
}

/* 4) Body cells */
.table-container td {
 padding: 6px 8px;
  color: #333;
  /* remove duplicate border-bottom if you don't want it */
  /* border-bottom: none; */



  /* allow wrapping once 200px is hit */
  white-space: normal;          /* permit wrapping at spaces */
  overflow-wrap: break-word;    /* wrap long words/URLs */
	
}


/* specifically target form controls */
.table-container td input,
.table-container td select,
.table-container td textarea,
.table-container td button {
  width: 100%;              /* fill the full width of the cell */
  box-sizing: border-box;   /* ensure padding doesn’t push it over */
}

/* 5) Zebra striping */
.table-container tr:nth-child(even) td {
  background-color: #f9f9f9;
}

/* 6) Hover highlight */
.table-container tr:hover td {
  background-color: #eef6ff;
  transition: background-color 0.3s ease;
}

/* 7) Links in cells */
.table-container td a {
  color: #2B6CB0;
  text-decoration: none;
  font-weight: 700;
	 
}
.table-container td a:hover {
  color: #0056b3;
  text-decoration: underline;
}	


/* 1) Give every cell a subtle blue border */
.table-container th,
.table-container td {
  border: 1px solid rgba(43, 108, 176, 0.15); /* 43,108,176 is #2B6CB0 */
	 min-width: 25px;
	 width: auto;          /* shrink‐to‐fit */
  max-width: 150px;     /* cap at 150px */

}


	@media (min-width: 1000px) and (max-width: 1500px) {

  	    
	table th,
table td,
.work-button,
body {
  font-size: 14px;
}

		
		::-webkit-input-placeholder {
  font-size : 13px;
}


		
  .work-button , .work-doctor, .work-date, .work-time, .next-app, .next-slot, .next-color {
    

   		min-width: 40px; /* Maintain a minimum width */
    
  }
		
		/* Left Container */
.left-container {

   


	
}




		
		
}
@media (min-width: 401px) and (max-width: 1001px) {
    
  	    
	table th,
table td,
.work-button,
body {
  font-size: 12px;
}
	
			::-webkit-input-placeholder {
  font-size : 10px;
}
	
  .work-button , .work-doctor, .work-date, .work-time, .next-app, .next-slot, .next-color {
    
	  
	   min-width: 25px; /* Maintain a minimum width */
  
   	
    

  
  }



	
}
	/*  styling to make add workdone multipe rows for mobile devices */
	@media (max-width: 400px) {
	    
	table th,
table td,
.work-button,
body {
  font-size: 14px;
	 
}

		
				::-webkit-input-placeholder {
  font-size : 11px;
}
	
		.srd-blocks {
  width: 100%; /* expand to full width of parent */
  padding: 5px;
  border-radius: 4px;
  /* black inset shadow */
  box-shadow: inset 1px 1px 1px 1px ;
  margin-top: 2px;
  margin-bottom: 2px;
		min-width : 320px!important;
}
	
		
		  button.edit-button,
  button.calendar-button {
    display: none !important;
  }
		
		


		

		
		
		
 /* Update buttons to appear on the same row */
    .work-button,
.upload-button {
  /* Use inline-block so width matches text */
  display: inline-block !important;

  /* Tight padding around the text */
  padding: 2px 3px !important;

  /* Small font for mobile */
 

  /* Let button shrink to its content */
  width: auto !important;
  min-width: 0 !important;

  /* Small gap to next button, both horizontally and vertically */
  margin: 0px 0px 0px 0px !important;


 

  border-radius: 2px;

 
  white-space: nowrap;
}



    
.work-done {
    width: 78%;
}
    .work-fees, .work-paid, .work-doctor {
    width: 28%;
	
}
		
		     .work-mode {
    width: 20%;
	
}
		
		.work-time{
			width: 15%;
			
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add '...' if text overflows */
    padding: 1px; /* Reduce padding to fit more text */
		}
   .work-date{
    width: 15%;
    
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add '...' if text overflows */
    padding: 1px; /* Reduce padding to fit more text */
}

	  .work-doctor, 
		.next-app,
		.next-slot,
		.next-color
		
		{
			display: block;       /* forces each onto its own row */
    width: 50%;
   
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add '...' if text overflows */
    padding: 1px; /* Reduce padding to fit more text */
}	
	}
		/* end of small screen
	
	
	

/* Hover effect */
.work-button:hover {
    background-color: #0056b3; /* Darker blue */
}



	/* styling to balance and total amounts */
.work-summary {
    display: flex;
    gap: 20px; /* Adjust spacing as needed */
    align-items: center;
}
.work-summary p {
    margin: 0; /* Remove default margins */
    padding: 0 10px;
}




	
.manual-feed-wrapper {
  display: grid;
  gap: 2rem;
  max-width: 95%;
  margin: 0 auto;
  padding: 2rem 1rem;
  font-family: 'Segoe UI', Roboto, sans-serif;
}

.manual-feed-post {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.manual-feed-post:hover {
  transform: translateY(-4px);
}

.manual-feed-post .post-title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: #2d3748;
}

.manual-feed-post .post-title a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}

.manual-feed-post .post-title a:hover {
  color: #3182ce;
}

.manual-feed-post .post-content {
  font-size: 1rem;
  color: #4a5568;
  line-height: 1.6;
}