@import url('https://fonts.googleapis.com/css2?family=Hind:wght@400&display=swap');


:root {
    --background-primary: #1a2035;
    --background-secondary: #2a3149;
    --text-primary: #e1e1e1;
    --text-secondary: #a0a8c2;
    --accent-primary: #4a90e2;
    --accent-primary-hover: #5aa1f2;
    --border-color: #3a415a;
    --status-unhealthy: #e74c3c;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body {
    background-color: var(--background-primary);
    color: var(--text-primary);
    font-family: var(--font-family);
    margin: 0;
    height: 100vh;
    overflow: hidden;
}
.app-container {
    display: flex;
    height: 100%;
}
.sidebar {
    width: 320px;
    background-color: var(--background-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 1;
}
.main-content {
    flex-grow: 1;
    padding: 40px;
    overflow-y: auto;
    z-index: 1998;
    position: relative;
    transition: margin-left 0.4s
}
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.sidebar-header h2 {
    margin: 0;
    font-size: 20px;
    border: none;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 28px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}
.sidebar-filters {
    display: flex;
    padding: 10px 20px;
    gap: 10px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.filter-btn {
    flex-grow: 1;
    padding: 8px;
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
}
.filter-btn.active {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}
.job-list, .module-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
}

.job-list li:hover {
    background-color: var(--background-primary);
}

.job-options-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 10px;
}
.module-list li a {
    display: block;
    padding: 15px 20px;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}
.module-list li a:hover, .module-list li a.active {
    background-color: var(--background-primary);
}
.card {
    background-color: var(--background-secondary);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
}
label {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: bold;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="time"], input[type="password"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    background-color: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 16px;
    box-sizing: border-box; 
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--background-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0a8c2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px 30px 12px 12px;
    font-size: 16px;
    color: var(--text-primary);
    width: 100%;
}
.button-primary {
    display: block;
    width: 100%;
    background-color: var(--accent-primary);
    color: white;
    border: none;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.2s;
}
.button-primary:hover {
    background-color: var(--accent-primary-hover);
}
#inline-calendar {
    margin-bottom: 15px;
}
.flatpickr-calendar {
    border-radius: 6px;
    margin: 0 auto;
}
label[for="start-time"] {
    margin-top: 30px;
}
.map-container {
    position: relative;
    height: 400px;
    width: 100%;
    margin-bottom: 15px;
    background-color: var(--background-primary);
    border-radius: 6px;
}
#map {
    height: 100%;
    width: 100%;
    border-radius: 6px;
}
.controls {
    background-color: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 300;
    height: 44px;
    margin-top: 10px;
    margin-left: 10px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 300px;
    color: var(--text-primary);
}
.controls:focus {
    border-color: var(--accent-primary);
    outline: none;
}
.add-item-container {
    display: flex; gap: 10px; margin-top: 20px; align-items: center; 
}
#new-checklist-text {
    flex-grow: 1; margin-bottom: 0; 
}
.button-secondary {
    padding: 12px 20px; background-color: var(--background-primary); border: 1px solid var(--border-color); color: var(--text-secondary);
    border-radius: 6px; cursor: pointer; font-weight: bold; transition: background-color 0.2s; flex-shrink: 0; 
}
.button-secondary:hover {
    background-color: var(--border-color); color: var(--text-primary);
}
.checklist-item {
    display: flex; justify-content: space-between; align-items: center; padding: 5px 0;
}
.remove-item-btn {
    background: none; border: none; color: var(--status-unhealthy); font-size: 24px; cursor: pointer; padding: 5px; line-height: 1;
}
.signature-pad-container {
    border: 1px solid var(--border-color); border-radius: 6px;
    border-radius: 6px;
    overflow: hidden;
}
.signature-pad {
    width: 100%; height: 200px;
    display: block;
}
#clear-signature {
    margin-top: 10px; background: none; border: 1px solid var(--text-secondary); color: var(--text-secondary); padding: 8px 12px; border-radius: 6px; cursor: pointer;
}
.sidebar-footer {
    margin-top: auto;
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background-primary);
}
#current-user-email {
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.logout-btn {
    background: none;
    border: 1px solid var(--status-unhealthy);
    color: var(--status-unhealthy);
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}
.logout-btn:hover {
    background-color: var(--status-unhealthy);
    color: white;
}
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--background-primary);
}
.login-box {
    width: 100%;
    max-width: 400px;
    padding: 40px;
    background-color: var(--background-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}
.login-box h1 {
    text-align: center;
    margin-bottom: 30px;
}
.input-group {
    margin-bottom: 15px; /* Reduced from 20px */
}
.auth-error {
    color: var(--status-unhealthy);
    text-align: center;
    margin-bottom: 15px;
    min-height: 1.2em;
}
.job-options-menu {
    position: absolute;
    background-color: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 5px 0;
    z-index: 2100;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.job-options-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.job-options-menu li {
    padding: 10px 20px;
    cursor: pointer;
    color: var(--text-secondary);
}
.job-options-menu li:hover {
    background-color: var(--accent-primary);
    color: white;
}
.job-options-menu li.delete:hover {
    background-color: var(--status-unhealthy);
}
.style-toggles-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    padding-bottom: 25px;
}
.style-container {
    padding-top: 25px;
    border-top: 1px solid var(--border-color);
    margin-top: 25px;
}
.style-group-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.style-group-row .style-container {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}
.style-group-row + .style-container,
.style-container + .style-container:not(:last-child) {
    border-top: 1px solid var(--border-color);
    margin-top: 25px;
    padding-top: 25px;
}
.style-container h3 {
    margin-top: 0;
    margin-bottom: 25px;
    color: var(--accent-primary);
}
.drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    padding: 30px;
    font-family: var(--font-family);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    position: relative;
}
.drop-zone.portrait {
    min-height: 250px;
}
.drop-zone.landscape {
    min-height: 150px;
}
.drop-zone:hover, .drop-zone--over {
    background-color: var(--background-primary);
    border-color: var(--accent-primary);
}
.drop-zone-prompt {
    color: var(--text-secondary);
}
.drop-zone-input {
    display: none;
}
.toggle-switch-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.toggle-switch-label input[type="checkbox"].style-toggle {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch-label span {
    position: relative;
    font-weight: normal;
    padding-left: 50px;
}
.toggle-switch-label span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background-color: var(--background-primary);
    border: 1px solid var(--border-color);
    transition: background-color 0.2s ease-in-out;
}
.toggle-switch-label span::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--text-secondary);
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.toggle-switch-label input[type="checkbox"].style-toggle:checked + span::before {
    background-color: var(--accent-primary);
}
.toggle-switch-label input[type="checkbox"].style-toggle:checked + span::after {
    transform: translate(20px, -50%);
    background-color: white;
}
#saved-signature-preview {
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: white;
}
#saved-signature-preview img {
    width: 100%;
    display: block;
}
.image-preview-container {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    align-items: start;
}
.preview-image {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background-color: var(--background-primary);
    cursor: pointer;
    padding: 0px;
}
.preview-image--landscape {
    grid-column: 1 / -1;
    aspect-ratio: auto;
}
.preview-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 4px;
}
.preview-image--remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    background-color: rgba(0,0,0,0.7);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}
.lightbox {
    position: fixed;
    z-index: 3100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s;
}
.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    animation: zoomIn 0.3s;
}
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}
.lightbox-close:hover,
.lightbox-close:focus {
    color: #bbb;
    text-decoration: none;
}
@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}
@keyframes zoomIn {
    from {transform: scale(0.9)}
    to {transform: scale(1)}
}
.notes-container {
    height: 60vh;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.note-form {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
#note-input {
    flex-grow: 1;
    margin-bottom: 0;
}
.note-message {
    display: flex;
    max-width: 75%;
}
.note-bubble {
    padding: 10px 15px;
    border-radius: 18px;
    position: relative;
    width: 100%;
}
.note-author {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--text-primary);
}
.note-text {
    margin: 0;
    font-size: 16px;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.note-timestamp {
    font-size: 10px;
    margin-top: 8px;
    text-align: right;
    color: var(--text-primary);
    opacity: 0.7;
}
.note-message.photographer {
    align-self: flex-start;
}
.note-message.photographer .note-bubble {
    background-color: var(--accent-primary);
    border-bottom-left-radius: 4px;
}
.note-message.account-manager {
    align-self: flex-end;
}
.note-message.account-manager .note-bubble {
    background-color: #D68910;
    border-bottom-right-radius: 4px;
}

/* --- START: Notes Module Enhancements Fix --- */
.note-options-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 2px 5px;
    opacity: 0.2; /* Faded but visible by default */
    transition: opacity 0.2s;
}
.note-message:hover .note-options-btn {
    opacity: 1; /* Fully visible on hover */
}
/* --- END: Notes Module Enhancements Fix --- */

.note-message.editing .note-options-btn {
    display: none;
}
.note-edit-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.note-edit-container textarea {
    width: 100%;
    min-height: 60px;
    background-color: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 16px;
    padding: 8px;
    box-sizing: border-box;
}
.note-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.note-edit-actions button {
    padding: 5px 10px;
    font-size: 14px;
}
.note-meta-info {
    font-size: 11px;
    font-style: italic;
    opacity: 0.6;
    margin-top: 8px;
}
.note-message.deleted .note-text {
    font-style: italic;
    color: var(--text-secondary);
}
.unit-input-group {
    display: flex;
    align-items: center;
}
.unit-input-group input {
    margin-bottom: 0; 
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
}
.unit-toggle {
    display: flex;
    flex-shrink: 0;
    height: 46px;
}
.unit-toggle button {
    padding: 12px 15px;
    background-color: var(--background-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
}
.unit-toggle button:first-of-type {
    border-radius: 0;
}
.unit-toggle button:last-of-type {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.unit-toggle button.active {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}
.dynamic-section {
    border-top: 1px solid var(--border-color);
    margin-top: 25px;
    padding-top: 25px;
}
.dynamic-section h4 {
    margin-top: 0;
}
/* --- Class List Module Styles --- */
.class-list-display {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.class-group {
    background-color: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
.class-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    background-color: rgba(0,0,0,0.1);
}
.class-group-header::after {
    content: '›';
    font-size: 28px;
    transform: rotate(90deg);
    transition: transform 0.3s;
}
.class-group-header.active::after {
    transform: rotate(-90deg);
}
.class-name {
    font-weight: bold;
    font-size: 18px;
}
.student-count {
    font-size: 14px;
    color: var(--text-secondary);
    margin-right: 15px;
}
.class-group-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    padding: 0 20px;
}
.class-group-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
}
.class-group-content th, .class-group-content td {
    text-align: left;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}
.class-group-content th {
    color: var(--text-secondary);
    font-size: 14px;
}
.class-group-content td:not(:first-child) {
    text-align: center;
}

/* --- Custom Circular Checkbox Styles --- */
.custom-checkbox {
    display: inline-block;
    position: relative;
    width: 22px;
    height: 22px;
    cursor: pointer;
}
.custom-checkbox input {
    opacity: 0;
    width: 0;
    height: 0;
}
.custom-checkbox span {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    transition: background-color 0.2s;
}
.custom-checkbox:hover span {
    background-color: var(--border-color);
}
.custom-checkbox input:checked + span {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}
.custom-checkbox span::after {
    content: "";
    position: absolute;
    display: none;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.custom-checkbox input:checked + span::after {
    display: block;
}
/* --- Class List Module Refinements --- */
#class-list-card {
    position: relative; /* Needed to position the clear button */
}

.clear-data-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: 1px solid var(--status-unhealthy);
    color: var(--status-unhealthy);
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}
.clear-data-btn:hover {
    background-color: var(--status-unhealthy);
    color: white;
}
.class-name {
    font-weight: bold;
    font-size: 18px;
    flex-grow: 1; /* Allows the class name to take up available space */
}
.class-list-display {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px; /* Adds space before the next card */
}

/* Aligns the checkbox header text */
.class-group-content th:not(:first-child) {
    text-align: center;
}
/* --- Log Sheet Module Styles --- */
.log-sheet-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px; /* Adds space before the next card */
}
.day-container {
    background-color: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
.day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    background-color: rgba(0,0,0,0.1);
}
.day-header:hover {
    background-color: rgba(0,0,0,0.2);
}
.day-header::after {
    content: '›';
    font-size: 28px;
    transform: rotate(90deg);
    transition: transform 0.3s;
}
.day-header.active::after {
    transform: rotate(-90deg);
}
.day-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    padding: 0 20px;
}
.log-sheet-instance {
    padding: 25px 0;
    border-bottom: 1px solid var(--border-color);
}
.log-sheet-instance:last-child {
    border-bottom: none;
}
.log-sheet-header {
    display: flex;
    gap: 30px;
    align-items: baseline; /* Fixes alignment of text and input */
    margin-bottom: 20px;
}
.log-sheet-photographer, .log-sheet-role {
    font-size: 16px;
    color: var(--text-secondary);
}
.log-sheet-role {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.inline-input {
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 16px;
    padding: 5px;
    border-radius: 0;
    width: 100%;
}
.log-sheet-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}
.log-sheet-table th, .log-sheet-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.log-sheet-table th {
    color: var(--text-secondary);
}
.log-sheet-table td:nth-child(1) { width: 30%; }
.log-sheet-table td:nth-child(2) { width: 15%; }
.log-sheet-table td:nth-child(3) { width: 20%; }
.log-sheet-table td:nth-child(4) { width: 35%; }
.item-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.item-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}
.item-list-item:last-child {
    border-bottom: none;
}
.item-main-text {
    font-size: 16px;
    color: var(--text-primary);
}
.item-sub-text {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: capitalize;
    display: block;
    margin-top: 4px;
}
.empty-list-item {
    padding: 15px 0;
    color: var(--text-secondary);
    text-align: center;
}
.log-sheet-header {
    align-items: center; /* This was baseline, center looks better with inputs */
}

/* This targets the create form and the manual add form in the class list */
.add-item-container,
#log-sheet-card .input-row {
    align-items: flex-end;
}
#log-sheet-card .input-group {
    margin-bottom: 0;
}
/* --- Log Sheet Module Styles --- */
.log-sheet-header {
    display: flex;
    gap: 30px;
    align-items: center; /* This is the alignment fix */
    margin-bottom: 20px;
}
.log-sheet-role {
    display: flex;
    align-items: center; /* This is also part of the alignment fix */
    gap: 10px;
}

/* New Export Button Styles */
.export-btn {
    background: none;
    border: 1px solid var(--text-secondary);
    color: var(--text-secondary);
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
}
.export-btn:hover {
    background-color: var(--text-secondary);
    color: var(--background-primary);
}
.log-sheet-header {
    position: relative; /* For positioning the export button */
}
.log-sheet-instance .export-btn {
    position: absolute;
    top: 0;
    right: 0;
}
/* --- NEW: Disabled Calendar Style --- */
.disabled-calendar {
    pointer-events: none;
    opacity: 0.7;
}
input[type="time"]:disabled {
    color: var(--text-primary) !important;
    background-color: var(--background-primary); /* Optional: match background too */
    opacity: 1; /* Optional: prevent graying out */
}
input[type="time"] {
  color: white !important;
}
.login-logo {
    display: block;
    margin: 0 auto 20px;
    max-width: 180px;
    height: auto;
}
.add-item-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

#new-class-name,
#new-student-name,
#existing-class-select {
    min-width: 200px;
    flex: 1;
}
.preview-image-btn img {
    width: 20px;
    height: 20px;
    display: block;
}
.student-name-cell-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.student-name-text {
    flex-grow: 1;
}

.preview-image-btn {
    background: none; /* Makes the button background transparent */
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    line-height: 1; /* Helps with vertical alignment */
}

.preview-image-btn:hover {
    opacity: 1;
}
#class-list-actions-container .add-item-container {
    align-items: flex-end;
    gap: 10px;
}
#fetch-images-btn {
    position: relative;
    bottom: 17px; 
}
#add-new-class-btn,
#add-new-student-btn {
    position: relative;
    bottom: 7.5px; 
}
#existing-class-select {
    position: relative;
    bottom: 7.5px; 
}
/* --- Nudge Log Sheet Role Input Down --- */
.log-sheet-header .log-sheet-role .inline-input {
    position: relative;
    top: 8px;
}
/* Add to the end of style.css */
.admin-menu-container {
    margin-right: 5px;
}

#admin-options-menu {
    bottom: 10px; /* Position it above the button */
    right: 0;
    width: 150px; /* Optional: set a fixed width */
}
#notification-bell-btn {
    position: relative;
    padding: 0 8px; /* Give it some space */
}

#notification-bell-btn img {
    width: 24px;
    height: 24px;
    vertical-align: middle; /* Helps with alignment */
}

.notification-count {
    position: absolute;
    top: -2px;       /* Position badge */
    right: 2px;
    width: 18px;
    height: 18px;
    background-color: var(--status-unhealthy); /* Uses your existing red color */
    color: white;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--background-secondary);
    display: none; /* Hidden by default, shown by JS */
}

.notification-panel {
    position: fixed;
    top: 65px; /* Position below the header */
    right: 15px;
    width: 380px;
    max-height: 450px;
    background-color: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    z-index: 2000;
    overflow-y: auto;
    display: none; /* Hidden by default */
    color: var(--text-secondary);
}

.notification-panel h3 {
    padding: 15px;
    margin: 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 16px;
}

#notification-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#notification-list li {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
}

#notification-list li:last-child {
    border-bottom: none;
}

#notification-list li:hover {
    background-color: var(--background-primary);
}

#notification-list li.unread {
    background-color: rgba(74, 144, 226, 0.1); /* Faint blue for unread */
    font-weight: bold;
    color: var(--text-primary);
}

#notification-list li.empty {
    padding: 20px;
    text-align: center;
    cursor: default;
}
.sidebar-header .button-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

#add-new-job-btn,
#notification-bell-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
  margin: 0;
  line-height: 1;
}

#notification-bell-btn img {
  width: 24px;
  height: 24px;
  display: block;
}

/* --- START: Sidebar Collapse Feature --- */

/* This new wrapper contains the sidebars and the toggle button */
.sidebar-wrapper {
    position: relative;
    width: 320px;
    flex-shrink: 0;
    z-index: 2000;
    transition: transform 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0px 15px rgba(0, 0, 0, 0.2);
}

/* The toggle button is now positioned relative to the wrapper */
#sidebar-toggle {
    position: absolute;
    top: 50%;
    /* Position its left edge at the wrapper's right edge */
    left: 100%;
    /* Pull it back halfway so it sits on the line */
    transform: translateY(-50%);
    z-index: 1999;
    
    background-color: var(--accent-primary);
    color: white;
    border: 2px solid var(--background-secondary);
    width: 24px;
    height: 48px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: none;
    cursor: pointer;
    
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    padding: 0;
    padding-left: 2px;
    /* NO transition needed on the button itself */
}

#sidebar-toggle:hover {
    background-color: var(--accent-primary-hover);
}

/* --- Styles for when the sidebar is collapsed --- */

/* This single rule moves the wrapper, sidebars, and button all at once */
.app-container.sidebar-collapsed .sidebar-wrapper {
    transform: translateX(-100%);
}

.app-container.sidebar-collapsed #main-content {
    margin-left: -320px;
}

/* --- END: Sidebar Collapse Feature --- */

/* --- START: Frosted Glass Effect (Mobile Only) --- */

/* This query applies the styles only on screens 768px wide or smaller */
@media (max-width: 768px) {
    #main-content-overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        /* Position starts at the edge of the open sidebar */
        left: 320px;
        z-index: 1500; /* Below sidebar wrapper (2000), above content */
        
        /* The "frosted glass" and "dimmed" effect */
        background-color: rgba(42, 49, 73, 0.8);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px); /* For Safari compatibility */
        
        /* Block interaction with main content when sidebar is open */
        pointer-events: auto;
        
        /* Animate the overlay with the sidebar */
        opacity: 1;
        transition: opacity 0.4s ease-in-out, left 0.4s ease-in-out;
    }

    /* When the sidebar is collapsed, hide the overlay */
    .app-container.sidebar-collapsed #main-content-overlay {
        opacity: 0;
        left: 0; /* Move its edge to match the collapsed sidebar */
        pointer-events: none; /* Allow interaction with main content again */
    }
}

/* --- END: Frosted Glass Effect (Mobile Only) --- */

/* --- START: Animated Job Search Box (Exact Style) --- */

#job-search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /* From the example's dark mode body background */
    background: transparent;
    /* Use the font from the example */
    font-family: 'Hind', sans-serif;
    font-size: calc(16px + (24 - 16)*(100vw - 320px)/(1920 - 320));
}

/* Scoped resets and base styles from the example */
#job-search-container .search-bar,
#job-search-container .search-bar input,
#job-search-container .search-btn {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font: 1em 'Hind', sans-serif;
  line-height: 1.5em;
}

#job-search-container .search-bar input {
    color: #f1f1f1;
}

#job-search-container .search-bar {
  display: flex;
}

#job-search-container .search-bar input,
#job-search-container .search-btn, 
#job-search-container .search-btn:before, 
#job-search-container .search-btn:after {
  transition: all 0.25s ease-out;
}

#job-search-container .search-bar input,
#job-search-container .search-btn {
  width: 3em;
  height: 3em;
}

#job-search-container .search-bar input:invalid:not(:focus),
#job-search-container .search-btn {
  cursor: pointer;
}

#job-search-container .search-bar,
#job-search-container .search-bar input:focus,
#job-search-container .search-bar input:valid  {
  width: 100%;
}

#job-search-container .search-bar input:focus,
#job-search-container .search-bar input:not(:focus) + .search-btn:focus {
  outline: transparent;
}

#job-search-container .search-bar {
  margin: auto;
  padding: 1.5em;
  justify-content: center;
  max-width: 30em;
}

#job-search-container .search-bar input {
  background: transparent;
  border-radius: 1.5em;
  box-shadow: 0 0 0 0.4em #f1f1f1 inset;
  padding: 0.75em;
  transform: translate(0.5em,0.5em) scale(0.5);
  transform-origin: 100% 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#job-search-container .search-bar input::-webkit-search-decoration {
  -webkit-appearance: none;
}

#job-search-container .search-bar input:focus,
#job-search-container .search-bar input:valid {
  background: #2a3149;
  box-shadow: 0 0 0 0.1em #3a415a inset;
  border-radius: 0.375em 0 0 0.375em;
  transform: scale(1);
}

#job-search-container .search-btn {
  background: #f1f1f1;
  border-radius: 0 0.75em 0.75em 0 / 0 1.5em 1.5em 0;
  padding: 0.75em;
  position: relative;
  transform: translate(0.25em,0.25em) rotate(45deg) scale(0.25,0.125);
  transform-origin: 0 50%;
}

#job-search-container .search-btn:before, 
#job-search-container .search-btn:after {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
}

#job-search-container .search-btn:before {
  border-radius: 50%;
  box-shadow: 0 0 0 0.2em #171717 inset;
  top: 0.75em;
  left: 0.75em;
  width: 1.2em;
  height: 1.2em;
}

#job-search-container .search-btn:after {
  background: #171717;
  border-radius: 0 0.25em 0.25em 0;
  top: 51%;
  left: 51%;
  width: 0.75em;
  height: 0.25em;
  transform: translate(0.2em,0) rotate(45deg);
  transform-origin: 0 50%;
}

#job-search-container .search-btn span {
  display: inline-block;
  overflow: hidden;
  width: 1px;
  height: 1px;
}

/* Active state from example */
#job-search-container .search-bar input:focus + .search-btn,
#job-search-container .search-bar input:valid + .search-btn {
  background: #5aa1f2;
  border-radius: 0 0.375em 0.375em 0;
  transform: scale(1);
}

#job-search-container .search-bar input:focus + .search-btn:before, 
#job-search-container .search-bar input:focus + .search-btn:after,
#job-search-container .search-bar input:valid + .search-btn:before, 
#job-search-container .search-bar input:valid + .search-btn:after {
  opacity: 1;
}

#job-search-container .search-bar input:focus + .search-btn:hover,
#job-search-container .search-bar input:valid + .search-btn:hover,
#job-search-container .search-bar input:valid:not(:focus) + .search-btn:focus {
  background: #0c48db;
}

#job-search-container .search-bar input:focus + .search-btn:active,
#job-search-container .search-bar input:valid + .search-btn:active {
  transform: translateY(1px);
}
/* --- END: Animated Job Search Box (Exact Style) --- */

/* --- Document Vault Module Styles --- */
#vault-file-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.document-item {
    display: flex;
    align-items: center;
    background-color: var(--background-primary);
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.document-item:hover {
    background-color: #3a415a; /* A slightly darker hover */
}

.document-icon {
    flex-shrink: 0;
    margin-right: 15px;
    color: var(--text-secondary);
}

.document-icon svg {
    display: block;
}

.document-name {
    flex-grow: 1;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-name:hover {
    text-decoration: underline;
}

.document-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 15px;
}

.document-preview-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.document-preview-btn:hover {
    opacity: 1;
}

.document-remove-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: rgba(0,0,0,0.3);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}
/* --- Hub Switcher Button --- */
.hub-switcher {
    margin-bottom: 20px;
    text-align: center;
}

.hub-switcher button {
    background-color: var(--accent-primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.2s;
}

.hub-switcher button:hover {
    background-color: var(--accent-primary-hover);
}
/* --- Modal Styles --- */

.modal-overlay .modal-content {
    background-color: var(--background-secondary);
    padding: 30px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 500px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.modal-header h2 {
    margin: 0;
    font-size: 22px;
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
}

.modal-footer .button-primary,
.modal-footer .button-secondary {
    width: auto; /* Override default 100% width */
    padding: 12px 25px;
}
/* --- School Sidebar Group Header --- */
.job-list .school-group-header {
    background-color: var(--background-primary);
    color: var(--text-secondary);
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    padding: 10px 20px;
    cursor: default; /* Make it not look clickable */
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.job-list .school-group-header:first-child {
    border-top: none; /* Remove top border for the very first group */
}

.job-list .school-group-header:hover {
    background-color: var(--background-primary); /* Prevent hover effect */
}
/* --- Styles for Hub Switcher Button --- */
#hub-switcher-container {
    text-align: center;
    margin-bottom: 20px;
}

.hub-switcher-btn {
    width: auto;
    padding: 10px 20px;
    font-size: 16px;
}
/* --- Style for School Group Headers in Sidebar --- */
.job-list-group-header {
    padding: 10px 20px;
    background-color: var(--background-primary);
    color: var(--text-secondary);
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: sticky;
    top: 0;
}

/* --- Styles for Modal Dialogs (Corrected) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    animation: fadeIn 0.3s;
}

.modal-overlay .modal-content {
    background-color: var(--background-secondary);
    padding: 30px 40px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 600px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    animation: zoomIn 0.3s;
}

.modal-content h2 {
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
}

/* Helper keyframe animations for the modal */
@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

@keyframes zoomIn {
    from {transform: scale(0.9)}
    to {transform: scale(1)}
}

/* --- Styles for General Info Module --- */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}
.card-header h2 {
    margin: 0;
    padding: 0;
    border: none;
}
.card-header .button-primary,
.card-header .button-secondary {
    width: auto;
    padding: 8px 16px;
    font-size: 14px;
}
.card-header div {
    display: flex;
    gap: 10px;
}

/* --- Styles for Custom Fields List --- */
.custom-fields-list {
    margin: 0;
    padding: 0;
}
.custom-fields-list div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}
.custom-fields-list div:last-child {
    border-bottom: none;
}
.custom-fields-list dt {
    font-weight: bold;
    color: var(--text-secondary);
    flex-basis: 30%;
}
.custom-fields-list dd {
    margin: 0;
    color: var(--text-primary);
    flex-grow: 1;
}
.custom-field-delete-btn {
    background: none;
    border: none;
    color: var(--status-unhealthy);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 0 5px;
}
/* --- Styles for Job List in School Module --- */
.school-job-item {
    cursor: pointer;
    transition: background-color 0.2s;
}

.school-job-item:hover {
    background-color: var(--background-primary);
}
/* --- Styles for Job List in School Module --- */
.school-job-item {
    cursor: pointer;
    transition: background-color 0.2s;
}

.school-job-item:hover {
    background-color: var(--background-primary);
}
/* --- Styles for Jobs Module in Schools Hub --- */
.add-job-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 200px;
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    padding: 30px;
}

#add-first-job-btn {
    font-size: 80px;
    font-weight: 200;
    width: 120px;
    height: 120px;
    background-color: transparent;
    border: 2px solid var(--text-secondary);
    color: var(--text-secondary);
    border-radius: 50%;
    cursor: pointer;
    line-height: 120px;
    padding: 0;
    margin-bottom: 20px;
    transition: all 0.2s ease-in-out;
}

#add-first-job-btn:hover {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
    transform: scale(1.05);
}
/* --- Styles for Collapsible Job List with Stats --- */
.collapsible-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.job-item-container {
    background-color: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.job-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.job-item-header .toggle-switch-label {
    margin-left: 2px;
    margin-right: auto; /* push the arrow to the right */
    line-height: 1;
    padding-top: 2px;
}

.job-item-header:hover {
    background-color: #3a415a;
}

.job-item-header .job-name-span {
    font-weight: bold;
    line-height: 1.4;
}

.job-item-header::after {
    content: '›';
    font-size: 28px;
    transform: rotate(0deg);
    transition: transform 0.3s;
}

.job-item-header.active::after {
    transform: rotate(90deg);
}

.job-item-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    padding: 0 20px;
}

.job-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
}

.stat-item {
    text-align: center;
}

.stat-item .stat-value {
    font-size: 24px;
    font-weight: bold;
    color: var(--text-primary);
    margin: 0 0 5px 0;
}

.stat-item .stat-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.job-item-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    margin-top: 10px;
    border-top: 1px solid var(--border-color);
}

.job-item-actions .button-primary {
    width: auto;
    padding: 8px 16px;
    font-size: 14px;
}

.job-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 12px;
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}

.job-name-span {
    flex-shrink: 1;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
}

.toggle-switch-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.toggle-switch-label input.style-toggle {
    transform: scale(1.2);
    margin-top: 0;
}

/* OPTIONAL: Improve the vertical centering of the toggle knob */
.toggle-switch-label span {
    line-height: 1;
    padding-top: 2px;
}

/* --- Dashboard Styles --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.widget {
    background-color: var(--background-secondary);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease;
    
    /* --- NEW lines to enforce vertical centering --- */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.widget.clickable {
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.widget.clickable:hover {
    background-color: #3a415a;
    transform: translateY(-3px);
}

.widget-value {
    font-size: 40px;
    font-weight: bold;
    color: var(--accent-primary);
    margin: 0 0 10px 0;
}

.widget-label {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0;
}

.widget-comparison {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 5px;
}

.widget-full {
    grid-column: 1 / -1; /* Make widget span full width */
    display: block;
}

#turnover-chart-container {
    height: 400px;
}
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.widget {
    background-color: var(--background-secondary);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease;
}

.widget.clickable:hover {
    background-color: var(--accent-primary-hover);
    cursor: pointer;
}

.widget-full {
    grid-column: 1 / -1;
    padding: 30px;
}

.widget-value {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.widget-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.widget-comparison {
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
}
.job-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 10px;
}

#add-another-job-btn {
    font-size: 1.5rem;
    padding: 0 10px;
    background-color: var(--button-primary);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* --- Sort-By dropdown (Jobs module) ----------------------------- */
.sort-by-container {
    display: flex;
    align-items: center;
    gap: 8px;                 /* space between label & select   */
    margin-left: auto;        /* push it to the far right side   */
}

.sort-by-container label {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* override the generic <select> rules just enough */
.sort-by-container select {
    width: 165px;             /* keeps it compact                */
    padding: 8px 30px 8px 10px;
    font-size: 0.85rem;
    cursor: pointer;
    background-color: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    /* reuse the same arrow you already defined globally,
       no need to touch background-image */
}

.sort-by-container select:hover {
    border-color: var(--accent-primary);
}

.sort-by-container select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(74,144,226,0.35); /* subtle focus ring */
}

/* add a little transition so it feels like the rest of the UI */
.sort-by-container select,
.sort-by-container select:hover,
.sort-by-container select:focus {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* --- Jobs list: compact Sort-by dropdown ----------------------- */
.job-list-header {
    display: flex;                   /* keep everything in one row      */
    align-items: center;
}

#jobs-sort-select {
    width: 260px !important;         /* override the global 100% */
    flex: 0 0 160px;                 /* keep it from growing     */
    margin-left: auto;               /* push it to the right     */
    margin-right: 10px;              /* small gap before the “+” */
    padding: 8px 28px 8px 10px;      /* matches other inputs     */
    font-size: 0.85rem;
    background-color: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
}

#jobs-sort-select:hover,
#jobs-sort-select:focus {
    border-color: var(--accent-primary);
    outline: none;
}
/* Makes the timeframe selector smaller and less prominent */
#turnover-timeframe-select {
    font-size: 14px;
    padding: 5px 8px;
    margin-bottom: 10px;
    font-weight: normal;
}

/* New class for a smaller font size on oversized widget values */
.widget-value.small {
    font-size: 22px;
}
/* --- View Toggles --- */
.view-toggle-container {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
    background-color: var(--background-primary);
    padding: 5px;
    border-radius: 8px;
    width: fit-content;
    margin: 0 auto 25px;
}
.view-toggle-btn {
    padding: 8px 20px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: bold;
    border-radius: 6px;
}
.view-toggle-btn.active {
    background-color: var(--accent-primary);
    color: white;
}

/* --- Job Overview Table --- */
.job-overview-controls {
    display: flex;
    justify-content: space-between;
    align-items: center; /* This change vertically centers the controls */
    gap: 20px;
    margin-bottom: 20px;
}

/* This targets the container for the dropdowns on the right */
.job-overview-controls .date-range-filter {
    position: relative; /* This allows us to nudge the element */
    top: -18px;          /* Adjust this value. Use a negative number to move it up. */
}

.job-overview-controls .input-group {
    margin-bottom: 0;
}
.job-overview-table-wrapper {
    overflow-x: auto;
}
.job-overview-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}
.job-overview-table th, .job-overview-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.job-overview-table th {
    cursor: pointer;
    user-select: none;
    background-color: var(--background-primary);
    position: sticky;
    top: 0;
}
.job-overview-table th:hover {
    background-color: #3a415a;
}
.job-overview-table th.sort-asc::after,
.job-overview-table th.sort-desc::after {
    content: '';
    display: inline-block;
    margin-left: 8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.job-overview-table th.sort-asc::after {
    border-bottom: 5px solid var(--text-primary);
}
.job-overview-table th.sort-desc::after {
    border-top: 5px solid var(--text-primary);
}
/* --- Job Overview Controls Styling --- */
.job-overview-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 20px;
}

/* This group contains the date pickers and the filter button */
.date-range-filter {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0; /* Prevents this group from shrinking */
}

/* Remove default margins from input groups within the controls */
.job-overview-controls .input-group {
    margin-bottom: 0;
}

/* Style the date inputs to match your other text inputs */
input[type="date"] {
    background-color: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 16px;
    padding: 10px;
    box-sizing: border-box; 
    height: 46px; /* Match button height */
}

/* Style to show the calendar icon on dark backgrounds */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}
/* --- Job Overview Table Row Highlight --- */

/* This sets a smooth transition for the color change */
.job-overview-table tbody tr {
    transition: background-color 0.2s ease;
}

/* This applies the highlight color when the mouse hovers over a row */
.job-overview-table tbody tr:hover {
    background-color: var(--border-color); /* Uses a color from your existing theme */
}
/* --- General Info Module Enhancements --- */

/* A simple horizontal line to break up sections in a card */
.card-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 25px 0;
}

/* Styles for the new notes section */
.notes-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.note-item {
    background-color: var(--background-primary);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 13px;
}

.note-author {
    font-weight: bold;
}

.note-body {
    color: var(--text-primary);
    white-space: pre-wrap; /* Respects line breaks in the text */
    word-wrap: break-word;
}

#add-note-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    margin-bottom: 10px;
    background-color: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 16px;
    box-sizing: border-box;
    resize: vertical;
}

#add-note-btn {
    display: block;
    width: auto;
    margin-left: auto; /* Aligns button to the right */
}
/* --- General Info Card Layout Tweaks --- */
#general-info-content {
    margin-top: 25px;
}

/* Hide edit fields by default */
.edit-field {
    display: none;
}

/* When the parent has the 'edit-mode' class, hide view fields and show edit fields */
.edit-mode #general-info-content .view-field {
    display: none;
}
.edit-mode #general-info-content .edit-field {
    display: block; /* Or flex, grid, etc., as needed */
}
.edit-mode #custom-fields-container .view-field {
    display: none;
}
.edit-mode #custom-fields-container .edit-field {
    display: block;
}

/* Remove the divider style as it's no longer used here */
.card-divider {
    display: none;
}

/* Adjust card header for sub-cards */
.card h3 {
    margin-top: 0;
    margin-bottom: 20px;
}
/* --- Schools Overview Table Styles --- */
.production-status-select {
    width: 100%;
    min-width: 150px;
    padding: 8px 10px;
    font-size: 14px;
    background-color: var(--background-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
/* --- Schools Overview Table Styling Tweaks --- */

.cell-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-primary);
    color: #ffffff !important; /* Force white text to override conflicts */
    border: 0;
    border-radius: 100px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    min-height: 36px;
    padding: 0 18px;
    text-align: center;
    text-decoration: none !important; /* Force no underline */
    transition: background-color 0.2s;
    white-space: nowrap;
}

/* Red background for "No" contract status */
.status-no {
    background-color: rgba(231, 76, 60, 0.3);
    color: var(--text-primary);
    font-weight: bold;
}

/* Orange background for contracts expiring soon */
.status-expires-soon {
    background-color: rgba(214, 137, 16, 0.3);
}
/* --- Button Style for Table Cells --- */

.cell-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-primary); /* Your main blue color */
    color: #ffffff;
    border: 0;
    border-radius: 100px; /* Creates the pill shape */
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    min-height: 36px;
    padding: 0 18px;
    text-align: center;
    text-decoration: none; /* Removes underline from link */
    transition: background-color 0.2s;
    white-space: nowrap;
}

/* Darker blue on hover, similar to the example */
.cell-button:hover,
.cell-button:focus { 
    background-color: #3a7bc8; 
    color: #ffffff;
}

.cell-button:active {
    background-color: #2a5a9a;
}
CSS
/* --- Styling Fixes & Enhancements for Overview Tables --- */

/* Fix for button text color */
.cell-button {
    color: #ffffff !important; /* Forces the text to be white */
}

/* Base style for the new status pills */
.status-pill {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
}

/* Green pill for 'Yes' status */
.status-pill.green {
    background-color: #27ae60;
}

/* Red pill for 'No' or 'Expired' status */
.status-pill.red {
    background-color: var(--status-unhealthy); /* Uses your existing red */
}

/* Orange pill for contracts expiring soon */
.status-pill.orange {
    background-color: #f39c12;
}
/* Helper class to center-align text in table cells */
.cell-center {
    text-align: center;
}
/* Helper classes for explicit table cell alignment */
.cell-left {
    text-align: left;
}
.cell-center {
    text-align: center;
}
/* --- Generic View/Edit Mode Toggling --- */

/* By default, all input/edit fields are hidden */
.edit-field {
    display: none;
}

/* When a container has the 'edit-mode' class... */
.edit-mode .view-field {
    display: none; /* ...hide the view-only text fields... */
}

.edit-mode .edit-field {
    display: block; /* ...and show the editable input fields. */
}

/* Special style for the commission inputs to appear in a row */
.edit-mode .commission-edit {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Add these rules to the end of style.css */
.quote-item-row {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 15px;
}
.quote-item-row .input-group {
    margin-bottom: 0;
    flex-grow: 1;
}
.quote-item-row .quote-item-qty {
    flex-grow: 0;
    width: 80px;
}
.quote-item-row .quote-item-price {
    flex-grow: 0;
    width: 120px;
}
.quote-item-row .remove-quote-item-btn {
    margin-bottom: 2px; /* Aligns button with inputs */
}
/* --- Styles for Custom Invoice Upload Button --- */
.invoice-upload-container {
    display: inline-block;
    position: relative; /* This is required to allow nudging */
    top: -5px;

    /* * HOW TO NUDGE:
     * Uncomment one or more of the lines below and change the
     * pixel value to adjust the button's position.
     * Use negative numbers to move up or left.
    */
    /* top: -2px; */
    /* left: 5px; */
}

/* This hides the original, ugly file input button */
.invoice-upload-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

/* This makes sure our styled label acts and looks like a button */
.invoice-upload-container label.button-secondary {
    display: inline-block; /* Makes it behave like a proper block */
    cursor: pointer;      /* Shows the hand cursor on hover */
    width: auto;          /* Ensure it fits its content */
}

/* --- Final Tweak for Order List Spacing --- */
.job-item-header .job-name-span {
    display: flex;
    align-items: baseline; /* Aligns text neatly along their bottom edge */
    gap: 8px;              /* Creates space between the title and order ID. Adjust as needed. */
}

.turnover-timeframe-select {
    font-size: 14px;
    padding: 5px 8px;
    margin-bottom: 15px;
    font-weight: normal;
    background-color: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
}

#account-management-container .input-group {
    margin-bottom: 0;
}
#am-select {
    width: 100%;
    max-width: 350px;
}

#kanban-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Creates 4 equal columns */
    gap: 20px;
    margin-top: 25px;
    height: calc(100vh - 250px); /* Adjust height to fill viewport */
}

.kanban-column {
    background-color: var(--background-primary);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.kanban-column h3 {
    font-size: 16px;
    padding: 15px;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.kanban-cards {
    padding: 10px;
    overflow-y: auto;
    flex-grow: 1;
    min-height: 100px; /* Ensures even empty columns can be drop targets */
}

.kanban-card {
    background-color: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 10px;
    cursor: grab;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.kanban-card:active {
    cursor: grabbing;
}

/* --- Kanban Drag-and-Drop Styling --- */
.kanban-card.dragging {
    opacity: 0.5;
    transform: rotate(3deg);
}

/* Style for all potential drop zones when a drag is active */
#kanban-board.is-dragging .kanban-cards {
    border: 2px dashed var(--accent-primary);
}

/* Style for the specific column being hovered over */
.kanban-cards.drag-over {
    background-color: rgba(74, 144, 226, 0.1);
}

/* --- Account Management Card Subtitle --- */
.card-subtitle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: -10px;
    margin-bottom: 10px;
}

/* --- Kanban Card Holographic Effect --- */

/* Update the existing .kanban-card rule */
.kanban-card {
    background-color: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px; /* Slightly more rounded */
    padding: 15px;
    margin-bottom: 10px;
    cursor: grab;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    position: relative; /* Required for the effect */
    overflow: hidden;   /* Required for the effect */
    transition: all 0.4s ease;
}

/* This is the new pseudo-element that creates the light beam */
.kanban-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* Uses your app's accent color for the light beam */
    background: linear-gradient(
        0deg,
        transparent,
        transparent 40%,
        rgba(74, 144, 226, 0.3) /* --accent-primary color with opacity */
    );
    transform: rotate(-45deg);
    transition: all 0.6s ease;
    opacity: 0;
    z-index: 1; /* Sits above the background but below the text */
}

/* The card's content needs a higher z-index to appear above the light beam */
.kanban-card > * {
    position: relative;
    z-index: 2;
}

/* On hover, scale the card up and add a glow */
.kanban-card:hover {
    transform: scale(1.03);
    border-color: rgba(74, 144, 226, 0.5);
    box-shadow: 0 0 20px rgba(74, 144, 226, 0.4);
}

/* On hover, activate the light beam animation */
.kanban-card:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(100%);
}

/* --- Account Management Final Polish --- */


/* 2. Adds more space between workflow checklist items */
.kanban-card details ul li {
    padding-bottom: 8px; /* Adjust this value for more or less space */
}
.kanban-card details ul li:last-child {
    padding-bottom: 0; /* Removes extra space after the last item */
}


/* --- Account Management Final Styles --- */

/* Resets the header within this specific module */
#account-management-container .card-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}



/* Increases spacing for the task toggles inside Kanban cards */
.kanban-card .toggle-switch-label {
    gap: 15px; /* Adjust this for more or less space */
}

/* --- Kanban Card Progress Bar --- */
.kanban-progress-bar-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    background-color: rgba(0, 0, 0, 0.2);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.kanban-progress-bar-fill {
    position: absolute;
    top: 0; /* This is the only change (from bottom: 0) */
    left: 0;
    right: 0;
    background-color: #39FF14;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.7);
    transition: height 0.4s ease-out;
}

/* --- Schools Overview Table Final Polish --- */

/* This targets the specific container for the Schools Overview page */
#schools-overview-container .job-overview-table th,
#schools-overview-container .job-overview-table td {
    text-align: center; /* Center-align all columns by default */
    vertical-align: middle; /* Vertically center all content */
}

#schools-overview-container .job-overview-table th:first-child,
#schools-overview-container .job-overview-table td:first-child {
    text-align: left; /* Left-align the first column (School Name) */
}

/* This applies the pill-shaped button style to the Main Shoot Date link */
#schools-overview-container .job-overview-table a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-primary);
    color: #ffffff !important;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    min-height: 36px;
    padding: 0 18px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s;
}

#schools-overview-container .job-overview-table a:hover {
    background-color: var(--accent-primary-hover);
}

/* --- Universal Sidebar Scroll & Footer Fix --- */

/* This targets BOTH sidebars */
#jobs-sidebar,
#schools-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure they fill the vertical space */
}

/* This makes BOTH the job list and the school list scrollable */
#jobs-sidebar .job-list,
#schools-sidebar .job-list {
    flex-grow: 1; /* Allows the list to take up all available vertical space */
    overflow-y: auto; /* Adds a scrollbar only when needed */
}

/* This locks BOTH footers to the bottom */
#jobs-sidebar .sidebar-footer,
#schools-sidebar .sidebar-footer {
    flex-shrink: 0; /* Prevents the footer from shrinking */
}

* --- Card Header for Activities Module --- */
/* This ensures the button doesn't get squished on smaller screens */
#activities-list-view .card-header {
    flex-wrap: wrap;
    gap: 15px;
}

#activities-list-view .card-header .button-primary,
#activity-form-view .card-header .button-secondary {
    width: auto;
    padding: 10px 20px;
    font-size: 16px;
}

/* --- Job Module Details Styling --- */
.job-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
}
.job-detail-label {
    font-weight: bold;
    color: var(--text-secondary);
}
/* Hide the input field by default */
.job-detail-input.edit-field {
    display: none;
    border: 1px solid var(--border-color);
    padding: 5px 8px;
    border-radius: 6px;
    background-color: var(--background-primary);
    color: var(--text-primary);
}
/* When in edit mode, show the input and hide the text */
.job-item-container.edit-mode .job-detail-input.edit-field {
    display: block;
}
.job-item-container.edit-mode .job-detail-value.view-field {
    display: none;
}

/* --- Nudge Job Module Deadline Date --- */
.job-detail-value-group .job-detail-value {
    margin-right: 10px; /* Adjust this value for more or less space */
}

.job-name-span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    font-size: 14px; /* This line reduces the font size */
}

.shoot-group-actions .delete {
    background-color: var(--status-unhealthy);
    color: white;
    padding: 5px 10px; /* Adjust padding as needed */
    font-size: 12px; /* Adjust font size as needed */
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.shoot-group-actions .delete:hover {
    background-color: #ff4d4d;
}
.button-delete-outline {
    background-color: transparent;
    border: 1px solid var(--status-unhealthy);
    color: var(--status-unhealthy);
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
}

.button-delete-outline:hover {
    background-color: var(--status-unhealthy);
    color: white;
}

.shoot-group-card .button-secondary,
.shoot-group-card .button-delete-outline {
    padding: 5px 12px;
    font-size: 12px;
}

.job-details-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 20px 0;
}

.shoot-card.unassigned {
    border-style: dashed;
}

.shoot-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.shoot-card-header h3 {
    margin: 0;
    font-size: 16px;
}

.shoot-card-header .shoot-group-actions {
    display: flex;
    gap: 8px;
}

.shoot-card ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0 0 16px 0;
    flex-grow: 1; /* Pushes the footer button down */
}

.shoot-card-footer {
    text-align: right;
}

/* New main container for the two-column layout */
.shoots-layout-container {
    display: flex;
    gap: 16px;
    align-items: flex-start; /* Aligns columns to the top */
}

/* The left column that will hold all the shoot group cards */
.shoot-groups-column {
    flex: 2; /* Takes up roughly 2/3 of the space */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* The right column for the unassigned activities card */
.unassigned-column {
    flex: 1; /* Takes up roughly 1/3 of the space */
}

/* The shoot card itself no longer needs a width/basis instruction */
.shoot-card {
    background-color: var(--background-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.job-item-details {
    padding-bottom: 16px;
}

.shoot-card .activity-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
    /* This overrides any default list styling */
    list-style: none;
    padding-left: 0;
}

.shoot-card .activity-tag {
    background-color: var(--background-primary);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-color);
}

/* --- Account Management View Toggle --- */
.view-toggle-container {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
    background-color: var(--background-primary);
    padding: 5px;
    border-radius: 8px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.view-toggle-btn {
    padding: 8px 20px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: bold;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s ease;
}
.view-toggle-btn.active {
    background-color: var(--accent-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}

/* --- Schools View Container & Cards --- */
#schools-view-container {
    display: flex;
    flex-direction: column; /* This creates the single column layout */
    gap: 20px;
    padding-top: 10px;
}

.school-view-card {
    background-color: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    padding-left: 180px; /* Make space for the countdown widget */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.school-view-card h3 {
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--text-primary);
}

.school-view-card .shoot-group-name {
    margin: 0 0 15px 0;
    color: var(--accent-primary);
    font-weight: bold;
}

.school-view-card .shoot-details-info {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
}

.school-view-card .shoot-details-info strong {
    color: var(--text-primary);
    text-transform: capitalize;
}

.school-view-card .workflow-checklist {
    list-style: none;
    padding: 10px 0 0 0;
    margin: 0;
}
.school-view-card .workflow-checklist li {
    padding-bottom: 8px;
}
.school-view-card .workflow-checklist li:last-child {
    padding-bottom: 0;
}


/* --- Countdown Widget --- */
.countdown-widget {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 150px;
    background-color: var(--background-primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-right: 1px solid var(--border-color);
    font-family: 'Hind', sans-serif;
}
.countdown-widget .countdown-days {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.1;
}
.countdown-widget .countdown-label {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Countdown color coding */
.countdown-widget.today .countdown-days,
.countdown-widget.soon .countdown-days {
    color: #e74c3c; /* --status-unhealthy */
}
.countdown-widget.future .countdown-days {
    color: #f39c12; /* orange */
}
.countdown-widget.tbc .countdown-days {
    color: var(--text-secondary);
    font-size: 24px;
}
.countdown-widget.tbc .countdown-label {
    font-size: 10px;
    white-space: pre-wrap;
    line-height: 1.2;
}

/* --- Horizontal Progress Bar --- */
.school-card-progress-bar-container {
    position: absolute;
    bottom: 0;
    left: 150px; /* Start after the countdown widget */
    right: 0;
    height: 6px;
    background-color: rgba(0, 0, 0, 0.2);
}

.school-card-progress-bar-fill {
    height: 100%;
    background-color: #39FF14;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.7);
    transition: width 0.4s ease-out;
}

/* --- Account Management Settings Menu --- */
#am-settings-btn {
    padding: 8px 12px;
    font-size: 14px;
    background-color: transparent; /* Makes it more subtle */
}

#am-settings-menu {
    position: absolute;
    top: calc(100% + 5px); /* Position below the button with a small gap */
    right: 0;
    width: 380px;
    background-color: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    padding: 15px;
    z-index: 100;
}

#am-settings-menu label input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    cursor: pointer;
    
    /* These rules explicitly define the checkbox size and spacing */
    width: 18px;
    height: 18px;
    min-width: 18px;  /* Prevents it from growing */
    flex-shrink: 0;   /* Prevents it from shrinking in the flex container */
    padding: 0;       /* Removes any unwanted internal spacing */
    margin: 0;        /* Resets any unwanted external spacing */
    margin-right: 12px; /* Adds back only the space we want */

    /* These are your original styling rules */
    background-color: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    display: inline-block;
}

#am-settings-menu h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

#am-settings-menu label {
    display: flex;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    font-weight: normal;
    font-size: 14px;
    color: var(--text-primary);
}

#am-settings-menu label span {
    margin-bottom: 0; /* Override default label margin */
}

#am-settings-menu label input[type="checkbox"] {
    margin-right: 12px;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--background-secondary);
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

#am-settings-menu label input[type="checkbox"]:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

#am-settings-menu label input[type="checkbox"]:checked::after {
    content: '✔';
    position: absolute;
    color: white;
    font-size: 14px;
    top: 0px;
    left: 2px;
}

/* --- Universal Workflow Checklist Style --- */
/* This rule targets the checklist in BOTH the Kanban and Schools view */
.kanban-card .workflow-checklist,
.school-view-card .workflow-checklist {
    list-style: none;
    padding: 10px 0 0 0;
    margin: 0;
}

/* --- Account Management Header Cleanup --- */

/* This rule styles the controls container, removing any borders or extra spacing */
#account-management-container .am-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    border: none;
}

/* This adds a bit of top padding to the main card for breathing room */
#account-management-container .card {
    padding-top: 20px;
    padding-bottom: 20px;
}

#account-management-container .am-controls #kanban-search-input {
    margin-bottom: 0;
}

/* --- MODIFIED: Adjust list item for better vertical spacing --- */
.job-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px; /* Adjusted padding */
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
    min-height: 50px; /* Added min-height for consistent row size */
}

/* --- REMOVED: You can delete the old .job-name-span rule --- */
/*
.job-name-span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}
*/

/* --- NEW: Add these styles for the two-line job name layout --- */
.job-name-container {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.job-name-top-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
    color: var(--text-primary);
}

.job-name-bottom-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: bold;
    color: var(--text-secondary);
}

#am-chart-details {
    border-top: 1px solid var(--border-color);
    margin-top: 20px;
    padding-top: 20px;
}

#am-chart-details h4 {
    color: var(--text-primary);
    margin: 0 0 15px 0;
    font-size: 16px;
}

#am-chart-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 250px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}

#am-chart-details li {
    background-color: var(--background-primary);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-secondary);
}
/* --- Sidebar School Search --- */
.sidebar-search-container {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color);
}

#school-search-input {
    width: 100%;
    padding: 10px;
    background-color: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    box-sizing: border-box;
}

#school-search-input::placeholder {
    color: var(--text-secondary);
}

#schools-sidebar .job-list-group-header {
    padding: 1px 20px;
    background-color: var(--background-primary);
    color: var(--text-secondary);
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: sticky;
    top: 0;
    text-align: center; 
}

#schools-sidebar .job-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px; /* Reduced vertical padding from 12px */
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
    min-height: 44px; /* Reduced min-height from 50px */
}

#confirm-delete-job-btn {
    background-color: var(--status-unhealthy);
}

#confirm-delete-job-btn:hover {
    background-color: #c0392b; /* A darker red for hover */
}

#confirm-delete-job-btn:disabled,
#confirm-delete-job-btn:disabled:hover {
    background-color: var(--border-color);
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}
/* --- Job Header Button Alignment Fix --- */
.job-header-actions .button-delete-outline {
    padding: 12px 20px;
    font-size: 14px; /* Matches the default button font size */
}
.document-preview-btn img {
    width: 20px;
    height: 20px;
}
/* 1. Removes the underline and aligns text for any <a> tag styled as a button */
a.button-secondary,
a.button-primary,
a.button-delete-outline {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* 2. Ensures all buttons in that specific header have the exact same size */
.job-header-actions .button-secondary,
.job-header-actions .button-delete-outline {
    padding: 12px 20px;
    font-size: 14px;
}

/* Nudge the calendar icon button in schools hub up for better alignment */
#calendar-btn {
    position: relative;
    top: -2px; /* Use a negative number to move it up. Adjust this value as needed. */
}

/* Nudge the 'add new school' button down for alignment */
#add-new-school-btn {
    position: relative;
    top: 2px; /* Use a positive number to move it down */
}

/* Nudge the calendar button for vertical alignment in job hub */
#calendar-btn {
    position: relative;
    top: -4px; /* Adjust this value to move the button up (negative) or down (positive) */
}

.assigned-shoots-list {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
    padding-left: 2px;
}

/* --- School Card Footer for Auto-Complete Button --- */
.school-card-footer {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    text-align: right;
}

.school-card-footer .button-secondary {
    width: auto;
    padding: 8px 16px;
    font-size: 14px;
}

/* --- School Card Account Manager Editor --- */
.am-info-container {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 15px;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
}

.am-info-container strong {
    color: var(--text-primary);
}

.am-info-container .edit-am-btn {
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.6;
    padding: 0;
    margin-left: 8px; /* Adds space between name and icon */
    width: 24px;
    height: 24px;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}
.am-info-container .edit-am-btn:hover {
    opacity: 1;
}
.am-info-container .edit-am-btn img {
    width: 16px;
    height: 16px;
}

.am-info-container .edit-field {
    display: none;
    align-items: center;
    gap: 10px;
}

/* When in edit mode, hide view field and show edit field */
.am-info-container.edit-mode .view-field {
    display: none;
}
.am-info-container.edit-mode .edit-field {
    display: flex;
}

.am-info-container .am-select-editor {
    width: auto;
    flex-grow: 1;
    font-size: 14px;
    padding: 5px 8px; /* Make it a bit more compact */
}
.am-info-container .edit-field label {
    margin-bottom: 0;
    font-weight: normal;
    flex-shrink: 0;
}