/* Grupa Lejdis Worker - Styles v2.0 (2026) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Quicksand:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
	--mark:#cc0645;
	--mark-light:#f93f7a;
	--mark-dark:#9a0534;
	--mark2:var(--mark);
	--mark2-light:var(--mark-light);
	--mark2-dark:var(--mark-dark);
	--grey-dark:#424242;
	--grey-darker:#272727;
	--grey:#888888;
	--grey-light:#e6e6e6;
	--grey-lighter:#f1f2f6;
	--black:#000;
	--white:#fff;
	--red:#D63024;
	--red-light:#FF5F5D;
	--red-dark:#AE170C;
	--green:#AED581;
	--green-light:#C5E1A5;
	--green-dark:#116201;
	--yellow:#ff0;
	--font-family-header: 'Quicksand', sans-serif;
    --font-family-header-light: 400;
    --font-family-header-regular: 500;
    --font-family-header-medium: 600;
    --font-family-header-bold: 700;
    --font-family-header-extra-bold: 800;
    --font-family-text: 'Inter', sans-serif;
    --font-family-text-light: 400;
    --font-family-text-regular: 500;
    --font-family-text-medium: 600;
    --font-family-text-bold: 700;
	--font-family-icon-google: 'Material Symbols Outlined';
	scroll-behavior: smooth;

	/* Design tokens */
	--surface: #ffffff;
	--surface-2: #f7f8fc;
	--border: rgba(0,0,0,0.07);
	--shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
	--shadow-sm: 0 2px 10px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
	--shadow-md: 0 6px 24px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.05);
	--shadow-lg: 0 12px 48px rgba(0,0,0,0.14), 0 4px 16px rgba(0,0,0,0.07);
	--shadow-mark: 0 4px 20px rgba(204,6,69,0.35), 0 2px 8px rgba(204,6,69,0.18);
	--radius-xs: 4px;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 18px;
	--radius-xl: 26px;
	--transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== RESET ===== */
* {margin:0;padding:0;box-sizing:border-box;}

/* ===== BODY ===== */
body {
	font-family: var(--font-family-text);
	font-size: 14px;
	line-height: 1.5em;
	color: #2c2c3a;
	background: var(--surface-2);
	background-image:
		radial-gradient(ellipse 65% 40% at 10% 0%, rgba(204,6,69,0.055) 0%, transparent 100%),
		radial-gradient(ellipse 55% 35% at 90% 100%, rgba(204,6,69,0.04) 0%, transparent 100%);
	background-attachment: fixed;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ===== ICONS ===== */
.material-symbols-outlined {font-family:var(--font-family-icon-google);font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;}

/* ===== CONTAINER ===== */
.container {width:100%;max-width:1400px;margin:0 auto;padding:0 1.5rem;}

/* ===== HEADER ===== */
header.app-header {
	background: linear-gradient(160deg, #16060d 0%, #220b16 30%, #360e20 60%, #530f2a 100%);
	border-bottom: 1px solid rgba(255,255,255,0.05);
	padding: 0;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 4px 28px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.05);
	overflow: hidden;
}

header.app-header::before {
	content: '';
	position: absolute;
	top: -60%;
	left: -5%;
	width: 45%;
	height: 220%;
	background: radial-gradient(ellipse, rgba(204,6,69,0.14) 0%, transparent 70%);
	pointer-events: none;
}

header.app-header::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(249,63,122,0.5) 40%, rgba(249,63,122,0.3) 60%, transparent 100%);
}

header.app-header .header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .9rem 0;
	position: relative;
}

header.app-header .logo {
	font-family: var(--font-family-header);
	font-size: 1.15rem;
	font-weight: var(--font-family-header-extra-bold);
	color: var(--white);
	letter-spacing: -.3px;
	display: flex;
	align-items: center;
	gap: .5rem;
}

header.app-header .logo::before {
	content: '';
	width: 9px;
	height: 9px;
	background: var(--mark-light);
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: 0 0 10px var(--mark-light), 0 0 22px rgba(249,63,122,0.5);
	animation: beacon 2.5s ease-in-out infinite;
}

@keyframes beacon {
	0%, 100% { transform: scale(1); box-shadow: 0 0 8px var(--mark-light), 0 0 18px rgba(249,63,122,0.4); }
	50% { transform: scale(1.3); box-shadow: 0 0 14px var(--mark-light), 0 0 32px rgba(249,63,122,0.65); }
}

header.app-header .user-info {
	display: flex;
	align-items: center;
	gap: .6rem;
}

header.app-header .user-info .username {
	font-weight: var(--font-family-text-medium);
	font-size: .78rem;
	color: rgba(255,255,255,0.55);
	letter-spacing: .3px;
}

header.app-header .user-info a:not(.logout) {
	color: rgba(255,255,255,0.72);
	text-decoration: none;
	font-size: .78rem;
	font-weight: var(--font-family-text-medium);
	padding: .3rem .7rem;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(255,255,255,0.05);
	transition: var(--transition);
	letter-spacing: .2px;
}

header.app-header .user-info a:not(.logout):hover {
	background: rgba(255,255,255,0.12);
	border-color: rgba(255,255,255,0.22);
	color: var(--white);
	transform: translateY(-1px);
}

header.app-header .user-info .logout {
	background: rgba(204,6,69,0.22);
	color: rgba(255,255,255,0.82);
	padding: .3rem .85rem;
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-size: .78rem;
	font-weight: var(--font-family-text-medium);
	border: 1px solid rgba(204,6,69,0.38);
	transition: var(--transition);
	letter-spacing: .2px;
}

header.app-header .user-info .logout:hover {
	background: rgba(204,6,69,0.45);
	border-color: rgba(249,63,122,0.55);
	color: var(--white);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(204,6,69,0.35);
}

/* Header nav buttons */
header.app-header .button.button-outline {
	background: rgba(255,255,255,0.06);
	color: rgba(255,255,255,0.78);
	border: 1px solid rgba(255,255,255,0.13);
	font-size: .78rem;
	padding: .38rem .85rem;
	border-radius: var(--radius-sm);
	transition: var(--transition);
	letter-spacing: .2px;
	box-shadow: none;
}

header.app-header .button.button-outline:hover {
	background: rgba(255,255,255,0.13);
	border-color: rgba(255,255,255,0.25);
	color: var(--white);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

header.app-header .button:not(.button-outline) {
	background: linear-gradient(135deg, var(--mark) 0%, var(--mark-light) 100%);
	color: var(--white);
	border: 1px solid rgba(255,255,255,0.18);
	font-size: .78rem;
	padding: .38rem .85rem;
	border-radius: var(--radius-sm);
	box-shadow: 0 2px 10px rgba(204,6,69,0.45);
	transition: var(--transition);
	letter-spacing: .2px;
}

header.app-header .button:not(.button-outline):hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 18px rgba(204,6,69,0.55);
	filter: brightness(1.08);
}

/* ===== MAIN ===== */
main {padding:1.25rem 0;min-height:calc(100vh - 100px);}

/* ===== PAGE TITLE (H1) ===== */
main h1 {
	font-family: var(--font-family-header);
	font-size: 1.2rem;
	font-weight: var(--font-family-header-bold);
	color: #1a1a2e;
	margin: 0 0 1rem 0;
	letter-spacing: -.3px;
	line-height: 1.3;
}

/* ===== 2-COLUMN FORM GRID ===== */
.form-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.25rem;
}

.form-2col .form-full {
	grid-column: 1 / -1;
}

@media (max-width: 640px) {
	.form-2col {grid-template-columns: 1fr;}
	.form-2col .form-full {grid-column: 1;}
}

/* ===== BUTTONS ===== */
.button {
	background: linear-gradient(135deg, var(--mark) 0%, #de0f5c 100%);
	padding: .42em .95em;
	border-radius: var(--radius-sm);
	color: var(--white);
	margin: 0 .1em;
	display: inline-block;
	cursor: pointer;
	transition: var(--transition);
	border: 0;
	font-family: var(--font-family-text);
	font-size: 12px;
	font-weight: var(--font-family-text-medium);
	letter-spacing: .4px;
	text-decoration: none;
	line-height: 1.45;
	box-shadow: 0 2px 8px rgba(204,6,69,0.28);
	position: relative;
	overflow: hidden;
	vertical-align: middle;
}

.button::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
	opacity: 0;
	transition: var(--transition);
}

.button:hover {
	background: linear-gradient(135deg, #d9084f 0%, var(--mark-light) 100%);
	color: var(--white);
	transform: translateY(-1px);
	box-shadow: var(--shadow-mark);
}

.button:hover::after {opacity: 1;}

.button:active {transform: translateY(0);box-shadow: 0 1px 4px rgba(204,6,69,0.2);}

.button.button-secondary {
	background: linear-gradient(135deg, #5a6472, #7d8898);
	color: var(--white);
	box-shadow: 0 2px 8px rgba(90,100,114,0.22);
}

.button.button-secondary:hover {
	background: linear-gradient(135deg, #444e5b, #5a6472);
	box-shadow: 0 4px 16px rgba(90,100,114,0.38);
}

.button.button-outline {
	background: var(--surface);
	color: var(--mark);
	border: 1.5px solid var(--mark);
	box-shadow: none;
}

.button.button-outline:hover {
	background: var(--mark);
	color: var(--white);
	box-shadow: var(--shadow-mark);
}

.button.button-success {
	background: linear-gradient(135deg, #256d18, #43a047);
	color: var(--white);
	box-shadow: 0 2px 8px rgba(67,160,71,0.28);
}

.button.button-success:hover {
	background: linear-gradient(135deg, #1a5210, #2e7d32);
	box-shadow: 0 4px 16px rgba(67,160,71,0.42);
}

.button.button-danger {
	background: linear-gradient(135deg, var(--red-dark), var(--red));
	color: var(--white);
	box-shadow: 0 2px 8px rgba(214,48,36,0.28);
}

.button.button-danger:hover {
	background: linear-gradient(135deg, #8c1009, var(--red-dark));
	box-shadow: 0 4px 16px rgba(214,48,36,0.42);
}

/* ===== 4-COLUMN FORM GRID ===== */
.form-4col {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 0 1.25rem;
}
.form-4col .form-full {grid-column: 1 / -1;}
.form-4col .form-span-2 {grid-column: span 2;}

@media (max-width: 900px) {
	.form-4col {grid-template-columns: 1fr 1fr;}
	.form-4col .form-span-2 {grid-column: span 1;}
}
@media (max-width: 640px) {
	.form-2col, .form-4col {grid-template-columns: 1fr;}
	.form-2col .form-full, .form-4col .form-full,
	.form-4col .form-span-2 {grid-column: 1;}
}

/* ===== FORMS ===== */
input, select, textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: .5rem .8rem;
	border: 1.5px solid var(--grey-light);
	border-radius: var(--radius-sm);
	letter-spacing: .2px;
	transition: var(--transition);
	font-size: 13px;
	font-family: var(--font-family-text);
	background: var(--surface);
	color: #2c2c3a;
	box-shadow: var(--shadow-xs);
}

input:hover, select:hover, textarea:hover {
	border-color: rgba(204,6,69,0.28);
	box-shadow: 0 2px 8px rgba(204,6,69,0.06);
}

input:focus, select:focus, textarea:focus {
	border-color: var(--mark);
	outline: none;
	box-shadow: 0 0 0 3px rgba(204,6,69,0.1), 0 2px 8px rgba(204,6,69,0.08);
}

input[type="checkbox"], input[type="radio"] {
	display: inline-block;
	width: auto;
	padding: 0;
	border: none;
	box-shadow: none;
	background: none;
	accent-color: var(--mark);
	cursor: pointer;
}

textarea {min-height:70px;resize:vertical;}

label {
	display: block;
	margin-bottom: .38rem;
	font-weight: var(--font-family-text-medium);
	font-size: .82rem;
	color: #4a4a5a;
	letter-spacing: .2px;
}

.form-group {margin-bottom:.9rem;}

/* ===== CARDS ===== */
.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 1.1rem 1.2rem;
	margin-bottom: 1rem;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.card:hover {
	border-color: rgba(204,6,69,0.14);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

.card-header {
	font-family: var(--font-family-header);
	font-size: 1rem;
	font-weight: var(--font-family-header-medium);
	color: #1a1a2e;
	margin-bottom: .8rem;
	padding-bottom: .7rem;
	border-bottom: 1px solid var(--grey-lighter);
	display: flex;
	align-items: center;
	gap: .5rem;
}

.card-header::before {
	content: '';
	width: 3px;
	height: 1.1em;
	background: linear-gradient(180deg, var(--mark), var(--mark-light));
	border-radius: 2px;
	flex-shrink: 0;
}

/* ===== NOTIFICATIONS LIST ===== */
.notifications-list {
	display: flex;
	flex-flow: row wrap;
	gap: .6rem;
}

.notification-item {
	width: calc(50% - .3rem);
	background: var(--surface);
	border: 1px solid rgba(0,0,0,0.06);
	border-left: 3px solid var(--mark);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	padding: .65rem .8rem .6rem .7rem;
	position: relative;
	transition: var(--transition);
	box-shadow: var(--shadow-xs);
}

.notification-item:hover {
	border-color: rgba(204,6,69,0.18);
	border-left-color: inherit;
	box-shadow: var(--shadow-sm);
	transform: translateX(2px);
	background: #fdfdff;
}

.notification-item.priority-urgent {border-left-color:var(--red);}
.notification-item.priority-high {border-left-color:var(--mark-dark);}
.notification-item.priority-normal {border-left-color:var(--mark);}
.notification-item.priority-low {border-left-color:#9ca3af;}

.notification-item.status-postponed {background:#fffcee;border-left-color:#d4930a;}
.notification-item.status-completed {background:#f4fbf0;opacity:.75;border-left-color:#2e7d32;}
.notification-item.status-delegated {background:#f8f9fc;border-left-color:#9ca3af;}

.notification-number {
	position: absolute;
	top: 4px;
	right: 7px;
	font-size: .58rem;
	font-weight: 700;
	color: var(--grey);
	opacity: .38;
	line-height: 1;
	letter-spacing: .5px;
}

.notification-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 3px;
	gap: .5rem;
}

.notification-title {
	font-weight: var(--font-family-text-bold);
	font-size: .85rem;
	color: #1a1a2e;
	line-height: 1.3;
}

.notification-time {
	font-size: .68rem;
	color: var(--grey);
	white-space: nowrap;
	font-weight: 400;
	margin-top: 1px;
	flex-shrink: 0;
}

.notification-message {
	color: #555568;
	margin-bottom: 4px;
	font-size: .79rem;
	line-height: 1.38;
}

.notification-category {
	display: inline-block;
	background: var(--grey-lighter);
	color: #5a5a70;
	padding: .12rem .48rem;
	border-radius: 20px;
	font-size: .62rem;
	font-weight: var(--font-family-text-medium);
	margin-right: .22rem;
	margin-bottom: 2px;
	letter-spacing: .3px;
	border: 1px solid rgba(0,0,0,0.05);
}

.notification-actions {
	display: flex;
	gap: 4px;
	margin-top: .45rem;
	flex-wrap: wrap;
}

.notification-actions .button {
	margin: 0;
	padding: .22rem .55rem;
	font-size: .68rem;
	border-radius: 6px;
}

/* ===== NOTIFICATION COMMENTS ===== */
.notification-comments {
	margin-top: .5rem;
	padding-top: .42rem;
	border-top: 1px dashed rgba(0,0,0,0.1);
}

.notification-comments-title {
	font-size: .75rem;
	font-weight: var(--font-family-text-medium);
	color: #666678;
	margin-bottom: 4px;
}

.notification-comment-item {
	background: #f8f9fc;
	padding: .38rem .58rem;
	border-radius: var(--radius-sm);
	margin-top: 3px;
	font-size: .77rem;
	border: 1px solid rgba(0,0,0,0.05);
}

.notification-comment-meta {
	color: var(--grey);
	font-size: .7rem;
	margin-bottom: 2px;
}

/* ===== MODAL ===== */
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(8,3,8,0.7);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 10000;
	align-items: center;
	justify-content: center;
}

.modal.active {
	display: flex;
	animation: modalFadeIn .22s ease;
}

@keyframes modalFadeIn {from{opacity:0} to{opacity:1}}

@keyframes modalSlideUp {
	from {opacity:0; transform:translateY(18px) scale(.97);}
	to   {opacity:1; transform:translateY(0) scale(1);}
}

.modal-content {
	background: var(--surface);
	border-radius: var(--radius-lg);
	padding: 1.6rem 1.5rem;
	max-width: 500px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.85);
	animation: modalSlideUp .25s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.15rem;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--grey-lighter);
}

.modal-title {
	font-family: var(--font-family-header);
	font-size: 1.1rem;
	font-weight: var(--font-family-header-bold);
	color: #1a1a2e;
}

.modal-close {
	background: var(--grey-lighter);
	border: 0;
	font-size: .95rem;
	cursor: pointer;
	color: var(--grey);
	padding: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: var(--transition);
	font-weight: 700;
	line-height: 1;
}

.modal-close:hover {
	background: var(--grey-light);
	color: var(--grey-dark);
	transform: rotate(90deg);
}

.modal-body {margin-bottom:1rem;}

.modal-footer {
	display: flex;
	gap: .5rem;
	justify-content: flex-end;
	padding-top: .8rem;
	border-top: 1px solid var(--grey-lighter);
}

/* ===== TABLES ===== */
table {width:100%;border-collapse:collapse;margin:.5rem 0;}

table th {
	background: #f4f5f9;
	border: none;
	border-bottom: 2px solid var(--grey-light);
	padding: .55rem .75rem;
	text-align: left;
	font-weight: var(--font-family-text-medium);
	font-size: .78rem;
	color: #5a5a70;
	letter-spacing: .4px;
	text-transform: uppercase;
}

table td {
	border: none;
	border-bottom: 1px solid #f0f1f6;
	padding: .55rem .75rem;
	vertical-align: top;
	font-size: .85rem;
	color: #2c2c3a;
}

table tr:last-child td {border-bottom: none;}
table tr:hover td {background: #fafbff;}
table .worktime-date {white-space:nowrap;}

/* ===== WORKTIME ===== */
.worktime-table {overflow:auto;}

.worktime-alert {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--mark), var(--mark-light));
	color: var(--white);
	font-size: .65rem;
	font-weight: 700;
	margin-left: .3rem;
	position: relative;
	cursor: help;
	box-shadow: 0 2px 6px rgba(204,6,69,0.32);
}

.worktime-alert .worktime-tooltip {
	position: absolute;
	bottom: calc(100% + 7px);
	left: 50%;
	transform: translateX(-50%);
	background: #1a1a2e;
	color: var(--white);
	padding: .42rem .7rem;
	border-radius: var(--radius-sm);
	font-size: .72rem;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: var(--transition);
	z-index: 10;
	box-shadow: var(--shadow-md);
}

.worktime-alert .worktime-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-top-color: #1a1a2e;
}

.worktime-alert:hover .worktime-tooltip {
	opacity: 1;
	transform: translateX(-50%) translateY(-3px);
}

/* ===== FILTERS ===== */
.filters {
	display: flex;
	gap: .6rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
	align-items: flex-end;
}

.filters .form-group {
	margin-bottom: 0;
	flex: 1;
	min-width: 175px;
}

.filters.worktime-filters .form-group {min-width:160px;}

/* ===== STATS ===== */
.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: .75rem;
	margin-bottom: 1.25rem;
}

.stat-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 1.1rem 1rem;
	text-align: center;
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
	position: relative;
	overflow: hidden;
}

.stat-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--mark), var(--mark-light));
}

.stat-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md), 0 4px 14px rgba(204,6,69,0.1);
	border-color: rgba(204,6,69,0.18);
}

.stat-number {
	font-family: var(--font-family-header);
	font-size: 2.1rem;
	font-weight: var(--font-family-header-extra-bold);
	color: var(--mark);
	margin-bottom: .22rem;
	line-height: 1;
	background: linear-gradient(135deg, var(--mark), var(--mark-light));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.stat-label {
	color: #888899;
	font-size: .72rem;
	font-weight: var(--font-family-text-medium);
	letter-spacing: .4px;
	text-transform: uppercase;
}

/* ===== ALERTS ===== */
.alert {
	padding: .65rem 1rem;
	border-radius: var(--radius-sm);
	margin-bottom: .65rem;
	font-size: .84rem;
	font-weight: var(--font-family-text-medium);
	border-left: 3px solid transparent;
	box-shadow: var(--shadow-xs);
}

.alert-success {
	background: #f0faf0;
	color: #1a5c1a;
	border-left-color: #2e7d32;
}

.alert-error {
	background: #fff1f2;
	color: #8c1009;
	border-left-color: var(--red);
}

.alert-warning {
	background: #fffde7;
	color: #7a5c00;
	border-left-color: #e6a800;
}

.alert-info {
	background: #f0f4ff;
	color: #2d4a8a;
	border-left-color: #6085cc;
}

/* ===== SPINNER ===== */
.spinner {
	border: 3px solid #ececf5;
	border-top: 3px solid var(--mark);
	border-radius: 50%;
	width: 32px;
	height: 32px;
	animation: spin .75s linear infinite;
	margin: 1.5rem auto;
	box-shadow: 0 0 12px rgba(204,6,69,0.15);
}

@keyframes spin {0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}

/* ===== LOGIN PAGE OVERRIDES ===== */
.login-container .login-card {
	background: var(--surface);
	border-radius: var(--radius-lg);
	padding: 2.5rem;
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--border);
}

.login-container .login-logo h1 {
	font-family: var(--font-family-header);
	font-size: 1.9rem;
	font-weight: var(--font-family-header-extra-bold);
	color: var(--mark);
	background: linear-gradient(135deg, var(--mark), var(--mark-light));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	letter-spacing: -.5px;
}

.login-container .button[type="submit"] {
	font-size: 14px;
	padding: .65em 1.2em;
	border-radius: var(--radius-sm);
	letter-spacing: .5px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
	.container {padding:0 .85rem;}
	header.app-header .header-content {flex-direction:column;gap:.5rem;align-items:flex-start;}
	.notification-header {flex-direction:column;gap:2px;}
	.notification-item {width:100%;}
	.notification-actions {flex-direction:row;}
	.notification-actions .button {flex:1;text-align:center;}
	.filters {flex-direction:column;}
	.filters .form-group {min-width:100%;}
	.modal-content {width:95%;padding:1.2rem;border-radius:var(--radius-md);}
	.stats {grid-template-columns:1fr 1fr;}
}