/* ============================================================
   AUTH MODAL
   ============================================================ */

body.sky-modal-open { overflow: hidden; }

.sky-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.sky-modal[hidden] { display: none; }

.sky-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5,14,43,.7);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity .3s;
}
.sky-modal.is-open .sky-modal-backdrop { opacity: 1; }

.sky-modal-box {
	position: relative;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 24px 80px rgba(5,14,43,.3);
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	transform: translateY(20px) scale(.97);
	opacity: 0;
	transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
}
.sky-modal.is-open .sky-modal-box {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.sky-modal-close {
	position: absolute;
	top: 12px; right: 12px;
	width: 30px; height: 30px;
	border-radius: 50%;
	border: none;
	background: #f0f4f8;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	color: #6b7a9a;
	transition: background .2s, color .2s;
	z-index: 10;
}
.sky-modal-close:hover { background: #e2e8f0; color: var(--color-navy-dark); }

/* Action tabs */
.sky-modal-action-tabs {
	display: flex;
	position: relative;
	border-bottom: 2px solid #e9edf3;
	margin: 0 1.5rem;
	padding-top: 1.25rem;
}
.sky-action-tab {
	flex: 1;
	padding: .75rem .5rem;
	background: none; border: none;
	font-size: .9rem; font-weight: 600;
	color: #6b7a9a;
	cursor: pointer;
	transition: color .2s;
}
.sky-action-tab.is-active { color: var(--color-navy-dark); }
.sky-action-tab-bar {
	position: absolute;
	bottom: -2px; left: 0;
	width: 50%; height: 2px;
	background: var(--color-yellow);
	transition: left .3s cubic-bezier(.4,0,.2,1);
}

/* Register role picker */
.sky-reg-role-pick {
	display: flex;
	gap: .5rem;
}
.sky-reg-role-btn {
	flex: 1;
	display: flex; align-items: center; justify-content: center; gap: .4rem;
	padding: .55rem .75rem;
	border-radius: 8px;
	border: 1.5px solid #dce3ee;
	background: #fff;
	font-size: .82rem; font-weight: 600;
	color: #6b7a9a;
	cursor: pointer;
	transition: border-color .2s, background .2s, color .2s;
}
.sky-reg-role-btn:hover { border-color: var(--color-yellow); color: var(--color-navy-dark); }
.sky-reg-role-btn.is-active {
	border-color: var(--color-yellow);
	background: rgba(253,183,47,.08);
	color: var(--color-navy-dark);
}

/* Alert */
.sky-modal-alert {
	margin: .75rem 1.5rem 0;
	padding: .75rem 1rem;
	border-radius: 8px;
	font-size: .875rem;
	display: flex; align-items: center; gap: .5rem;
}
.sky-modal-alert--error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.sky-modal-alert--success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

/* Panels */
.sky-modal-panel { display: none; padding: 1.25rem 1.5rem 1.75rem; }
.sky-modal-panel.is-active { display: block; }

/* Form */
.sky-modal-form { display: flex; flex-direction: column; gap: 1rem; }

.sky-mf-field { display: flex; flex-direction: column; gap: .35rem; }
.sky-mf-field label { font-size: .8rem; font-weight: 600; color: var(--color-navy-dark); }

.sky-mf-input-wrap {
	position: relative;
	display: flex; align-items: center;
}
.sky-mf-input-wrap > svg:first-child {
	position: absolute; left: 12px;
	width: 15px; height: 15px;
	color: #8492a6; pointer-events: none;
}
.sky-mf-input-wrap input {
	width: 100%;
	padding: .65rem 2.5rem .65rem 2.5rem;
	border: 1.5px solid #dce3ee;
	border-radius: 9px;
	font-size: .9rem;
	color: var(--color-navy-dark);
	outline: none;
	transition: border-color .2s, box-shadow .2s;
	font-family: inherit;
}
.sky-mf-input-wrap input:focus {
	border-color: var(--color-yellow);
	box-shadow: 0 0 0 3px rgba(253,183,47,.12);
}
.sky-pw-toggle {
	position: absolute; right: 10px;
	background: none; border: none; padding: 4px;
	cursor: pointer; color: #8492a6;
	display: flex; align-items: center;
}
.sky-pw-toggle svg { width: 14px; height: 14px; }
.sky-pw-toggle:hover { color: var(--color-navy-dark); }

.sky-mf-row {
	display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.sky-mf-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.sky-mf-check { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: #4a5568; cursor: pointer; }
.sky-mf-check input { width: auto; accent-color: var(--color-yellow); }
.sky-mf-check a { color: var(--color-yellow); }

.sky-mf-forgot { font-size: .8rem; color: var(--color-yellow); text-decoration: none; white-space: nowrap; }
.sky-mf-forgot:hover { text-decoration: underline; }

.sky-mf-submit { width: 100%; padding: .8rem; font-size: .95rem; margin-top: .25rem; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.sky-mf-submit:disabled { opacity: .7; cursor: not-allowed; }

.sky-modal-switch { text-align: center; font-size: .8rem; color: #6b7a9a; margin-top: .75rem; }
.sky-modal-switch a { color: var(--color-yellow); font-weight: 600; text-decoration: none; }
.sky-modal-switch a:hover { text-decoration: underline; }

/* Spinner animation */
@keyframes sky-spin {
	to { transform: rotate(360deg); }
}
.sky-spin { animation: sky-spin .7s linear infinite; }
.sky-btn-spin { display: inline-flex; align-items: center; }

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

#sky-dash-toast {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999999;
	padding: .8rem 1.4rem;
	border-radius: 10px;
	font-size: .9rem;
	font-weight: 500;
	box-shadow: 0 8px 30px rgba(0,0,0,.15);
	display: flex; align-items: center; gap: .5rem;
	animation: sky-toast-in .25s ease;
	max-width: 90vw;
	white-space: nowrap;
}
@keyframes sky-toast-in {
	from { opacity: 0; transform: translateX(-50%) translateY(12px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.sky-toast--success { background: #065f46; color: #fff; }
.sky-toast--error   { background: #991b1b; color: #fff; }

/* Modal responsive */
@media (max-width: 520px) {
	.sky-modal-box { max-height: 100vh; border-radius: 16px 16px 0 0; align-self: flex-end; }
	.sky-modal { align-items: flex-end; padding: 0; }
	.sky-mf-row--two { grid-template-columns: 1fr; }
}