.pc-portal-wrap {
	background: var( --black, #0e0e0e );
	padding: 60px 0 100px;
	min-height: 70vh;
}
.pc-portal {
	color: var( --white, #f4f4f2 );
	font-family: var( --body, sans-serif );
}
.pc-portal-title {
	font-family: var( --display, sans-serif );
	font-size: 32px;
	margin: 20px 0 24px;
}
.pc-portal-nav {
	display: flex;
	gap: 6px;
	border-bottom: 1px solid var( --line, #2a2a2a );
	padding-bottom: 0;
}
.pc-portal-nav a {
	display: inline-block;
	padding: 10px 16px;
	color: var( --steel, #9a9a9a );
	text-decoration: none;
	border-bottom: 2px solid transparent;
	font-weight: 600;
}
.pc-portal-nav a.active,
.pc-portal-nav a:hover {
	color: var( --yellow, #f5c518 );
	border-bottom-color: var( --yellow, #f5c518 );
}

.pc-cards {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 210px, 1fr ) );
	gap: 16px;
}
.pc-card {
	background: var( --panel, #1c1c1c );
	border: 1px solid var( --line, #2a2a2a );
	border-left: 4px solid var( --yellow, #f5c518 );
	border-radius: 6px;
	padding: 18px 20px;
}
.pc-card-val { font-size: 30px; font-weight: 700; font-family: var( --display, sans-serif ); }
.pc-card-label { color: var( --steel, #9a9a9a ); margin-top: 4px; }

.pc-table {
	width: 100%;
	border-collapse: collapse;
	background: var( --panel, #1c1c1c );
	border: 1px solid var( --line, #2a2a2a );
	border-radius: 6px;
	overflow: hidden;
}
.pc-table th, .pc-table td {
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var( --line, #2a2a2a );
	font-size: 14px;
}
.pc-table th { color: var( --steel, #9a9a9a ); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.pc-table tbody tr:hover { background: var( --panel-2, #161616 ); }
.pc-table a { color: var( --yellow, #f5c518 ); }

.pc-filter select {
	background: var( --panel, #1c1c1c );
	color: var( --white, #f4f4f2 );
	border: 1px solid var( --line, #2a2a2a );
	padding: 8px 12px;
	border-radius: 4px;
	margin-bottom: 16px;
}

.pc-panel {
	background: var( --panel, #1c1c1c );
	border: 1px solid var( --line, #2a2a2a );
	border-radius: 8px;
	padding: 22px;
}
.pc-detail-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
@media ( max-width: 800px ) {
	.pc-detail-grid { grid-template-columns: 1fr; }
}

.pc-panel p { margin: 0 0 14px; }
.pc-panel label { display: block; font-weight: 600; margin-bottom: 4px; color: var( --steel, #9a9a9a ); font-size: 13px; }
.pc-panel input[type=text],
.pc-panel input[type=number],
.pc-panel input[type=email],
.pc-panel input[type=search],
.pc-panel select,
.pc-panel textarea {
	width: 100%;
	padding: 9px 12px;
	border-radius: 4px;
	border: 1px solid var( --line, #2a2a2a );
	background: var( --panel-2, #161616 );
	color: var( --white, #f4f4f2 );
	font-family: inherit;
}
.pc-panel pre { white-space: pre-wrap; margin: 0; font-family: inherit; }
.pc-kv td { padding: 8px 10px; border-bottom: 1px solid var( --line, #2a2a2a ); vertical-align: top; }
.pc-kv td:first-child { color: var( --steel, #9a9a9a ); width: 140px; }

.pc-btn {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 4px;
	border: 1px solid var( --line, #2a2a2a );
	background: var( --panel-2, #161616 );
	color: var( --white, #f4f4f2 );
	cursor: pointer;
	font-weight: 600;
	text-decoration: none;
}
.pc-btn-primary {
	background: var( --yellow, #f5c518 );
	border-color: var( --yellow, #f5c518 );
	color: #0e0e0e;
}
.pc-convert { margin-top: 16px; }

.pc-part-add input.pc-part-search { margin-bottom: 0; }
.pc-progress textarea { margin-bottom: 8px; }

/* Komponente porudžbine (order-ui.css) su svetlo-neutralne; ovde ih prevlačimo na tamnu temu portala. */
.pc-portal .pc-part-suggestions {
	background: var( --panel-2, #161616 );
	color: var( --white, #f4f4f2 );
	border-color: var( --line, #2a2a2a );
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .5 );
}
.pc-portal .pc-part-sugg { border-color: var( --line, #2a2a2a ); }
.pc-portal .pc-part-sugg.active,
.pc-portal .pc-part-sugg:hover { background: rgba( 245, 197, 24, .14 ); }
/* Generičko .pc-panel input{width:100%} bi razbilo flex red za dodavanje dela — vraćamo širinu količine. */
.pc-portal .pc-part-add .pc-part-qty { flex: 0 0 72px; width: 72px; }
.pc-portal .pc-stages-title,
.pc-portal .pc-stage-label { color: var( --white, #f4f4f2 ); }

/* Generičko .pc-panel label{display:block} obara flex na redu faze (kockica nestane, tekst se pomeri) — vraćamo. */
.pc-portal .pc-stage-check {
	display: flex;
	align-items: center;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var( --white, #f4f4f2 );
}
.pc-portal .pc-notes div[style*="border-bottom"],
.pc-portal .pc-progress div[style*="border-bottom"] { border-color: var( --line, #2a2a2a ) !important; }

/* ==================================================== KLIJENTSKI PORTAL (/moj-nalog/) */
.pc-account-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.pc-account-actions { display: flex; align-items: center; gap: 10px; }
.pc-account .pc-account-actions .pc-btn { padding: 8px 16px; font-size: 13px; }

/* Saglasnost na login formi */
.pc-consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	text-align: left;
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --steel, #9a9a9a );
	margin: 2px 0 4px;
	cursor: pointer;
}
.pc-consent input { margin-top: 2px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var( --yellow, #f5c518 ); }
.pc-consent a { color: var( --yellow, #f5c518 ); }

/* Opasna zona (brisanje naloga) */
.pc-danger-zone { border-color: rgba( 226, 75, 74, .4 ); }
.pc-danger-zone h3 { color: #f2a2a2; }
.pc-btn-danger { background: #c0392b; border-color: #c0392b; color: #fff; }
.pc-btn-danger:hover { background: #a93226; }

/* Prijava — centrirani ekran */
.pc-login-wrap { display: flex; align-items: center; justify-content: center; min-height: 78vh; }
.pc-login-screen { width: 100%; max-width: 440px; padding: 40px 20px; }
.pc-login-card {
	background: var( --panel, #1c1c1c );
	border: 1px solid var( --line, #2a2a2a );
	border-radius: 16px;
	padding: 42px 34px 34px;
	text-align: center;
	color: var( --white, #f4f4f2 );
}
.pc-login-icon {
	width: 66px; height: 66px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background: rgba( 245, 197, 24, .12 );
	border: 1px solid rgba( 245, 197, 24, .3 );
	display: flex; align-items: center; justify-content: center;
	color: var( --yellow, #f5c518 );
}
.pc-login-icon svg { width: 30px; height: 30px; }
.pc-login-title { font-family: var( --display, sans-serif ); font-size: 27px; margin: 0 0 10px; }
.pc-login-lead { color: var( --steel, #9a9a9a ); font-size: 14px; line-height: 1.6; margin: 0 0 24px; }
.pc-login-form { display: flex; flex-direction: column; gap: 12px; }
.pc-login-form input[type=email],
.pc-login-form input[type=text],
.pc-login-form input[type=password] {
	width: 100%; box-sizing: border-box;
	padding: 14px 16px;
	border-radius: 9px;
	border: 1px solid var( --line, #2a2a2a );
	background: var( --panel-2, #161616 );
	color: var( --white, #f4f4f2 );
	font-size: 15px; text-align: center;
	transition: border-color .15s ease;
}
.pc-login-form input[type=email]:focus,
.pc-login-form input[type=text]:focus,
.pc-login-form input[type=password]:focus { outline: none; border-color: var( --yellow, #f5c518 ); }
.pc-login-form button {
	width: 100%;
	padding: 14px;
	border-radius: 9px;
	border: 0;
	background: var( --yellow, #f5c518 );
	color: #0e0e0e;
	font-weight: 700; font-size: 15px;
	cursor: pointer;
	transition: background .18s ease;
}
.pc-login-form button:hover { background: var( --yellow-dim, #caa414 ); }
.pc-login-foot { margin: 22px 0 0; font-size: 13px; color: var( --steel, #9a9a9a ); }
.pc-login-foot a { color: var( --yellow, #f5c518 ); }
.pc-login-msg { padding: 12px 14px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; line-height: 1.5; }
.pc-login-msg.pc-ok  { background: rgba( 34, 197, 94, .14 ); color: #6ee79a; }
.pc-login-msg.pc-err { background: rgba( 226, 75, 74, .16 ); color: #f2a2a2; }

/* Read-only faze: nema klik-kurzora na redu */
.pc-stages.is-readonly .pc-stage-check { cursor: default; }
.pc-stages.is-readonly .pc-stage:hover { background: transparent; }

/* Mreža mašina na dashboardu */
.pc-machines {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 16px;
}
.pc-machine {
	display: block;
	background: var( --panel, #1c1c1c );
	border: 1px solid var( --line, #2a2a2a );
	border-radius: 10px;
	padding: 18px 20px;
	text-decoration: none;
	color: var( --white, #f4f4f2 );
	transition: border-color .15s ease, transform .15s ease;
}
.pc-machine:hover { border-color: var( --yellow, #f5c518 ); transform: translateY( -2px ); }
.pc-machine-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pc-machine-serial { font-family: var( --display, sans-serif ); font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.pc-machine-tip { color: var( --steel, #9a9a9a ); font-size: 13px; margin-bottom: 16px; }
.pc-machine-barwrap { display: flex; align-items: center; gap: 10px; }
.pc-machine-bar { flex: 1; height: 8px; border-radius: 6px; background: rgba( 125, 125, 125, .2 ); overflow: hidden; }
.pc-machine-fill { height: 100%; border-radius: 6px; background: linear-gradient( 90deg, #f5c518, #22c55e ); }
.pc-machine-pct { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }

/* Tok izrade (timeline) */
.pc-timeline { display: flex; flex-direction: column; gap: 18px; }
.pc-tl-item { padding-left: 16px; border-left: 2px solid var( --yellow-dim, #caa414 ); }
.pc-tl-date { font-size: 12px; color: var( --steel, #9a9a9a ); margin-bottom: 4px; }
.pc-tl-text { white-space: pre-wrap; margin-bottom: 8px; }
.pc-tl-imgs { display: flex; gap: 8px; flex-wrap: wrap; }
.pc-tl-imgs img { width: 120px; height: 120px; object-fit: cover; border-radius: 6px; border: 1px solid var( --line, #2a2a2a ); }

/* =========================================================
   POLISH — premium doterivanje portala (dugmad, tabele, nav)
   ========================================================= */
.pc-portal-wrap{background:var(--black,#0e0e0e);
  background-image:radial-gradient(900px circle at 85% -5%,rgba(245,197,24,.05),transparent 55%);}
.pc-portal-title{letter-spacing:-.5px}

/* Nav — horizontalno skrolovanje na mobilnom, bez ružnog preloma */
.pc-portal-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pc-portal-nav::-webkit-scrollbar{display:none}
.pc-portal-nav a{white-space:nowrap;transition:color .18s ease,border-color .18s ease}

/* Dugmad — hover, tranzicija, mikro-pomak */
.pc-btn{border-radius:8px;transition:background .18s ease,border-color .18s ease,transform .1s ease}
.pc-btn:hover{border-color:var(--yellow,#f5c518);color:var(--yellow,#f5c518)}
.pc-btn:active{transform:translateY(1px)}
.pc-btn-primary,.pc-btn.pc-btn-primary{transition:background .18s ease,transform .1s ease}
.pc-btn-primary:hover,.pc-btn.pc-btn-primary:hover{background:#fff;border-color:#fff;color:#0e0e0e}
.pc-btn-danger:hover{background:#a93226;border-color:#a93226;color:#fff}

/* Kartice table — veći radijus, mekša senka, hover lift */
.pc-card,.pc-table,.pc-panel{border-radius:10px}
.pc-card{transition:transform .18s ease,border-color .18s ease}
.pc-card:hover{transform:translateY(-3px);border-left-color:var(--yellow,#f5c518)}
.pc-panel{box-shadow:0 1px 0 rgba(255,255,255,.02) inset}

/* Tabele — mekši hover, klikabilni redovi jasno reaguju */
.pc-table tbody tr{transition:background .14s ease}
.pc-table tbody tr[onclick]:hover{background:rgba(245,197,24,.06)}
.pc-table th{font-weight:700}

/* Inputi — fokus u brend boji */
.pc-panel input:focus,.pc-panel select:focus,.pc-panel textarea:focus,
.pc-filter select:focus{outline:none;border-color:var(--yellow,#f5c518)}
.pc-filter select{transition:border-color .15s ease}

/* Statusni „badge" — malo vazduha oko teksta u tabelama */
.pc-table td .pc-status,.pc-kv td span[style]{vertical-align:middle}

/* Naslovi sekcija unutar panela */
.pc-panel h3{font-family:var(--display,sans-serif);font-size:18px;margin:0 0 14px;color:var(--white,#f4f4f2)}

/* Detalji: dugme „Sačuvaj" da se odvoji od polja */
.pc-panel form>.pc-btn,.pc-panel>.pc-btn{margin-top:6px}

/* Prazna stanja i sporedni tekst */
.pc-table td[colspan]{color:var(--steel,#9a9a9a);font-style:italic}

@media(max-width:640px){
  .pc-portal-title{font-size:26px}
  .pc-cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .pc-account-top{gap:12px}
  .pc-table th,.pc-table td{padding:9px 10px;font-size:13px}
}