feat(Production): Complete production deployment infrastructure

- Add comprehensive health check system with multiple endpoints
- Add Prometheus metrics endpoint
- Add production logging configurations (5 strategies)
- Add complete deployment documentation suite:
  * QUICKSTART.md - 30-minute deployment guide
  * DEPLOYMENT_CHECKLIST.md - Printable verification checklist
  * DEPLOYMENT_WORKFLOW.md - Complete deployment lifecycle
  * PRODUCTION_DEPLOYMENT.md - Comprehensive technical reference
  * production-logging.md - Logging configuration guide
  * ANSIBLE_DEPLOYMENT.md - Infrastructure as Code automation
  * README.md - Navigation hub
  * DEPLOYMENT_SUMMARY.md - Executive summary
- Add deployment scripts and automation
- Add DEPLOYMENT_PLAN.md - Concrete plan for immediate deployment
- Update README with production-ready features

All production infrastructure is now complete and ready for deployment.

resources/css/admin/06-components/_badge.css

@@ -0,0 +1,48 @@
+/**
+ * Badge Component
+ *
+ * Small status indicators and labels.
+ */
+
+@layer admin-components {
+    .admin-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        font-size: var(--admin-font-size-xs);
+        font-weight: var(--admin-font-weight-semibold);
+        line-height: 1.5;
+        border-radius: 10px;
+        white-space: nowrap;
+    }
+
+    /* Success badge */
+    .admin-badge--success {
+        background-color: var(--admin-accent-success);
+        color: white;
+    }
+
+    /* Warning badge */
+    .admin-badge--warning {
+        background-color: var(--admin-accent-warning);
+        color: oklch(20% 0.02 280); /* Dark text for better contrast */
+    }
+
+    /* Error badge */
+    .admin-badge--error {
+        background-color: var(--admin-accent-error);
+        color: white;
+    }
+
+    /* Info badge */
+    .admin-badge--info {
+        background-color: var(--admin-accent-info);
+        color: white;
+    }
+
+    /* Default badge */
+    .admin-badge--default {
+        background-color: var(--admin-bg-tertiary);
+        color: var(--admin-content-text);
+    }
+}

resources/css/admin/06-components/_breadcrumbs.css

@@ -0,0 +1,175 @@
+/**
+ * Breadcrumbs Component - Admin Interface
+ *
+ * Navigation breadcrumb trail showing current page hierarchy.
+ * Responsive with overflow handling for long paths.
+ */
+
+@layer admin-components {
+    /**
+     * Breadcrumbs Container
+     */
+    .admin-breadcrumbs {
+        display: flex;
+        align-items: center;
+        gap: var(--admin-spacing-xs);
+        padding: var(--admin-spacing-sm) 0;
+        overflow-x: auto;
+        scrollbar-width: thin;
+
+        /* Hide scrollbar but keep functionality */
+        &::-webkit-scrollbar {
+            height: 0;
+        }
+
+        /* Mobile: Show in header instead of title */
+        @media (max-width: 767px) {
+            flex: 1;
+            min-width: 0;
+        }
+    }
+
+    /**
+     * Breadcrumb List
+     */
+    .admin-breadcrumbs__list {
+        display: flex;
+        align-items: center;
+        gap: var(--admin-spacing-xs);
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        flex-wrap: nowrap;
+    }
+
+    /**
+     * Breadcrumb Item
+     */
+    .admin-breadcrumbs__item {
+        display: flex;
+        align-items: center;
+        gap: var(--admin-spacing-xs);
+        white-space: nowrap;
+        flex-shrink: 0;
+
+        /* Last item can shrink */
+        &:last-child {
+            flex-shrink: 1;
+            min-width: 0;
+        }
+    }
+
+    /**
+     * Breadcrumb Link
+     */
+    .admin-breadcrumbs__link {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--admin-spacing-xs);
+        color: var(--admin-link-color);
+        text-decoration: none;
+        font-size: var(--admin-font-size-sm);
+        font-weight: 500;
+        transition: color var(--admin-transition-base);
+
+        &:hover {
+            color: var(--admin-link-hover);
+            text-decoration: underline;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--admin-focus-ring);
+            outline-offset: 2px;
+            border-radius: 2px;
+        }
+    }
+
+    /**
+     * Current Page (not a link)
+     */
+    .admin-breadcrumbs__current {
+        color: var(--admin-content-text);
+        font-size: var(--admin-font-size-sm);
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    /**
+     * Home Icon
+     */
+    .admin-breadcrumbs__home-icon {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+    }
+
+    /**
+     * Separator
+     */
+    .admin-breadcrumbs__separator {
+        display: inline-flex;
+        align-items: center;
+        color: var(--admin-content-text);
+        opacity: 0.4;
+        font-size: var(--admin-font-size-sm);
+        user-select: none;
+        flex-shrink: 0;
+    }
+
+    .admin-breadcrumbs__separator-icon {
+        width: 16px;
+        height: 16px;
+    }
+
+    /**
+     * Overflow Indicator (for collapsed middle items)
+     */
+    .admin-breadcrumbs__overflow {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        color: var(--admin-content-text);
+        background-color: var(--admin-bg-secondary);
+        border-radius: var(--admin-radius-sm);
+        cursor: pointer;
+        transition: background-color var(--admin-transition-base);
+
+        &:hover {
+            background-color: var(--admin-bg-tertiary);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--admin-focus-ring);
+            outline-offset: 2px;
+        }
+    }
+
+    /**
+     * Responsive: Compact Mode
+     *
+     * On very small screens, only show: Home > ... > Current
+     */
+    @media (max-width: 480px) {
+        .admin-breadcrumbs__item:not(:first-child):not(:last-child):not(.admin-breadcrumbs__overflow) {
+            display: none;
+        }
+    }
+
+    /**
+     * Accessibility: Screen Reader Only Text
+     */
+    .admin-breadcrumbs__sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+}

resources/css/admin/06-components/_button.css

@@ -0,0 +1,109 @@
+/**
+ * Button Component
+ *
+ * Reusable button styles for actions and navigation.
+ */
+
+@layer admin-components {
+    .admin-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--admin-spacing-sm);
+        padding: var(--admin-spacing-sm) var(--admin-spacing-md);
+        font-family: var(--admin-font-family-base);
+        font-size: var(--admin-font-size-sm);
+        font-weight: var(--admin-font-weight-medium);
+        line-height: 1;
+        text-decoration: none;
+        border: 1px solid transparent;
+        border-radius: var(--admin-radius-md);
+        cursor: pointer;
+        transition: all var(--admin-transition-base);
+        white-space: nowrap;
+    }
+
+    .admin-btn:focus-visible {
+        outline: 2px solid var(--admin-focus-ring);
+        outline-offset: 2px;
+    }
+
+    /* Primary button */
+    .admin-btn--primary {
+        background-color: var(--admin-accent-primary);
+        color: white;
+    }
+
+    .admin-btn--primary:hover {
+        background-color: oklch(from var(--admin-accent-primary) calc(l * 0.9) c h);
+    }
+
+    /* Secondary button */
+    .admin-btn--secondary {
+        background-color: var(--admin-sidebar-bg);
+        color: var(--admin-sidebar-text-hover);
+    }
+
+    .admin-btn--secondary:hover {
+        background-color: oklch(from var(--admin-sidebar-bg) calc(l * 1.1) c h);
+    }
+
+    /* Accent button */
+    .admin-btn--accent {
+        background-color: var(--admin-accent-info);
+        color: white;
+    }
+
+    .admin-btn--accent:hover {
+        background-color: oklch(from var(--admin-accent-info) calc(l * 0.9) c h);
+    }
+
+    /* Success button */
+    .admin-btn--success {
+        background-color: var(--admin-accent-success);
+        color: white;
+    }
+
+    .admin-btn--success:hover {
+        background-color: oklch(from var(--admin-accent-success) calc(l * 0.9) c h);
+    }
+
+    /* Danger button */
+    .admin-btn--danger {
+        background-color: var(--admin-accent-error);
+        color: white;
+    }
+
+    .admin-btn--danger:hover {
+        background-color: oklch(from var(--admin-accent-error) calc(l * 0.9) c h);
+    }
+
+    /* Ghost button */
+    .admin-btn--ghost {
+        background-color: transparent;
+        color: var(--admin-content-text);
+        border-color: var(--admin-border-medium);
+    }
+
+    .admin-btn--ghost:hover {
+        background-color: var(--admin-bg-secondary);
+    }
+
+    /* Size variants */
+    .admin-btn--sm {
+        padding: var(--admin-spacing-xs) var(--admin-spacing-sm);
+        font-size: var(--admin-font-size-xs);
+    }
+
+    .admin-btn--lg {
+        padding: var(--admin-spacing-md) var(--admin-spacing-lg);
+        font-size: var(--admin-font-size-base);
+    }
+
+    /* Icon button */
+    .admin-btn__icon {
+        width: 18px;
+        height: 18px;
+        flex-shrink: 0;
+    }
+}

resources/css/admin/06-components/_card.css

@@ -0,0 +1,61 @@
+/**
+ * Card Component
+ *
+ * Reusable card containers for dashboard widgets and content blocks.
+ */
+
+@layer admin-components {
+    .admin-card {
+        background-color: var(--admin-content-bg);
+        border: 1px solid var(--admin-border-light);
+        border-radius: var(--admin-radius-lg);
+        box-shadow: var(--admin-shadow-sm);
+        overflow: hidden;
+        transition: box-shadow var(--admin-transition-base);
+    }
+
+    .admin-card:hover {
+        box-shadow: var(--admin-shadow-md);
+    }
+
+    .admin-card__header {
+        padding: var(--admin-spacing-lg);
+        border-bottom: 1px solid var(--admin-border-light);
+        background-color: var(--admin-bg-secondary);
+    }
+
+    .admin-card__title {
+        font-size: var(--admin-font-size-lg);
+        font-weight: var(--admin-font-weight-semibold);
+        color: var(--admin-content-text);
+        margin: 0;
+    }
+
+    .admin-card__content {
+        padding: var(--admin-spacing-lg);
+    }
+
+    .admin-card__footer {
+        padding: var(--admin-spacing-md) var(--admin-spacing-lg);
+        border-top: 1px solid var(--admin-border-light);
+        background-color: var(--admin-bg-secondary);
+    }
+
+    /* Card variants */
+    .admin-card--highlighted {
+        border-color: var(--admin-accent-primary);
+        box-shadow: 0 0 0 1px var(--admin-accent-primary), var(--admin-shadow-sm);
+    }
+
+    .admin-card--success {
+        border-color: var(--admin-accent-success);
+    }
+
+    .admin-card--warning {
+        border-color: var(--admin-accent-warning);
+    }
+
+    .admin-card--error {
+        border-color: var(--admin-accent-error);
+    }
+}

resources/css/admin/06-components/_content.css

@@ -0,0 +1,312 @@
+/**
+ * Content Component - Admin Interface
+ *
+ * Main content area with cards, sections, and containers.
+ * Responsive spacing and max-width management.
+ */
+
+@layer admin-components {
+    /**
+     * Main Content Container
+     */
+    .admin-content {
+        padding: var(--admin-spacing-content-padding);
+        background-color: var(--admin-content-bg);
+        color: var(--admin-content-text);
+        overflow-x: hidden;
+
+        /* Wide: Center content with max-width */
+        @media (min-width: 1440px) {
+            max-width: var(--admin-spacing-content-max-width);
+            margin: 0 auto;
+            width: 100%;
+        }
+
+        /* Mobile: Reduce padding */
+        @media (max-width: 767px) {
+            padding: var(--admin-spacing-md);
+        }
+    }
+
+    /**
+     * Content Header
+     */
+    .admin-content__header {
+        margin-bottom: var(--admin-spacing-xl);
+    }
+
+    .admin-content__title {
+        font-size: var(--admin-font-size-3xl);
+        font-weight: 700;
+        color: var(--admin-content-text);
+        margin: 0 0 var(--admin-spacing-sm);
+
+        @media (max-width: 767px) {
+            font-size: var(--admin-font-size-2xl);
+        }
+    }
+
+    .admin-content__description {
+        font-size: var(--admin-font-size-base);
+        color: var(--admin-content-text);
+        opacity: 0.8;
+        margin: 0;
+        line-height: 1.6;
+    }
+
+    /**
+     * Content Actions (Header with Actions)
+     */
+    .admin-content__header--with-actions {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: var(--admin-spacing-md);
+
+        @media (max-width: 767px) {
+            flex-direction: column;
+            align-items: stretch;
+        }
+    }
+
+    .admin-content__title-group {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .admin-content__actions {
+        display: flex;
+        align-items: center;
+        gap: var(--admin-spacing-sm);
+        flex-shrink: 0;
+
+        @media (max-width: 767px) {
+            width: 100%;
+            justify-content: flex-start;
+        }
+    }
+
+    /**
+     * Card Component
+     */
+    .admin-card {
+        background-color: var(--admin-content-bg);
+        border: 1px solid var(--admin-border-light);
+        border-radius: var(--admin-radius-lg);
+        padding: var(--admin-spacing-lg);
+        box-shadow: var(--admin-shadow-sm);
+
+        /* Hover effect for interactive cards */
+        &.admin-card--interactive {
+            cursor: pointer;
+            transition: all var(--admin-transition-base);
+
+            &:hover {
+                border-color: var(--admin-border-medium);
+                box-shadow: var(--admin-shadow-md);
+                transform: translateY(-2px);
+            }
+        }
+    }
+
+    .admin-card__header {
+        margin-bottom: var(--admin-spacing-md);
+        padding-bottom: var(--admin-spacing-md);
+        border-bottom: 1px solid var(--admin-border-light);
+    }
+
+    .admin-card__title {
+        font-size: var(--admin-font-size-lg);
+        font-weight: 600;
+        color: var(--admin-content-text);
+        margin: 0;
+    }
+
+    .admin-card__subtitle {
+        font-size: var(--admin-font-size-sm);
+        color: var(--admin-content-text);
+        opacity: 0.7;
+        margin: var(--admin-spacing-xs) 0 0;
+    }
+
+    .admin-card__body {
+        margin: 0;
+    }
+
+    .admin-card__footer {
+        margin-top: var(--admin-spacing-md);
+        padding-top: var(--admin-spacing-md);
+        border-top: 1px solid var(--admin-border-light);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--admin-spacing-sm);
+    }
+
+    /**
+     * Section Component
+     */
+    .admin-section {
+        margin-bottom: var(--admin-spacing-2xl);
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .admin-section__header {
+        margin-bottom: var(--admin-spacing-lg);
+    }
+
+    .admin-section__title {
+        font-size: var(--admin-font-size-xl);
+        font-weight: 600;
+        color: var(--admin-content-text);
+        margin: 0 0 var(--admin-spacing-xs);
+    }
+
+    .admin-section__description {
+        font-size: var(--admin-font-size-sm);
+        color: var(--admin-content-text);
+        opacity: 0.8;
+        margin: 0;
+    }
+
+    /**
+     * Stats Grid (Dashboard Cards)
+     */
+    .admin-stats-grid {
+        display: grid;
+        gap: var(--admin-spacing-md);
+        grid-template-columns: 1fr;
+
+        @media (min-width: 768px) {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        @media (min-width: 1024px) {
+            grid-template-columns: repeat(4, 1fr);
+        }
+    }
+
+    .admin-stat-card {
+        background-color: var(--admin-content-bg);
+        border: 1px solid var(--admin-border-light);
+        border-radius: var(--admin-radius-lg);
+        padding: var(--admin-spacing-lg);
+    }
+
+    .admin-stat-card__label {
+        font-size: var(--admin-font-size-sm);
+        color: var(--admin-content-text);
+        opacity: 0.7;
+        margin: 0 0 var(--admin-spacing-xs);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        font-weight: 600;
+    }
+
+    .admin-stat-card__value {
+        font-size: var(--admin-font-size-3xl);
+        font-weight: 700;
+        color: var(--admin-content-text);
+        margin: 0 0 var(--admin-spacing-sm);
+        line-height: 1.2;
+    }
+
+    .admin-stat-card__change {
+        font-size: var(--admin-font-size-sm);
+        font-weight: 500;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--admin-spacing-xs);
+
+        &.admin-stat-card__change--positive {
+            color: var(--admin-accent-success);
+        }
+
+        &.admin-stat-card__change--negative {
+            color: var(--admin-accent-error);
+        }
+
+        &.admin-stat-card__change--neutral {
+            color: var(--admin-content-text);
+            opacity: 0.6;
+        }
+    }
+
+    .admin-stat-card__icon {
+        width: 40px;
+        height: 40px;
+        padding: var(--admin-spacing-sm);
+        background-color: var(--admin-bg-secondary);
+        border-radius: var(--admin-radius-md);
+        color: var(--admin-accent-primary);
+        margin-bottom: var(--admin-spacing-md);
+    }
+
+    /**
+     * Empty State
+     */
+    .admin-empty-state {
+        text-align: center;
+        padding: var(--admin-spacing-2xl);
+        color: var(--admin-content-text);
+    }
+
+    .admin-empty-state__icon {
+        width: 64px;
+        height: 64px;
+        margin: 0 auto var(--admin-spacing-lg);
+        opacity: 0.4;
+    }
+
+    .admin-empty-state__title {
+        font-size: var(--admin-font-size-xl);
+        font-weight: 600;
+        margin: 0 0 var(--admin-spacing-sm);
+    }
+
+    .admin-empty-state__description {
+        font-size: var(--admin-font-size-base);
+        opacity: 0.8;
+        margin: 0 0 var(--admin-spacing-lg);
+    }
+
+    .admin-empty-state__action {
+        /* Button styles inherited */
+    }
+
+    /**
+     * Loading State
+     */
+    .admin-loading {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: var(--admin-spacing-2xl);
+        color: var(--admin-content-text);
+    }
+
+    .admin-loading__spinner {
+        width: 40px;
+        height: 40px;
+        border: 3px solid var(--admin-border-light);
+        border-top-color: var(--admin-accent-primary);
+        border-radius: 50%;
+        animation: admin-spin 0.8s linear infinite;
+    }
+
+    .admin-loading__text {
+        margin-top: var(--admin-spacing-md);
+        font-size: var(--admin-font-size-sm);
+        opacity: 0.8;
+    }
+
+    @keyframes admin-spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+}

resources/css/admin/06-components/_header.css

@@ -0,0 +1,334 @@
+/**
+ * Header Component - Admin Interface
+ *
+ * Top header bar with page title, search, notifications, and user menu.
+ * Sticky positioning with backdrop blur for modern look.
+ */
+
+@layer admin-components {
+    /**
+     * Header Container
+     */
+    .admin-header {
+        display: flex;
+        align-items: center;
+        gap: var(--admin-spacing-md);
+        background-color: var(--admin-header-bg);
+        border-bottom: 1px solid var(--admin-header-border);
+        padding: var(--admin-spacing-md) var(--admin-spacing-content-padding);
+        min-height: var(--admin-header-height-mobile);
+
+        /* Sticky with blur effect */
+        position: sticky;
+        top: 0;
+        z-index: var(--admin-z-header);
+        backdrop-filter: blur(8px);
+        background-color: var(--admin-header-bg);
+
+        @media (min-width: 768px) {
+            min-height: var(--admin-header-height-tablet);
+        }
+
+        @media (min-width: 1440px) {
+            min-height: var(--admin-header-height-wide);
+        }
+    }
+
+    /**
+     * Page Title
+     */
+    .admin-header__title {
+        font-size: var(--admin-font-size-xl);
+        font-weight: 600;
+        color: var(--admin-header-text);
+        margin: 0;
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        @media (max-width: 767px) {
+            /* Hide on mobile, show breadcrumbs instead */
+            display: none;
+        }
+    }
+
+    /**
+     * Search Bar
+     */
+    .admin-header__search {
+        flex: 0 1 400px;
+        max-width: 400px;
+
+        @media (max-width: 767px) {
+            /* Full width on mobile */
+            flex: 1;
+            max-width: none;
+        }
+    }
+
+    .admin-search {
+        position: relative;
+        width: 100%;
+    }
+
+    .admin-search__input {
+        width: 100%;
+        padding: var(--admin-spacing-sm) var(--admin-spacing-md);
+        padding-left: calc(var(--admin-spacing-md) + 20px + var(--admin-spacing-sm));
+        border: 1px solid var(--admin-border-light);
+        border-radius: var(--admin-radius-md);
+        font-size: var(--admin-font-size-sm);
+        background-color: var(--admin-bg-secondary);
+        color: var(--admin-content-text);
+        transition: all var(--admin-transition-base);
+
+        &::placeholder {
+            color: var(--admin-content-text);
+            opacity: 0.5;
+        }
+
+        &:focus {
+            outline: none;
+            border-color: var(--admin-focus-ring);
+            box-shadow: 0 0 0 3px var(--admin-focus-ring-alpha);
+            background-color: var(--admin-content-bg);
+        }
+    }
+
+    .admin-search__icon {
+        position: absolute;
+        left: var(--admin-spacing-md);
+        top: 50%;
+        transform: translateY(-50%);
+        width: 20px;
+        height: 20px;
+        color: var(--admin-content-text);
+        opacity: 0.5;
+        pointer-events: none;
+    }
+
+    /**
+     * Header Actions (Right Side)
+     */
+    .admin-header__actions {
+        display: flex;
+        align-items: center;
+        gap: var(--admin-spacing-sm);
+        margin-left: auto;
+    }
+
+    /**
+     * Action Button (Icon Button)
+     */
+    .admin-action-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border-radius: var(--admin-radius-md);
+        background-color: transparent;
+        border: 1px solid transparent;
+        color: var(--admin-header-text);
+        cursor: pointer;
+        transition: all var(--admin-transition-base);
+        position: relative;
+
+        &:hover {
+            background-color: var(--admin-hover-overlay);
+            border-color: var(--admin-border-light);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--admin-focus-ring);
+            outline-offset: 2px;
+        }
+    }
+
+    .admin-action-btn__icon {
+        width: 20px;
+        height: 20px;
+    }
+
+    /**
+     * Notification Badge
+     */
+    .admin-action-btn__badge {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        width: 8px;
+        height: 8px;
+        background-color: var(--admin-accent-error);
+        border: 2px solid var(--admin-header-bg);
+        border-radius: 50%;
+    }
+
+    .admin-action-btn__badge--count {
+        width: auto;
+        height: auto;
+        min-width: 18px;
+        padding: 2px 5px;
+        font-size: 10px;
+        font-weight: 600;
+        color: white;
+        line-height: 1;
+        border-radius: 9px;
+    }
+
+    /**
+     * Theme Toggle Button
+     */
+    .admin-theme-toggle {
+        display: flex;
+        align-items: center;
+        gap: var(--admin-spacing-xs);
+        padding: var(--admin-spacing-xs) var(--admin-spacing-sm);
+        background-color: var(--admin-bg-secondary);
+        border: 1px solid var(--admin-border-light);
+        border-radius: var(--admin-radius-md);
+        cursor: pointer;
+        transition: all var(--admin-transition-base);
+
+        &:hover {
+            background-color: var(--admin-bg-tertiary);
+        }
+
+        @media (max-width: 767px) {
+            /* Icon only on mobile */
+            padding: var(--admin-spacing-xs);
+
+            .admin-theme-toggle__label {
+                display: none;
+            }
+        }
+    }
+
+    .admin-theme-toggle__icon {
+        width: 18px;
+        height: 18px;
+        color: var(--admin-header-text);
+    }
+
+    .admin-theme-toggle__label {
+        font-size: var(--admin-font-size-sm);
+        color: var(--admin-header-text);
+    }
+
+    /**
+     * User Menu Dropdown
+     */
+    .admin-user-menu {
+        position: relative;
+    }
+
+    .admin-user-menu__trigger {
+        display: flex;
+        align-items: center;
+        gap: var(--admin-spacing-sm);
+        padding: var(--admin-spacing-xs);
+        background-color: transparent;
+        border: 1px solid transparent;
+        border-radius: var(--admin-radius-md);
+        cursor: pointer;
+        transition: all var(--admin-transition-base);
+
+        &:hover {
+            background-color: var(--admin-hover-overlay);
+            border-color: var(--admin-border-light);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--admin-focus-ring);
+            outline-offset: 2px;
+        }
+    }
+
+    .admin-user-menu__avatar {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        object-fit: cover;
+        border: 2px solid var(--admin-border-light);
+    }
+
+    .admin-user-menu__name {
+        font-size: var(--admin-font-size-sm);
+        font-weight: 500;
+        color: var(--admin-header-text);
+
+        @media (max-width: 767px) {
+            display: none;
+        }
+    }
+
+    .admin-user-menu__chevron {
+        width: 16px;
+        height: 16px;
+        color: var(--admin-header-text);
+        transition: transform var(--admin-transition-base);
+
+        .admin-user-menu[data-open="true"] & {
+            transform: rotate(180deg);
+        }
+
+        @media (max-width: 767px) {
+            display: none;
+        }
+    }
+
+    /**
+     * Dropdown Menu
+     */
+    .admin-user-menu__dropdown {
+        position: absolute;
+        top: calc(100% + var(--admin-spacing-xs));
+        right: 0;
+        min-width: 200px;
+        background-color: var(--admin-content-bg);
+        border: 1px solid var(--admin-border-light);
+        border-radius: var(--admin-radius-md);
+        box-shadow: var(--admin-shadow-lg);
+        padding: var(--admin-spacing-sm) 0;
+        display: none;
+        z-index: var(--admin-z-dropdown);
+
+        .admin-user-menu[data-open="true"] & {
+            display: block;
+        }
+    }
+
+    .admin-user-menu__item {
+        list-style: none;
+        margin: 0;
+    }
+
+    .admin-user-menu__link {
+        display: flex;
+        align-items: center;
+        gap: var(--admin-spacing-sm);
+        padding: var(--admin-spacing-sm) var(--admin-spacing-md);
+        color: var(--admin-content-text);
+        text-decoration: none;
+        font-size: var(--admin-font-size-sm);
+        transition: background-color var(--admin-transition-base);
+
+        &:hover {
+            background-color: var(--admin-bg-secondary);
+        }
+    }
+
+    .admin-user-menu__icon {
+        width: 18px;
+        height: 18px;
+        opacity: 0.7;
+    }
+
+    .admin-user-menu__divider {
+        height: 1px;
+        background-color: var(--admin-border-light);
+        margin: var(--admin-spacing-sm) 0;
+    }
+}

resources/css/admin/06-components/_sidebar.css

@@ -0,0 +1,295 @@
+/**
+ * Sidebar Component - Admin Interface
+ *
+ * Main navigation sidebar with collapsible sections and active states.
+ * Mobile: Off-canvas overlay, Tablet+: Fixed sidebar
+ */
+
+@layer admin-components {
+    /**
+     * Sidebar Container
+     */
+    .admin-sidebar {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--admin-sidebar-bg);
+        color: var(--admin-sidebar-text);
+
+        /* Spacing */
+        padding: var(--admin-spacing-lg) 0;
+    }
+
+    /**
+     * Sidebar Header (Logo + Title)
+     */
+    .admin-sidebar__header {
+        padding: 0 var(--admin-spacing-lg);
+        margin-bottom: var(--admin-spacing-xl);
+        display: flex;
+        align-items: center;
+        gap: var(--admin-spacing-md);
+    }
+
+    .admin-sidebar__logo {
+        width: 40px;
+        height: 40px;
+        flex-shrink: 0;
+    }
+
+    .admin-sidebar__title {
+        font-size: var(--admin-font-size-lg);
+        font-weight: 600;
+        color: var(--admin-sidebar-text-hover);
+        margin: 0;
+    }
+
+    /**
+     * Navigation Section
+     */
+    .admin-nav {
+        flex: 1;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        gap: var(--admin-spacing-xs);
+    }
+
+    .admin-nav__section {
+        padding: 0 var(--admin-spacing-md);
+    }
+
+    .admin-nav__section-title {
+        font-size: var(--admin-font-size-xs);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--admin-sidebar-text);
+        opacity: 0.7;
+        padding: var(--admin-spacing-md) var(--admin-spacing-sm);
+        margin: var(--admin-spacing-md) 0 var(--admin-spacing-xs);
+    }
+
+    /**
+     * Navigation List
+     */
+    .admin-nav__list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--admin-spacing-xs);
+    }
+
+    /**
+     * Navigation Items
+     */
+    .admin-nav__item {
+        margin: 0;
+    }
+
+    .admin-nav__link {
+        display: flex;
+        align-items: center;
+        gap: var(--admin-spacing-sm);
+        padding: var(--admin-spacing-sm) var(--admin-spacing-md);
+        border-radius: var(--admin-radius-md);
+        color: var(--admin-sidebar-text);
+        text-decoration: none;
+        font-size: var(--admin-font-size-sm);
+        font-weight: 500;
+        transition: all var(--admin-transition-base);
+        position: relative;
+
+        /* Hover State */
+        &:hover {
+            background-color: var(--admin-hover-overlay);
+            color: var(--admin-sidebar-text-hover);
+        }
+
+        /* Focus State */
+        &:focus-visible {
+            outline: 2px solid var(--admin-focus-ring);
+            outline-offset: 2px;
+        }
+
+        /* Active State */
+        &[aria-current="page"],
+        &.admin-nav__link--active {
+            background-color: var(--admin-sidebar-active);
+            color: var(--admin-sidebar-text-hover);
+
+            /* Active Indicator */
+            &::before {
+                content: '';
+                position: absolute;
+                left: 0;
+                top: 50%;
+                transform: translateY(-50%);
+                width: 3px;
+                height: 70%;
+                background-color: var(--admin-accent-primary);
+                border-radius: 0 2px 2px 0;
+            }
+        }
+    }
+
+    /**
+     * Navigation Icons
+     */
+    .admin-nav__icon {
+        width: 20px;
+        height: 20px;
+        flex-shrink: 0;
+        opacity: 0.8;
+
+        .admin-nav__link:hover &,
+        .admin-nav__link[aria-current="page"] & {
+            opacity: 1;
+        }
+    }
+
+    /**
+     * Badge (Notification Counter)
+     */
+    .admin-nav__badge {
+        margin-left: auto;
+        padding: 2px 8px;
+        background-color: var(--admin-accent-error);
+        color: white;
+        font-size: var(--admin-font-size-xs);
+        font-weight: 600;
+        border-radius: 10px;
+        min-width: 20px;
+        text-align: center;
+    }
+
+    /**
+     * Collapsible Submenu
+     */
+    .admin-nav__submenu {
+        list-style: none;
+        margin: var(--admin-spacing-xs) 0 0;
+        padding: 0 0 0 calc(var(--admin-spacing-md) + 20px);
+        display: none;
+        flex-direction: column;
+        gap: var(--admin-spacing-xs);
+
+        /* Show when parent is active or expanded */
+        .admin-nav__item--expanded > & {
+            display: flex;
+        }
+    }
+
+    .admin-nav__submenu .admin-nav__link {
+        font-size: var(--admin-font-size-xs);
+        padding: var(--admin-spacing-xs) var(--admin-spacing-sm);
+    }
+
+    /**
+     * Expand/Collapse Toggle
+     */
+    .admin-nav__toggle {
+        margin-left: auto;
+        width: 16px;
+        height: 16px;
+        transition: transform var(--admin-transition-base);
+
+        .admin-nav__item--expanded & {
+            transform: rotate(90deg);
+        }
+    }
+
+    /**
+     * Sidebar Footer
+     */
+    .admin-sidebar__footer {
+        margin-top: auto;
+        padding: var(--admin-spacing-lg);
+        border-top: 1px solid var(--admin-sidebar-border);
+    }
+
+    .admin-sidebar__user {
+        display: flex;
+        align-items: center;
+        gap: var(--admin-spacing-sm);
+        padding: var(--admin-spacing-sm);
+        border-radius: var(--admin-radius-md);
+        color: var(--admin-sidebar-text);
+        text-decoration: none;
+        transition: background-color var(--admin-transition-base);
+
+        &:hover {
+            background-color: var(--admin-hover-overlay);
+        }
+    }
+
+    .admin-sidebar__avatar {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex-shrink: 0;
+    }
+
+    .admin-sidebar__user-info {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .admin-sidebar__user-name {
+        font-size: var(--admin-font-size-sm);
+        font-weight: 600;
+        color: var(--admin-sidebar-text-hover);
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .admin-sidebar__user-role {
+        font-size: var(--admin-font-size-xs);
+        color: var(--admin-sidebar-text);
+        opacity: 0.8;
+        display: block;
+    }
+
+    /**
+     * Mobile Menu Toggle Button
+     */
+    .admin-sidebar__mobile-toggle {
+        display: none;
+
+        @media (max-width: 767px) {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: fixed;
+            top: var(--admin-spacing-md);
+            left: var(--admin-spacing-md);
+            z-index: calc(var(--admin-z-sidebar) + 1);
+            width: 44px;
+            height: 44px;
+            background-color: var(--admin-sidebar-bg);
+            border: 1px solid var(--admin-sidebar-border);
+            border-radius: var(--admin-radius-md);
+            cursor: pointer;
+            transition: background-color var(--admin-transition-base);
+
+            &:hover {
+                background-color: var(--admin-sidebar-active);
+            }
+
+            &:focus-visible {
+                outline: 2px solid var(--admin-focus-ring);
+                outline-offset: 2px;
+            }
+        }
+    }
+
+    .admin-sidebar__toggle-icon {
+        width: 24px;
+        height: 24px;
+        color: var(--admin-sidebar-text-hover);
+    }
+}

resources/css/admin/06-components/_stat-list.css

@@ -0,0 +1,48 @@
+/**
+ * Stat List Component
+ *
+ * List of statistics with labels and values for dashboard cards.
+ */
+
+@layer admin-components {
+    .admin-stat-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--admin-spacing-md);
+    }
+
+    .admin-stat-list__item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--admin-spacing-sm);
+        padding-bottom: var(--admin-spacing-sm);
+        border-bottom: 1px solid var(--admin-border-light);
+    }
+
+    .admin-stat-list__item:last-child {
+        border-bottom: none;
+        padding-bottom: 0;
+    }
+
+    .admin-stat-list__label {
+        font-size: var(--admin-font-size-sm);
+        color: var(--admin-content-text);
+        opacity: 0.8;
+    }
+
+    .admin-stat-list__value {
+        font-size: var(--admin-font-size-sm);
+        font-weight: var(--admin-font-weight-semibold);
+        color: var(--admin-content-text);
+    }
+
+    /* Compact variant */
+    .admin-stat-list--compact {
+        gap: var(--admin-spacing-sm);
+    }
+
+    .admin-stat-list--compact .admin-stat-list__item {
+        padding-bottom: var(--admin-spacing-xs);
+    }
+}