/* * Q-smart HelpDesk - shared UI components * Requires bifra_tokens.css (loaded first). * Scoped to .hd-app, which every redesigned page carries on . * Used by: login.php, servis.php, servis_garanti.php, servis_takip.php, * siparis_takip.php */ .hd-app { font-family: var(--hd-font); /* bifra_helpdesk.css pins body{height:100vh}, which clips taller content. */ height: auto; min-height: 100vh; background-color: var(--hd-bg); color: var(--hd-fg); font-size: 16px; line-height: 1.6; } /* ---------- Skip link ---------- */ .hd-app .hd-skip-link { position: absolute; left: var(--hd-space-4); top: -100px; z-index: 1100; padding: var(--hd-space-3) var(--hd-space-4); background: var(--hd-primary); color: #FFFFFF; border-radius: var(--hd-radius); text-decoration: none; transition: top var(--hd-dur) var(--hd-ease); } .hd-app .hd-skip-link:focus { top: calc(var(--hd-navbar-h) + 8px); outline: 3px solid var(--hd-accent); outline-offset: 2px; } /* ---------- Surface ---------- */ .hd-app .hd-panel { background: var(--hd-card); border: 1px solid var(--hd-border); border-radius: var(--hd-radius); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); } .hd-app .hd-badge-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--hd-radius); background: var(--hd-muted); color: var(--hd-accent); font-size: 1.125rem; flex: 0 0 auto; } /* ---------- Alerts ---------- */ .hd-app .hd-alert { display: flex; gap: var(--hd-space-3); padding: var(--hd-space-4); margin-bottom: var(--hd-space-5); border: 1px solid; border-left-width: 3px; border-radius: var(--hd-radius); } /* Bootstrap 4 reboot ships [tabindex="-1"]:focus { outline: 0 !important }, which would silently swallow this focus ring. Override it deliberately. */ .hd-app .hd-alert:focus { outline: 3px solid var(--hd-ring) !important; outline-offset: 2px; } .hd-app .hd-alert__icon { flex: 0 0 auto; font-size: 1.125rem; line-height: 1.5; } .hd-app .hd-alert__title { font-size: 0.9375rem; font-weight: 700; margin: 0 0 var(--hd-space-1) 0; } /* display:flex/block on a component beats the UA's [hidden]{display:none}, * so the attribute silently stopped hiding alerts and field errors. */ .hd-app [hidden] { display: none !important; } /* Error-summary list: each item links to the field it describes. */ .hd-app .hd-alert__list { margin: var(--hd-space-2) 0 0 0; padding-left: 1.2em; font-size: 0.9375rem; } .hd-app .hd-alert__list li { margin-bottom: var(--hd-space-1); } .hd-app .hd-alert__list a { color: inherit; font-weight: 600; text-decoration: underline; } .hd-app .hd-alert__list a:focus { outline: 3px solid var(--hd-ring); outline-offset: 2px; } .hd-app .hd-alert__text { font-size: 0.9375rem; margin: 0; overflow-wrap: anywhere; /* long IDs must reflow, not overflow */ } .hd-app .hd-alert__text + .hd-alert__text { margin-top: var(--hd-space-2); } .hd-app .hd-alert--danger { background: var(--hd-danger-bg); border-color: var(--hd-danger); color: var(--hd-danger-fg); } .hd-app .hd-alert--success { background: var(--hd-success-bg); border-color: var(--hd-success); color: var(--hd-success-fg); } .hd-app .hd-alert--warning { background: var(--hd-warning-bg); border-color: var(--hd-warning); color: var(--hd-warning-fg); } .hd-app .hd-alert--info { background: var(--hd-info-bg); border-color: var(--hd-info); color: var(--hd-info-fg); } .hd-app .hd-alert a { color: inherit; font-weight: 600; text-decoration: underline; } .hd-app .hd-alert a:focus { outline: 3px solid currentColor; outline-offset: 2px; } /* ---------- Fields ---------- */ .hd-app .hd-field { margin-bottom: var(--hd-space-4); } .hd-app .hd-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--hd-label); margin-bottom: var(--hd-space-2); } .hd-app .hd-req { color: var(--hd-danger-fg); margin-left: 2px; } .hd-app .hd-hint { display: block; font-size: 0.8125rem; color: var(--hd-muted-fg); margin-top: var(--hd-space-2); } .hd-app .hd-input, .hd-app .hd-textarea, .hd-app .hd-select, .hd-app .hd-btn { /* width:100% plus padding overflowed every padded container, because the * default content-box adds the padding on top of the 100%. The same bug * made min-height:48px render as 74px on , while *