/* Approved home-screen palette, scoped to the existing email application panels.
   Visibility, thread expansion, chart dimensions and action states remain in JS. */
:is(#email-modal, #sent-response-modal, #password-modal, #admin-modal, #analytics-modal, #loading, #toast-container) {
    --panel-green: #6db33f;
    --panel-green-dark: #346322;
    --panel-ink: #303731;
    --panel-muted: #697168;
    --panel-border: #e1e6df;
    color: var(--panel-ink);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}
:is(#email-modal, #password-modal, #admin-modal) { background: rgb(35 43 34 / 35%); }
:is(#password-modal, #admin-modal) { padding: 16px; }
:is(#password-modal, #admin-modal) > div,
#email-modal > div > div {
    background: #fff;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgb(35 43 34 / 12%);
}
:is(#password-modal, #admin-modal) > div {
    margin: 0;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}
:is(#password-modal, #admin-modal) > div > .p-6 { padding: 20px; }
:is(#password-modal, #admin-modal) > div > .border-b { border-color: var(--panel-border) !important; }
:is(#email-modal, #password-modal, #admin-modal, #analytics-modal) :is(h1, h2) {
    color: var(--panel-ink);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
:is(#email-modal, #password-modal, #admin-modal, #analytics-modal) :is(.text-gray-900, .text-gray-800, .text-gray-700) { color: var(--panel-ink); }
:is(#email-modal, #password-modal, #admin-modal, #analytics-modal) :is(.text-gray-400, .text-gray-500, .text-gray-600) { color: var(--panel-muted); }
:is(#password-modal, #admin-modal, #analytics-modal) :is(h1, h2) i { color: var(--panel-green-dark) !important; }
:is(#email-modal, #password-modal, #admin-modal, #analytics-modal) button {
    min-height: 36px;
    min-width: 36px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    transition: background-color .15s, border-color .15s;
}
:is(#email-modal, #password-modal, #admin-modal, #analytics-modal) button:disabled { opacity: .55; cursor: not-allowed; }
:is(#email-modal, #password-modal, #admin-modal, #analytics-modal) :is(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--panel-green-dark);
    outline-offset: 3px;
    --tw-ring-color: transparent;
}
:is(#email-modal, #password-modal, #admin-modal, #analytics-modal) :is(input:not([type="file"]):not([type="checkbox"]), select, textarea) {
    min-height: 38px;
    max-width: 100%;
    border: 1px solid #cdd5c9;
    border-radius: 6px;
    background: #fff;
    color: var(--panel-ink);
    padding: 8px 10px;
    font: inherit;
}
:is(#email-modal, #password-modal, #admin-modal, #analytics-modal) :is(input, textarea)::placeholder { color: #747d70; }
:is(#email-modal, #password-modal, #admin-modal, #analytics-modal) button:is(.bg-mifa-green, .bg-purple-600, .bg-indigo-600) {
    background: var(--panel-green) !important;
    color: #173c0a;
    border: 1px solid var(--panel-green);
    font-weight: 600;
}
:is(#email-modal, #password-modal, #admin-modal, #analytics-modal) button:is(.bg-mifa-green, .bg-purple-600, .bg-indigo-600):hover { background: #80be54 !important; }
:is(#email-modal, #password-modal, #admin-modal, #analytics-modal) button:is(.bg-gray-100, .bg-gray-600, .bg-blue-600) {
    background: #fff;
    color: var(--panel-ink);
    border: 1px solid var(--panel-border);
}
:is(#email-modal, #password-modal, #admin-modal, #analytics-modal) button:is(.bg-gray-100, .bg-gray-600, .bg-blue-600):hover { background: #f6f8f4; }
:is(#password-modal, #admin-modal) label { font-size: 13px; margin-bottom: 6px; }
:is(#password-error, #add-user-error) { background: #fff4f3; border: 1px solid #eac0bb; color: #a52b25; }
#add-user-success { background: #f3f9ed; border: 1px solid #b5d7a0; color: #346322; }

/* Email thread: preserve natural page scrolling and the existing sticky reply. */
#email-modal .sticky { border-color: var(--panel-border); }
#modal-subject { margin-bottom: 6px; }
#email-modal .thread-timeline::before { background: var(--panel-border); }
#email-modal .thread-message-card { border-color: var(--panel-border); padding: 12px 14px; }
#email-modal .thread-message-card:hover { border-color: #92c273; }
#email-modal .thread-message.is-from-mifa .thread-message-card { border-left: 3px solid var(--panel-green); }
#email-modal .thread-message-sender { color: var(--panel-ink); font-size: 14px; }
#email-modal :is(.thread-message-email, .thread-message-time, .thread-message-preview) { color: var(--panel-muted); }
#email-modal :is(.thread-message-email, .thread-message-body, .thread-message-preview) { overflow-wrap: anywhere; }
#email-modal .thread-message-body { color: var(--panel-ink); line-height: 1.65; }
#email-modal :is(.thread-entity-id, .thread-entity-council, .thread-entity-passport) {
    color: #3e6b29;
    background: #f3f9ed;
    border: 1px solid #92c273;
    border-radius: 5px;
}
#email-modal :is(.thread-entity-id, .thread-entity-council, .thread-entity-passport):hover { background: #eaf4e0; }
#email-modal .thread-entity-email { color: #346322; }
#modal-attachments-section { background: #fafbf9; border-color: var(--panel-border); }
#modal-attachments-section > .flex { flex-wrap: wrap; gap: 4px 12px; }
#modal-attachments-list { max-height: 112px; }
#modal-attachments-list a { min-width: 0; overflow-wrap: anywhere; }
#modal-attachments-list .truncate { white-space: normal; overflow-wrap: anywhere; }
#modal-attachments-list button { flex-shrink: 0; }
#reply-attachments-list { min-width: 0; }
#reply-attachments-list > div { max-width: 100%; min-width: 0; }
#reply-attachments-list .truncate { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
#reply-attachments-list button { flex-shrink: 0; }
#modal-response { resize: vertical; min-height: 88px; line-height: 1.55; }

/* Sent-response detail is read-only; original-thread access stays a separate action. */
#sent-response-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    padding: 24px 16px;
    overflow-y: auto;
    background: rgb(35 43 34 / 35%);
}
#sent-response-modal:not(.hidden) { display: grid; align-items: start; justify-items: center; }
#sent-response-modal .mf-sent-dialog {
    width: 100%;
    max-width: 880px;
    background: #fff;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgb(35 43 34 / 12%);
}
#sent-response-modal :is(header, footer) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; }
#sent-response-subject { min-width: 0; font-size: 19px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
#sent-response-metadata { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; padding: 0 20px 20px; }
#sent-response-metadata > div { min-width: 0; }
#sent-response-metadata dt { color: var(--panel-muted); font-size: 12px; }
#sent-response-metadata dd { margin: 2px 0 0; overflow-wrap: anywhere; }
#sent-response-body { margin: 0; padding: 20px; border-block: 1px solid var(--panel-border); font: inherit; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
#sent-response-modal button { min-height: 38px; min-width: 38px; padding: 8px 12px; background: #fff; border: 1px solid var(--panel-border); border-radius: 6px; color: var(--panel-ink); font-size: 13px; }
#sent-response-modal header button { flex-shrink: 0; }
#sent-response-modal button:hover { background: #f6f8f4; }
#sent-response-original { background: #f3f9ed !important; border-color: #92c273 !important; color: var(--panel-green-dark) !important; font-weight: 600; }
#sent-response-modal button:focus-visible { outline: 2px solid var(--panel-green-dark); outline-offset: 3px; }
#sent-response-modal button:disabled { opacity: .55; cursor: not-allowed; }

/* Administration keeps complete tables in their own horizontal scroll areas. */
#admin-modal .p-6 > .flex.border-b { overflow-x: auto; gap: 4px; margin-bottom: 20px; border-color: var(--panel-border); }
#admin-modal .p-6 > .flex.border-b button { white-space: nowrap; flex-shrink: 0; border-radius: 6px 6px 0 0; }
#admin-modal button.border-purple-600 { border-color: var(--panel-green); color: var(--panel-green-dark); }
#admin-modal .overflow-x-auto { border: 1px solid var(--panel-border); border-radius: 6px; overscroll-behavior-x: contain; }
#panel-users table { min-width: 850px; }
#panel-history table { min-width: 600px; }
#admin-modal table { border-collapse: collapse; font-size: 13px; }
#admin-modal thead { background: #f6f8f4; color: var(--panel-muted); }
#admin-modal th { padding: 10px 12px; font-size: 12px; font-weight: 600; white-space: nowrap; }
#admin-modal td { padding: 10px 12px; border-color: var(--panel-border); vertical-align: middle; }
#admin-modal tbody tr { border-color: var(--panel-border); }
#admin-modal tbody tr:hover { background: #fafbf9; }
#users-table-body td:last-child { white-space: nowrap; }
#users-table-body button { margin-right: 4px; border: 1px solid var(--panel-border); background: #fff; }
#users-table-body button:hover { background: #f6f8f4; }
#users-table-body button:is(.text-blue-600, .text-purple-600) { color: var(--panel-green-dark); }
#users-table-body span:is(.bg-purple-100, .bg-blue-100) { background: #f1f4ef; color: #4b5546; }
#add-user-form { max-width: 480px; }

/* Analytics cards share the surface language; chart and alert colors retain meaning. */
#analytics-modal > div { background: #fff; }
#analytics-modal .border-b { border-color: var(--panel-border); }
#analytics-modal .shadow-sm { box-shadow: none; }
#analytics-modal :is(.text-indigo-500, .text-indigo-600, .text-indigo-700) { color: var(--panel-green-dark); }
#analytics-modal :is(.bg-indigo-500, .bg-indigo-600) { background-color: var(--panel-green); }
#analytics-modal .atab { flex-shrink: 0; white-space: nowrap; border-radius: 6px 6px 0 0; padding: 12px 16px; }
#analytics-modal .atab.border-indigo-600 { border-color: var(--panel-green); color: var(--panel-green-dark); }
#analytics-modal .preset-chip.border-indigo-600 { background: #f3f9ed; border-color: #92c273; color: var(--panel-green-dark); }
#analytics-modal :is(#email-content, #calls-content, #overall-content) .bg-white {
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: none;
}
#analytics-modal :is(#email-content, #calls-content) .grid > div { min-width: 0; }
#analytics-modal :is(#email-content, #calls-content) .text-2xl { font-size: 25px; font-weight: 600; line-height: 1.2; }
#analytics-modal h3 { color: var(--panel-ink); font-size: 14px; }
#analytics-modal .overflow-x-auto { overscroll-behavior-x: contain; }
#analytics-modal table { min-width: 560px; font-size: 13px; }
#analytics-modal th { color: var(--panel-muted); font-weight: 600; white-space: nowrap; }
#analytics-modal :is(th, td) { border-color: var(--panel-border); }
#analytics-filter-bar .flex.items-center.gap-2 { min-width: 0; flex-wrap: wrap; }
#analytics-mailbox { max-width: min(100%, 280px); }
#analytics-filter-bar input[type="date"] { width: 144px; min-width: 0; }
#email-mailbox-bars .truncate { white-space: normal; overflow: visible; overflow-wrap: anywhere; }

/* Progress and notifications use calm surfaces with explicit error/success accents. */
#loading { padding: 32px 16px; border: 1px solid var(--panel-border); border-radius: 8px; background: #fff; }
#loading > i { font-size: 26px; margin-bottom: 4px; }
#loading-message { margin-top: 8px; font-size: 14px; font-weight: 500; }
#loading .h-4 { height: 6px; }
#toast-container { z-index: 70; width: min(420px, calc(100vw - 32px)); }
#toast-container .toast {
    padding: 12px 16px;
    background: #fff;
    color: var(--panel-ink);
    border: 1px solid var(--panel-border);
    border-left: 4px solid #75846b;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgb(35 43 34 / 12%);
    overflow-wrap: anywhere;
    align-items: flex-start;
}
#toast-container .toast > i { margin-top: 3px; flex-shrink: 0; }
#toast-container .bg-green-500 { border-left-color: #528631; }
#toast-container .bg-green-500 > i { color: #346322; }
#toast-container .bg-red-500 { border-left-color: #c03a32; }
#toast-container .bg-red-500 > i { color: #a52b25; }
#toast-container .bg-blue-500 > i { color: #4c6240; }

@media (max-width: 640px) {
    #sent-response-modal { padding: 12px; }
    #sent-response-modal :is(header, footer) { padding: 16px; }
    #sent-response-metadata { grid-template-columns: minmax(0, 1fr); padding: 0 16px 16px; }
    #sent-response-body { padding: 16px; }
    :is(#password-modal, #admin-modal) { padding: 10px; }
    :is(#password-modal, #admin-modal) > div { max-height: calc(100dvh - 20px); }
    :is(#password-modal, #admin-modal) > div > .p-6 { padding: 16px; }
    #email-modal > div { padding: 0; }
    #email-modal > div > div { border-radius: 0; border-width: 0; }
    #email-modal .sticky { padding: 12px; border-radius: 0; }
    #email-modal .thread-timeline { padding-left: 24px; }
    #email-modal .thread-timeline::before { left: 7px; }
    #email-modal .thread-message::before { left: -22px; }
    #email-modal .thread-message-card { padding: 10px 12px; }
    #email-modal .thread-message-header { flex-wrap: wrap; gap: 4px 8px; }
    #email-modal .thread-message-meta { flex-basis: 100%; }
    #email-modal .thread-message-time { white-space: normal; }
    #modal-response { height: 88px; }
    #modal-attachments-list > .flex { flex-wrap: wrap; gap: 6px; }
    #modal-attachments-list > .flex > .flex { flex-basis: 100%; }
    #modal-attachments-list button { margin: 0; }
    #analytics-modal > div > .bg-white:first-child .flex { align-items: flex-start; gap: 12px; }
    #analytics-modal > div > .bg-white:first-child button { flex-shrink: 0; }
    #analytics-filter-bar .ml-auto { margin-left: 0; width: 100%; text-align: left; }
    #analytics-filter-bar .w-px { display: none; }
    #analytics-modal .atab { padding: 10px 12px; }
    #calls-content .w-36 { width: 96px; font-size: 12px; }
    #calls-content .w-16 { width: 48px; font-size: 12px; }
    #calls-content .my-2\.5 { gap: 8px; }
    #email-mailbox-bars .w-40 { width: 112px; }
    #analytics-modal .grid.gap-4 { gap: 10px; }
    #analytics-modal :is(#email-content, #calls-content) .p-4 { padding: 12px; }
}
@media (max-width: 640px), (pointer: coarse) {
    #sent-response-modal button { min-height: 44px; min-width: 44px; }
    :is(#email-modal, #password-modal, #admin-modal, #analytics-modal) button { min-height: 44px; min-width: 44px; }
    :is(#email-modal, #password-modal, #admin-modal, #analytics-modal) :is(input:not([type="file"]):not([type="checkbox"]), select, textarea) { min-height: 44px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    :is(#email-modal, #password-modal, #admin-modal, #analytics-modal) button,
    #toast-container .toast { transition: none; animation: none; }
    #loading .loading { animation-duration: 3s; }
}