/**
 * Standardized WordPress Plugin Stylesheet
 * 
 * This stylesheet organizes and standardizes all components into logical sections:
 * 1. Variables (Colors, Sizes, etc.)
 * 2. Layout & Structure
 * 3. Tables
 * 4. Buttons & Controls
 * 5. Forms
 * 6. Modals & Popups
 * 7. Special Components
 * 8. Utilities
 * 9. Responsive Styles
 */

/* ------------------------------
   1. Variables
   ------------------------------ */
   :root {
	/* Color Palette */
	--primary-color: #4CAF50;
	--primary-dark: #3e8e41;
	--secondary-color: #007bff;
	--secondary-dark: #0056b3;
	--danger-color: #f44336;
	--warning-color: orange;
	--success-color: #89FD8B;
	--info-color: #91DDFE;
	--light-color: #f2f2f2;
	--border-color: #ccc;
	--text-color: #333;
	--text-light: #555;
	--text-inverse: #ffffff;
	
	/* Status Colors */
	--status-sent: #FEFE9F;       /* Yellow */
	--status-received: orange;    /* Orange */
	--status-complete: #91DDFE;   /* Blue */
	--status-invoice-sent: #89FD8B; /* Green */
	--status-invoice-paid: #6a0dad; /* Purple */
	--status-invoice-overdue: #ff0000; /* Red */
	
	/* Spacing */
	--spacing-xs: 5px;
	--spacing-sm: 10px;
	--spacing-md: 15px;
	--spacing-lg: 20px;
	--spacing-xl: 30px;
	
	/* Border Radius */
	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--border-radius-lg: 15px;
	
	/* Box Shadow */
	--box-shadow-default: 0 2px 4px rgba(0,0,0,0.1);
	--box-shadow-elevated: 0 4px 8px rgba(0,0,0,0.2);
  }
  
  /* ------------------------------
	 2. Layout & Structure
	 ------------------------------ */
  .da-company-list {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
  }
  
  .da-company-list-row {
	display: flex;
	width: 100%;
	max-width: 100%;
	border-bottom: 1px solid var(--border-color);
	background-color: var(--light-color);
	position: relative; /* <-- Add this line */
  }

  
  .da-company-list-cell {
	flex: 1;
	flex-basis: 150px;
	padding: var(--spacing-sm);
	border-right: 1px solid var(--border-color);
  }
  
  .da-company-list-cell:first-child {
	display: flex;
	align-items: center;
  }
  
  /* Fix for the :has() selector that's causing errors */
  .da-company-list-cell.with-arrow {
	padding-left: 20px;
	color: var(--text-light);
  }
  
  .da-company-list-header {
	font-weight: bold;
	background-color: var(--border-color);
  }
  
  .da-company-list-color {
	background-color: var(--text-inverse);
  }
  
  .da-company-list-color-white {
	color: var(--text-inverse);
	font-weight: 700;
  }
  
  .form-row {
	margin-bottom: var(--spacing-sm);
  }
  
  /* Foldable container components */
  .da-company-list .foldable-container {
	display: flex;
	justify-content: space-around;
  }
  
  .da-company-list .foldable-box {
	margin: var(--spacing-sm);
	border: 1px solid #ddd;
	width: calc(50% - 20px);
  }
  
  .da-company-list .foldable-content {
	display: none;
	padding: var(--spacing-sm);
  }
  
  .da-company-list .foldable-toggle {
	display: none;
  }
  
  .da-company-list .foldable-toggle:checked + .foldable-label + .foldable-content {
	display: block;
  }
  
  .da-company-list .foldable-label {
	display: block;
	padding: var(--spacing-sm);
	cursor: pointer;
	background-color: #f1f1f1;
	margin-bottom: var(--spacing-xs);
  }
  
  /* Header content layout */
  .invoice-title, 
  .da-search-form {
	display: inline-block;
	vertical-align: top;
  }
  
  .da-search-form {
	float: right;
  }
  
  /* ------------------------------
	 3. Tables
	 ------------------------------ */
  /* Standard Table */
  .custom-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	overflow: visible;
  }
  
  .custom-table th, 
  .custom-table td {
	padding: var(--spacing-xs) var(--spacing-sm);
	box-sizing: border-box;
  }
  
  .custom-table-left {
	text-align: left;
  }
  
  .custom-table-center {
	text-align: center;
  }
  
  .custom-table tr:nth-child(even) {
	background-color: var(--light-color);
  }
  
  .custom-table tr:hover {
	background-color: #ddd;
  }
  
  .custom-table th {
	background-color: var(--primary-color);
	color: var(--text-inverse);
  }
  
  .title-row {
	height: 170px;
  }
  
  .vertical {
	transform: rotate(-90deg);
	transform-origin: center;
	display: block;
	white-space: nowrap;
	text-align: left;
	line-height: normal;
	margin-top: 100px;
  }
  
  .table_vertical_width {
	width: 43px;
  }
  
  .da_field_column {
	width: 150px;
	text-align: center;
  }
  
  .fixed-width-cell {
	width: 50px;
	text-align: center;
  }
  
  .center_selected_row_text {
	text-align: center;
  }
  
  /* ------------------------------
	 4. Buttons & Controls
	 ------------------------------ */
  .da-edit-button,
  .da-delete-button,
  .pay-button,
  .da-view-completed-button {
	display: inline-block;
	padding: 0.375rem 0.75rem;
	margin: var(--spacing-xs);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 0.25rem;
	color: var(--text-inverse);
	transition: color 0.15s ease-in-out, 
				background-color 0.15s ease-in-out,
				border-color 0.15s ease-in-out, 
				box-shadow 0.15s ease-in-out;
  }
  
  .da-edit-button {
	background-color: var(--primary-color);
	border-color: var(--primary-dark);
  }
  
  .da-delete-button {
	background-color: var(--danger-color);
	border-color: #dc3545;
  }
  
  .da-view-completed-button {
	background-color: #17a2b8;
	border-color: #138496;
  }
  
  .pay-button {
	display: block;
	width: 100%;
	padding: 0.5rem 1rem;
	background-color: var(--secondary-color);
	border-color: var(--secondary-dark);
	border-radius: var(--border-radius-sm);
	font-size: 1rem;
  }
  
  .da-edit-button:hover,
  .da-view-completed-button:hover {
	background-color: var(--primary-dark);
	border-color: #2e6da4;
	box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
  }
  
  .da-delete-button:hover {
	background-color: #c82333;
	border-color: #bd2130;
	box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.25);
  }
  
  .pay-button:hover {
	background-color: var(--secondary-dark);
	border-color: #0056b3;
  }
  
  .da-edit-button:focus,
  .da-delete-button:focus,
  .da-view-completed-button:focus,
  .pay-button:focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }
  
  .da-edit-button:active,
  .da-delete-button:active,
  .da-view-completed-button:active,
  .pay-button:active {
	transform: translateY(1px);
  }
  
  .duplicate-button {
	display: inline-block;
	padding: 10px 15px;
	background-color: #28a745;
	color: white;
	border-radius: 0.25rem;
	border: 1px solid #1e7e34;
	cursor: pointer;
	text-decoration: none;
	font-weight: 400;
	text-align: center;
	transition: background-color 0.15s ease-in-out,
				border-color 0.15s ease-in-out;
  }
  
  .duplicate-button:hover {
	background-color: #218838;
	border-color: #1c7430;
  }
  
  .duplicate-button:focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
  }
  
  .amend-buttons {
	flex-basis: 150px;
  }
  
  /* ------------------------------
	 5. Forms
	 ------------------------------ */
  .full-width-textarea {
	width: 100%;
	box-sizing: border-box;
  }
  
  /* Form expansion */
  .da-edit-form {
	display: none;
  }
  
  .da-expand-form {
	display: block;
  }
  
  /* File uploads */
  .file-input-container {
	margin-bottom: var(--spacing-lg);
  }
  
  .image-container {
	margin-bottom: var(--spacing-lg);
  }
  
  .image-container img {
	display: block;
	margin-top: var(--spacing-sm);
  }
  
  #invoice_factoring.error {
	border: 2px solid var(--danger-color);
	background-color: #fff0f0;
  }
  
  /* ------------------------------
	 6. Modals & Popups
	 ------------------------------ */
  .modal,
  .da_overdue_invoice_message_modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.4);
  }
  
  .modal-content,
  .da_overdue_invoice_message_modal_content {
	background-color: #fefefe;
	margin: 15% auto;
	padding: var(--spacing-lg);
	border: 1px solid #888;
	border-radius: var(--border-radius-md);
	position: relative;
	text-align: left;
  }
  
  .modal-content {
	width: 80%;
	max-width: 600px;
  }
  
  .da_overdue_invoice_message_modal_content {
	width: 600px;
  }
  
  .close-modal,
  .da_overdue_invoice_message_close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
  }
  
  .close-modal:hover,
  .da_overdue_invoice_message_close:hover,
  .close-modal:focus,
  .da_overdue_invoice_message_close:focus {
	color: black;
	text-decoration: none;
  }
  
  /* ------------------------------
	 7. Special Components
	 ------------------------------ */
  /* Company Details */
  .company-details {
	max-width: 600px;
	margin: var(--spacing-lg) auto;
	padding: var(--spacing-lg);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	background-color: #f9f9f9;
	box-shadow: var(--box-shadow-default);
  }
  
  .company-details h2 {
	color: var(--text-color);
	margin-bottom: 16px;
  }
  
  .company-details ul {
	list-style: none;
	padding: 0;
	margin-bottom: var(--spacing-lg);
  }
  
  .company-details ul li {
	padding: 8px 0;
	border-bottom: 1px solid #eee;
  }
  
  .company-details ul li:last-child {
	border-bottom: none;
  }
  
  .company-details ul li strong {
	color: var(--text-light);
  }
  
  .overdue-comment-layout {
	margin: var(--spacing-xl) var(--spacing-lg) var(--spacing-xl) var(--spacing-lg);
  }
  
  /* Planner Views */
  .planner-month-view, 
  .planner-week-view, 
  .planner-day-view {
	width: 100%;
	border-collapse: collapse;
  }
  
  .planner-month-view th, 
  .planner-month-view td,
  .planner-week-view th, 
  .planner-week-view td,
  .planner-day-view th, 
  .planner-day-view td {
	border: 1px solid var(--border-color);
	text-align: center;
	vertical-align: top;
  }
  
  .planner-month-view th, 
  .planner-week-view th, 
  .planner-day-view th {
	background-color: var(--light-color);
	padding: 0.5em;
  }
  
  .planner-month-view td.empty, 
  .planner-week-view td.empty, 
  .planner-day-view td.empty {
	background-color: #e9e9e9;
  }
  
  .event {
	padding: var(--spacing-xs);
	margin-top: 1px;
	margin-bottom: 3px;
	display: block;
	background-color: var(--secondary-color);
	color: var(--text-inverse);
	position: relative;
  }
  
  .message {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background-color: #fffbe6;
	color: black;
	border: 1px solid var(--border-color);
	padding: var(--spacing-xs);
	z-index: 10;
  }
  
  .event:hover .message {
	display: block;
  }
  
  /* Custom List Styles */
  .custom-bullet-list {
	list-style-type: disc;
	padding-left: var(--spacing-lg);
  }
  
  /* Document Icons */
  .document-icon {
	cursor: pointer;
	color: var(--secondary-color);
  }
  
  /* ------------------------------
	 8. Status Rows & Colors
	 ------------------------------ */
  /* Row Status Colors */
  .da-company-list-row-sent {
	background-color: var(--status-sent);
  }
  
  .da-company-list-row-received {
	background-color: var(--status-received);
  }
  
  .da-company-list-row-complete {
	background-color: var(--status-complete);
  }
  
  .da-company-list-row-invoice_sent {
	background-color: var(--status-invoice-sent);
  }
  
  .da-company-list-row-invoice_paid {
	background-color: var(--status-invoice-paid);
	color: var(--text-inverse);
  }
  
  .da-company-list-row-invoice_overdue {
	background-color: var(--status-invoice-overdue) !important;
	color: var(--text-inverse);
  }
  
  .paid-row {
	background-color: var(--status-complete);
  }
  
  /* Standard color rows */
  .red-row {
	background-color: var(--status-invoice-overdue);
	color: var(--text-inverse);
  }
  
  .orange-row {
	background-color: var(--status-received);
  }
  
  .blue-row {
	background-color: #2167ff;
	color: var(--text-inverse);
  }
  
  /* ------------------------------
	 9. Form Elements & Select Boxes
	 ------------------------------ */
  /* Fix for all select fields */
  select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.7em top 50% !important;
	background-size: 0.65em auto !important;
	padding-right: 1.5em !important;
  }
  
 /* Must select/add a value */ 
  .required::after {
	content: " *";
	color: red;
	font-weight: bold;
  }
  
  /* Apply specifically to the ChatGPT prompt dropdown */
  #docModal_\\d+ select, 
  .modal select, 
  .modal-content select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.7em top 50% !important;
	background-size: 0.65em auto !important;
	padding-right: 1.5em !important;
  }
  
  /* Fix to target the specialism dropdown specifically */
  select[id^="specialism_"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.7em top 50% !important;
	background-size: 0.65em auto !important;
	padding-right: 1.5em !important;
  }
  
  /* Hide default arrows in IE10+ */
  select::-ms-expand {
	display: none;
  }
  
  /* Tooltip styles */
  .tooltip {
	display: none !important;
  }
  
  .tooltip-container:hover .tooltip {
	display: block !important;
  }
  
  /* ------------------------------
	 10. Responsive Styles
	 ------------------------------ */
  @media (max-width: 600px) {
	.planner-month-view th, 
	.planner-month-view td,
	.planner-week-view th, 
	.planner-week-view td,
	.planner-day-view th, 
	.planner-day-view td {
	  padding: var(--spacing-sm);
	  font-size: 0.8em;
	}
	
	.da-company-list-cell {
	  flex-basis: 100px;
	  padding: var(--spacing-xs);
	}
	
	.da_overdue_invoice_message_modal_content {
	  width: 90%;
	}
  }

  @media screen and (max-width: 1024px) {
	/* On smaller screens, stack them vertically */
	.invoice-title {
	  margin-bottom: 10px !important;
	}
	
	/* Make the flex container stack vertically */
	.invoice-title + h2 {
	  text-align: center !important;
	  margin-bottom: 15px !important;
	}
  }

  /* Current & Future jobs Tab */
  .invoice-factored .da-company-list-cell:first-child {
    border-left: 4px solid #495966;
}
.da-company-list-row-invoice_factored {
    background-color: #495966;
    color: #ffffff;
}

/* Tab Styling */
.tabs-container {
    margin: 0 0 -1px 0; /* Changed from 20px 0 to create overlap */
    width: 100%;
}
.tab-buttons {
    display: flex;
    margin-bottom: 0;
    border-bottom: 1px solid #ccc;
    position: relative;
    z-index: 10; /* Added to ensure tabs appear above table */
}
.tab-button {
    padding: 10px 20px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-bottom: none;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 5px 5px 0 0;
}
.tab-button.active {
    background-color: white;
    border-bottom: 1px solid white;
    position: relative;
    bottom: -1px;
    font-weight: bold;
}
/* Tab Content Styling */
.tab-content {
    display: none;
    margin-top: 0; /* Added to remove any gap */
}
.tab-content.active {
    display: block;
}
a.tab-button.active {
    background-color: white;
    border-bottom: 1px solid white;
    position: relative;
    bottom: -1px;
    font-weight: bold;
    color: black; /* Optional: override blue link color */
    text-decoration: none;
}

/* Add these new styles */
.da-company-list-table-like {
    position: relative;
    z-index: 1;
    margin-top: 0;
}

/* Style Priced Rows */
.job-priced-tab::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background-color: #28a745; /* green tab */
	border-radius: 2px 0 0 2px;
}

.da-company-list-row-invoice_priced {
	background-color: #28a745; /* green tab */
}

/* Colour Menu & what they mean */
.job-status-legend {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 15px 0;
  }
  
  .legend-item {
	padding: 6px 12px;
	border-radius: 5px;
	font-weight: bold;
	color: #000;
	font-size: 14px;
	cursor: default;
	display: inline-flex;
	align-items: center;
	gap: 5px;
  }
  
  .legend-item.emailed { background-color: #fff9c4; }   /* Yellow */
  .legend-item.viewed { background-color: #ffb74d; }    /* Orange */
  .legend-item.completed { background-color: #81d4fa; } /* Blue */
  .legend-item.insurance { background-color: #a5d6a7; }  /* Green */
  .legend-item.paid { background-color: #8e24aa; color: white; } /* Purple */
  .legend-item.priced { background-color: #43a047; color: white; } /* Dark green */
  
  .overdue-button {
	display: inline-block;
	background-color: #d32f2f;
	color: #fff;
	padding: 10px 18px;
	border-radius: 5px;
	font-weight: bold;
	text-decoration: none;
	font-size: 14px;
	transition: background-color 0.2s ease-in-out;
  }