/* Shared presentation for screen layouts. Native links and form behavior are preserved. */
.crm-interface { font-family: "Segoe UI", Arial, sans-serif; }
.crm-interface [hidden] { display: none !important; }
.crm-interface .content { padding: clamp(18px, 2.5vw, 36px); }
.crm-interface .content > * { min-width: 0; }
.crm-interface .content > .panel + .panel,
.crm-interface .content > section + section { margin-top: 22px; }
.crm-interface .panel,
.crm-interface .login-card,
.crm-interface .public-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--white);
    box-shadow: 0 6px 24px rgba(26, 78, 80, .05);
}
.crm-interface .panel-header { padding-bottom: 20px; margin-bottom: 22px; }
.crm-interface :is(.panel, .login-card)::before { display: none; }
.crm-interface .panel-header-actions { flex-wrap: wrap; align-items: center; }
.crm-interface .panel-header h2 { font-size: clamp(21px, 1.8vw, 27px); letter-spacing: -.4px; }
.crm-interface .content h2,
.crm-interface .content h3 { line-height: 1.3; overflow-wrap: anywhere; }
.crm-interface .content p { line-height: 1.65; }
.crm-interface .content :is(section, article, fieldset)[id] { scroll-margin-top: 24px; }
.crm-interface .topbar { background: var(--white); }
.crm-interface .topbar h1 { font-size: clamp(23px, 2vw, 30px); letter-spacing: -.5px; }
.crm-interface .nav-list a { border: 1px solid transparent; border-radius: 10px; }
.crm-interface .nav-list a.active { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .16); }

/* Navigational links remain anchors, with the same visual language as action buttons. */
.crm-interface :is(.content, .auth-shell, .public-shell) a[href]:not(.button):not(.admin-card):not(.metric-card):not(.icon-action),
.crm-interface :is(.content, .auth-shell, .public-shell) button:not(.button):not(.icon-action),
.crm-interface :is(.content, .auth-shell, .public-shell) input:is([type="submit"], [type="reset"], [type="button"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    gap: 8px;
    min-height: 40px;
    max-width: 100%;
    margin: 3px 3px 3px 0;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    color: var(--dark-petrol);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.crm-interface .button {
    gap: 8px;
    min-height: 42px;
    max-width: 100%;
    padding: 9px 16px;
    border-radius: 10px;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}
.crm-interface .button-secondary { background: var(--white); border-color: var(--border); }
.crm-interface :is(.content, .auth-shell, .public-shell) :is(a[href], button, summary):hover { filter: brightness(.97); }
.crm-interface :is(a[href], button, summary, input, select, textarea):focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}
.crm-interface :is(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .6; }
.crm-interface .content :is(.danger-link, .inline-danger, .button-danger),
.crm-interface .content button:is(.danger-link, .inline-danger):not(.button) { color: var(--error); border-color: rgba(168, 66, 66, .3); background: #fff5f5; }
.crm-interface .action-row,
.crm-interface .form-actions { gap: 10px; align-items: center; flex-wrap: wrap; }
.crm-interface .workspace-nav { padding: 16px 20px; margin-bottom: 24px; }
.crm-interface .workspace-nav a[aria-current="page"] {
    background: var(--dark-petrol);
    border-color: var(--dark-petrol);
    color: var(--white);
    text-decoration: none;
}
.crm-interface .table-actions { white-space: normal; min-width: 155px; }
.crm-interface .table-actions a,
.crm-interface .table-actions .button { margin: 3px 3px 3px 0; }
.crm-interface .inline-form { vertical-align: middle; margin: 0; }
.crm-interface .inline-form button { margin: 3px 3px 3px 0; }

/* Also cover the compact Commerce forms that do not use the original .form class. */
.crm-interface :is(.content, .auth-shell, .public-shell) :is(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="range"]):not([type="color"]):not([type="file"]) {
    min-height: 42px;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    color: var(--text);
    font: inherit;
}
.crm-interface :is(.content, .auth-shell, .public-shell) textarea { min-height: 110px; resize: vertical; }
.crm-interface :is(.content, .auth-shell, .public-shell) input:is([type="checkbox"], [type="radio"]) {
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    accent-color: var(--petrol);
}
.crm-interface .content label { font-weight: 600; }
.crm-interface .content label:has(input:is([type="checkbox"], [type="radio"])) {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}
.crm-interface .content fieldset { min-width: 0; padding: 22px; border-radius: 14px; background: #fbfcfc; }
.crm-interface .content fieldset + fieldset { margin-top: 8px; }
.crm-interface .content legend { padding: 0 8px; color: var(--dark-petrol); font-weight: 700; }
.crm-interface .content :is(.form-grid, .detail-grid) > * { min-width: 0; }
.crm-interface .content .filter-bar {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    align-items: end;
    gap: 14px;
    padding: 18px;
    margin-bottom: 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}
.crm-interface .content .filter-bar > label { min-width: 0; }
.crm-interface .content .filter-bar > :is(button, a) { align-self: end; }
.crm-interface .content .form-actions {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.crm-interface .content details { margin-block: 12px; }
.crm-interface :is(.content, .auth-shell, .public-shell) summary {
    width: fit-content;
    max-width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--dark-petrol);
    font-weight: 600;
    cursor: pointer;
}
.crm-interface .content details[open] > summary { margin-bottom: 16px; }

.crm-interface .content .table-wrap {
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-block: 16px;
    background: var(--white);
}
.crm-interface .content .table-wrap > table { width: 100%; border-collapse: collapse; font-size: 14px; }
.crm-interface .content .table-wrap > table:not(.customer-table) > :is(thead, tbody, tfoot) > tr > :is(th, td) {
    padding: 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}
.crm-interface .content .table-wrap > table > thead > tr > th {
    color: var(--dark-petrol);
    background: var(--surface);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.crm-interface .content .table-wrap > table > tbody > tr:not([class]):nth-child(even) { background: #fafcfb; }
.crm-interface .content .table-wrap > table > tbody > tr:hover { box-shadow: inset 3px 0 var(--gold); }
.crm-interface .content .table-wrap td > form:not(.inline-form):not(.form):has(> label) {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
}
.crm-interface .content .table-wrap td > form:not(.inline-form):not(.form) > label:not(:has(input[type="checkbox"])) {
    display: grid;
    flex: 1 1 180px;
    gap: 6px;
}
.crm-interface .detail-list { padding: 16px; border-radius: 12px; background: var(--surface); }
.crm-interface :is(.metric-card, .report-kpi, .admin-card) { border-radius: 14px; }
.crm-interface .admin-card { border: 1px solid var(--border); box-shadow: none; }
.crm-interface .admin-card:hover { border-color: var(--gold); box-shadow: 0 4px 16px rgba(26, 78, 80, .08); }
.crm-interface .content progress { width: min(100%, 640px); height: 16px; accent-color: var(--petrol); }
.crm-interface .content pre { max-width: 100%; overflow: auto; padding: 16px; border-radius: 10px; background: var(--surface); }

@media (max-width: 1100px) {
    .crm-interface .content .dashboard-grid-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .crm-interface .content .report-grid-wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
    .crm-interface .panel { padding: 18px; border-radius: 14px; }
    .crm-interface .panel-header-actions { align-items: stretch; flex-direction: column; }
    .crm-interface .panel-header-actions > .button { align-self: start; }
    .crm-interface .content .filter-bar { grid-template-columns: 1fr; padding: 14px; }
    .crm-interface .content :is(.form-grid, .detail-grid, .report-grid) { grid-template-columns: minmax(0, 1fr); }
    .crm-interface .content .span-2 { grid-column: auto; }
    .crm-interface .content fieldset { padding: 16px; }
    .crm-interface .content .detail-list { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .crm-interface .content .detail-list dd { margin-bottom: 10px; }
    .crm-interface .content .dashboard-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-interface .workspace-nav { padding: 14px; }
}
@media print {
    .crm-interface .content { padding: 0; }
    .crm-interface .panel { box-shadow: none; }
    .crm-interface :is(.content, .auth-shell, .public-shell) a[href] { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; }
    .crm-interface .content .table-wrap { overflow: visible; border: 0; }
}