:root {
  /* GŁÓWNE TŁA I TEKSTY */
  --bg: #F5F5F5;             /* Jasne, lekko chłodne tło */
  --card: #ffffff;           /* Czysta biel paneli */
  --muted: #64748B;          /* Szaro-niebieskawy tekst poboczny */
  --mutedB: #94A3B8;         /* Jasny tekst poboczny */
  --text-main: #1E293B;      /* Głęboki granato-grafit - główny tekst */
  --text-light: #ffffff;     /* Biały tekst (dla ciemnych teł) */
  --text-black: #000;     	 /* Biały tekst (dla ciemnych teł) */
  --text-lightShad: rgba(255, 255, 255, 0.3); /* bialy cien dla czanych liter */
  
  /* GŁÓWNE AKCENTY (Akademia Zgodności) */
  --accent: #95C11E;         /* SOCZYSTA ZIELEŃ - główny akcent (guziki, paski, aktywne taby) */
  --accentBlu: #5B95D6;      /* Błękit z logo - teraz jako akcent wspierający */
  --accentGrn: #7A9F18;      /* Ciemniejsza zieleń do kontry */
  
  /* ELEMENTY UI (ramki, inputy) */
  --border: #E2E8F0;         /* Miękkie, subtelne ramki */
  --input: #ffffff;          /* Tło formularzy */
  --dark-bg: #1E293B;        /* Głęboki granato-grafit - pasek nawigacji */
  
  /* SZAROŚCI I ELEMENTY POMOCNICZE */
  --grey: #F1F5F9;           
  --greyTxt: #1E293B;        
  --greyBord: #CBD5E1;       
  --mildGrey: #E2E8F0;       
  
  /* ZASTĘPSTWO POMARAŃCZOWEGO */
  --orange: #5B95D6;         /* Błękit przejmuje rolę dawnego pomarańczowego */
  --orangeDark: #4A83C4;     
  
  /* DODATKOWE ZMIENNE DLA PEŁNEJ DYNAMIKI */
  --bg-light: #F8FAFC;       
  --border-light: #F1F5F9;   
  
  /* Ciemne menu */
  --nav-hover: #95C11E;      /* Soczysty zielony hover w bocznym menu */
  --nav-header: #0F172A;     /* Prawie czarny odcień granatu na samą górę paska */
  
  /* Paski i statusy */
  --prog-bg: #E2E8F0;        /* Subtelne tło pasków postępu */
  --success: #95C11E;        /* Soczysta zieleń jako sukces */
  --btn-hover: #7EB014;      /* Nieco przyciemniona zieleń przy najechaniu na guzik */
  
  /* Audyty i kroki */
  --step-done: #95C11E;      /* Zrobiony krok (Soczysta zieleń) */
  --step-curr: #5B95D6;      /* Aktualny krok (Błękit) */
  
  --col-light-warm: #FFF1E9;
  --col-just-warm: #FFAB51;  	/*orange*/
  --col-light-red: #FFCDCD;
  --col-just-red:#E37070;		/*red*/
  
  --infoBlue:#E2F1FF;
  --violet: #D8A3CD;
  
  --red: #d8020c;
  --lightGrn: #E3F1BC;
}

/* --- BAZA I TYPOGRAFIA (Styl korporacyjny) --- 
* { box-sizing: border-box; font-family: Univers, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }*/
* { box-sizing: border-box; font-family: 'Inter', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
body { margin: 0; min-height: 100vh; color: var(--text-main); background: var(--bg); display: flex; justify-content: center; align-items: flex-start; padding: 16px; padding-left: 80px; padding-top: 90px; overflow:hidden;}
h1, h2, h3, label, th { color: var(--text-main); font-weight: 500; }
h1 { font-size: 1.6rem; margin: 0; }
h2 { font-size: 1.3rem; border-bottom: 0; margin: 0 0 8px 0; }
b, strong { font-weight: 700; }
header { margin-bottom: 20px; padding: 10px 0; }
a{color:var(--text-black); text-decoration: none;}
hr{margin-bottom:20px;color: var(--text-light);}

/* --- KONTENERY (Płaskie, ostre krawędzie) --- */
.mainContainer{overflow-y: auto;}
.container { width:100%; max-width: 1420px; background: var(--card); box-shadow: none; display: flex; flex-direction: column;}
.containerNarrow { max-width: 920px; }
.content-wrapper { display: flex; flex-direction: column; width: 95%; max-width: 95%; }

/* --- FORMULARZE I PRZYCISKI --- */
.field:nth-child(even) { background-color: var(--bg-light); padding: 12px; border-radius: 0; border: 1px solid var(--border-light); }
.field:nth-child(even) input, .field:nth-child(even) select, .field:nth-child(even) textarea { background-color: var(--input); }
.inputBig{font-size:1.3em;}
input[type="text"], input[type="number"],input[type="email"], select, textarea { color: var(--text-main); background: var(--input); border: 1px solid var(--border); border-radius: 0; padding: 10px 12px; font-size: 1rem; width: 100%; outline: none; transition: border 0.2s; }
input:focus, select:focus, textarea:focus { border-color: var(--text-main); box-shadow: 0 0 0 1px var(--text-main); } /* Czarna ramka przy focusie jak w bankach */
/* Uniwersalny przycisk (zastępuje dawne btn-green, itp.) */
button, .btn-green, .ah-btn, .matrix-btn, .docs-btn-all, .api-btn { background: var(--accent); color: var(--text-black); border: none; border-radius: 0; padding: 10px 18px; font-weight: 500; font-size: 1rem; cursor: pointer; transition: background 0.2s; box-shadow: none; text-shadow: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-shadow: 1px 1px 0 var(--text-lightShad);}
button:hover, .btn-green:hover, .ah-btn:hover { background: var(--btn-hover); transform: none; box-shadow: none; }
button.disabled {cursor:not-allowed; background:var(--grey); color:var(--mutedB); border:1px solid var(--border); }
button.secondary { background: var(--grey); color: var(--text-main); border: 1px solid var(--border); }
button.secondary:hover { background: var(--greyBord); }
button.orange { background: var(--orange); color: var(--text-main); border: 1px solid var(--border); }
button.orange:hover { background: var(--orangeDark);}
.miniButton { margin-right:15px; padding:6px 16px; border-radius: 0; background: var(--muted); color: var(--text-light); font-size:0.85rem; }

/* --- NAWIGACJA GŁÓWNA (TOP BAR & SIDEBAR) --- */
.top-bar { position: fixed; top: 0; left: 80px; right: 0; height: 70px; background: var(--dark-bg); border-bottom: 3px solid var(--accent); z-index: 90; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; transition: left 0.3s ease; }
.sidebar.expanded ~ .top-bar { left: 260px; }
.breadcrumb, .breadcrumb strong, .top-icon { color: var(--text-light); }
.top-icon:hover { color: var(--mutedB); }
.user-profile { border-left: 1px solid var(--muted); padding-left: 20px; color: var(--text-light); display: flex; align-items: center; gap: 12px; }
.user-name { color: var(--text-light); font-size: 0.9rem; }
.avatar { width: 36px; height: 36px; object-fit: cover; border-radius: 0; border: none; }
.top-right { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }

.sidebar { position: fixed; left: 0; top: 0; height: 100%; width: 80px; background: var(--dark-bg); border-right: none; transition: width 0.3s ease; overflow-x: hidden; z-index: 100; display: flex; flex-direction: column; white-space: nowrap; }
.sidebar.expanded { width: 260px; box-shadow: 4px 0 15px rgba(0,0,0,0.2); }
.sidebar-header { height: 70px; background: var(--nav-header); border-bottom: none; display: flex; align-items: center; justify-content: center; padding: 0 20px; }
.sidebar.expanded .sidebar-header { justify-content: space-between; }
.sidebar-title { color: var(--text-light); font-weight: 700; opacity: 0; display: none; }
.sidebar.expanded .sidebar-title { opacity: 1; display: block; }
.toggle-btn { color: var(--text-light); }
.toggle-btn:hover { background: var(--nav-hover); color: var(--text-light); }

.sidebar-nav { padding: 10px 0; display: flex; flex-direction: column; gap: 0; }
.nav-item, .nav-itemOrg { display: flex; align-items: center; padding: 0; margin: 0; border-radius: 0; color: var(--mutedB); cursor: pointer; transition: background 0.2s; height: 50px; width: 100%; border-left: 4px solid transparent; }
.nav-item:hover { background: var(--nav-hover); color: var(--text-light); }
.nav-item.active { background: var(--nav-hover); color: var(--text-light); border-left: 4px solid var(--accent); box-shadow: none; }
.nav-icon { min-width: 76px; text-align: center; color: inherit; }
.sidebar.expanded .nav-icon { min-width: 50px; }
.nav-text { opacity: 0; font-size: 0.95rem; }
.sidebar.expanded .nav-text { opacity: 1; }

/* --- ZAKŁADKI (TABS) --- */
.main-tabs-nav, .docs-tabs, .api-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 20px; width: 100%; position: relative; z-index: 10; }
.main-tab, .docs-tab, .api-tab { background: transparent; color: var(--muted); border: none; padding: 12px 20px; border-radius: 0; cursor: pointer; font-weight: 500; position: relative; top: 2px; border-bottom: 3px solid transparent; }
.main-tab:hover, .docs-tab:hover, .api-tab:hover { color: var(--text-main); background-color:var(--border); }
.main-tab.active, .docs-tab.active, .api-tab.active { background: transparent; color: var(--text-main); border-bottom: 3px solid var(--accent); font-weight: 700; }
.tab-pane { display: none; }
.tab-pane.active { display: flex; }
.api-tab.active{border-bottom: 3px solid var(--accentBlu);}

/* --- KARTY I BLOKI (Płaskie) --- */
.promo-row, .grid-blocks, .kpi-grid, .chart-grid, .docs-grid, .api-grid, .edu-grid { gap: 20px; }
.tile, .block-tile, .kpi-card, .status-card, .prog-card, .matrix-card, .audit-header, .docs-card, .edu-block, .edu-card, .api-card, .api-sub-card { background: var(--card); border: 1px solid var(--border); border-radius: 0; box-shadow: none; transition: border 0.2s; margin-bottom:12px; padding:24px;}
.tile:hover, .block-tile:hover, .docs-card:hover, .edu-card:hover { transform: none; box-shadow: none; border-color: var(--text-main); }

/* Detale kart */
.tile-top, .kpi-header, .ah-mod, .docs-col-title, .api-c-title, .edu-lvl-title { font-weight: 600; text-transform: uppercase; font-size: 0.85rem; color: var(--muted); letter-spacing: 0.5px; }
.tile-main, .kpi-val, .prog-percent { font-size: 2rem; font-weight: 400; color: var(--text-main); }
.ah-title, .b-title, .b-titleD, .api-title { font-size: 1.6rem; font-weight: 400; color: var(--text-main); text-shadow: none; }
.b-sub, .b-sub-blue, .b-sub-dark, .ah-desc, .api-desc { color: var(--muted); font-weight: 400; text-shadow: none; }

/* Nadpisanie kafelków z tłami obrazkowymi - w HSBC używamy czystych kolorów */
.block-tile { padding: 24px; min-height: auto; background-color: var(--card); margin-bottom:12px;}
.block-tile .b-title, .block-tile .b-sub-blue { color: var(--text-main); }
.tile-tall {min-height: 160px;}
.tile-tall::before { display: none; }
.tileImage{background-size: 30% auto; background-position: left center; background-repeat: no-repeat; padding-left: 32%;}

/* --- TABELE --- */
table { border: 1px solid var(--border); border-radius: 0; border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border-light); padding: 12px 16px; font-size: 0.95rem; }
th { background: var(--bg); color: var(--text-main); text-transform: none; font-weight: 600; border-bottom: 2px solid var(--border); }
tr:last-child td { border-bottom: none; }

/* --- PROGRESS I SLIDERY --- */
.prog-bar-bg, .ah-pbar-bg, .progress-bar { background: var(--prog-bg); border-radius: 0; height: 8px; }
.prog-bar-fill, .ah-pbar-fill, .progress-fill { background: var(--accent); border-radius: 0; }
input[type="range"] { background: var(--prog-bg); border-radius: 0; height: 4px; }
input[type="range"]::-webkit-slider-thumb { border-radius: 0; background: var(--text-main); width: 12px; height: 16px; border: 1px solid var(--card); }

/* --- DROBNE ELEMENTY --- */
.tag { border-radius: 0; border: 1px solid var(--border); font-weight: 400; background: var(--card); color: var(--text-main); }
.trend-up { color: var(--success); }
.trend-down { color: var(--accent); }
.dot-g { background: var(--success); }
.dot-r { background: var(--accent); }
.ic-grn, .ic-gld, .ic-blu, .doc-meta-l i, .api-auth-user i { color: var(--text-main); } /* Neutralne ikony */
.ah-step i.done { color: var(--success); } 
.ah-step i.curr { color: var(--text-main); }
.edu-badge { border-radius: 0; background: var(--text-main); }
.api-badge { border-radius: 0; background: var(--text-main); }

/* Użyteczność ukrywania */
.disa { opacity: 0.4; pointer-events: none; }
/*
.unfold { height:10px; overflow:hidden; transition:height 0.4s ease; }
.xfold{height:10px; overflow:hidden; transition:height 0.8s ease;}
*/
/* --- OVERLAY & POPUPS (HSBC FLAT STYLE) --- */
.overlay {display:; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.75); justify-content: center; align-items: center; z-index: 9999; }
.popup { background: var(--card); border: 1px solid var(--border); padding: 30px; border-radius: 0; display: none; flex-direction: column; gap: 20px; align-items: center; text-align: center; min-width: 300px; max-width: 80%; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.popup p { margin: 0; font-size: 1.1rem; color: var(--text-main); }
.popup-90 { width: 90vw; height: 90vh; padding: 0; position: relative; overflow: hidden; background: #000; border: none; }
.popup-90 img { width: 100%; height: 100%; object-fit: contain; }
.close-btn { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; background: var(--muted); color: white; border: none; border-radius: 0; font-size: 1.4rem; cursor: pointer; z-index: 10; display: flex; justify-content: center; align-items: center; transition: background 0.2s; }
.close-btn:hover { background: var(--accent); }

/* Positioning helper classes for gallery */
.align-top { align-items: flex-start; padding-top: 5vh; }
.align-bottom { align-items: flex-end; padding-bottom: 5vh; }
.h-30 { height: 30vh !important; }


/* --- AUDIT REVIEW FIELDS --- */
		.audit-header {padding: 20px; margin-bottom:20px;}
		.audit-item { background: var(--card); border: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; gap: 12px; transition: opacity 0.3s ease; margin-bottom: 20px; }
		.audit-item.disabled { opacity: 0.5; }
		.ai-header { display: flex; justify-content: space-between; align-items: flex-start;}
		.ai-title-group { display: flex; flex-direction: column; gap: 4px; }
		.ai-title { font-size: 1.1rem; font-weight: 600; color: var(--text-main); margin: 0; }
		.ai-desc { font-size: 0.85rem; color: var(--muted); }
		.ai-tag { display: inline-block; padding: 2px 8px; border: 1px solid var(--border); font-size: 0.75rem; text-transform: uppercase; color: var(--muted); background: var(--bg-light); }
		.ai-answer { font-size: 0.95rem; color: var(--text-main); background: var(--bg-light); padding: 12px; border: 1px solid var(--border-light); border-left: 3px solid var(--accent); line-height: 1.5; }
		.ai-list { margin: 0; padding-left: 20px; }
		.ai-list li { margin-bottom: 4px; }
		.ai-reason { display: none; margin-top: 8px; }
		.ai-reason textarea { height: 60px; min-height: 60px; resize: vertical; border-color: var(--accent); }

		/* Checkbox bankowy */
		.ai-check { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.9rem; cursor: pointer; user-select: none; color: var(--text-main); }
		.ai-check input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent); margin: 0; }
		.ai-check-red input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--col-just-red); margin: 0; }
		.darkBg1{background-color:var(--mildGrey);border: 2px solid var(--border);}

.pad20{padding:20px}

/* --- AUDIT HEADER & MILESTONE PROGRESS --- */
.ah-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px; }
.ah-titles { display: flex; flex-direction: column; gap: 8px; } .ah-mod { color: var(--mutedB);; font-size: 0.85rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .ah-title { font-size: 1.8rem; font-weight: 700; color: var(--text-main); margin: 0; line-height: 1; border: none; padding: 0; } .ah-desc { font-size: 0.95rem; color: var(--muted); }
.ah-controls { display: flex; align-items: flex-end; gap: 15px; flex-wrap: wrap; } .ah-ctrl-grp { display: flex; flex-direction: column; gap: 6px; } .ah-label { font-size: 0.85rem; color: var(--muted); }
.ah-select, .ah-input { background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; color: var(--text-main); font-size: 0.95rem; } .ah-select { min-width: 220px; } .ah-input { width: 80px; text-align: center; }
.ah-prog-sec { display: flex; flex-direction: column; gap: 16px; }
.ah-pbar-bg { width: 100%; height: 14px; background: var(--border); border-radius: 0px; overflow: hidden; } 
.ah-pbar-fill {background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 100%); height: 100%; border-radius: 0px; }

.ah-steps { display: grid; align-items: center; position: relative; font-size: 0.85rem; font-weight: 500; color: var(--muted); margin-bottom: 15px; }
.ah-steps4{grid-template-columns: repeat(4, 1fr); }
.ah-steps5{grid-template-columns: repeat(5, 1fr); }
.ah-steps6{grid-template-columns: repeat(6, 1fr); }
.ah-steps::before { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 1px; background: var(--border); z-index: 1; }
.ah-step { display: flex; align-items: center; gap: 8px; padding-right: 15px; z-index: 2; justify-self: start; }
	.ah-step i.done { color: var(--step-done); font-size: 1.1rem; } 
	.ah-step i.curr { color: var(--step-curr); font-size: 1.1rem; }
	.ah-step i.wait { color: var(--mutedB); font-size: 1.1rem; font-weight:8;}
	.stepDone {font-weight: 700;}
	
.pGrey{color: var(--muted); margin-top: 5px;}

/* ========================================== */
/* NOWE: Biały pełnoekranowy popup            */
/* ========================================== */
.full-page-white { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--card); z-index: 10000; display: flex; justify-content: center; align-items: center; flex-direction: column; overflow-y: auto; }
.full-page-content {
  width: 100%; max-width: 500px; /* Szerokość kontenera wewnętrznego (możesz dostosować) */
  padding: 30px; text-align: center;
}
.close-btn-dark {
  position: absolute; top: 20px; right: 20px;
  width: 40px; height: 40px; background: transparent; color: var(--text-main);
  border: 1px solid var(--border); border-radius: 0; font-size: 1.4rem; 
  cursor: pointer; z-index: 10001; display: flex; justify-content: center; 
  align-items: center; transition: background 0.2s;
}
.close-btn-dark:hover { background: var(--mildGrey); }

/* ========================================== */
/* NOWE: Top-center Toast Badge               */
/* ========================================== */
.toast-badge {
  position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
  color: var(--text-light); padding: 12px 30px; font-weight: 500; font-size: 1rem;
  z-index: 10001; pointer-events: none; /* Element nie jest klikalny */
  transition: top 0.4s ease-in-out;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15); border-radius: 0; /* Zgodnie ze stylem HSBC */
  background-color: var(--accentBlu);
}

.orangeBorder{border-left: 3px solid var(--col-just-warm);}
.blueBorder{border-left: 3px solid var(--accentBlu); padding:10px}
.greenBorder{border-left: 3px solid var(--accent); padding:10px}
.violetBorder{border-left: 3px solid var(--violet); padding:10px}
.greyBorder{border-left: 3px solid var(--mildGrey); padding:10px}

.version-history-bar{max-width: 1420px;}
.collapse{max-height:30px;}

.ios-badge {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #db0012;
  background: var(--accentRed, #db0012);
  color: #ffffff;
  color: var(--text-light, #ffffff);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.muted{color:var(--muted)}
.success{color:var(--success); font-weight:600;}
.orange{color:var(--col-just-warm); font-weight:600;}

/* DMA Matrix */
.matrix-bubble { position: absolute; width:36px; height:36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.45); color: var(--text-light); font-weight: 600; font-size: 0.75rem; text-align: center; padding: 4px; transition: transform 0.2s; /* Centruje środek kółka idealnie na podanych koordynatach */ transform: translate(-50%, 50%); }
.bblMed{width:48px; height:48px; }
.bblBig{width:64px; height:64px; }
.matrix-bubble:hover { transform: translate(-50%, 50%) scale(1.1);}

/* minitab */ 
.minitab-btn {;padding: 8px 16px;font-size: 0.85rem;font-weight: 500;cursor: pointer;border: none;background: transparent;color: var(--muted);}

/* Klasa dla kontenera (kafelka) */
.audit-item.is-done { border-left-color: var(--success) !important; }
.audit-item.is-pending { border-left-color: var(--accentBlu) !important; }

/* Klasa dla etykiety z checkboxem */
.ws-label.is-done {color: var(--success);font-weight: 600;background: var(--bg-light);border-color: var(--border-light);}
.ws-label.is-pending {color: inherit;font-weight: 400;background: var(--card);border-color: var(--border);}



@media (max-width: 768px) {
  html {
    zoom: 0.7;
  }
}