/**
 * CIG Payroll Public Portal CSS
 * Design System Implementation
 * Version: 2.0.0
 * Last Updated: 2025-12-10
 * Comprehensive Design System Update - Phase 1
 */

/* ============================================================================
   1. CSS CUSTOM PROPERTIES – Design System Variables
   ============================================================================ */

:root {
    /* ============================================================================
       1. PROFESSIONAL COLOR PALETTE – Comprehensive Design System
       ============================================================================ */

    /* ---- Primary Brand Colors (Blue Spectrum) ---- */
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;  /* Primary Brand Color */
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;

    /* ---- Secondary Colors ---- */
    --color-secondary: #0099FF;
    --color-secondary-gray: #6B7280;
    --color-neutral-background: #F9FAFB;
    --color-neutral-light: #F3F4F6;
    --color-neutral-medium: #E5E7EB;
    --color-neutral-dark: #D1D5DB;

    /* ---- Semantic Status Colors ---- */
    /* Success Colors - Positive States */
    --color-success-50: #f0fdf4;
    --color-success-100: #dcfce7;
    --color-success-200: #bbf7d0;
    --color-success-300: #86efac;
    --color-success-400: #4ade80;
    --color-success-500: #22c55e;  /* Success */
    --color-success-600: #16a34a;
    --color-success-700: #15803d;
    --color-success-800: #166534;
    --color-success-900: #14532d;

    /* Warning Colors - Attention States */
    --color-warning-50: #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-200: #fde68a;
    --color-warning-300: #fcd34d;
    --color-warning-400: #fbbf24;
    --color-warning-500: #f59e0b;  /* Warning */
    --color-warning-600: #d97706;
    --color-warning-700: #b45309;
    --color-warning-800: #92400e;
    --color-warning-900: #78350f;

    /* Danger Colors - Negative States */
    --color-danger-50: #fef2f2;
    --color-danger-100: #fee2e2;
    --color-danger-200: #fecaca;
    --color-danger-300: #fca5a5;
    --color-danger-400: #f87171;
    --color-danger-500: #ef4444;  /* Danger */
    --color-danger-600: #dc2626;
    --color-danger-700: #b91c1c;
    --color-danger-800: #991b1b;
    --color-danger-900: #7f1d1d;

    /* Info Colors - Informational States */
    --color-info-50: #eff6ff;
    --color-info-100: #dbeafe;
    --color-info-200: #bfdbfe;
    --color-info-300: #93c5fd;
    --color-info-400: #60a5fa;
    --color-info-500: #06B6D4;  /* Info */
    --color-info-600: #0891b2;
    --color-info-700: #0e7490;
    --color-info-800: #155e75;
    --color-info-900: #164e63;

    /* ---- Utility Colors ---- */
    --color-border: #D1D5DB;
    --color-disabled: #E5E7EB;
    --color-text: #1F2937;
    --color-text-light: #9CA3AF;
    --color-text-lighter: #6B7280;
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* ============================================================================
       2. TYPOGRAPHY SYSTEM – Professional Type Scale
       ============================================================================ */

    /* ---- Font Family ---- */
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* ---- Font Weights ---- */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 800;

    /* ---- Type Scale ---- */
    --font-size-display: 48px;
    --font-size-h1: 36px;
    --font-size-h2: 28px;
    --font-size-h3: 20px;
    --font-size-h4: 16px;
    --font-size-body-large: 16px;
    --font-size-body: 15px;
    --font-size-body-small: 14px;
    --font-size-caption: 12px;
    --font-size-button: 14px;
    --font-size-label: 13px;

    /* ---- Line Heights ---- */
    --line-height-display: 1.1;
    --line-height-h1: 1.2;
    --line-height-h2: 1.3;
    --line-height-h3: 1.4;
    --line-height-h4: 1.4;
    --line-height-body: 1.5;
    --line-height-caption: 1.4;
    --line-height-button: 1.2;
    --line-height-label: 1.4;

    /* ============================================================================
       3. SPACING SYSTEM – 4px Base Unit
       ============================================================================ */

    /* ---- Spacing Variables ---- */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
    --space-4xl: 64px;
    --space-5xl: 80px;

    /* ============================================================================
       4. BORDER RADIUS SYSTEM
       ============================================================================ */

    /* ---- Border Radius ---- */
    --radius-none: 0px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ============================================================================
       5. SHADOWS & DEPTH SYSTEM
       ============================================================================ */

    /* ---- Shadows ---- */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 12px 32px rgba(0, 0, 0, 0.2);

    /* ============================================================================
       6. TRANSITIONS & ANIMATIONS
       ============================================================================ */

    /* ---- Transitions ---- */
    --transition-base: all 0.2s ease;
    --transition-fast: all 0.1s ease;
    --transition-slow: all 0.3s ease;
    --transition-spring: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   2. BASE / RESET (Scoped to .cig-payroll-portal only)
   ============================================================================ */

.cig-payroll-portal {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	font-family: var(--font-primary);
}

/* ============================================================================
   3. TYPOGRAPHY – Professional Type Scale Implementation
   ============================================================================ */

.cig-payroll-portal h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h1);
    color: var(--color-text);
    margin-bottom: var(--space-xl);
}

.cig-payroll-portal h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h2);
    color: var(--color-text);
    margin-bottom: var(--space-xl);
}

.cig-payroll-portal h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h3);
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

.cig-payroll-portal h4 {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h4);
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

.cig-payroll-portal p {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

/* ============================================================================
   4. COMPONENTS
   ============================================================================ */

/* === 4.1 Header === */
.portal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-xl);
	border-bottom: 1px solid var(--color-border);
	padding-bottom: var(--space-lg);
}

.portal-header h2 {
	margin: 0;
	color: var(--color-text);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-bold);
}

/* === 4.2 Alerts & Messages === */
.cig-payroll-access-denied {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-left-width: 4px;
	border-left-color: var(--color-danger-500);
	box-shadow: var(--shadow-xs);
	padding: var(--space-md);
	margin: var(--space-lg) 0;
	border-radius: var(--radius-sm);
}

/* === 4.3 Summary Cards === */
.portal-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-lg);
	margin-bottom: var(--space-xl);
}

.summary-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-xl);
	text-align: center;
	box-shadow: var(--shadow-sm);
	transition: var(--transition-base);
}

.summary-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
	transition: var(--transition-base);
}

.summary-card h3 {
	margin: 0 0 var(--space-md) 0;
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	color: var(--color-text-lighter);
	letter-spacing: 0.5px;
}

.summary-card .count {
	font-size: var(--font-size-display);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary-500);
	margin: 0;
	transition: var(--transition-base);
}

.summary-card.draft .count { color: var(--color-text-lighter); }
.summary-card.submitted .count { color: var(--color-warning-500); }
.summary-card.approved .count { color: var(--color-success-500); }
.summary-card.denied .count { color: var(--color-danger-500); }

.summary-card:hover .count {
	transform: scale(1.1);
	transition: var(--transition-base);
}

/* === 4.4 Buttons === */
.portal-actions {
	margin-bottom: var(--space-xl);
	text-align: center;
}

.portal-actions .button {
	background: var(--color-primary-500);
	border: 1px solid var(--color-primary-500);
	color: var(--color-white);
	padding: 10px 20px;
	border-radius: var(--radius-sm);
	text-decoration: none;
	display: inline-block;
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-semibold);
	transition: var(--transition-base);
}

.portal-actions .button:hover {
	background: var(--color-primary-600);
	border-color: var(--color-primary-600);
}

/* === 4.5 Tables === */
.portal-history {
	margin-bottom: var(--space-xl);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.portal-history h3 {
	margin: 0;
	padding: var(--space-lg);
	background: var(--color-neutral-light);
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text);
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-semibold);
}

.portal-history table {
	width: 100%;
	border-collapse: collapse;
}

.portal-history th,
.portal-history td {
	padding: var(--space-md) var(--space-lg);
	text-align: left;
	border-bottom: 1px solid var(--color-border);
}

.portal-history th {
	background: var(--color-neutral-light);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}

.portal-history tbody tr:hover {
	background: var(--color-neutral-background);
}

.portal-history .status-badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	color: var(--color-white);
}

.portal-history .status-draft { background: var(--color-text-lighter); }
.portal-history .status-submitted { background: var(--color-warning-500); color: var(--color-text); }
.portal-history .status-approved { background: var(--color-success-500); }
.portal-history .status-denied { background: var(--color-danger-500); }

.portal-history tbody tr:hover .status-badge {
	transform: scale(1.05);
	transition: var(--transition-base);
}

.portal-history .button {
	padding: var(--space-xs) var(--space-sm);
	font-size: var(--font-size-caption);
	border-radius: var(--radius-sm);
	text-decoration: none;
	display: inline-block;
	margin-right: var(--space-xs);
}

/* === 4.6 Forms === */
.form-messages {
	display: none;
	margin-bottom: var(--space-lg);
	padding: var(--space-md);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	font-weight: var(--font-weight-medium);
}

.form-messages.is-visible {
	display: block;
}

.form-messages.is-success {
	background: var(--color-success-50);
	border-color: var(--color-success-200);
	color: var(--color-success-700);
}

.form-messages.is-error {
	background: var(--color-danger-50);
	border-color: var(--color-danger-200);
	color: var(--color-danger-700);
}

.form-section {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	margin-bottom: var(--space-lg);
	box-shadow: var(--shadow-sm);
	transition: var(--transition-base);
}

.form-section h3 {
	margin: 0 0 var(--space-md) 0;
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border);
	padding-bottom: var(--space-sm);
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-semibold);
}

.form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-lg);
	margin-bottom: var(--space-md);
}

.form-group {
	display: flex;
	flex-direction: column;
}

.form-group label {
	font-weight: var(--font-weight-medium);
	margin-bottom: var(--space-xs);
	color: var(--color-text);
	font-size: var(--font-size-label);
}

.form-group input,
.form-group select,
.form-group textarea {
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-body);
	transition: var(--transition-base);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	border-color: var(--color-primary-500);
	outline: none;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.form-group textarea {
	resize: vertical;
	min-height: 80px;
}

.required {
	color: var(--color-danger-500);
}

/* === 4.7 Day Entries === */
.day-entry {
	background: var(--color-neutral-light);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-md);
	margin-bottom: var(--space-md);
	transition: var(--transition-base);
}

.day-entry:hover {
	background: var(--color-neutral-medium);
}

.remove-day {
	background: var(--color-danger-500);
	color: var(--color-white);
	border: none;
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	cursor: pointer;
	align-self: flex-end;
	font-size: var(--font-size-caption);
	transition: var(--transition-base);
}

.remove-day:hover {
	background: var(--color-danger-600);
}

/* === 4.8 Totals Display === */
#timesheet-totals {
	background: var(--color-neutral-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-lg);
}

.total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-sm);
	padding: var(--space-xs) 0;
}

.total-row:last-child {
	margin-bottom: 0;
}

.total-label {
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
	font-size: var(--font-size-body);
}

.total-value {
	font-weight: var(--font-weight-bold);
	color: var(--color-primary-500);
	font-size: var(--font-size-body-large);
}

/* === 4.9 Form Actions === */
.form-actions {
	text-align: center;
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.form-actions .button {
	margin: 0 var(--space-md);
	background: var(--color-primary-500);
	border: 1px solid var(--color-primary-500);
	color: var(--color-white);
	padding: 10px 20px;
	border-radius: var(--radius-sm);
	text-decoration: none;
	display: inline-block;
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-semibold);
	transition: var(--transition-base);
}

.form-actions .button:hover {
	background: var(--color-primary-600);
	border-color: var(--color-primary-600);
}

.form-actions .button.button-secondary {
	background: var(--color-neutral-background);
	border-color: var(--color-border);
	color: var(--color-text);
}

.form-actions .button.button-secondary:hover {
	background: var(--color-neutral-light);
	border-color: var(--color-text-lighter);
}

.form-actions .button.is-loading {
	opacity: 0.75;
	pointer-events: none;
}

/* === 4.10 Timesheet Detail === */
.timesheet-detail {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.timesheet-info,
.timesheet-days,
.timesheet-attachments,
.timesheet-admin-notes {
	padding: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
}

.timesheet-info:last-child,
.timesheet-days:last-child,
.timesheet-attachments:last-child,
.timesheet-admin-notes:last-child {
	border-bottom: none;
}

.timesheet-actions {
	padding: var(--space-lg);
	text-align: center;
	background: var(--color-neutral-light);
}

.timesheet-info h3,
.timesheet-days h3,
.timesheet-attachments h3,
.timesheet-admin-notes h3 {
	margin: 0 0 var(--space-md) 0;
	color: var(--color-text);
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-semibold);
}

.timesheet-info table {
	width: 100%;
	border-collapse: collapse;
}

.timesheet-info th,
.timesheet-info td {
	padding: var(--space-sm) var(--space-md);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

.timesheet-info th {
	background: var(--color-neutral-light);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}

/* === 4.11 Status Styles === */
.status-draft { color: var(--color-text-lighter); }
.status-submitted { color: var(--color-warning-500); }
.status-approved { color: var(--color-success-500); }
.status-denied { color: var(--color-danger-500); }

.status-badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	color: var(--color-white);
}

.status-draft.status-badge { background: var(--color-text-lighter); }
.status-submitted.status-badge { background: var(--color-warning-500); color: var(--color-text); }
.status-approved.status-badge { background: var(--color-success-500); }
.status-denied.status-badge { background: var(--color-danger-500); }

/* === 4.12 Alerts === */
.denial-notice {
	background: var(--color-warning-50);
	border: 1px solid var(--color-warning-200);
	border-radius: var(--radius-sm);
	padding: var(--space-md);
	margin: var(--space-md) 0;
}

.denial-notice p {
	margin: 0;
	color: var(--color-warning-700);
	font-weight: var(--font-weight-medium);
}

/* === 4.13 Attachments === */
.timesheet-attachments ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.timesheet-attachments li {
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--color-border);
}

.timesheet-attachments li:last-child {
	border-bottom: none;
}

.timesheet-attachments a {
	color: var(--color-primary-500);
	text-decoration: none;
	font-weight: var(--font-weight-medium);
}

.timesheet-attachments a:hover {
	text-decoration: underline;
}

.attachment-meta {
	color: var(--color-text-lighter);
	font-size: var(--font-size-caption);
	margin-left: var(--space-xs);
}

/* ============================================================================
   5. RESPONSIVE DESIGN – Mobile First Approach
   ============================================================================ */

/* Tablet adjustments */
@media (max-width: 768px) {
	.cig-payroll-portal {
		padding: var(--space-sm);
	}

	.portal-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-md);
	}

	.portal-header h2 {
		font-size: var(--font-size-h3);
	}

	.portal-summary {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.summary-card {
		text-align: center;
		padding: var(--space-lg);
	}

	.summary-card .count {
		font-size: var(--font-size-h1);
	}

	.form-row {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.form-section {
		padding: var(--space-md);
	}

	.timesheet-info th,
	.timesheet-info td {
		padding: var(--space-xs) var(--space-sm);
		font-size: var(--font-size-body-small);
	}

	.portal-history th,
	.portal-history td {
		padding: var(--space-xs) var(--space-sm);
		font-size: var(--font-size-body-small);
	}

	.form-actions .button {
		display: block;
		width: 100%;
		margin: var(--space-xs) 0;
	}
}

/* Mobile adjustments */
@media (max-width: 480px) {
	.summary-card h3 {
		font-size: var(--font-size-caption);
	}

	.summary-card .count {
		font-size: var(--font-size-h2);
	}

	.day-entry {
		padding: var(--space-sm);
	}

	.total-label,
	.total-value {
		font-size: var(--font-size-body-small);
	}
}