/**
 * Ulu Personel Takip — front-end paneli stili.
 *
 * Tema-agnostik: kendi sınıflarımızla scope'lu, tema değişkenlerine dokunmuyor.
 * Mobil-öncelikli; flexbox ile butonlar küçük ekranda üst üste, geniş ekranda yan yana.
 */

.upt-panel {
	max-width: 560px;
	margin: 1.5rem auto;
	padding: 1.25rem 1.25rem 1.5rem;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
	font-family: inherit;
	color: #1f2937;
	box-sizing: border-box;
}

.upt-panel *, .upt-panel *::before, .upt-panel *::after { box-sizing: border-box; }

.upt-panel--notice {
	text-align: center;
}

.upt-panel--notice p {
	margin: 0 0 1rem;
	font-size: 1rem;
}

.upt-panel__head {
	margin-bottom: 1rem;
	text-align: center;
}

.upt-panel__title {
	margin: 0 0 .25rem;
	font-size: 1.25rem;
	font-weight: 700;
}

.upt-panel__user {
	margin: 0;
	color: #6b7280;
	font-size: .9rem;
}

/* Duvar saati (üstte küçük) */
.upt-clock {
	margin-top: .5rem;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	color: #111827;
	transition: color .3s ease;
}

/* Çalışma/Mola dağılım halkası */
.upt-workchart {
	display: flex;
	justify-content: center;
	margin: .8rem 0 .2rem;
}
.upt-chart-svg {
	width: 170px;
	height: 170px;
	display: block;
}
.upt-chart-track {
	fill: none;
	stroke: #e5e7eb;
	stroke-width: 10;
}
.upt-chart-arc {
	fill: none;
	stroke-width: 10;
	stroke-linecap: butt;
	transition: stroke-dasharray .4s ease, stroke-dashoffset .4s ease;
}
.upt-chart-arc--work  { stroke: #f59e0b; } /* sarı = çalışma */
.upt-chart-arc--break { stroke: #ec4899; } /* pembe = mola */
.upt-chart-ticks line {
	stroke: #ffffff;
	stroke-width: 1.6;
}
.upt-chart-center-target {
	fill: #9ca3af;
	font-size: 7px;
	font-weight: 600;
}
.upt-chart-center-label {
	fill: #6b7280;
	font-size: 8px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.upt-chart-center-value {
	fill: #111827;
	font-size: 15px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* Açıklama (legend) */
.upt-chart-legend {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: .4rem 0 .25rem;
	font-size: .85rem;
}
.upt-legend {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: #374151;
}
.upt-legend i {
	width: 13px;
	height: 13px;
	border-radius: 3px;
	display: inline-block;
}
.upt-legend--work i  { background: #f59e0b; }
.upt-legend--break i { background: #ec4899; }
.upt-legend b { font-variant-numeric: tabular-nums; }

/* Fazla mesai uyarısı */
.upt-overtime {
	text-align: center;
	margin: .35rem 0 .25rem;
	padding: .4rem .7rem;
	border-radius: 8px;
	background: #fef2f2;
	color: #b91c1c;
	font-size: .85rem;
	font-weight: 700;
}
.upt-overtime b { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ */
/*  State'e göre renk: çalışıyor (yeşil) / molada (turuncu) / yok      */
/* ------------------------------------------------------------------ */
.upt-panel--main {
	border-top: 5px solid #cbd5e1;
	transition: border-color .3s ease, background-color .3s ease;
}
.upt-panel--main[data-state="open"] {
	border-top-color: #16a34a;
	background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 60%);
}
.upt-panel--main[data-state="break"] {
	border-top-color: #f59e0b;
	background: linear-gradient(180deg, #fffbeb 0%, #ffffff 60%);
}
.upt-panel--main[data-state="open"]  .upt-clock { color: #166534; }
.upt-panel--main[data-state="break"] .upt-clock { color: #b45309; }
.upt-panel--main[data-state="open"]  .upt-timer__value { color: #166534; }

.upt-panel__status {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1.25rem;
}

.upt-status-pill {
	display: inline-flex;
	align-items: center;
	padding: .35rem .85rem;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .02em;
}

.upt-status-pill--none  { background: #f3f4f6; color: #6b7280; }
.upt-status-pill--open  { background: #dcfce7; color: #166534; }
.upt-status-pill--break { background: #fef3c7; color: #92400e; }

.upt-panel__timer {
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
}

.upt-timer {
	text-align: center;
	min-width: 110px;
}

.upt-timer__label {
	display: block;
	font-size: .75rem;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: .25rem;
}

.upt-timer__value {
	display: block;
	font-size: 1.6rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums; /* monospace rakamlar — sayaç zıplamaz */
	color: #111827;
}

.upt-timer--break .upt-timer__value { color: #92400e; }

.upt-panel__actions {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
}

.upt-btn {
	flex: 1 1 calc(50% - .375rem);
	min-width: 140px;
	padding: .85rem 1rem;
	border: 0;
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease;
	color: #fff;
	background: #2563eb;
}

.upt-btn:hover:not(:disabled)  { background: #1d4ed8; }
.upt-btn:active:not(:disabled) { transform: translateY(1px); }
.upt-btn:disabled              { opacity: .5; cursor: not-allowed; }
.upt-btn:focus-visible         { outline: 2px solid #93c5fd; outline-offset: 2px; }

.upt-btn--primary { background: #2563eb; }
.upt-btn--shift[data-upt-action="start_shift"] { background: #16a34a; }
.upt-btn--shift[data-upt-action="start_shift"]:hover:not(:disabled) { background: #15803d; }
.upt-btn--shift[data-upt-action="end_shift"]   { background: #dc2626; }
.upt-btn--shift[data-upt-action="end_shift"]:hover:not(:disabled)   { background: #b91c1c; }

.upt-btn--break[data-upt-action="start_break"] { background: #f59e0b; }
.upt-btn--break[data-upt-action="start_break"]:hover:not(:disabled) { background: #d97706; }
.upt-btn--break[data-upt-action="end_break"]   { background: #0ea5e9; }
.upt-btn--break[data-upt-action="end_break"]:hover:not(:disabled)   { background: #0284c7; }

.upt-panel__footer {
	margin-top: 1rem;
	text-align: center;
}
.upt-btn--logout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: .6rem 1.4rem;
	border-radius: 8px;
	background: #475569;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: .9rem;
}
.upt-btn--logout:hover { background: #334155; color: #fff; }

.upt-panel__msg {
	margin-top: 1rem;
	padding: .65rem .85rem;
	border-radius: 8px;
	font-size: .9rem;
}

.upt-msg--error   { background: #fee2e2; color: #991b1b; }
.upt-msg--success { background: #dcfce7; color: #166534; }
.upt-msg--info    { background: #e0f2fe; color: #075985; }

/* ------------------------------------------------------------------ */
/*  Gömülü giriş formu (wp_login_form)                                  */
/* ------------------------------------------------------------------ */

.upt-panel--login #loginform {
	text-align: left;
	margin: 0;
	padding: 0;
}
.upt-panel--login #loginform p {
	margin: 0 0 .9rem;
}
.upt-panel--login #loginform label {
	display: block;
	font-size: .9rem;
	font-weight: 600;
	margin-bottom: .35rem;
	color: #374151;
}
.upt-panel--login #loginform input[type="text"],
.upt-panel--login #loginform input[type="password"] {
	width: 100%;
	padding: .7rem .8rem;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 1rem;
	background: #fff;
	color: #1f2937;
}
.upt-panel--login #loginform input:focus {
	outline: 2px solid #93c5fd;
	outline-offset: 1px;
	border-color: #2563eb;
}
.upt-panel--login #loginform .login-remember {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-weight: 500;
}
.upt-panel--login #loginform .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-weight: 500;
	cursor: pointer;
}
.upt-panel--login #loginform .login-remember input {
	width: auto;
	margin: 0;
}
.upt-panel--login #loginform .login-submit {
	margin-bottom: 0;
}
.upt-panel--login #loginform #wp-submit {
	width: 100%;
	padding: .8rem 1rem;
	border: 0;
	border-radius: 8px;
	background: #2563eb;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}
.upt-panel--login #loginform #wp-submit:hover { background: #1d4ed8; }

/* ------------------------------------------------------------------ */
/*  Responsive breakpoints                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 600px) {
	.upt-panel {
		margin: .75rem auto;
		padding: 1rem;
		border-radius: 10px;
	}
	.upt-panel__title {
		font-size: 1.1rem;
	}
	.upt-chart-svg { width: 150px; height: 150px; }
	.upt-clock {
		font-size: 1.4rem;
	}
	.upt-panel__timer {
		gap: 1rem;
	}
	.upt-timer__value {
		font-size: 1.5rem;
	}
	.upt-panel--login #loginform input[type="text"],
	.upt-panel--login #loginform input[type="password"] {
		font-size: 16px; /* iOS'ta odakta otomatik zoom'u engeller */
	}
}

@media (max-width: 420px) {
	.upt-panel {
		margin: .5rem auto;
		padding: .85rem;
	}
	.upt-chart-svg { width: 140px; height: 140px; }
	.upt-clock { font-size: 1.3rem; }
	.upt-panel__actions {
		gap: .5rem;
	}
	.upt-btn {
		flex: 1 1 100%;
		min-width: 0;
		padding: .9rem 1rem;
		font-size: 1rem;
	}
	.upt-timer { min-width: 0; flex: 1 1 45%; }
	.upt-timer__value { font-size: 1.35rem; }
	.upt-timer__label { font-size: .7rem; }
}

@media (max-width: 340px) {
	.upt-clock { font-size: 1.5rem; }
	.upt-timer__value { font-size: 1.2rem; }
	.upt-panel__title { font-size: 1rem; }
}