/* ======================================
   TABLE OF CONTENTS
   ======================================
   1. CARD STYLES
      1.1 Court Cards
      1.2 Attorney Cards
   2. CALENDAR STYLES
      2.1 Attorney Calendar
      2.2 Court Calendar
      2.3 Full Calendar
   3. FORM STYLES
      3.1 Duty Day Forms
      3.2 Form Elements
   4. UI COMPONENTS
      4.1 Buttons
      4.2 Datepicker
   5. RESPONSIVE STYLES
      5.2 Responsive Layouts
      5.3 Print Styles
   ====================================== */

/* ======================================
   1. CARD STYLES
   ====================================== */

/* 1.1 Court Cards */
.ddc-court-directory {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 0;
}

.ddc-court-directory .card.court-card {
    width: calc(50% - 30px);
    margin: 0 15px 30px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
    position: relative;
    overflow: hidden;
}

.ddc-court-directory .card.court-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.ddc-court-directory .court-header {
    background-color: var(--ddc-primary, #1a365d);
    padding: 15px 20px;
    border-radius: 8px 8px 0 0;
    margin: -20px -20px 20px;
}

.ddc-court-directory .court-title {
    color: #ffffff;
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
}

.ddc-court-directory .court-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ddc-court-directory .court-address {
    font-style: normal;
    line-height: 1.5;
    font-size: 16px;
    margin-bottom: 5px;
}

.ddc-court-directory .court-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ddc-court-directory .phone-number,
.ddc-court-directory .tty-number,
.ddc-court-directory .email-address {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ddc-court-directory .fa {
    color: var(--ddc-primary, #1a365d);
    width: 16px;
    text-align: center;
}

.ddc-court-directory .phone-link,
.ddc-court-directory .tty-link,
.ddc-court-directory .email-link {
    color: var(--ddc-primary, #1a365d);
    text-decoration: none;
    transition: color 0.2s;
}

.ddc-court-directory .phone-link:hover,
.ddc-court-directory .tty-link:hover,
.ddc-court-directory .email-link:hover {
    text-decoration: underline;
    text-decoration: underline;
}

/* 1.2 Attorney Cards */
.ddc-attorney-directory {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 0;
}

.ddc-attorney-directory .card.attorney-card {
    width: calc(50% - 30px);
    margin: 0 15px 30px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
    position: relative;
    overflow: hidden;
}

.ddc-attorney-directory .card.attorney-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.ddc-attorney-directory .attorney-header {
    background-color: var(--ddc-primary, #1a365d);
    padding: 15px 20px;
    border-radius: 8px 8px 0 0;
    margin: -20px -20px 20px;
}

.ddc-attorney-directory .attorney-title {
    color: #ffffff;
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
}

.ddc-attorney-directory .attorney-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ddc-attorney-directory .attorney-address {
    font-style: normal;
    line-height: 1.5;
    font-size: 16px;
    margin-bottom: 5px;
}

.ddc-attorney-directory .attorney-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ddc-attorney-directory .phone-number,
.ddc-attorney-directory .email-address {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ddc-attorney-directory .fa {
    color: var(--ddc-primary, #1a365d);
    width: 16px;
    text-align: center;
}

.ddc-attorney-directory .phone-link,
.ddc-attorney-directory .email-link {
    color: var(--ddc-primary, #1a365d);
    text-decoration: none;
    transition: color 0.2s;
}

.ddc-attorney-directory .phone-link:hover,
.ddc-attorney-directory .email-link:hover {
    text-decoration: underline;
    text-decoration: underline;
}

/* ======================================
   2. CALENDAR STYLES
   ====================================== */

/* 2.1 Attorney Calendar */
.ddc-attorney-calendar {
    width: 100%;
    max-width: 800px;
}

.ddc-attorney-calendar .select_user {
    margin-bottom: 20px;
}

.ddc-attorney-calendar .select_user label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.ddc-attorney-calendar .select_user select {
    width: 100%;
    max-width: 400px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    background-color: #f9f9f9;
}

.ddc-attorney-calendar .attorney-info {
    position: relative;
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Edit Attorney button pinned to the upper-right of the info block. */
.ddc-attorney-calendar .attorney-info .ddc-attorney-edit-actions {
    position: absolute;
    top: 16px;
    right: 20px;
    margin: 0;
}
.ddc-attorney-calendar .attorney-info .ddc-attorney-edit-actions .ddc-edit-attorney-link {
    margin-top: 0;
}
/* On narrow screens drop the button back into normal flow so it can't overlap
   the attorney's name. */
@media (max-width: 600px) {
    .ddc-attorney-calendar .attorney-info .ddc-attorney-edit-actions {
        position: static;
        margin-top: 12px;
    }
}

.ddc-attorney-calendar .attorney-info p {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.5;
}

.ddc-attorney-calendar .attorney-info a {
    color: var(--ddc-primary, #1a365d);
    text-decoration: none;
}

.ddc-attorney-calendar .attorney-info a:hover {
    text-decoration: underline;
}

.ddc-attorney-calendar h3 {
    background-color: var(--ddc-primary, #1a365d);
    color: white;
    padding: 12px 20px;
    border-radius: 4px;
    margin: 30px 0 20px;
    font-size: 18px;
    font-weight: 600;
}

.ddc-attorney-calendar .no-duties {
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
    font-style: italic;
    color: #666;
}

.ddc-duty-days-form {
    margin-bottom: 30px;
}

.ddc-attorney-calendar .duty-day-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    margin-bottom: 8px;
    background-color: #f9f9f9;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: background-color 0.2s;
}

.ddc-attorney-calendar .duty-day-item:hover {
    background-color: #f5f5f5;
}

.ddc-attorney-calendar .duty-day-item:nth-child(odd) {
    background-color: #f3f3f3;
}

.ddc-attorney-calendar .duty-day-info {
    flex: 1;
    font-weight: 500;
}

.ddc-attorney-calendar .duty-day-actions {
    display: flex;
    gap: 10px;
}

.ddc-choice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border: 2px solid;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    background-color: #fff;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.05s;
    min-width: 110px;
    text-align: center;
    font-family: inherit;
    line-height: 1.2;
}

.ddc-choice-accept {
    color: #2e7d32;
    border-color: #2e7d32;
}

.ddc-choice-decline {
    color: #c62828;
    border-color: #c62828;
}

.ddc-choice-accept:hover:not(:disabled) {
    background-color: #2e7d32;
    color: #fff;
    box-shadow: 0 2px 6px rgba(46,125,50,0.25);
}

.ddc-choice-decline:hover:not(:disabled) {
    background-color: #c62828;
    color: #fff;
    box-shadow: 0 2px 6px rgba(198,40,40,0.25);
}

.ddc-choice-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.ddc-choice-btn:focus-visible {
    outline: 2px solid var(--ddc-primary, #1a365d);
    outline-offset: 2px;
}

.ddc-choice-btn:disabled {
    opacity: 0.55;
    cursor: progress;
}

.ddc-awaiting-row.is-submitting {
    opacity: 0.85;
}

.ddc-row-result {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    padding: 8px 18px;
}

.ddc-result-accept { color: #2e7d32; }
.ddc-result-decline { color: #c62828; }

.ddc-row-error {
    flex-basis: 100%;
    margin-top: 8px;
    padding: 6px 10px;
    background-color: #fdecea;
    color: #b71c1c;
    border-radius: 4px;
    font-size: 13px;
}

.ddc-attorney-calendar .form-actions {
    margin-top: 20px;
    text-align: right;
}

.ddc-attorney-calendar input[type="submit"] {
    background-color: var(--ddc-primary, #1a365d);
    color: white;
    border: none;
    padding: 10px 25px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.ddc-attorney-calendar input[type="submit"]:hover {
    filter: brightness(0.9);
}

ul.ddc-duty-days-list {
    padding: 0!important;
    margin: 0!important;
}

.ddc-duty-days-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 20px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    border-left: 4px solid var(--ddc-primary, #1a365d);
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.2s;
    list-style: none!important;
}

.ddc-duty-days-list li:hover {
    transform: translateX(3px);
}

.ddc-duty-days-list li:nth-child(odd) {
    background-color: #f3f3f3;
}

.ddc-duty-days-list .dd-info {
    flex: 1;
    font-weight: 500;
}

/* Add-to-calendar dropdown */
.dd-cal-menu {
    position: relative;
    display: inline-block;
}

.dd-cal-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--ddc-primary, #1a365d);
    border-radius: 4px;
    background-color: transparent;
    color: var(--ddc-primary, #1a365d);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.dd-cal-toggle:hover,
.dd-cal-toggle:focus-visible,
.dd-cal-menu.is-open .dd-cal-toggle {
    background-color: var(--ddc-primary, #1a365d);
    color: #fff;
    outline: none;
}

.dd-cal-toggle .fa-caret-down {
    font-size: 12px;
    margin-left: 2px;
}

.dd-cal-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    padding: 6px 0;
    z-index: 100;
}

/* When a row's dropdown is open, lift the whole <li> above its neighbours.
   Otherwise the next row's `:hover { transform: translateX(3px) }` mints
   its own stacking context as the cursor enters it (moving from the open
   menu down toward an option) and paints over the bottom of the dropdown. */
.ddc-duty-days-list li:has(.dd-cal-menu.is-open) {
    position: relative;
    z-index: 20;
}

/* Don't let the open row's own translateX hover nudge the dropdown sideways. */
.ddc-duty-days-list li:has(.dd-cal-menu.is-open):hover {
    transform: none;
}

.dd-cal-dropdown[hidden] { display: none; }

.dd-cal-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.dd-cal-option:hover,
.dd-cal-option:focus-visible {
    background-color: #f3f3f3;
    color: var(--ddc-primary, #1a365d);
    text-decoration: none;
    outline: none;
}

.dd-cal-option i {
    width: 16px;
    text-align: center;
    color: var(--ddc-primary, #1a365d);
}

.ddc-list-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

/* Past duty days — collapsed by default via <details>. */
.ddc-past-section {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
}

.ddc-past-section > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background-color: #f3f3f3;
    border-radius: 4px;
    color: #555;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: background-color 0.15s;
}

.ddc-past-section > summary::-webkit-details-marker { display: none; }
.ddc-past-section > summary::marker { content: ''; }

.ddc-past-section > summary:hover,
.ddc-past-section > summary:focus-visible {
    background-color: #ebebeb;
    outline: none;
}

.ddc-past-toggle-icon {
    margin-left: auto;
    font-size: 12px;
    transition: transform 0.2s;
}

.ddc-past-section[open] .ddc-past-toggle-icon {
    transform: rotate(180deg);
}

.ddc-past-section .ddc-duty-days-list {
    margin-top: 12px !important;
}

.ddc-past-list li {
    opacity: 0.75;
    border-left-color: #999 !important;
}

.ddc-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #333;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.ddc-print-btn:hover,
.ddc-print-btn:focus {
    background-color: #555;
}

/* 2.2 Court Calendar */
.ddc-court-calendar {
    width: 100%;
    margin: 0 auto;
    font-size: 16px;
}

.ddc-calendar-header h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.ddc-calendar-controls {
    margin-bottom: 30px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.ddc-court-selector {
    margin-bottom: 20px;
}

.ddc-court-selector label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.ddc-court-selector select {
    width: 100%;
    max-width: 400px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.ddc-month-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.month-nav-current {
    text-align: center;
    flex-grow: 1;
}

.month-nav-current h3 {
    margin: 0 0 10px;
    font-size: 18px;
}

.ddc-calendar-week {
    margin-bottom: 25px;
}

.dd-calendar {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #eee;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    table-layout: fixed;
}

.dd-calendar th, 
.dd-calendar td {
    border: 1px solid #eee;
    padding: 0;
    vertical-align: top;
}

.dd-calendar th {
    background-color: #f3f3f3;
    text-align: center;
    padding: 10px 5px;
}

.dd-calendar th.week-label {
    width: 120px;
    background-color: var(--ddc-primary, #1a365d); /* theme primary, navy fallback */
    color: #ffffff;
    font-weight: 700;
}

.day-header {
    height: 50px;
    padding: 8px !important;
}

.day-name {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
}

.day-date {
    display: block;
    font-size: 12px;
    color: #666;
}

.court-name {
    padding: 10px !important;
    font-weight: 600;
    background-color: #f9f9f9;
}

.duty-cell {
    padding: 5px !important;
    height: 100%;
    min-height: 100px;
}

.duty-slots {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.duty-item {
    padding: 8px;
    border-radius: 4px;
    background-color: #f9f9f9;
    margin-bottom: 2px;
    font-size: 13px;
}

.duty-item:hover {
    background-color: #f5f5f5;
}

.duty-link, 
.duty-name, 
.duty-status {
    display: block;
    text-decoration: none;
    font-weight: 500;
}

/* Status Colors */
.duty-link.holiday, 
.duty-status.holiday {
    color: #e53935;
    font-weight: 600;
}

.duty-link.cpcs, 
.duty-status.cpcs {
    color: #000;
    font-weight: 600;
}

.duty-link.yad, 
.duty-status.yad {
    color: #000;
    font-weight: 600;
}

.duty-link.open, 
.duty-status.open {
    color: #4caf50;
    font-weight: 600;
}

.duty-link.waiting, 
.duty-name.waiting {
    color: #e53935;
}

.duty-link.accepted, 
.duty-name.accepted {
    color: #000;
}

.atty-phone {
    display: none;
    font-size: 12px;
    color: #666;
    margin-top: 3px;
}

/* 2.3 Full Calendar */
.ddc-full-calendar {
    width: 100%;
    margin: 0 auto;
}

.ddc-week-selector {
    margin-bottom: 20px;
}

.ddc-week-selector label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.week-selector {
    width: 100%;
    max-width: 400px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    background-color: #fff;
}

.ddc-week-header {
    text-align: center;
    margin: 15px 0;
}

.ddc-week-header h3 {
    margin: 0;
    font-size: 20px;
    color: #333;
    font-weight: 600;
}

.ddc-month-header {
    text-align: center;
    margin: 15px 0;
}

.ddc-month-header h3 {
    margin: 0;
    font-size: 20px;
    color: #333;
    font-weight: 600;
}

/* ======================================
   3. FORM STYLES
   ====================================== */

/* 3.1 Duty Day Forms */
.ddc-duty-day-form-container {
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.ddc-form-header {
    background-color: var(--ddc-primary, #1a365d);
    padding: 20px;
    text-align: center;
}

.ddc-form-header h2 {
    color: white;
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.ddc-form-content {
    padding: 30px;
}

.ddc-form-field {
    margin-bottom: 20px;
}

.ddc-form-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.ddc-form-field input[type="text"],
.ddc-form-field input[type="email"],
.ddc-form-field input[type="number"],
.ddc-form-field textarea,
.ddc-form-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    background-color: #f9f9f9;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
    font-family: inherit;
}

.ddc-field-hint {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #666;
}

.ddc-form-field input[type="text"]:focus,
.ddc-form-field input[type="email"]:focus,
.ddc-form-field input[type="number"]:focus,
.ddc-form-field textarea:focus,
.ddc-form-field select:focus {
    border-color: var(--ddc-primary, #1a365d);
    box-shadow: 0 0 0 2px rgba(26, 54, 93, 0.12);
    outline: none;
}

/* ───────── Front-end Court Edit (admin) ───────── */
.ddc-edit-court-link,
.ddc-edit-attorney-link {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 14px;
    background-color: var(--ddc-primary, #1a365d);
    color: #fff !important;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
}
.ddc-edit-court-link:hover,
.ddc-edit-attorney-link:hover {
    filter: brightness(0.92);
    color: #fff;
}

.ddc-court-edit {
    max-width: 760px;
}
.ddc-court-edit-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.ddc-court-edit-head h2 {
    margin: 0;
}
.ddc-court-edit-back {
    text-decoration: none;
    color: var(--ddc-primary, #1a365d);
    font-weight: 600;
}
.ddc-court-edit-back:hover {
    text-decoration: underline;
}
.ddc-court-edit h3 {
    margin: 26px 0 6px;
    font-size: 18px;
}
.ddc-court-edit-help {
    margin: 0 0 14px;
    color: #555;
    font-size: 14px;
}
.ddc-court-edit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 18px;
}
.ddc-court-slots-grid {
    grid-template-columns: repeat(5, 1fr);
}
.ddc-court-edit textarea {
    resize: vertical;
}
.ddc-court-edit .extra-slot-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.ddc-court-edit .extra-slot-row input[type="text"] {
    flex: 1;
    max-width: 220px;
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 15px;
    background-color: #f9f9f9;
}
.ddc-court-edit-actions {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}
/* Secondary/outline button (e.g. the modal Cancel). Its own background is set
   so it doesn't inherit the theme's dark button colour with dark text (which
   made it invisible until hover). Uses the theme colour, fills in on hover. */
.ddc-btn-cancel {
    background: transparent;
    border: 1px solid var(--ddc-primary, #1a365d);
    color: var(--ddc-primary, #1a365d);
    padding: 10px 22px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}
.ddc-btn-cancel:hover,
.ddc-btn-cancel:focus-visible {
    background: var(--ddc-primary, #1a365d);
    color: #fff;
    outline: none;
}

@media (max-width: 600px) {
    .ddc-court-edit-grid,
    .ddc-court-slots-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.form-error {
    color: #e53935;
    font-size: 14px;
    margin-top: 5px;
}

.ddc-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* 3.2 Form Elements */
.ddc-message {
    padding: 12px 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-weight: 500;
}

.ddc-success {
    background-color: #e6f7e9;
    color: #2e7d32;
    border-left: 4px solid #2e7d32;
}

.ddc-user-selection {
    margin-bottom: 30px;
}

.custom_date {
    width: 200px;
}

/* ======================================
   4. UI COMPONENTS
   ====================================== */

/* 4.1 Buttons */
.button {
    background-color: var(--ddc-primary, #1a365d);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 14px;
}

.button:hover {
    filter: brightness(0.9);
}

.cancel-button {
    background-color: #f3f3f3;
    color: #333;
}

.cancel-button:hover {
    background-color: #e0e0e0;
}

.submit-button {
    background-color: var(--ddc-primary, #1a365d);
    color: white;
}

.submit-button:hover {
    filter: brightness(0.9);
}

.ddc-navigation-controls {
    margin-top: 20px;
}

.nav-buttons {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.nav-button, 
.today-button {
    flex: 1;
}

.today-button {
    background-color: #333;
}

.today-button:hover {
    background-color: #555;
}

/* 4.2 Datepicker */
.ui-datepicker {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 10px;
    width: 280px;
}

.ui-datepicker-header {
    background-color: var(--ddc-primary, #1a365d);
    color: white;
    border-radius: 4px 4px 0 0;
    padding: 10px;
    position: relative;
}

.ui-datepicker-title {
    text-align: center;
    font-weight: 600;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    position: absolute;
    top: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: white;
}

.ui-datepicker-prev {
    left: 10px;
}

.ui-datepicker-next {
    right: 10px;
}

.ui-datepicker-calendar {
    width: 100%;
    border-collapse: collapse;
}

.ui-datepicker-calendar th {
    padding: 5px;
    text-align: center;
    font-weight: 600;
}

.ui-datepicker-calendar td {
    padding: 2px;
    text-align: center;
}

.ui-datepicker-calendar a {
    display: block;
    padding: 5px;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
}

.ui-datepicker-calendar a:hover {
    background-color: #f3f3f3;
}

.ui-datepicker-calendar .ui-state-active {
    background-color: var(--ddc-primary, #1a365d);
    color: white;
}

/* ======================================
   5. RESPONSIVE STYLES
   ====================================== */

/* 5.2 Responsive Layouts */
@media only screen and (max-width: 960px) {
    .ddc-month-navigation {
        flex-direction: column;
        gap: 10px;
    }
    
    .month-nav-current {
        order: -1;
        margin-bottom: 10px;
    }
    
    .month-nav-prev,
    .month-nav-next {
        width: 100%;
    }
    
    .month-nav-prev input,
    .month-nav-next input,
    .month-nav-current input {
        width: 100%;
    }
    
    .day-name {
        font-size: 12px;
    }
    
    .day-date {
        font-size: 10px;
    }
    
    .week-label,
    .court-name {
        width: 80px;
        font-size: 12px;
    }
    
    .duty-item {
        padding: 5px;
    }
    
    .nav-buttons {
        flex-direction: column;
    }
    
    .nav-button, 
    .today-button {
        width: 100%;
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 600px) {
    .dd-calendar {
        font-size: 11px;
    }
    
    .week-label,
    .court-name {
        width: 60px;
    }
    
    .duty-item {
        padding: 4px;
        font-size: 10px;
    }
}

@media (max-width: 767px) {
    .ddc-court-directory .card.court-card,
    .ddc-attorney-directory .card.attorney-card {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }
    
    .ddc-attorney-calendar .duty-day-item {
        flex-direction: column;
        align-items: stretch;
    }

    .ddc-attorney-calendar .duty-day-info {
        margin-bottom: 10px;
    }

    .ddc-attorney-calendar .duty-day-actions {
        margin-top: 5px;
        width: 100%;
        gap: 10px;
    }

    .ddc-attorney-calendar .duty-day-actions .ddc-choice-btn {
        flex: 1;
        min-width: 0;
    }

    .ddc-duty-days-list li {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .dd-cal-menu {
        width: 100%;
    }

    .dd-cal-toggle {
        width: 100%;
        justify-content: center;
    }

    .dd-cal-dropdown {
        right: 0;
        left: 0;
        min-width: 0;
    }
    
    .ddc-attorney-calendar .form-actions {
        text-align: center;
    }
    
    .ddc-attorney-calendar input[type="submit"] {
        width: 100%;
    }
    
    .ddc-duty-day-form-container {
        border-radius: 0;
        box-shadow: none;
    }
    
    .ddc-form-content {
        padding: 20px;
    }
    
    .ddc-form-actions {
        flex-direction: column-reverse;
    }
    
    .button {
        width: 100%;
        text-align: center;
    }
}

/* 5.3 Print Styles */
@media print {
    .atty-phone {
        display: block;
    }

    .ddc-calendar-controls {
        display: none;
    }

    .dd-calendar {
        box-shadow: none;
    }

    /* Attorney calendar print view: keep the attorney info and current days
       list; hide controls, the awaiting-acceptance section, per-row actions,
       and the collapsed past-days section. */
    .ddc-attorney-calendar .big_form,
    .ddc-attorney-calendar .ddc-awaiting-section,
    .ddc-attorney-calendar .ddc-past-section,
    .ddc-list-actions,
    .ddc-duty-days-list .dd-cal-menu {
        display: none !important;
    }

    .ddc-attorney-calendar h3 {
        background-color: transparent !important;
        color: #000 !important;
        padding: 0 !important;
        border-bottom: 2px solid #000;
    }

    .ddc-attorney-calendar .attorney-info {
        background-color: transparent !important;
        box-shadow: none !important;
        padding: 0 0 10px !important;
    }

    .ddc-duty-days-list li {
        background-color: transparent !important;
        box-shadow: none !important;
        border-left: 2px solid #000 !important;
        page-break-inside: avoid;
    }

    .ddc-duty-days-list li:nth-child(odd) {
        background-color: transparent !important;
    }
}

/* Directory Search Styles */
.ddc-directory-search {
    width: 100%;
    max-width: 800px;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.ddc-directory-search .search-form-wrapper {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.ddc-search-input {
    width: 100%;
    padding: 12px 15px 12px 40px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    background-color: #fff;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

.ddc-search-input:focus {
    outline: none;
    border-color: var(--ddc-primary, #1a365d);
    box-shadow: 0 0 0 2px rgba(124, 8, 0, 0.1);
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ddc-primary, #1a365d);
    font-size: 16px;
}

.ddc-search-count {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .ddc-directory-search .search-form-wrapper {
        flex-direction: column;
    }
    
    .ddc-directory-search input[type="text"] {
        border-right: 1px solid #ddd;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
    }
    
    .ddc-directory-search .search-submit {
        border-radius: 0 0 4px 4px;
    }
}

/* Flexbox layout for court selector and email controls */
.ddc-flex-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.ddc-court-selector,
.ddc-email-controls {
    flex: 1;
    min-width: 250px;
}

.ddc-court-selector select,
.ddc-email-controls input[type="email"] {
    width: 100%;
    max-width: 100%;
}

/* Email Controls */
.ddc-email-controls {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    border-top: none;
}

.ddc-email-controls label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.email-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.email-input-group input[type="email"] {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.email-button {
    white-space: nowrap;
    background-color: var(--ddc-primary, #1a365d);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 12px 20px;
    font-size: 16px;
    line-height: 1.2;
}

.email-button:hover {
    background-color: var(--ddc-primary, #1a365d);
    filter: brightness(0.92);
}

.ddc-print-export {
    margin-top: 0;
}

/* Empty spacer label so the Print button lines up with the Send button, which
   is pushed down by its "Email Calendar:" label. */
.ddc-print-export label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

@media (max-width: 600px) {
    .ddc-print-export #print-calendar-btn { width: 100%; justify-content: center; }
}

.email-status {
    margin-top: 10px;
    font-size: 14px;
}

.email-loading {
    color: #666;
}

.email-success {
    color: #2e7d32;
    font-weight: 500;
}

.email-error {
    color: #e53935;
    font-weight: 500;
}

/* Responsive layout adjustments */
@media (max-width: 767px) {
    .ddc-flex-controls {
        flex-direction: column;
    }
    
    .ddc-court-selector,
    .ddc-email-controls {
        width: 100%;
    }
    
    .email-input-group {
        flex-direction: column;
    }
    
    .email-input-group input[type="email"] {
        margin-bottom: 10px;
    }
    
    .email-button {
        width: 100%;
    }
}

/* ======================================
   6. FRONT-END CALENDAR SETTINGS
   (admin-only [ddc_calendar_settings])
   ====================================== */

.ddc-front-settings {
    width: 100%;
    max-width: 800px;
}

.ddc-front-settings .ddc-message {
    margin-bottom: 20px;
}

.ddc-settings-card {
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    padding: 24px 28px;
    margin-bottom: 24px;
}

.ddc-settings-card h3 {
    margin: 0 0 6px;
    color: var(--ddc-primary, #1a365d);
    font-size: 20px;
    font-weight: 600;
}

.ddc-settings-card .ddc-settings-help {
    margin: 0 0 18px;
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}

.ddc-status-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    font-size: 14px;
}

.ddc-status-label {
    color: #555;
}

.ddc-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ddc-status-badge.ddc-status-open {
    background-color: #e6f4ea;
    color: var(--color-secondary, #1e7a36);
    border: 1px solid var(--color-secondary, #1e7a36);
}

.ddc-status-badge.ddc-status-closed {
    background-color: #fbe9e7;
    color: var(--color-accent, #b71c1c);
    border: 1px solid var(--color-accent, #b71c1c);
}

.ddc-settings-form {
    margin: 0;
}

.ddc-settings-form .ddc-form-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.ddc-settings-form .ddc-form-row label {
    flex: 0 0 130px;
    color: #333;
    font-weight: 600;
    font-size: 15px;
}

.ddc-settings-form .ddc-form-row input[type="text"] {
    flex: 1;
    max-width: 240px;
    padding: 9px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
    background-color: #fafafa;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ddc-settings-form .ddc-form-row input[type="text"]:focus {
    border-color: var(--ddc-primary, #1a365d);
    box-shadow: 0 0 0 2px rgba(26, 54, 93, 0.15);
    background-color: #fff;
    outline: none;
}

.ddc-settings-form .ddc-form-row-checkbox label {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 15px;
    color: #222;
    cursor: pointer;
}

.ddc-settings-form .ddc-form-row-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ddc-primary, #1a365d);
}

.ddc-form-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.ddc-btn-primary {
    background-color: var(--ddc-primary, #1a365d);
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s;
}

.ddc-btn-primary:hover,
.ddc-btn-primary:focus-visible {
    filter: brightness(0.9);
    outline: none;
}

.ddc-btn-primary.ddc-btn-open {
    background-color: var(--color-secondary, #1e7a36);
}

.ddc-btn-primary.ddc-btn-open:hover,
.ddc-btn-primary.ddc-btn-open:focus-visible {
    background-color: var(--color-secondary, #1e7a36);
    filter: brightness(0.92);
}

.ddc-btn-primary.ddc-btn-close {
    background-color: var(--color-accent, #b71c1c);
}

.ddc-btn-primary.ddc-btn-close:hover,
.ddc-btn-primary.ddc-btn-close:focus-visible {
    background-color: var(--color-accent, #b71c1c);
    filter: brightness(0.92);
}

@media (max-width: 600px) {
    .ddc-settings-card {
        padding: 18px 16px;
    }

    .ddc-settings-form .ddc-form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .ddc-settings-form .ddc-form-row label {
        flex: 1 1 auto;
    }

    .ddc-settings-form .ddc-form-row input[type="text"] {
        max-width: 100%;
    }

    .ddc-btn-primary {
        width: 100%;
    }
}

/* ======================================
   DUTY-DAY CREATE/EDIT MODAL
   (admin, over the Court/Full calendars)
   ====================================== */
.ddc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    z-index: 100000;
    overflow-y: auto;
}
.ddc-modal-overlay.is-open {
    display: flex;
}
.ddc-modal {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.ddc-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: var(--ddc-primary, #1a365d);
    color: #fff;
}
.ddc-modal-title {
    margin: 0;
    font-size: 18px;
    color: #fff;
}
/* The header "×" close. Scoped to the head so it doesn't override the Cancel
   button in .ddc-modal-actions, which shares the .ddc-modal-close JS hook. */
.ddc-modal-head .ddc-modal-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.ddc-modal-form {
    padding: 20px;
}
.ddc-modal-form .ddc-form-field {
    margin-bottom: 14px;
}
.ddc-modal-form label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}
.ddc-modal-form input[type="text"],
.ddc-modal-form select {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 15px;
}
.ddc-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
}
.ddc-modal-error {
    margin-top: 12px;
    padding: 10px 12px;
    background: #ffebee;
    border-left: 4px solid #f44336;
    color: #b71c1c;
    border-radius: 4px;
    font-size: 14px;
}

/* ======================================
   REPORTS ([ddc_reports])
   ====================================== */
.ddc-reports {
    width: 100%;
    max-width: 800px;
}
.ddc-reports-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 24px;
    padding: 18px 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.ddc-reports-filter .ddc-report-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}
/* The period-specific groups toggle via the [hidden] attribute (set server-side
   and by the selector's JS). Without this, the display:flex above would beat the
   browser's [hidden]{display:none} and every group would show at once. */
.ddc-reports-filter .ddc-report-group[hidden] {
    display: none;
}
.ddc-reports-filter .ddc-report-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ddc-reports-filter label {
    font-weight: 600;
    font-size: 14px;
}
.ddc-reports-filter select,
.ddc-reports-filter input[type="text"] {
    padding: 9px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
    background-color: #fff;
}
.ddc-reports-filter .ddc-report-submit {
    margin-left: auto;
}

.ddc-report-heading {
    margin: 0 0 4px;
    color: var(--ddc-primary, #1a365d);
}
.ddc-report-note {
    margin: 0 0 16px;
    color: #555;
    font-size: 14px;
}
.ddc-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}
.ddc-report-table th,
.ddc-report-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #e5e5e5;
    text-align: left;
}
.ddc-report-table thead th {
    background-color: var(--ddc-primary, #1a365d);
    color: #fff;
    font-weight: 600;
}
.ddc-report-table .ddc-col-rank {
    width: 48px;
    color: #888;
    text-align: right;
}
.ddc-report-table .ddc-col-count {
    width: 120px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ddc-report-table .ddc-col-bbo {
    width: 120px;
    font-variant-numeric: tabular-nums;
}
/* Sortable column headers — the <button> fills the cell and inherits the
   header's white-on-primary styling so it reads as a header, not a form button. */
.ddc-report-table th.ddc-sortable {
    padding: 0;
}
.ddc-report-table th.ddc-sortable .ddc-sort-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 10px 14px;
    margin: 0;
    background: none;
    border: 0;
    font: inherit;
    color: #fff;
    text-align: left;
    cursor: pointer;
}
.ddc-report-table th.ddc-col-rank .ddc-sort-btn,
.ddc-report-table th.ddc-col-count .ddc-sort-btn {
    justify-content: flex-end;
}
.ddc-report-table th.ddc-sortable .ddc-sort-btn:hover {
    text-decoration: underline;
}
.ddc-report-table th.ddc-sortable .ddc-sort-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: -2px;
}
.ddc-report-table .ddc-sort-ind {
    font-size: 11px;
    line-height: 1;
}

@media print {
    /* Native browser print (Ctrl+P): drop the filter controls. The Print Report
       button uses a dedicated iframe, so this only affects a manual print. */
    .ddc-reports-filter { display: none !important; }
}
.ddc-report-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}
.ddc-report-table tfoot td {
    border-top: 2px solid var(--ddc-primary, #1a365d);
    border-bottom: none;
}

@media (max-width: 600px) {
    .ddc-reports-filter .ddc-report-submit {
        margin-left: 0;
        width: 100%;
    }
    .ddc-reports-filter .ddc-report-submit .ddc-btn-primary {
        width: 100%;
    }
}

/* ─────────────────────────────────────────────
   STATUS CALENDAR ([ddc_status_calendar])
   A month grid for one duty-day status showing
   court names per day. --ddc-sc-color is the
   status colour, set inline on the wrapper.
   ───────────────────────────────────────────── */
.ddc-status-calendar {
    width: 100%;
}
.ddc-sc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.ddc-sc-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
}
.ddc-sc-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background-color: var(--ddc-sc-color, #1a365d);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.ddc-sc-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ddc-sc-navbtn {
    display: inline-block;
    padding: 6px 12px;
    background-color: var(--ddc-primary, #1a365d);
    color: #fff !important;
    text-decoration: none;
    border: 0;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.3;
    cursor: pointer;
}
.ddc-sc-navbtn:hover {
    filter: brightness(0.92);
    color: #fff;
}
.ddc-sc-navbtn[disabled],
.ddc-sc-navbtn-disabled {
    opacity: 0.45;
    cursor: default;
    filter: none;
    pointer-events: none;
}
.ddc-sc-month {
    min-width: 150px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
}

/* Court calendar controls, laid out like the status calendar: court picker on
   top, then the title on the left with the month nav + print on the right, and
   the email row beneath the nav. Reuses the status-calendar nav/picker styles. */
.ddc-cc-courtpicker {
    margin-bottom: 16px;
}
.ddc-court-calendar .ddc-cc-courtpicker select {
    max-width: 340px;
}
/* Full-calendar week picker: wide enough for the "MM-DD-YYYY to MM-DD-YYYY" labels. */
.ddc-full-calendar .ddc-sc-picker select {
    max-width: 320px;
}
.ddc-cc-head {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.ddc-cc-titlecol {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* don't stretch the Edit Court Info link to the title width */
    gap: 6px;
}
/* Compact edit link (the flex column would otherwise blockify + stretch it). */
.ddc-cc-titlecol .ddc-edit-court-link {
    margin-top: 0;
    align-self: flex-start;
}
.ddc-cc-titlecol .ddc-sc-title {
    margin: 0;
    flex-wrap: wrap;
}
.ddc-cc-controls-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
/* Email field + Send button on one line, button to the right of the input. */
.ddc-cc-emailrow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
.ddc-court-calendar .ddc-cc-emailrow input[type="email"] {
    width: 260px;
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}
.ddc-cc-emailrow .ddc-sc-navbtn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.ddc-court-calendar .email-status {
    text-align: right;
}

@media (max-width: 600px) {
    /* Stack the right-hand controls under the title on small screens. */
    .ddc-cc-controls-right {
        align-items: stretch;
        width: 100%;
    }
    .ddc-sc-head.ddc-cc-head .ddc-sc-nav,
    .ddc-cc-emailrow {
        justify-content: flex-start;
    }
    .ddc-court-calendar .ddc-cc-emailrow input[type="email"] {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }
}
.ddc-sc-note {
    margin: 0 0 14px;
    color: #555;
    font-size: 14px;
}
.ddc-sc-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.ddc-sc-grid th {
    background-color: var(--ddc-primary, #1a365d);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 6px;
    text-align: center;
    border: 1px solid var(--ddc-primary, #1a365d);
}
.ddc-sc-cell {
    vertical-align: top;
    border: 1px solid #e0e0e0;
    padding: 6px;
    height: 88px;
    width: 20%;
}
.ddc-sc-date {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    margin-bottom: 4px;
}
.ddc-sc-out {
    background-color: #fafafa;
}
.ddc-sc-out .ddc-sc-date {
    color: #ccc;
}
.ddc-sc-today {
    background-color: color-mix(in srgb, var(--ddc-sc-color, #1a365d) 8%, #fff);
}
.ddc-sc-today .ddc-sc-date {
    color: var(--ddc-sc-color, #1a365d);
}
/* Month-grid cells (shared by the status calendar and the court calendar).
   Each slot gets a thin left accent in its status colour; --ddc-sc-color is set
   on the whole status calendar (one status) or per duty item on the court
   calendar (each slot's own status). */
.ddc-sc-cell .duty-slots {
    margin-top: 2px;
}
.ddc-sc-cell .duty-item,
.ddc-full-calendar .duty-item {
    border-left: 3px solid var(--ddc-sc-color, #1a365d);
}
.ddc-sc-cell .duty-item {
    line-height: 1.3;
}
.ddc-sc-cell .duty-item .duty-link {
    cursor: pointer;
}
/* Status calendar only: its court-name links use the normal text colour. */
.ddc-status-calendar .ddc-sc-cell .duty-item .duty-link {
    color: inherit;
}
.ddc-status-calendar .ddc-sc-cell .duty-item .duty-link:hover {
    text-decoration: underline;
}

/* Status picker (shown when the shortcode has no status= attribute). */
.ddc-sc-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.ddc-sc-picker label {
    font-weight: 600;
    font-size: 14px;
}
.ddc-sc-picker select {
    width: auto;
    max-width: 260px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
    background-color: #fff;
}
@media (max-width: 480px) {
    /* Let it fill the row on very small screens rather than overflow. */
    .ddc-sc-picker select {
        max-width: 100%;
    }
}

@media (max-width: 700px) {
    /* Stack the month grid into a readable single column on small screens. */
    .ddc-sc-grid, .ddc-sc-grid thead, .ddc-sc-grid tbody,
    .ddc-sc-grid tr, .ddc-sc-grid th, .ddc-sc-grid td {
        display: block;
        width: auto;
    }
    .ddc-sc-grid thead {
        display: none;
    }
    .ddc-sc-cell {
        height: auto;
        min-height: 0;
    }
    .ddc-sc-cell:empty,
    .ddc-sc-out:not(:has(.duty-slots)) {
        display: none; /* hide blank/adjacent days when stacked */
    }
    .ddc-sc-date::after {
        content: " " attr(data-dow);
    }
}
/* ─────────────────────────────────────────────
   SITE TEMPLATE (county home pages, .ddc-home)
   Building blocks for the front page built with
   the plugin's content. Scoped under .ddc-home so
   the button classes never collide with the
   plugin's own .ddc-btn-primary / .ddc-btn-secondary
   (used by the modal, etc.). Colours resolve from
   --ddc-primary / --ddc-accent (see includes/colors.php).
   ───────────────────────────────────────────── */
.ddc-home {
    max-width: 760px;
    margin: 0;
}
.ddc-home .ddc-hero-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(27, 42, 85, 0.18);
    margin: 8px 0 4px;
}
.ddc-home .ddc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 32px 0;
}
.ddc-home .ddc-stat {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    background: #f6f7f9;
    border-top: 3px solid var(--ddc-accent, #b8860b);
    border-radius: 6px;
}
.ddc-home .ddc-stat-num {
    font-size: 2.6em;
    font-weight: 700;
    line-height: 1;
    color: var(--ddc-primary, #1a365d);
}
.ddc-home .ddc-stat-label {
    margin-top: 8px;
    font-size: 0.95em;
    color: #555;
}
.ddc-home .ddc-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 32px 0 8px;
}
.ddc-home .ddc-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.ddc-home .ddc-btn-primary {
    background: var(--ddc-primary, #1a365d);
    color: #fff;
}
.ddc-home .ddc-btn-primary:hover {
    filter: brightness(1.15);
    color: #fff;
}
.ddc-home .ddc-btn-secondary {
    background: #fff;
    color: var(--ddc-primary, #1a365d);
    border: 2px solid var(--ddc-primary, #1a365d);
}
.ddc-home .ddc-btn-secondary:hover {
    background: var(--ddc-primary, #1a365d);
    color: #fff;
}
.ddc-home .ddc-lead {
    font-size: 1.1em;
    line-height: 1.7;
    margin-bottom: 8px;
}
.ddc-home .ddc-section-title {
    color: var(--ddc-primary, #1a365d);
    border-bottom: 2px solid var(--ddc-accent, #b8860b);
    padding-bottom: 8px;
    margin: 40px 0 20px;
}
.ddc-home .ddc-subhead {
    color: var(--ddc-primary, #1a365d);
    margin: 28px 0 12px;
}
.ddc-home .ddc-contact-card {
    background: #f6f7f9;
    border-left: 4px solid var(--ddc-accent, #b8860b);
    border-radius: 6px;
    padding: 20px 24px;
    line-height: 1.7;
}
.ddc-home .ddc-name {
    display: block;
    font-size: 1.15em;
    font-weight: 700;
    color: var(--ddc-primary, #1a365d);
}
.ddc-home .ddc-role {
    display: block;
    color: #6b6b6b;
    margin-bottom: 10px;
}
.ddc-home .ddc-contact-meta {
    margin-bottom: 10px;
}
.ddc-home .ddc-contact-links a {
    color: var(--ddc-primary, #1a365d);
    text-decoration: none;
}
.ddc-home .ddc-contact-links a:hover {
    text-decoration: underline;
}
.ddc-home .ddc-placeholder {
    color: #999;
    font-style: italic;
}

/* Officers / directors columns + numbered steps (Genesis-safe list resets). */
.entry-content ul.ddc-people {
    list-style: none;
    margin: 12px 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 28px;
}
.entry-content ul.ddc-people > li {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.entry-content ul.ddc-people-titled .ddc-title {
    display: block;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ddc-accent, #b8860b);
    font-weight: 700;
}
.entry-content ul.ddc-steps {
    list-style: none;
    counter-reset: step;
    margin: 16px 0;
    padding: 0;
}
.entry-content ul.ddc-steps > li {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 12px 0 12px 48px;
    border-bottom: 1px solid #eee;
    line-height: 1.6;
}
.entry-content ul.ddc-steps > li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 12px;
    width: 30px;
    height: 30px;
    background: var(--ddc-primary, #1a365d);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-weight: 700;
    font-size: 0.9em;
}

@media (max-width: 480px) {
    .entry-content ul.ddc-people {
        grid-template-columns: 1fr;
    }
}