/*
 * Q-smart HelpDesk - public self-service pages
 * servis.php, servis_garanti.php, servis_takip.php, siparis_takip.php
 * Requires bifra_tokens.css + bifra_components.css (loaded first).
 * Scoped to body.hd-public.
 */

body.hd-public .hd-main {
    padding-top: var(--hd-space-6);
    padding-bottom: var(--hd-space-7);
}

/* ---------- Page header ---------- */
body.hd-public .hd-page-head {
    max-width: 65ch;                  /* line-length control */
    margin-bottom: var(--hd-space-5);
}
body.hd-public .hd-page-title {
    font-size: 1.75rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 var(--hd-space-2) 0;
}
body.hd-public .hd-page-intro {
    font-size: 1rem;
    color: var(--hd-muted-fg);
    margin: 0;
}
body.hd-public .hd-rule {
    height: 3px;
    width: 48px;
    background: var(--hd-accent);
    border: 0;
    margin: var(--hd-space-4) 0 0 0;
    opacity: 1;
}

/* ---------- Lookup form ---------- */
body.hd-public .hd-form-panel {
    width: 100%;
    max-width: 560px;
    padding: var(--hd-space-6);
}
body.hd-public .hd-form-panel--wide { max-width: 760px; }

body.hd-public .hd-form-head {
    display: flex;
    align-items: center;
    gap: var(--hd-space-4);
    margin-bottom: var(--hd-space-5);
}
body.hd-public .hd-form-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

/* Three-part service number: keep the groups on one row, readable everywhere. */
body.hd-public .hd-code-group {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
}
body.hd-public .hd-code-group .hd-input {
    text-align: center;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;   /* no width jitter while typing */
    letter-spacing: 0.08em;
    padding-left: var(--hd-space-2);
    padding-right: var(--hd-space-2);
    min-width: 0;                         /* allow flex shrink below content */
}
body.hd-public .hd-code-sep {
    flex: 0 0 auto;
    color: var(--hd-muted-fg);
    font-weight: 700;
    font-size: 1.25rem;
}

body.hd-public .hd-captcha { margin: var(--hd-space-4) 0; overflow-x: auto; }

/* ---------- Section ---------- */
body.hd-public .hd-section { margin-bottom: var(--hd-space-6); }
body.hd-public .hd-section-head {
    display: flex;
    align-items: center;
    gap: var(--hd-space-3);
    padding-bottom: var(--hd-space-3);
    margin-bottom: var(--hd-space-4);
    border-bottom: 2px solid var(--hd-border);
}
body.hd-public .hd-section-head .hd-ico {
    color: var(--hd-accent);
    font-size: 1rem;
}
body.hd-public .hd-section-title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0;
}

/* ---------- Detail list (replaces the old label/value tables) ---------- */
body.hd-public .hd-dl {
    display: grid;
    grid-template-columns: minmax(140px, 34%) 1fr;
    gap: 0;
    margin: 0;
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius);
    overflow: hidden;
    background: var(--hd-card);
}
body.hd-public .hd-dl > dt,
body.hd-public .hd-dl > dd {
    padding: var(--hd-space-3) var(--hd-space-4);
    margin: 0;
    border-top: 1px solid var(--hd-border);
    overflow-wrap: anywhere;
}
body.hd-public .hd-dl > dt:first-of-type,
body.hd-public .hd-dl > dt:first-of-type + dd { border-top: 0; }
body.hd-public .hd-dl > dt {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hd-label);
    background: var(--hd-bg);
}
body.hd-public .hd-dl > dd { font-size: 0.9375rem; }
body.hd-public .hd-dl__strong { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 575.98px) {
    body.hd-public .hd-dl { grid-template-columns: 1fr; }
    body.hd-public .hd-dl > dd { border-top: 0; padding-top: 0; }
    body.hd-public .hd-dl > dt:first-of-type + dd { padding-top: 0; }
}

/* ---------- Data table ---------- */
/* Wide tables scroll inside their own container; the page never scrolls sideways. */
body.hd-public .hd-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius);
    background: var(--hd-card);
}
body.hd-public .hd-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
}
body.hd-public .hd-table th,
body.hd-public .hd-table td {
    padding: var(--hd-space-3) var(--hd-space-4);
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--hd-border);
}
body.hd-public .hd-table thead th {
    border-top: 0;
    border-bottom: 2px solid var(--hd-border);
    background: var(--hd-bg);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hd-label);
    white-space: nowrap;
}
body.hd-public .hd-table tbody tr:first-child th,
body.hd-public .hd-table tbody tr:first-child td { border-top: 0; }
body.hd-public .hd-table .hd-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
body.hd-public .hd-table a { color: var(--hd-accent); font-weight: 600; }

body.hd-public .hd-empty {
    padding: var(--hd-space-5);
    text-align: center;
    color: var(--hd-muted-fg);
    font-size: 0.9375rem;
}

/* ---------- Status pill ---------- */
/* Colour never carries the meaning on its own: each pill also has an icon
   and a text label. */
body.hd-public .hd-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-2);
    padding: var(--hd-space-1) var(--hd-space-3);
    border-radius: 999px;
    border: 1px solid;
    font-size: 0.8125rem;
    font-weight: 700;
}
body.hd-public .hd-pill--success { background: var(--hd-success-bg); border-color: var(--hd-success); color: var(--hd-success-fg); }
body.hd-public .hd-pill--danger  { background: var(--hd-danger-bg);  border-color: var(--hd-danger);  color: var(--hd-danger-fg); }
body.hd-public .hd-pill--warning { background: var(--hd-warning-bg); border-color: var(--hd-warning); color: var(--hd-warning-fg); }
body.hd-public .hd-pill--muted   { background: var(--hd-muted);      border-color: var(--hd-border);  color: var(--hd-muted-fg); }

/* ---------- Field groups ---------- */
body.hd-public .hd-fieldset {
    margin: 0 0 var(--hd-space-5) 0;
    padding: var(--hd-space-4);
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius);
}
body.hd-public .hd-fieldset > legend {
    width: auto;
    padding: 0 var(--hd-space-2);
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--hd-label);
}
body.hd-public .hd-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-4);
}
body.hd-public .hd-row > * { flex: 1 1 200px; min-width: 0; }
body.hd-public .hd-row > .hd-col-narrow { flex: 0 1 120px; }

/* Phone/fax prefix */
body.hd-public .hd-prefixed { display: flex; }
body.hd-public .hd-prefixed .hd-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--hd-space-3);
    background: var(--hd-muted);
    color: var(--hd-label);
    border: 1px solid var(--hd-field-border);
    border-right: 0;
    border-radius: var(--hd-radius) 0 0 var(--hd-radius);
    font-weight: 600;
}
body.hd-public .hd-prefixed .hd-input { border-radius: 0 var(--hd-radius) var(--hd-radius) 0; }

/* ---------- Legal / consent text ---------- */
body.hd-public .hd-legal {
    padding: var(--hd-space-4);
    margin-bottom: var(--hd-space-4);
    background: var(--hd-bg);
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius);
    font-size: 0.8125rem;
    color: var(--hd-muted-fg);
    max-height: 180px;
    overflow-y: auto;
}
body.hd-public .hd-legal h3 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--hd-label);
    margin: 0 0 var(--hd-space-2) 0;
}
body.hd-public .hd-legal p:last-child { margin-bottom: 0; }

/* ---------- Character counter ---------- */
body.hd-public .hd-counter {
    display: block;
    margin-top: var(--hd-space-2);
    text-align: right;
    font-size: 0.8125rem;
    color: var(--hd-muted-fg);
    font-variant-numeric: tabular-nums;
}

/* ---------- Footer actions ---------- */
body.hd-public .hd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-3);
    margin-top: var(--hd-space-5);
}
body.hd-public .hd-form-foot {
    margin-top: var(--hd-space-5);
    padding-top: var(--hd-space-4);
    border-top: 1px solid var(--hd-border);
    font-size: 0.9375rem;
    color: var(--hd-muted-fg);
}

/* ---------- Blocking overlay (servis.php submit) ---------- */
body.hd-public .hd-blocker {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 23, 0.55);
}
body.hd-public .hd-blocker[data-open="true"] { display: flex; }
body.hd-public .hd-blocker__box {
    display: flex;
    align-items: center;
    gap: var(--hd-space-3);
    padding: var(--hd-space-5) var(--hd-space-6);
    background: var(--hd-card);
    border-radius: var(--hd-radius);
    color: var(--hd-fg);
    font-weight: 600;
    max-width: 90vw;
}
body.hd-public .hd-blocker .hd-spinner {
    border-color: var(--hd-border);
    border-top-color: var(--hd-accent);
    width: 20px;
    height: 20px;
}

@media (max-width: 575.98px) {
    body.hd-public .hd-main { padding-top: var(--hd-space-5); }
    body.hd-public .hd-page-title { font-size: 1.5rem; }
    body.hd-public .hd-form-panel { padding: var(--hd-space-5); }
    body.hd-public .hd-code-group .hd-input { font-size: 1.125rem; letter-spacing: 0.04em; }
}