/**
 * AGSS / GTS unified content box / panel design system.
 * Visual reference: Job page content cards (10px radius, soft shadow, subtle border).
 * Colors: Skin tokens via --content-panel-bg, --card-bg, --panel-border, --panel-shadow.
 * Does NOT set width, height, padding, margin, or layout.
 */

/* -------------------------------------------------------------------------- */
/* Design tokens                                                               */
/* -------------------------------------------------------------------------- */
:root {
    --content-panel-bg: var(--ContentPanelBackgroundColor, var(--whitebg, var(--PageTitleBackgroundColor, #ffffff)));
    --content-panel-text: var(--ContentPanelTextColor, #1f2937);
    --card-bg: var(--content-panel-bg, #ffffff);
    --panel-border: var(--panel-border-color, #e5e7eb);
    --panel-shadow: var(--panel-shadow-value, rgb(0 0 0 / 5%) 0px 15px 25px, rgb(0 0 0 / 5%) 0px 5px 10px);

    /* Layout-only tokens (Job screenshot reference — not colors) */
    --ds-box-radius: 10px;
    --ds-box-border-width: 1px;
}

/* -------------------------------------------------------------------------- */
/* Shared surface (visual only — no sizing)                                    */
/* -------------------------------------------------------------------------- */
.ff-card,
.ff-panel,
.ff-section-box,
.ff-modal-box,
.ff-table-container,
.white-bg,
.shadow,
.filters,
.tablestyle,
.crm-card,
.job-summary-top-stack,
.job-summary-customer-header-card,
.wrapper .card,
.form-1600 .card,
.form-1400 .card,
.form-1200 .card,
.form-1000 .card,
.form-800 .card,
.form-600 .card,
.form-450 .card,
.form-fullscreen .card,
.modal-content,
.summary-card {
    background-color: var(--card-bg);
    border: var(--ds-box-border-width) solid var(--panel-border);
    border-radius: var(--ds-box-radius);
    box-shadow: var(--panel-shadow);
}

.ff-card,
.ff-panel,
.white-bg,
.shadow,
.filters,
.crm-card,
.job-summary-top-stack,
.job-summary-customer-header-card,
.ff-quote-option-card,
.wrapper .card,
.modal-content,
.summary-card {
    overflow: hidden;
}

.ff-section-box {
    background-color: var(--content-panel-bg);
}

.ff-modal-box,
.modal-content,
.crm-card {
    background-color: var(--content-panel-bg);
}

.ff-table-container,
.tablestyle {
    background-color: var(--card-bg);
    overflow: visible;
}

/* -------------------------------------------------------------------------- */
/* Legacy .white-bg                                                            */
/* -------------------------------------------------------------------------- */
.white-bg {
    background: var(--card-bg);
    box-shadow: var(--panel-shadow);
    border-radius: var(--ds-box-radius);
    border: var(--ds-box-border-width) solid var(--panel-border);
}

.shadow {
    border-radius: var(--ds-box-radius);
    box-shadow: var(--panel-shadow);
    border: var(--ds-box-border-width) solid var(--panel-border);
}

.filters {
    background-color: var(--card-bg);
    box-shadow: var(--panel-shadow);
    border: var(--ds-box-border-width) solid var(--panel-border);
    border-radius: var(--ds-box-radius);
}

/* Dark panels — keep dark fill; unified edges */
.dark-bg {
    background: var(--darkbackground, var(--secondarycolor, #333));
    border: var(--ds-box-border-width) solid var(--panel-border);
    border-radius: var(--ds-box-radius);
    box-shadow: var(--panel-shadow);
    color: #fff;
}

/* -------------------------------------------------------------------------- */
/* Composite stacks — outer shell only                                         */
/* -------------------------------------------------------------------------- */
.job-summary-top-stack {
    background: var(--card-bg);
    box-shadow: var(--panel-shadow);
    border-radius: var(--ds-box-radius);
    border: var(--ds-box-border-width) solid var(--panel-border);
    overflow: hidden;
}

.job-summary-top-stack .white-bg,
.white-bg.ff-panel-flat,
.ff-panel-flat {
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    overflow: visible;
}

.job-summary-top-stack .white-bg {
    margin-bottom: 0 !important;
}

/* Inner tables — card shell owns border/shadow/radius (avoids double-layer edges) */
.white-bg > .tablestyle,
.white-bg > .sectionheader + .tablestyle,
.ff-quote-option-card > .tablestyle,
.ff-quote-option-card > .sectionheader + .tablestyle,
.ff-card > .tablestyle,
.ff-panel > .tablestyle,
.ff-table-container > .tablestyle,
.shadow > .tablestyle,
.modal-content > .tablestyle,
.crm-card > .tablestyle {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100%;
}

/* Flatten bottom row when more card content follows the table */
.white-bg > .tablestyle:not(:last-child) tr:last-child td:first-child,
.white-bg > .tablestyle:not(:last-child) tr:last-child td:last-child,
.white-bg > .sectionheader + .tablestyle tr:last-child td:first-child,
.white-bg > .sectionheader + .tablestyle tr:last-child td:last-child,
.ff-quote-option-card > .tablestyle:not(:last-child) tr:last-child td:first-child,
.ff-quote-option-card > .tablestyle:not(:last-child) tr:last-child td:last-child,
.ff-quote-option-card > .sectionheader + .tablestyle tr:last-child td:first-child,
.ff-quote-option-card > .sectionheader + .tablestyle tr:last-child td:last-child,
.ff-card > .tablestyle:not(:last-child) tr:last-child td:first-child,
.ff-card > .tablestyle:not(:last-child) tr:last-child td:last-child {
    border-radius: 0 !important;
}

/* Match card corner radius when the table is the last element in the shell */
.white-bg > .tablestyle:last-child tr:last-child td:first-child,
.ff-card > .tablestyle:last-child tr:last-child td:first-child,
.ff-panel > .tablestyle:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 var(--ds-box-radius) !important;
}

.white-bg > .tablestyle:last-child tr:last-child td:last-child,
.ff-card > .tablestyle:last-child tr:last-child td:last-child,
.ff-panel > .tablestyle:last-child tr:last-child td:last-child {
    border-radius: 0 0 var(--ds-box-radius) 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Modals                                                                      */
/* -------------------------------------------------------------------------- */
.modal-content {
    border: var(--ds-box-border-width) solid var(--panel-border);
    border-radius: var(--ds-box-radius);
    box-shadow: var(--panel-shadow);
    background-color: var(--content-panel-bg);
    overflow: hidden;
}

/* -------------------------------------------------------------------------- */
/* Panel text (Skin --content-panel-text); excludes controls listed below      */
/* -------------------------------------------------------------------------- */
.ff-card,
.ff-panel,
.ff-section-box,
.ff-modal-box,
.ff-table-container,
.white-bg,
.shadow,
.filters,
.tablestyle,
.crm-card,
.job-summary-top-stack,
.job-summary-customer-header-card,
.wrapper .card,
.form-1600 .card,
.form-1400 .card,
.form-1200 .card,
.form-1000 .card,
.form-800 .card,
.form-600 .card,
.form-450 .card,
.form-fullscreen .card,
.modal-content,
.modal-body,
.summary-card,
.input-form {
    color: var(--content-panel-text, #1f2937);
}

.ff-card :is(.button, .filterbutton, .gridbutton, .smallbutton, .job-header-action-btn, .data-action-btn, .btn, .buttonlink, .send-btn, .tab, .activetab, .inactivetab, [class*="status-badge"], [class*="status-pill"], .invoice-sent-badge, .paid-badge, .unpaid-badge),
.white-bg :is(.button, .filterbutton, .gridbutton, .smallbutton, .job-header-action-btn, .data-action-btn, .btn, .buttonlink, .send-btn, .tab, .activetab, .inactivetab, [class*="status-badge"], [class*="status-pill"], .invoice-sent-badge, .paid-badge, .unpaid-badge),
.modal-content :is(.button, .filterbutton, .gridbutton, .smallbutton, .job-header-action-btn, .data-action-btn, .btn, .buttonlink, .send-btn, .tab, .activetab, .inactivetab),
.crm-card :is(.button, .filterbutton, .gridbutton, .btn, .tab, .activetab, .inactivetab),
.wrapper .card :is(.button, .filterbutton, .gridbutton, .btn, .tab, .activetab, .inactivetab) {
    color: unset;
}

.ff-card a,
.white-bg a,
.modal-content a,
.crm-card a,
.wrapper .card a {
    color: unset;
}

.ff-card input,
.ff-card select,
.ff-card textarea,
.white-bg input,
.white-bg select,
.white-bg textarea,
.modal-content input,
.modal-content select,
.modal-content textarea,
.input-form input,
.input-form select,
.input-form textarea {
    color: var(--FormLabelColor, var(--content-panel-text, #1f2937));
}

.white-bg .formlabel,
.white-bg .filter-label,
.ff-card .formlabel,
.ff-card .filter-label,
.modal-content .formlabel,
.modal-content .filter-label,
.input-form .formlabel,
.input-form .filter-label,
.input-form label:not(.tab):not(.activetab):not(.inactivetab),
.white-bg .af-option-checkbox-label {
    color: var(--FormLabelColor, var(--content-panel-text, #1f2937)) !important;
}

.ff-card .sectionheader,
.white-bg .sectionheader,
.modal-content .sectionheader {
    color: var(--SectionHeaderTextColor);
    background-color: var(--SectionHeaderBackGround);
}

.white-bg .pagetitle {
    color: unset;
}

.white-bg select option,
.ff-card select option,
.modal-content select option,
.input-form select option {
    color: #000000;
    background-color: #ffffff;
}

/* Temporary notifications — Skin TEXT → Success Text / Error Text */
.white-bg .success-message,
.ff-card .success-message,
.modal-content .success-message,
.input-form .success-message,
.crm-card .success-message,
.action-message.success {
    color: var(--SuccessText, #2e7d32) !important;
}

.white-bg .error-message,
.ff-card .error-message,
.modal-content .error-message,
.input-form .error-message,
.crm-card .error-message,
.white-bg .validation-message,
.ff-card .validation-message,
.modal-content .validation-message,
.input-form .validation-message,
.white-bg .errormessage,
.ff-card .errormessage,
.modal-content .errormessage,
.input-form .errormessage,
.white-bg .validation,
.ff-card .validation,
.action-message.error {
    color: var(--ErrorText, #d32f2f) !important;
}

/* Table header cells — skin tokens (must not inherit panel --content-panel-text) */
.tablestyle thead th,
.tablestyle thead td,
.tablestyle th {
    color: var(--TableHeaderTextColor);
    background-color: var(--TableHeaderBackgroundColor);
    border-top-color: var(--TableHeaderBorderColor);
    border-bottom-color: var(--TableHeaderBorderColor);
}

/* -------------------------------------------------------------------------- */
/* Skin enforcement — panel colors win over page-local overrides               */
/* -------------------------------------------------------------------------- */
.ff-card,
.ff-panel,
.ff-section-box,
.ff-modal-box,
.white-bg,
.shadow,
.filters,
.crm-card,
.job-summary-top-stack,
.job-summary-customer-header-card,
.wrapper .card,
.modal-content,
.modal-body,
.summary-card {
    background-color: var(--content-panel-bg, #ffffff) !important;
}

.ff-card,
.ff-panel,
.white-bg,
.filters,
.crm-card,
.modal-content,
.modal-body,
.wrapper .card,
.summary-card {
    color: var(--content-panel-text, #1f2937) !important;
}

.input-form {
    color: var(--FormLabelColor, var(--content-panel-text, #1f2937)) !important;
}