﻿/* --- VĂˇllalati kĂ©k! --- */
:root{
  --company-blue:#198bca;
  --company-dark:#143356;
  --card-bg:rgba(255,255,255,0.82);
  --shadow:0 8px 32px 0 rgba(30,60,150,0.2);
  --card-radius:1.7rem;
  --gradient:linear-gradient(120deg,#198bca 65%,#61a6e4 100%);
  --fancy-shadow:0 0 30px 0 rgba(25,139,202,0.2);

  --min-card:280px;      /* min. kĂˇrtyaszĂ©lessĂ©g */
  --card-h:320px;        /* kĂˇrtya alapszintĹ± magassĂˇg */
  --gap:1.5rem;

  /* hover geometriĂˇhoz */
  --hover-scale:1.06;    /* nagyĂ­tĂˇs */
  --hover-lift:12px;     /* felfelĂ© tolĂˇs */
}

/* Alap */
html,body{
  height:100%; margin:0; padding:0;
  font-family:'Segoe UI', Arial, sans-serif;
  background:var(--company-blue); color:#fff;
  overflow-x:hidden;
}
.hero-bg{
  background:url('https://minerallog.hu/CRM/images/wallpaper2.png') center/cover no-repeat;
  filter:blur(2px) brightness(0.55) saturate(1.1);
  position:fixed; inset:0; z-index:0;
}

/* FĹ‘ kontĂ©ner â€“ ne vĂˇgjon */
.main-container{
  position:relative; z-index:2; box-sizing:border-box;
  width:100%; min-height:100vh; margin:0; padding:0;
  display:block; overflow:visible;
}

/* KĂRTYASOR KONTĂ‰NER â€“ ez adja az 5â€“5%-ot Ă‰S a fejtĂ©rt */
/* MagassĂˇga kĂ©plettel: elfĂ©rjen benne a hover-elt kĂˇrtya is */
.dashboard-cards{
  width:90vw;                         /* kĂ©t oldalt 5â€“5% */
  margin-inline:auto;
  box-sizing:border-box;
    min-height: 520px;   /* nĂ¶velt kontĂ©nermagassĂˇg */
  padding-top: 48px;   /* kis fejtĂ©r, ha kell: ĂˇllĂ­tsd */
  padding-bottom: 32px;

  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:var(--gap);

  /* fej- Ă©s aljtĂ©r + garantĂˇlt min-height hoverhez */
  padding-top: clamp(28px, 6vh, 120px);
  padding-bottom: clamp(20px, 4vh, 80px);
  min-height: calc(var(--card-h) * var(--hover-scale) + var(--hover-lift) + 24px);

  /* NEM vĂˇgunk semmit ezen a kontĂ©neren */
  overflow:visible;
  position:relative;
}

/* TĂ¶rĂ©spontok â€“ Ăşgy szĂˇmolva, hogy 90vw-be befĂ©rjenek */
@media (max-width: 1660px){ .dashboard-cards{ grid-template-columns:repeat(4, 1fr); } }
@media (max-width: 1326px){ .dashboard-cards{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width: 990px) { .dashboard-cards{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 650px) { .dashboard-cards{ grid-template-columns:1fr; } }

/* Link (grid elem) â€“ ne vĂˇgjon */
.card-link{
  display:block; text-decoration:none; color:inherit;
  min-width:var(--min-card);
  overflow:visible;
}

/* KĂˇrtya */
.dashboard-card{
  position:relative; width:100%; min-height:var(--card-h);
  border-radius:var(--card-radius);
  background:var(--card-bg);
  box-shadow:var(--shadow), var(--fancy-shadow);
  display:flex; flex-direction:column; justify-content:flex-start;
  border:3px solid transparent;
  overflow:hidden;                     /* csak a lekerekĂ­tĂ©s miatt */
  transform-origin:center top;
  transition:transform .18s cubic-bezier(.22,.7,.41,1.07), box-shadow .3s, border-color .3s;
  z-index:1;
}
.dashboard-card:hover{
  transform: translateY(calc(-1 * var(--hover-lift))) scale(var(--hover-scale));
  box-shadow:0 12px 56px 0 #198bca77;
  border-color:#198bca;
  z-index:50;                          /* mindig felĂĽl legyen */
}

/* Fej grafika */
.card-header{
  height:120px; width:100%;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  border-radius:var(--card-radius) var(--card-radius) 0 0;
  padding:10px; box-sizing:border-box;
}
.card-header.crm{background-image:url('https://minerallog.hu/CRM/images/sales.png')}
.card-header.invoice{background-image:url('https://minerallog.hu/CRM/images/finance.png')}
.card-header.bank{background-image:url('https://minerallog.hu/CRM/images/bank.png')}
.card-header.report{background-image:url('https://minerallog.hu/CRM/images/report.png')}
.card-header.masterdata{background-image:url('https://minerallog.hu/CRM/images/stone_process.png')}
/* Tartalom */
.card-content{
  position:relative; z-index:2;
  padding:1.6rem 1.1rem 1.5rem 1.1rem;
  text-align:center; background:rgba(255,255,255,0.90);
  border-radius:0 0 var(--card-radius) var(--card-radius);
  box-shadow:0 6px 18px 0 #14335611; margin-top:auto;
}
.dashboard-card h2{
  font-size:2rem; color:var(--company-blue);
  margin:0 0 .3em 0; font-weight:700;
}
.dashboard-card p{
  color:#143356; font-size:1.04rem; font-weight:500;
  margin:0; min-height:3em;
}

/* LĂˇblĂ©c */
footer{
  margin-top:0; padding:12px 0 2px 0; text-align:center;
  color:#a3c6e4; font-size:.93em; letter-spacing:1px; opacity:.93;
}

/* AnimĂˇciĂł */
@keyframes fadein{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ====== TELJES KĂ‰PERNYĹS IFRAME (HOZZĂADĂS) ====== */
.iframe-overlay{
  position:fixed; inset:0; z-index:10050;
  display:none; flex-direction:column;
  background:#fff; /* tiszta fehĂ©r, nincs sĂ¶tĂ©t overlay */
}
.iframe-overlay[aria-hidden="false"]{ display:flex; }

.iframe-topnav{
  height:56px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px;
  background:linear-gradient(90deg,var(--company-blue), #61a6e4);
  color:#fff; font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.iframe-topnav button{
  background:rgba(255,255,255,0.15); color:#fff; border:0; border-radius:8px;
  padding:8px 12px; cursor:pointer; font-weight:600;
}
.iframe-topnav button:hover{ background:rgba(255,255,255,0.25); }
.iframe-actions{ display:flex; gap:8px; }
.iframe-title{
  flex:1; text-align:center; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.iframe-viewer{
  width:100%; height:calc(100% - 56px); border:0; background:#fff;
}

/* --- VĂˇllalati kĂ©k! --- */
:root{
  --company-blue:#198bca;
  --company-dark:#143356;
  --card-bg:rgba(255,255,255,0.82);
  --shadow:0 8px 32px 0 rgba(30,60,150,0.2);
  --card-radius:1.7rem;
  --gradient:linear-gradient(120deg,#198bca 65%,#61a6e4 100%);
  --fancy-shadow:0 0 30px 0 rgba(25,139,202,0.2);
  --min-card:280px;
  --card-h:320px;
  --gap:1.5rem;
  --hover-scale:1.06;
  --hover-lift:12px;
}

/* ... az eredeti teljes CSS ... */

/* ====== TELJES KĂ‰PERNYĹS IFRAME (HOZZĂADĂS) ====== */
.iframe-overlay{
  position:fixed; inset:0; z-index:10050;
  display:none; flex-direction:column;
  background:#fff;
}
.iframe-overlay[aria-hidden="false"]{ display:flex; }

.iframe-topnav{
  height:56px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px;
  background:linear-gradient(90deg,var(--company-blue), #61a6e4);
  color:#fff; font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.iframe-topnav button{
  background:rgba(255,255,255,0.15); color:#fff; border:0; border-radius:8px;
  padding:8px 12px; cursor:pointer; font-weight:600;
}
.iframe-topnav button:hover{ background:rgba(255,255,255,0.25); }
.iframe-actions{ display:flex; gap:8px; }
.iframe-title{
  flex:1; text-align:center; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.iframe-viewer{
  width:100%; height:calc(100% - 56px); border:0; background:#fff;
}

/* ===== Map Recorder (ADD-ONLY, no overrides) ===== */
.mlg-logger{
  position:fixed; right:16px; bottom:16px;
  width:380px; max-height:70vh; z-index:10050;
  background:#0e212e; color:#eef6fb;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
}
.mlg-logger__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(25,139,202,.18), rgba(25,139,202,.06));
  border-bottom:1px solid rgba(25,139,202,.35);
}
.mlg-logger__actions button{
  margin-left:8px; padding:6px 8px; border-radius:8px; cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08); color:inherit;
}
.mlg-logger__actions button:hover{ background:rgba(255,255,255,.14); }
.mlg-logger__body{ overflow:auto; padding:8px 12px; }
.mlg-logger__hint{ font-size:.85rem; opacity:.8; margin:4px 0 8px; }
#mlg-log-list{ margin:0; padding-left:18px; }
#mlg-log-list li{ margin:4px 0; font-size:.92rem; }
#mlg-log-list code{ background:rgba(255,255,255,.06); padding:2px 4px; border-radius:6px; }

