/* Housing Court Filer — Shared components.
   Cards, buttons, tab bars and dialogs, drawn once for the whole system from the approved /calendar
   and Case detail screens (docs/design/DESIGN-RULES.md). Linked after every page stylesheet and just
   before typography.css, so a page's blanket reset (`.x-page button{background:none}`) cannot undo
   them. Pages place and size these components; they never redraw them. ComponentContractTests holds
   every stylesheet and every page's markup to that. Fields are in app.css. */

/* Shared card, from the /calendar screen: every card in the system is a .standard-card (or one of
   the older panel names below, drawn the same way). Pages set a card's layout and inner spacing, never
   its surface, border, corners or shadow. A card's <header> carries its title and actions. */
.standard-card,.hcf-workspace-panel,.hcf-component-lab,.hcf-card{background:var(--hcf-surface);border:1px solid var(--hcf-line);border-radius:10px;box-shadow:var(--hcf-shadow-sm)}
.standard-card>header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--hcf-line)}
.standard-card>header h2{margin:0}

/* Shared buttons, from the /calendar screen: 40px, 8px corners, slate. Every action button carries one
   of these classes; pages place a button (margin, width, flex) but never redraw it. */
:is(button,a,span,label).hcf-button,:is(button,a,span,label).hcf-button-secondary,:is(button,a,span,label).hcf-button-danger{min-height:40px;padding:0 16px;border:1px solid var(--hcf-action);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none}
:is(button,a,span,label).hcf-button-compact{min-height:32px;padding:0 12px}
:is(button,a,span).hcf-icon-button{width:40px;height:40px;min-height:0;padding:0;border:1px solid var(--hcf-line);border-radius:10px;background:var(--hcf-surface);color:var(--hcf-text);display:inline-grid;place-items:center;cursor:pointer;flex:none}
:is(button,a,span).hcf-icon-button:hover{background:var(--hcf-action-soft)}
/* A row or toolbar icon action is the compact icon button: 32px, 8px corners. */
:is(button,a,span).hcf-icon-button.hcf-button-compact{width:32px;height:32px;border-radius:8px}
/* Colours are element-qualified too: at one class they would lose to a page's `.x-page button{color:inherit}`. */
:is(button,a,span,label).hcf-button{background:var(--hcf-action);color:var(--hcf-text-inverse)}
:is(button,a,span,label).hcf-button:hover{background:var(--hcf-action-hover);border-color:var(--hcf-action-hover);color:var(--hcf-text-inverse)}
/* Green primary actions retain the shared button shape and type. */
:is(button,a,span,label).hcf-button.hcf-button-success,:is(button,a,span,label).hcf-button.hcf-button-success:hover{background:var(--hcf-green);border-color:var(--hcf-green);color:var(--hcf-text-inverse)}
:is(button,a,span,label).hcf-button.hcf-button-success:hover{filter:brightness(.9)}
:is(button,a,span,label).hcf-button-secondary{background:var(--hcf-surface);border-color:var(--hcf-action-line);color:var(--hcf-text-action)}
:is(button,a,span,label).hcf-button-secondary:hover{border-color:var(--hcf-action);background:var(--hcf-action-soft)}
/* Danger wins over .hcf-button when an element carries both. */
:is(button,a,span,label).hcf-button-danger,:is(button,a,span,label).hcf-button-danger:hover{background:var(--hcf-danger);border-color:var(--hcf-danger);color:var(--hcf-text-inverse)}
:is(button,a,span,label).hcf-button-danger:hover{filter:brightness(.92)}
:is(button,a,span,label):is(.hcf-button,.hcf-button-secondary,.hcf-button-danger,.hcf-icon-button):disabled,button:disabled{opacity:.55;cursor:not-allowed}

/* Shared tab bar. Every tab bar in the system carries .hcf-tabs and is drawn like the Case detail
   bar it was taken from: a white rounded strip, rounded tabs, and the chosen tab filled navy. Pages
   only place the bar (margin, width); its shape and text belong here and in typography.css. Held at
   two-class weight so a page's blanket button reset cannot undo it. */
.hcf-tabs{display:flex;gap:5px;padding:5px;border:1px solid var(--hcf-line);border-radius:14px;background:var(--hcf-surface);overflow-x:auto}
.hcf-tabs :is(button,a,[role=tab]){flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:0;margin:0;padding:10px 16px;border:0;border-radius:9px;background:none;box-shadow:none;white-space:nowrap;text-decoration:none;cursor:pointer}
.hcf-tabs :is(.active,[aria-selected=true],[aria-current=page]){background:var(--hcf-navy)}

/* Shared dialog, from the /calendar preview: a dimmed backdrop, a white panel with 18px corners and a
   deep shadow, a white header (title, subtitle, a bordered close button) over a line, and an optional
   footer of actions over a line. A drawer is the same panel docked to the right edge at full height.
   Pages size a dialog (width, max-height) and lay out its body; they never redraw its chrome. */
.hcf-dialog-backdrop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;justify-content:normal;padding:4vh 20px;background:rgba(7,24,43,.44)}
.hcf-dialog-backdrop.hcf-dialog-backdrop-drawer{place-items:stretch end;padding:0}
.hcf-dialog{width:min(640px,100%);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;background:var(--hcf-surface);border:0;border-radius:18px;box-shadow:0 28px 80px rgba(8,29,52,.28);color:var(--hcf-text)}
.hcf-dialog.hcf-dialog-drawer{width:min(760px,95vw);height:100%;max-height:none;border-radius:0;box-shadow:-20px 0 60px rgba(8,29,52,.2)}
.hcf-dialog>header{flex:none;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;padding:14px 16px 14px 20px;border-bottom:1px solid var(--hcf-line);background:var(--hcf-surface);color:var(--hcf-text)}
.hcf-dialog>header h2{margin:0}
.hcf-dialog-body{flex:1;min-height:0;overflow:auto}
.hcf-dialog>header p{margin:4px 0 0}
.hcf-dialog>footer{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0;padding:14px 20px;border-top:1px solid var(--hcf-line);background:var(--hcf-surface)}