/**
 * AKAKIKO UI — közös design-réteg (Report / AFMS / TV Control)
 * v1.1.0 — mobil-finomítások (16px inputok iOS-zoom ellen, nagyobb érintőfelületek)
 *
 * A design-nyelv forrása az akakiko_report projekt (style.css + header.php):
 * Plus Jakarta Sans, slate-alapok, fehér "premium" kártyák, pill-gombok,
 * #660009 bordó akcentus, Font Awesome 6 ikonok.
 *
 * Használat (Tailwind CDN + FA 6.4 mellé):
 *   <link rel="stylesheet" href="/akakiko_ui/akakiko-ui.css">
 * A TV-projekt (0.6-os gép) másolatot használ — verziót a fejlécben tartjuk szinkronban.
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --ak-brand:   #660009;   /* Akakiko bordó */
    --ak-korean:  #1a1a1a;
    --ak-virt:    #1a4a2e;
    --diff-plus:  #059669;
    --diff-minus: #e11d48;
    --card-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
}

body {
    background: #f8fafc;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #1e293b;
    overflow-x: hidden;
}

.color-plus  { color: var(--diff-plus); }
.color-minus { color: var(--diff-minus); }

/* ---- Kártya (a report .premium-card-ja) ---- */
.premium-card {
    background: white;
    border-radius: 20px;
    border: 1px solid #f1f5f9;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
}
.premium-card:hover { box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08); }

/* ---- Sticky fejléc-sáv ---- */
.sticky-nav {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #f1f5f9;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

/* ---- Pill-gombcsoport (a report szűrősora) ---- */
.pill-group {
    display: inline-flex; background: #f1f5f9; padding: 4px;
    border-radius: 12px; border: 1px solid #e2e8f0;
}
.pill-btn {
    padding: 6px 14px; font-size: 10px; font-weight: 800; text-transform: uppercase;
    color: #64748b; border-radius: 8px; transition: all 0.2s; white-space: nowrap;
    cursor: pointer; border: none; background: transparent; text-decoration: none; display: inline-block;
}
.pill-btn:hover  { color: #1e293b; }
.pill-btn.active { background: white; color: var(--ak-brand); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }

/* ---- Gombok ---- */
/* Elsődleges akció — a report "Update" gombja */
.ak-btn-primary {
    background: var(--ak-brand); color: white; font-weight: 800; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.1em; border: none; cursor: pointer;
    padding: 10px 24px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    transition: all 0.2s; text-align: center; display: inline-block; text-decoration: none;
}
.ak-btn-primary:hover  { filter: brightness(1.1); }
.ak-btn-primary:active { transform: scale(0.97); }

/* Kompakt elsődleges gomb (kereső/mentés/sync ikонgombok) */
.ak-btn {
    background: var(--ak-brand); color: white; font-weight: 700; font-size: 12px;
    border: none; cursor: pointer; padding: 9px 14px; border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06); transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap;
}
.ak-btn:hover  { filter: brightness(1.1); }
.ak-btn:active { transform: scale(0.97); }

/* Másodlagos — fehér, slate keret */
.ak-btn-ghost {
    background: white; color: #64748b; border: 1px solid #e2e8f0; font-weight: 800;
    font-size: 11px; cursor: pointer; padding: 8px 14px; border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: all 0.2s; text-align: center;
    display: inline-block; text-decoration: none;
}
.ak-btn-ghost:hover { background: #f8fafc; color: #334155; border-color: #cbd5e1; }

/* Színezett (tinted) gombok — a report CSV/PDF gombjainak mintája */
.ak-btn-tint         { font-weight: 800; font-size: 11px; cursor: pointer; padding: 8px 14px; border-radius: 12px; border: 1px solid; box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: all 0.2s; text-align: center; display: inline-block; text-decoration: none; }
.ak-btn-tint:active  { transform: scale(0.97); }
.ak-btn-tint.emerald { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.ak-btn-tint.emerald:hover { background: #d1fae5; }
.ak-btn-tint.amber   { background: #fffbeb; color: #d97706; border-color: #fde68a; }
.ak-btn-tint.amber:hover   { background: #fef3c7; }
.ak-btn-tint.rose    { background: #fff1f2; color: #e11d48; border-color: #fecdd3; }
.ak-btn-tint.rose:hover    { background: #ffe4e6; }
.ak-btn-tint.slate   { background: #f8fafc; color: #475569; border-color: #e2e8f0; }
.ak-btn-tint.slate:hover   { background: #f1f5f9; }

/* ---- Mikro-címke (8-10px fekete uppercase, a report szekciócímei) ---- */
.ak-label {
    font-size: 10px; font-weight: 800; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.15em;
}

/* ---- Badge (státusz) — tinted pill keretezéssel ---- */
.ak-badge          { display: inline-block; font-size: 10px; font-weight: 800; padding: 3px 10px; border-radius: 8px; border: 1px solid; white-space: nowrap; }
.ak-badge.indigo   { background: #eef2ff; color: #4f46e5; border-color: #c7d2fe; }
.ak-badge.emerald  { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.ak-badge.amber    { background: #fffbeb; color: #d97706; border-color: #fde68a; }
.ak-badge.rose     { background: #fff1f2; color: #e11d48; border-color: #fecdd3; }
.ak-badge.slate    { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
.ak-badge.brand    { background: var(--ak-brand); color: white; border-color: var(--ak-brand); }

/* ---- Érintő-csempe (AFMS kioszk, TV vezérlőgombok) ---- */
.ak-tile {
    background: white; border: 1px solid #e2e8f0; border-radius: 16px;
    box-shadow: var(--card-shadow); padding: 18px 10px; text-align: center;
    cursor: pointer; transition: all 0.2s; display: block; text-decoration: none; color: #334155;
}
.ak-tile:hover  { border-color: var(--ak-brand); box-shadow: 0 6px 16px -4px rgba(102,0,9,0.15); }
.ak-tile:active { transform: scale(0.97); }
.ak-tile .ak-tile-icon {
    width: 46px; height: 46px; border-radius: 999px; background: #f8fafc;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;
    font-size: 19px; color: var(--ak-brand);
}
.ak-tile .ak-tile-label { font-size: 12px; font-weight: 700; line-height: 1.25; }
.ak-tile.indigo .ak-tile-icon { background: #eef2ff; color: #4f46e5; }

/* ---- Választó-chip (AFMS hiba-gyorsgombok) ---- */
.ak-chip { cursor: pointer; }
.ak-chip input { display: none; }
.ak-chip span {
    display: inline-block; padding: 9px 14px; border-radius: 999px;
    border: 1px solid #e2e8f0; background: white; color: #475569;
    font-size: 12px; font-weight: 700; transition: all 0.15s;
}
.ak-chip input:checked + span {
    background: var(--ak-brand); color: white; border-color: var(--ak-brand);
    box-shadow: 0 2px 8px rgba(102,0,9,0.25);
}

/* ---- Űrlapelemek ---- */
.ak-input, .ak-select, .ak-textarea {
    width: 100%; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 9px 12px; font-size: 13px; background: white; color: #1e293b;
    font-family: inherit; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.ak-input:focus, .ak-select:focus, .ak-textarea:focus {
    border-color: #a5b4fc; box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}

/* ---- Kor-jelző sáv (AFMS ticket-kártyák bal szegélye) ---- */
.ak-age { border-left: 4px solid; }
.ak-age.green { border-left-color: #34d399; }
.ak-age.amber { border-left-color: #fbbf24; }
.ak-age.red   { border-left-color: #f43f5e; }

/* ---- Közös cross-modul fejléc-sáv (topbar.php) ---- */
.ak-topbar {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(255,255,255,0.96); backdrop-filter: blur(10px);
    border-bottom: 1px solid #f1f5f9; box-shadow: 0 2px 10px rgba(15,23,42,0.03);
}
.ak-topbar-inner {
    max-width: 1600px; margin: 0 auto; padding: 8px 16px;
    display: flex; align-items: center; gap: 14px;
}
.ak-topbar-logo { height: 22px; flex-shrink: 0; }
.ak-topbar-nav {
    display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0;
    overflow-x: auto; scrollbar-width: none;
}
.ak-topbar-nav::-webkit-scrollbar { display: none; }
.ak-modtab {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 7px 13px; border-radius: 10px; text-decoration: none;
    font-size: 12px; font-weight: 700; color: #64748b; transition: all 0.15s;
    border: 1px solid transparent;
}
.ak-modtab i { font-size: 12px; opacity: 0.75; }
.ak-modtab:hover { background: #f8fafc; color: #334155; }
.ak-modtab.active {
    background: #fff; color: var(--ak-brand); border-color: #f1f5f9;
    box-shadow: 0 2px 8px rgba(102,0,9,0.10);
}
.ak-modtab.active i { opacity: 1; }
.ak-modtab .ak-modtab-badge {
    font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 999px;
    background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3;
}
.ak-topbar-user {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    font-size: 12px; font-weight: 700; color: #64748b;
}
.ak-topbar-user .ak-logout { color: #cbd5e1; transition: color 0.15s; }
.ak-topbar-user .ak-logout:hover { color: var(--ak-brand); }
@media (max-width: 640px) {
    .ak-modtab { padding: 8px 11px; font-size: 12px; }
    .ak-topbar-user .ak-uname { display: none; }
}

/* ---- Mobil-finomítások ---- */
button, a, .ak-tile, .ak-chip span, .pill-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (max-width: 640px) {
    /* 16px alatt az iOS Safari rázoomol az inputra — ezt kerüljük */
    .ak-input, .ak-select, .ak-textarea { font-size: 16px; }
    /* nagyobb érintőfelületek hüvelykujjra */
    .pill-btn      { padding: 9px 14px; font-size: 11px; }
    .ak-chip span  { padding: 12px 16px; font-size: 14px; }
    .ak-tile       { padding: 16px 8px; }
    .ak-btn-tint, .ak-btn-ghost { padding: 11px 14px; }
    .ak-btn-primary { padding: 13px 24px; }
}

/* ---- PORTAL-KERET (portal_frame.php) — a hetzner-portál fejlécének reprodukciója /dash-en ---- */
:root { --pf-green:#89b62d; --pf-red:#d3232a; --pf-ink:#27302b; --pf-line:#eef0ec; }
.pf-shell { display:flex; min-height:100vh; background:#f7f8fc; }
.pf-side { width:230px; flex-shrink:0; background:#fff; border-right:1px solid var(--pf-line);
    display:flex; flex-direction:column; padding:18px 14px; position:sticky; top:0; height:100vh; }
.pf-logo { display:flex; align-items:center; gap:6px; text-decoration:none; margin-bottom:2px; }
.pf-logo-k { font-weight:800; color:#222; font-size:19px; letter-spacing:-.02em; }
.pf-logo-img { height:22px; }
.pf-logo-p { font-weight:800; color:var(--pf-green); font-size:19px; letter-spacing:.02em; }
.pf-user { font-size:11px; color:#9aa0a6; margin:2px 0 20px 2px; }
.pf-nav { display:flex; flex-direction:column; gap:4px; }
.pf-nav-i { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:9px;
    text-decoration:none; color:#5a6169; font-size:14px; font-weight:600; transition:all .15s; }
.pf-nav-i i { width:18px; text-align:center; color:#b3b8bd; }
.pf-nav-i:hover { background:#f4f6f1; color:var(--pf-ink); }
.pf-nav-i.active, .pf-nav-i.active i { background:var(--pf-green); color:#fff; }
.pf-logout { margin-top:auto; display:flex; align-items:center; gap:10px; padding:11px 13px;
    border:1px solid var(--pf-line); border-radius:9px; text-decoration:none; color:#7a8087; font-size:14px; font-weight:600; }
.pf-logout:hover { border-color:var(--pf-red); color:var(--pf-red); }
.pf-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.pf-tabs { display:flex; gap:10px; padding:16px 22px 0; }
.pf-tab { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border:1px solid var(--pf-line);
    border-radius:10px; background:#fff; text-decoration:none; color:#5a6169; font-size:14px; font-weight:600; }
.pf-tab i { color:#b3b8bd; }
.pf-tab:hover { border-color:#d7dbd3; }
.pf-tab.active { border-color:var(--pf-green); color:var(--pf-ink); box-shadow:0 1px 4px rgba(137,182,45,.18); }
.pf-content { padding:18px 22px 40px; }
@media (max-width:820px) {
    .pf-shell { flex-direction:column; }
    .pf-side { width:auto; height:auto; position:static; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; }
    .pf-logout { margin:0; }
    .pf-nav { flex-direction:row; flex-wrap:wrap; }
}