/* ============================================================
EVDE BAKIM - DESIGN TOKENS v2.0
Home Care Management Platform — Enterprise Edition
Core design tokens powering the entire UI system.
All visual properties are derived from these tokens.
Architecture: Mobile-first, healthcare SaaS aesthetic
Inspired by: Stripe + Linear + Notion + Medical dashboards
v2.0 — Enterprise upgrades:
- Refined primary palette (modern teal)
- Universal status system
- Tenant theming layer
- Dashboard metric color mapping
- Dark mode ready structure
============================================================ */
:root {
/* ──────────────────────────────────────────────
COLOR SYSTEM v2.0
Medical-grade color palette designed for:
- Calm, trustworthy feeling
- High readability in clinical environments
- WCAG AA contrast compliance
- Reduced eye strain for long shifts
v2.0: Refined to modern teal (#14b8a6 → #0d9488)
Psychology: Teal = trust + healing + stability
────────────────────────────────────────────── */
/* ── Primary: Modern Medical Teal ──
Refined from #0097a7 → #14b8a6 base
Warmer, more modern, better contrast ratios
Evokes: healing, trust, cleanliness, professionalism */
--color-primary-25: #f0fdfa;
--color-primary-50: #ccfbf1;
--color-primary-100: #99f6e4;
--color-primary-200: #5eead4;
--color-primary-300: #2dd4bf;
--color-primary-400: #14b8a6;
--color-primary-500: #0d9488; /* Main primary — refined */
--color-primary-600: #0f766e;
--color-primary-700: #115e59;
--color-primary-800: #134e4a;
--color-primary-900: #042f2e;
/* ── Secondary: Soft Indigo ── */
--color-secondary-50: #eef0ff;
--color-secondary-100: #d4d8ff;
--color-secondary-200: #b0b8ff;
--color-secondary-300: #8b95ff;
--color-secondary-400: #6e7aef;
--color-secondary-500: #5563d8; /* Main secondary */
--color-secondary-600: #4550b8;
--color-secondary-700: #3a4299;
--color-secondary-800: #2e357a;
--color-secondary-900: #21265c;
/* ── Neutral: Cool Gray ── */
--color-neutral-0: #ffffff;
--color-neutral-25: #fafbfc;
--color-neutral-50: #f8fafc;
--color-neutral-100: #f1f5f9;
--color-neutral-200: #e2e8f0;
--color-neutral-300: #cbd5e1;
--color-neutral-400: #94a3b8;
--color-neutral-500: #64748b;
--color-neutral-600: #475569;
--color-neutral-700: #334155;
--color-neutral-800: #1e293b;
--color-neutral-900: #0f172a;
--color-neutral-950: #020617;
/* ── Success: Medical Green ── */
--color-success-50: #ecfdf5;
--color-success-100: #d1fae5;
--color-success-200: #a7f3d0;
--color-success-300: #6ee7b7;
--color-success-400: #34d399;
--color-success-500: #10b981;
--color-success-600: #059669;
--color-success-700: #047857;
/* ── Warning: Warm Amber ── */
--color-warning-50: #fffbeb;
--color-warning-100: #fef3c7;
--color-warning-200: #fde68a;
--color-warning-300: #fcd34d;
--color-warning-400: #fbbf24;
--color-warning-500: #f59e0b;
--color-warning-600: #d97706;
--color-warning-700: #b45309;
/* ── Danger: Clinical Red ── */
--color-danger-50: #fef2f2;
--color-danger-100: #fee2e2;
--color-danger-200: #fecaca;
--color-danger-300: #fca5a5;
--color-danger-400: #f87171;
--color-danger-500: #ef4444;
--color-danger-600: #dc2626;
--color-danger-700: #b91c1c;
/* ── Info: Calm Blue ── */
--color-info-50: #eff6ff;
--color-info-100: #dbeafe;
--color-info-200: #bfdbfe;
--color-info-300: #93c5fd;
--color-info-400: #60a5fa;
--color-info-500: #3b82f6;
--color-info-600: #2563eb;
--color-info-700: #1d4ed8;
/* ── Orange (Tasks / Scheduling) ── */
--color-orange-50: #fff7ed;
--color-orange-100: #ffedd5;
--color-orange-200: #fed7aa;
--color-orange-300: #fdba74;
--color-orange-400: #fb923c;
--color-orange-500: #f97316;
--color-orange-600: #ea580c;
--color-orange-700: #c2410c;
/* ──────────────────────────────────────────────
UNIVERSAL STATUS SYSTEM (v2.0)
Healthcare-critical: Every module uses the same
colors for the same meaning. No ambiguity.
┌────────────┬───────────┬──────────────────────┐
│ Status │ Color │ Usage │
├────────────┼───────────┼──────────────────────┤
│ Active │ Green │ Active patients/staff│
│ Inactive │ Gray │ Disabled, archived │
│ Pending │ Amber │ Awaiting action │
│ Warning │ Orange │ Needs attention soon │
│ Critical │ Red │ Urgent / emergency │
│ Info │ Blue │ Informational │
│ Completed │ Teal │ Done, finished │
│ Scheduled │ Indigo │ Future planned │
└────────────┴───────────┴──────────────────────┘
────────────────────────────────────────────── */
/* Status: Active */
--status-active-bg: rgba(16, 185, 129, 0.10);
--status-active-border: rgba(16, 185, 129, 0.25);
--status-active-text: var(--color-success-700);
--status-active-icon: var(--color-success-500);
--status-active-dot: var(--color-success-500);
/* Status: Inactive */
--status-inactive-bg: var(--color-neutral-100);
--status-inactive-border: var(--color-neutral-200);
--status-inactive-text: var(--color-neutral-600);
--status-inactive-icon: var(--color-neutral-400);
--status-inactive-dot: var(--color-neutral-400);
/* Status: Pending */
--status-pending-bg: rgba(245, 158, 11, 0.10);
--status-pending-border: rgba(245, 158, 11, 0.25);
--status-pending-text: var(--color-warning-700);
--status-pending-icon: var(--color-warning-500);
--status-pending-dot: var(--color-warning-500);
/* Status: Warning */
--status-warning-bg: rgba(249, 115, 22, 0.10);
--status-warning-border: rgba(249, 115, 22, 0.25);
--status-warning-text: var(--color-orange-700);
--status-warning-icon: var(--color-orange-500);
--status-warning-dot: var(--color-orange-500);
/* Status: Critical */
--status-critical-bg: rgba(239, 68, 68, 0.10);
--status-critical-border: rgba(239, 68, 68, 0.30);
--status-critical-text: var(--color-danger-700);
--status-critical-icon: var(--color-danger-500);
--status-critical-dot: var(--color-danger-500);
/* Status: Info */
--status-info-bg: rgba(59, 130, 246, 0.10);
--status-info-border: rgba(59, 130, 246, 0.25);
--status-info-text: var(--color-info-700);
--status-info-icon: var(--color-info-500);
--status-info-dot: var(--color-info-500);
/* Status: Completed */
--status-completed-bg: rgba(13, 148, 136, 0.10);
--status-completed-border: rgba(13, 148, 136, 0.25);
--status-completed-text: var(--color-primary-700);
--status-completed-icon: var(--color-primary-500);
--status-completed-dot: var(--color-primary-500);
/* Status: Scheduled */
--status-scheduled-bg: rgba(85, 99, 216, 0.10);
--status-scheduled-border: rgba(85, 99, 216, 0.25);
--status-scheduled-text: var(--color-secondary-700);
--status-scheduled-icon: var(--color-secondary-500);
--status-scheduled-dot: var(--color-secondary-500);
/* ──────────────────────────────────────────────
DASHBOARD METRIC COLOR MAP (v2.0)
Each module has a dedicated accent color for
KPI cards, icons, and visual identity.
────────────────────────────────────────────── */
/* Patients → Blue */
--metric-patients-bg: rgba(59, 130, 246, 0.10);
--metric-patients-icon: var(--color-info-500);
--metric-patients-accent: var(--color-info-500);
/* Staff → Purple */
--metric-staff-bg: rgba(85, 99, 216, 0.10);
--metric-staff-icon: var(--color-secondary-500);
--metric-staff-accent: var(--color-secondary-500);
/* Alerts → Red */
--metric-alerts-bg: rgba(239, 68, 68, 0.10);
--metric-alerts-icon: var(--color-danger-500);
--metric-alerts-accent: var(--color-danger-500);
/* Tasks → Orange */
--metric-tasks-bg: rgba(249, 115, 22, 0.10);
--metric-tasks-icon: var(--color-orange-500);
--metric-tasks-accent: var(--color-orange-500);
/* Inventory → Teal */
--metric-inventory-bg: rgba(13, 148, 136, 0.10);
--metric-inventory-icon: var(--color-primary-500);
--metric-inventory-accent: var(--color-primary-500);
/* Reports → Indigo */
--metric-reports-bg: rgba(85, 99, 216, 0.10);
--metric-reports-icon: var(--color-secondary-600);
--metric-reports-accent: var(--color-secondary-600);
/* Visits → Green */
--metric-visits-bg: rgba(16, 185, 129, 0.10);
--metric-visits-icon: var(--color-success-500);
--metric-visits-accent: var(--color-success-500);
/* Revenue → Emerald */
--metric-revenue-bg: rgba(13, 148, 136, 0.08);
--metric-revenue-icon: var(--color-primary-600);
--metric-revenue-accent: var(--color-primary-600);
/* ──────────────────────────────────────────────
TENANT THEMING LAYER (v2.0)
Each tenant can override these safely.
These map to the primary palette by default
but can be injected per-tenant via PHP/JS.
Usage: Use --tenant-* in brand-visible areas
(logo, sidebar accent, primary buttons on login)
────────────────────────────────────────────── */
--tenant-primary: var(--color-primary-500);
--tenant-primary-hover: var(--color-primary-600);
--tenant-primary-light: var(--color-primary-50);
--tenant-accent: var(--color-primary-400);
--tenant-gradient: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
--tenant-text-on-primary: #ffffff;
--tenant-logo-height: 32px;
--tenant-sidebar-bg: var(--bg-sidebar);
--tenant-sidebar-accent: var(--color-primary-400);
/* ──────────────────────────────────────────────
SEMANTIC COLORS
Use these in components, not raw palette values.
────────────────────────────────────────────── */
/* Backgrounds */
--bg-body: var(--color-neutral-50);
--bg-surface: var(--color-neutral-0);
--bg-surface-hover: var(--color-neutral-25);
--bg-surface-alt: var(--color-neutral-50);
--bg-surface-raised: var(--color-neutral-0);
--bg-sidebar: var(--color-neutral-950);
--bg-sidebar-hover: rgba(255, 255, 255, 0.06);
--bg-sidebar-active:rgba(255, 255, 255, 0.10);
--bg-overlay: rgba(15, 23, 42, 0.5);
--bg-overlay-heavy: rgba(15, 23, 42, 0.75);
/* Text */
--text-primary: var(--color-neutral-900);
--text-secondary: var(--color-neutral-600);
--text-tertiary: var(--color-neutral-400);
--text-inverse: var(--color-neutral-0);
--text-link: var(--color-primary-600);
--text-link-hover: var(--color-primary-700);
--text-sidebar: rgba(255, 255, 255, 0.70);
--text-sidebar-active: rgba(255, 255, 255, 0.95);
--text-success: var(--color-success-700);
--text-warning: var(--color-warning-700);
--text-danger: var(--color-danger-700);
--text-info: var(--color-info-700);
/* Borders */
--border-default: var(--color-neutral-200);
--border-light: var(--color-neutral-100);
--border-focus: var(--color-primary-400);
--border-error: var(--color-danger-400);
--border-success: var(--color-success-300);
--border-warning: var(--color-warning-300);
/* ──────────────────────────────────────────────
TYPOGRAPHY v2.0
Font: Inter — unified for entire UI
- Excellent readability at small sizes
- Tabular numbers for medical data
- Wide language support (Turkish characters)
- Designed for screens/UI
- Clean medical/professional feel
v2.0: Inter is now used for EVERYTHING.
Plus Jakarta Sans is optional, headings-only.
Using a single font improves:
- Page load speed (~40KB less)
- FOUT (flash of unstyled text) reduction
- Render consistency across devices
- Cache efficiency (one font file set)
To enable Plus Jakarta Sans for headings,
simply keep the Google Fonts import as-is.
To use Inter-only, remove Jakarta from import.
────────────────────────────────────────────── */
--font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif; /* Optional: hero/marketing only */
--font-family-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
/* Font Sizes — fluid scale */
--text-xs: 0.6875rem; /* 11px — small labels */
--text-sm: 0.8125rem; /* 13px — secondary text */
--text-base: 0.9375rem; /* 15px — body text, optimized for medical readability */
--text-md: 1rem; /* 16px — emphasized body */
--text-lg: 1.125rem; /* 18px — card titles */
--text-xl: 1.3125rem; /* 21px — section headings */
--text-2xl: 1.625rem; /* 26px — page titles */
--text-3xl: 2rem; /* 32px — dashboard metrics */
--text-4xl: 2.5rem; /* 40px — hero numbers */
/* Font Weights */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* Line Heights */
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
/* Letter Spacing */
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
/* ──────────────────────────────────────────────
SPACING SCALE
Based on 4px grid for precise alignment
────────────────────────────────────────────── */
--space-0: 0;
--space-0-5: 0.125rem; /* 2px */
--space-1: 0.25rem; /* 4px */
--space-1-5: 0.375rem; /* 6px */
--space-2: 0.5rem; /* 8px */
--space-2-5: 0.625rem; /* 10px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-7: 1.75rem; /* 28px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-14: 3.5rem; /* 56px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
/* ──────────────────────────────────────────────
BORDER RADIUS
Soft, modern, approachable — healthcare friendly
────────────────────────────────────────────── */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 14px;
--radius-2xl: 16px;
--radius-3xl: 20px;
--radius-full: 9999px;
/* Semantic radius */
--radius-button: var(--radius-lg);
--radius-card: var(--radius-xl);
--radius-input: var(--radius-md);
--radius-badge: var(--radius-full);
--radius-modal: var(--radius-2xl);
--radius-avatar: var(--radius-full);
/* ──────────────────────────────────────────────
SHADOWS
Soft, layered — premium SaaS feel
────────────────────────────────────────────── */
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
--shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.06), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
--shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
--shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
/* Colored shadows for interactive elements */
--shadow-primary: 0 4px 14px rgba(13, 148, 136, 0.25);
--shadow-danger: 0 4px 14px rgba(239, 68, 68, 0.20);
--shadow-success: 0 4px 14px rgba(16, 185, 129, 0.20);
--shadow-warning: 0 4px 14px rgba(245, 158, 11, 0.20);
--shadow-info: 0 4px 14px rgba(59, 130, 246, 0.20);
/* Focus ring */
--ring-primary: 0 0 0 3px rgba(13, 148, 136, 0.20);
--ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.15);
--ring-success: 0 0 0 3px rgba(16, 185, 129, 0.15);
--ring-warning: 0 0 0 3px rgba(245, 158, 11, 0.15);
/* ──────────────────────────────────────────────
TRANSITIONS
────────────────────────────────────────────── */
--transition-fast: 120ms ease;
--transition-base: 200ms ease;
--transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
/* ──────────────────────────────────────────────
Z-INDEX SCALE
────────────────────────────────────────────── */
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-sidebar: 300;
--z-header: 400;
--z-overlay: 500;
--z-modal: 600;
--z-toast: 700;
--z-tooltip: 800;
--z-alarm: 900; /* Critical alarms above everything */
--z-fab: 250;
/* ──────────────────────────────────────────────
LAYOUT DIMENSIONS
────────────────────────────────────────────── */
--sidebar-width: 260px;
--sidebar-width-collapsed: 72px;
--header-height: 64px;
--header-height-mobile: 56px;
--bottom-nav-height: 64px;
--fab-size: 56px;
--content-max-width: 1400px;
--form-max-width: 680px;
--table-min-width: 800px;
/* ──────────────────────────────────────────────
BREAKPOINTS (for reference, used in media queries)
Mobile first approach:
- Base: 0 - 639px (phones)
- sm: 640px+ (large phones)
- md: 768px+ (tablets portrait)
- lg: 1024px+ (tablets landscape / small desktop)
- xl: 1280px+ (desktop)
- 2xl: 1536px+ (large desktop)
────────────────────────────────────────────── */
/* ──────────────────────────────────────────────
SHORTHAND ALIASES
Maps short var names used in view templates
to their full design-token equivalents.
────────────────────────────────────────────── */
/* Color shortcuts */
--primary: var(--color-primary-500);
--primary-light: var(--color-primary-50);
--primary-bg: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
--danger: var(--color-danger-500);
--success: var(--color-success-500);
--warning: var(--color-warning-500);
--info: var(--color-info-500);
/* Background shortcuts */
--bg: var(--bg-body);
--bg-card: var(--bg-surface);
--bg-muted: var(--bg-surface-alt);
--bg-hover: var(--bg-surface-hover);
--bg-secondary: var(--bg-surface-alt);
/* Text shortcuts */
--text: var(--text-primary);
--text-muted: var(--text-secondary);
/* Border shortcuts */
--border: var(--border-default);
/* Font shortcuts */
--family-primary: var(--font-family-primary);
--family-primary-soft: var(--font-family-primary);
--family-accent: var(--font-family-heading);
}
/* ──────────────────────────────────────────────
THEME SYSTEM (v2.0)
Architecture:
- Light theme = default (no class needed)
- Dark theme = [data-theme="dark"] on
- Auto theme = [data-theme="auto"] + prefers-color-scheme
Theme files live in css/themes/
This block provides the structural hook.
────────────────────────────────────────────── */
/* Dark mode via explicit class */
[data-theme="dark"] {
--bg-body: var(--color-neutral-950);
--bg-surface: var(--color-neutral-900);
--bg-surface-hover: var(--color-neutral-800);
--bg-surface-alt: var(--color-neutral-800);
--bg-surface-raised: var(--color-neutral-800);
--text-primary: var(--color-neutral-50);
--text-secondary: var(--color-neutral-400);
--text-tertiary: var(--color-neutral-500);
--border-default: var(--color-neutral-700);
--border-light: var(--color-neutral-800);
--bg-overlay: rgba(0, 0, 0, 0.6);
}
/* Dark mode via system preference */
@media (prefers-color-scheme: dark) {
[data-theme="auto"] {
--bg-body: var(--color-neutral-950);
--bg-surface: var(--color-neutral-900);
--bg-surface-hover: var(--color-neutral-800);
--bg-surface-alt: var(--color-neutral-800);
--bg-surface-raised: var(--color-neutral-800);
--text-primary: var(--color-neutral-50);
--text-secondary: var(--color-neutral-400);
--text-tertiary: var(--color-neutral-500);
--border-default: var(--color-neutral-700);
--border-light: var(--color-neutral-800);
--bg-overlay: rgba(0, 0, 0, 0.6);
}
}
/* ============================================================
EVDE BAKIM - CSS RESET
Modern, minimal CSS reset for consistent cross-browser base.
============================================================ */
/* Box model */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Prevent font size inflation */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
scroll-behavior: smooth;
}
/* Core body defaults */
body {
min-height: 100vh;
min-height: 100dvh;
line-height: var(--leading-normal);
font-family: var(--font-family-primary);
font-size: var(--text-base);
font-weight: var(--weight-regular);
color: var(--text-primary);
background-color: var(--bg-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/* Remove list styles */
ul,
ol {
list-style: none;
}
/* Headings and body text balance */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-heading);
font-weight: var(--weight-semibold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
color: var(--text-primary);
}
p {
text-wrap: pretty;
}
/* Links */
a {
color: var(--text-link);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--text-link-hover);
}
/* Media defaults */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
/* Form elements inherit fonts */
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
/* Button reset */
button {
cursor: pointer;
background: none;
border: none;
outline: none;
}
/* Textarea resize */
textarea {
resize: vertical;
}
/* Table reset */
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
/* Focus visible — accessibility */
:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
outline: none;
}
/* Scrollbar styling */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--color-neutral-300);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-neutral-400);
}
/* Selection */
::selection {
background-color: var(--color-primary-100);
color: var(--color-primary-900);
}
/* Placeholder */
::placeholder {
color: var(--text-tertiary);
opacity: 1;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
EVDE BAKIM - TYPOGRAPHY SYSTEM
Consistent type scale for the entire application.
============================================================ */
/* ── Heading Styles ── */
.heading-1 {
font-family: var(--font-family-heading);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--text-primary);
}
.heading-2 {
font-family: var(--font-family-heading);
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--text-primary);
}
.heading-3 {
font-family: var(--font-family-heading);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
color: var(--text-primary);
}
.heading-4 {
font-family: var(--font-family-heading);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
color: var(--text-primary);
}
/* ── Body Styles ── */
.body-lg {
font-size: var(--text-md);
line-height: var(--leading-relaxed);
color: var(--text-primary);
}
.body-base {
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--text-primary);
}
.body-sm {
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--text-secondary);
}
.body-xs {
font-size: var(--text-xs);
line-height: var(--leading-normal);
color: var(--text-tertiary);
letter-spacing: var(--tracking-wide);
}
/* ── Label / Caption ── */
.label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
line-height: var(--leading-tight);
color: var(--text-secondary);
}
.label-xs {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--text-tertiary);
}
.caption {
font-size: var(--text-xs);
line-height: var(--leading-normal);
color: var(--text-tertiary);
}
/* ── Metric / Number Display ── */
.metric-lg {
font-family: var(--font-family-heading);
font-size: var(--text-4xl);
font-weight: var(--weight-bold);
line-height: 1.1;
letter-spacing: var(--tracking-tight);
font-variant-numeric: tabular-nums;
}
.metric-md {
font-family: var(--font-family-heading);
font-size: var(--text-3xl);
font-weight: var(--weight-bold);
line-height: 1.1;
letter-spacing: var(--tracking-tight);
font-variant-numeric: tabular-nums;
}
.metric-sm {
font-family: var(--font-family-heading);
font-size: var(--text-2xl);
font-weight: var(--weight-semibold);
line-height: 1.2;
font-variant-numeric: tabular-nums;
}
/* ── Mono / Code ── */
.mono {
font-family: var(--font-family-mono);
font-size: var(--text-sm);
}
/* ── Truncation ── */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── Responsive Typography ── */
@media (min-width: 768px) {
.heading-1 {
font-size: calc(var(--text-2xl) * 1.1);
}
}
@media (min-width: 1280px) {
.heading-1 {
font-size: calc(var(--text-2xl) * 1.2);
}
}
/* ============================================================
EVDE BAKIM - UTILITY CLASSES
Common utility helpers used across all pages.
============================================================ */
/* ── Display ── */
.hidden { display: none !important; }
.block { display: block; }
.inline { display: inline; }
.inline-block{ display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
/* ── Flex Utilities ── */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
/* ── Gap ── */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
/* ── Padding ── */
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-4 { padding-top: var(--space-4); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-4 { padding-bottom: var(--space-4); }
/* ── Margin ── */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.ml-auto { margin-left: auto; }
.ml-2 { margin-left: var(--space-2); }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
/* ── Width ── */
.w-full { width: 100%; }
.w-auto { width: auto; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
/* ── Text ── */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold{ font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.whitespace-nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-preline { white-space: pre-line; line-height: 1.6; color: var(--color-gray-700); }
.no-underline { text-decoration: none; }
.align-middle { vertical-align: middle; }
/* ── Colors ── */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--color-success-600); }
.text-warning { color: var(--color-warning-600); }
.text-danger { color: var(--color-danger-600); }
.text-info { color: var(--color-info-600); }
.text-accent { color: var(--color-primary-600); }
.text-gray-400 { color: var(--color-gray-400); }
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-300 { color: var(--color-gray-300); }
/* ── Border ── */
.border { border: 1px solid var(--border-default); }
.border-t { border-top: 1px solid var(--border-default); }
.border-b { border-bottom: 1px solid var(--border-default); }
.border-none { border: none; }
/* ── Radius ── */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
/* ── Shadows ── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
/* ── Overflow ── */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
/* ── Position ── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
/* ── Icon Sizing ── */
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 16px; height: 16px; }
.icon-lg { width: 18px; height: 18px; }
.icon-xl { width: 24px; height: 24px; }
.icon-2xl { width: 28px; height: 28px; }
.icon-3xl { width: 48px; height: 48px; }
/* ── Misc ── */
.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }
.border-b-subtle { border-bottom: 1px solid var(--color-gray-100); }
.col-span-full { grid-column: 1 / -1; }
.accent-success { accent-color: #10b981; }
.accent-primary { accent-color: var(--color-primary-500); }
.no-underline { text-decoration: none; }
.align-middle { vertical-align: middle; }
/* data-href clickable rows */
[data-href] { cursor: pointer; }
/* ── Visibility by breakpoint ── */
.show-mobile { display: block; }
.hide-mobile { display: none; }
.show-tablet { display: none; }
.show-desktop { display: none; }
@media (min-width: 768px) {
.show-mobile { display: none; }
.hide-mobile { display: block; }
.show-tablet { display: block; }
}
@media (min-width: 1024px) {
.show-tablet { display: none; }
.show-desktop { display: block; }
}
/* ── Screen reader only ── */
.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;
}
/* ============================================================
EVDE BAKIM - LIGHT THEME (Default)
This is the default theme. All tokens in tokens.css
already define light mode values. This file exists for:
1. Explicit theme file structure
2. Any light-mode-specific overrides
3. Theme switching architecture support
Usage:
(or no attribute = light)
============================================================ */
[data-theme="light"],
:root:not([data-theme]) {
/* Surface hierarchy */
--bg-body: var(--color-neutral-50);
--bg-surface: var(--color-neutral-0);
--bg-surface-hover: var(--color-neutral-25);
--bg-surface-alt: var(--color-neutral-50);
--bg-surface-raised: var(--color-neutral-0);
/* Sidebar */
--bg-sidebar: var(--color-neutral-950);
--bg-sidebar-hover: rgba(255, 255, 255, 0.06);
--bg-sidebar-active:rgba(255, 255, 255, 0.10);
/* Text */
--text-primary: var(--color-neutral-900);
--text-secondary: var(--color-neutral-600);
--text-tertiary: var(--color-neutral-400);
--text-inverse: var(--color-neutral-0);
--text-sidebar: rgba(255, 255, 255, 0.70);
--text-sidebar-active: rgba(255, 255, 255, 0.95);
/* Borders */
--border-default: var(--color-neutral-200);
--border-light: var(--color-neutral-100);
/* Overlay */
--bg-overlay: rgba(15, 23, 42, 0.5);
--bg-overlay-heavy: rgba(15, 23, 42, 0.75);
/* Shadows — visible on white */
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
--shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.06), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
--shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
--shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
}
/* ============================================================
EVDE BAKIM - DARK THEME
Dark mode token overrides.
NOT fully implemented yet — structure is ready.
Usage:
Or auto-detect:
(uses prefers-color-scheme)
Theme switching in JS:
document.documentElement.setAttribute('data-theme', 'dark');
============================================================ */
[data-theme="dark"] {
/* Surface hierarchy — dark grays, not pure black */
--bg-body: #0a0f1a;
--bg-surface: #111827;
--bg-surface-hover: #1e293b;
--bg-surface-alt: #1e293b;
--bg-surface-raised: #1e293b;
/* Sidebar — even darker or same as body */
--bg-sidebar: #050a14;
--bg-sidebar-hover: rgba(255, 255, 255, 0.06);
--bg-sidebar-active:rgba(255, 255, 255, 0.10);
/* Text — light on dark */
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-tertiary: #64748b;
--text-inverse: #0f172a;
--text-sidebar: rgba(255, 255, 255, 0.60);
--text-sidebar-active: rgba(255, 255, 255, 0.95);
/* Borders — subtle on dark */
--border-default: #1e293b;
--border-light: #1e293b;
/* Overlay */
--bg-overlay: rgba(0, 0, 0, 0.6);
--bg-overlay-heavy: rgba(0, 0, 0, 0.8);
/* Shadows — more subtle in dark mode */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
/* Primary colors — slightly brighter for dark bg */
--color-primary-500: #14b8a6;
--color-primary-600: #0d9488;
/* Focus rings — more visible on dark */
--ring-primary: 0 0 0 3px rgba(20, 184, 166, 0.35);
--ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.30);
/* Semantic text colors adjust for dark */
--text-success: var(--color-success-400);
--text-warning: var(--color-warning-400);
--text-danger: var(--color-danger-400);
--text-info: var(--color-info-400);
--text-link: var(--color-primary-400);
--text-link-hover: var(--color-primary-300);
}
/* Auto dark mode — mirrors [data-theme="dark"] when system prefers dark */
@media (prefers-color-scheme: dark) {
[data-theme="auto"] {
--bg-body: #0a0f1a;
--bg-surface: #111827;
--bg-surface-hover: #1e293b;
--bg-surface-alt: #1e293b;
--bg-surface-raised: #1e293b;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-tertiary: #64748b;
--text-inverse: #0f172a;
--border-default: #1e293b;
--border-light: #1e293b;
--bg-overlay: rgba(0, 0, 0, 0.6);
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
--text-link: var(--color-primary-400);
--ring-primary: 0 0 0 3px rgba(20, 184, 166, 0.35);
}
}
/* ============================================================
EVDE BAKIM - TENANT THEMING SYSTEM v2.0
Multi-tenant branding layer.
Architecture:
Each tenant can override --tenant-* variables safely.
These are injected via:
1. PHP:
2. Or:
3. Or: Tenant-specific CSS file loaded dynamically
ONLY brand-visible areas use --tenant-* variables:
- Login page primary button
- Sidebar accent color
- Logo area
- Tenant name in header
- Email headers/footers
The core UI (buttons, badges, alerts) stays consistent
using the design system palette — NOT tenant colors.
This prevents accessibility and readability issues.
============================================================ */
/* ── Tenant-aware sidebar accent ── */
.sidebar__brand {
border-bottom-color: var(--tenant-primary);
}
.sidebar__nav-item.is-active::before {
background: var(--tenant-sidebar-accent);
}
/* ── Tenant login page ── */
.auth-layout__left {
background: var(--tenant-gradient);
}
.auth-card__logo img {
max-height: var(--tenant-logo-height);
}
/* ── Tenant-branded primary button (login only) ── */
.btn--tenant-primary {
background: var(--tenant-gradient);
color: var(--tenant-text-on-primary);
border: none;
}
.btn--tenant-primary:hover {
filter: brightness(0.9);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
/* ============================================================
EXAMPLE TENANT OVERRIDES
To apply a tenant theme, inject these variables:
============================================================ */
/* ── Sample: Blue Healthcare Clinic ── */
.tenant-theme--blue {
--tenant-primary: #2563eb;
--tenant-primary-hover: #1d4ed8;
--tenant-primary-light: #eff6ff;
--tenant-accent: #3b82f6;
--tenant-gradient: linear-gradient(135deg, #3b82f6, #2563eb);
--tenant-text-on-primary: #ffffff;
--tenant-sidebar-accent: #3b82f6;
}
/* ── Sample: Green Medical Center ── */
.tenant-theme--green {
--tenant-primary: #059669;
--tenant-primary-hover: #047857;
--tenant-primary-light: #ecfdf5;
--tenant-accent: #10b981;
--tenant-gradient: linear-gradient(135deg, #34d399, #059669);
--tenant-text-on-primary: #ffffff;
--tenant-sidebar-accent: #10b981;
}
/* ── Sample: Purple Hospital Group ── */
.tenant-theme--purple {
--tenant-primary: #7c3aed;
--tenant-primary-hover: #6d28d9;
--tenant-primary-light: #f5f3ff;
--tenant-accent: #8b5cf6;
--tenant-gradient: linear-gradient(135deg, #a78bfa, #7c3aed);
--tenant-text-on-primary: #ffffff;
--tenant-sidebar-accent: #8b5cf6;
}
/* ── Sample: Red Emergency Services ── */
.tenant-theme--red {
--tenant-primary: #dc2626;
--tenant-primary-hover: #b91c1c;
--tenant-primary-light: #fef2f2;
--tenant-accent: #ef4444;
--tenant-gradient: linear-gradient(135deg, #f87171, #dc2626);
--tenant-text-on-primary: #ffffff;
--tenant-sidebar-accent: #ef4444;
}
/* ============================================================
EVDE BAKIM - UNIVERSAL STATE SYSTEM v2.0
Global state styling used consistently across ALL modules.
This file provides:
- Status indicator dots
- State-aware card borders
- Status progress indicators
- Record state backgrounds
- Conditional row highlighting
Rule: Every module (patients, staff, tasks, inventory, etc.)
MUST use these classes for status display.
Do NOT create module-specific status colors.
============================================================ */
/* ============================================================
STATUS INDICATOR — Small colored dot
Usage: Next to patient names, in table rows, cards
============================================================ */
.status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: var(--radius-full);
flex-shrink: 0;
}
.status-dot--active { background: var(--status-active-dot); }
.status-dot--inactive { background: var(--status-inactive-dot); }
.status-dot--pending { background: var(--status-pending-dot); }
.status-dot--warning { background: var(--status-warning-dot); }
.status-dot--critical { background: var(--status-critical-dot); }
.status-dot--info { background: var(--status-info-dot); }
.status-dot--completed { background: var(--status-completed-dot); }
.status-dot--scheduled { background: var(--status-scheduled-dot); }
/* Animated dot for live/active states */
.status-dot--live {
position: relative;
}
.status-dot--live::after {
content: '';
position: absolute;
inset: -3px;
border-radius: var(--radius-full);
background: inherit;
opacity: 0;
animation: status-dot-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes status-dot-ping {
0% { transform: scale(1); opacity: 0.5; }
75% { transform: scale(2.2); opacity: 0; }
100% { transform: scale(2.2); opacity: 0; }
}
/* Larger dot (for headers, prominent indicators) */
.status-dot--lg {
width: 10px;
height: 10px;
}
.status-dot--sm {
width: 6px;
height: 6px;
}
/* ============================================================
STATUS LABEL — Inline text with dot
Usage: "● Active", "● Kritik" in any context
============================================================ */
.status-label {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}
.status-label--active { color: var(--status-active-text); }
.status-label--inactive { color: var(--status-inactive-text); }
.status-label--pending { color: var(--status-pending-text); }
.status-label--warning { color: var(--status-warning-text); }
.status-label--critical { color: var(--status-critical-text); }
.status-label--info { color: var(--status-info-text); }
.status-label--completed { color: var(--status-completed-text); }
.status-label--scheduled { color: var(--status-scheduled-text); }
/* ============================================================
STATUS CARD BORDER — Left accent on cards
Usage: Patient card left border = status color
============================================================ */
.state-border-left {
border-left: 3px solid transparent;
}
.state-border-left--active { border-left-color: var(--status-active-dot); }
.state-border-left--inactive { border-left-color: var(--status-inactive-dot); }
.state-border-left--pending { border-left-color: var(--status-pending-dot); }
.state-border-left--warning { border-left-color: var(--status-warning-dot); }
.state-border-left--critical { border-left-color: var(--status-critical-dot); }
.state-border-left--info { border-left-color: var(--status-info-dot); }
.state-border-left--completed { border-left-color: var(--status-completed-dot); }
.state-border-left--scheduled { border-left-color: var(--status-scheduled-dot); }
/* ============================================================
TABLE ROW STATES — Highlight rows by status
Usage: In patient/task/staff tables
============================================================ */
.table tr.state-row--critical {
background: rgba(239, 68, 68, 0.04);
}
.table tr.state-row--critical:hover {
background: rgba(239, 68, 68, 0.08);
}
.table tr.state-row--warning {
background: rgba(249, 115, 22, 0.04);
}
.table tr.state-row--warning:hover {
background: rgba(249, 115, 22, 0.08);
}
.table tr.state-row--pending {
background: rgba(245, 158, 11, 0.04);
}
.table tr.state-row--success,
.table tr.state-row--active {
background: rgba(16, 185, 129, 0.04);
}
.table tr.state-row--inactive {
opacity: 0.65;
}
/* ============================================================
STATUS ICON CONTAINER — Colored circle with icon
Usage: Dashboard cards, detail headers
============================================================ */
.status-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.status-icon svg {
width: 20px;
height: 20px;
}
.status-icon--active { background: var(--status-active-bg); color: var(--status-active-icon); }
.status-icon--inactive { background: var(--status-inactive-bg); color: var(--status-inactive-icon); }
.status-icon--pending { background: var(--status-pending-bg); color: var(--status-pending-icon); }
.status-icon--warning { background: var(--status-warning-bg); color: var(--status-warning-icon); }
.status-icon--critical { background: var(--status-critical-bg); color: var(--status-critical-icon); }
.status-icon--info { background: var(--status-info-bg); color: var(--status-info-icon); }
.status-icon--completed { background: var(--status-completed-bg); color: var(--status-completed-icon); }
.status-icon--scheduled { background: var(--status-scheduled-bg); color: var(--status-scheduled-icon); }
/* Large variant for detail pages */
.status-icon--lg {
width: 56px;
height: 56px;
}
.status-icon--lg svg {
width: 28px;
height: 28px;
}
/* Small variant for lists */
.status-icon--sm {
width: 32px;
height: 32px;
}
.status-icon--sm svg {
width: 16px;
height: 16px;
}
/* ============================================================
PROGRESS STATE — Colored progress bars by status
============================================================ */
.progress__bar--active { background: var(--status-active-dot); }
.progress__bar--pending { background: var(--status-pending-dot); }
.progress__bar--warning { background: var(--status-warning-dot); }
.progress__bar--critical { background: var(--status-critical-dot); }
.progress__bar--info { background: var(--status-info-dot); }
.progress__bar--completed { background: var(--status-completed-dot); }
/* ============================================================
EMPTY STATE — Enhanced (v2.0)
============================================================ */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-16) var(--space-6);
text-align: center;
}
.empty-state__illustration {
width: 120px;
height: 120px;
margin-bottom: var(--space-6);
opacity: 0.6;
}
.empty-state__icon {
width: 64px;
height: 64px;
border-radius: var(--radius-full);
background: var(--color-neutral-100);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-5);
color: var(--color-neutral-400);
}
.empty-state__icon svg {
width: 28px;
height: 28px;
}
.empty-state__title {
font-family: var(--font-family-heading);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.empty-state__text {
font-size: var(--text-sm);
color: var(--text-secondary);
max-width: 360px;
line-height: var(--leading-relaxed);
margin-bottom: var(--space-6);
}
.empty-state__actions {
display: flex;
gap: var(--space-3);
}
/* Compact empty state for cards/tables */
.empty-state--compact {
padding: var(--space-8) var(--space-4);
}
.empty-state--compact .empty-state__icon {
width: 48px;
height: 48px;
}
.empty-state--compact .empty-state__icon svg {
width: 22px;
height: 22px;
}
/* ============================================================
TIMELINE COMPONENT — Activity feed, history
============================================================ */
.timeline {
position: relative;
padding-left: var(--space-8);
}
.timeline::before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: 0;
width: 2px;
background: var(--border-light);
}
.timeline__item {
position: relative;
padding-bottom: var(--space-6);
}
.timeline__item:last-child {
padding-bottom: 0;
}
.timeline__dot {
position: absolute;
left: calc(-1 * var(--space-8) + 8px);
top: 2px;
width: 16px;
height: 16px;
border-radius: var(--radius-full);
border: 3px solid var(--bg-surface);
z-index: 1;
}
.timeline__dot--active { background: var(--status-active-dot); }
.timeline__dot--pending { background: var(--status-pending-dot); }
.timeline__dot--warning { background: var(--status-warning-dot); }
.timeline__dot--critical { background: var(--status-critical-dot); }
.timeline__dot--info { background: var(--status-info-dot); }
.timeline__dot--completed { background: var(--status-completed-dot); }
.timeline__dot--default { background: var(--color-neutral-300); }
.timeline__content {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: var(--space-4);
}
.timeline__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-2);
}
.timeline__title {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.timeline__time {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.timeline__body {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-normal);
}
/* Simple timeline (no cards, just text) */
.timeline--simple .timeline__content {
background: none;
border: none;
padding: 0;
}
/* ============================================================
ACTIVITY FEED ITEMS — Enhanced (v2.0)
============================================================ */
.activity-item {
display: flex;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
transition: background var(--transition-fast);
}
.activity-item:hover {
background: var(--color-neutral-25);
}
.activity-item__avatar {
width: 36px;
height: 36px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: var(--text-xs);
font-weight: var(--weight-bold);
color: white;
}
.activity-item__content {
flex: 1;
min-width: 0;
}
.activity-item__text {
font-size: var(--text-sm);
color: var(--text-primary);
line-height: var(--leading-normal);
}
.activity-item__text strong {
font-weight: var(--weight-semibold);
}
.activity-item__meta {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-1);
}
.activity-item__time {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.activity-item__tag {
font-size: 10px;
font-weight: var(--weight-semibold);
padding: 1px 6px;
border-radius: var(--radius-full);
}
/* ============================================================
EVDE BAKIM - APP SHELL v2.0
Main layout: sidebar + header + content area.
Mobile-first with progressive enhancement.
Layout:
┌──────────┬──────────────────────────────────────┐
│ │ header (sticky) │
│ sidebar ├──────────────────────────────────────┤
│ (fixed) │ .app__content (scrollable) │
│ │ breadcrumb │
│ │ page-header │
│ │ content… │
└──────────┴──────────────────────────────────────┘
Mobile: sidebar hidden, bottom-nav visible
Tablet: sidebar 72px (icons), no bottom-nav
Desktop: sidebar 260px, full labels
============================================================ */
/* ── App Container ── */
.app {
display: flex;
min-height: 100vh;
min-height: 100dvh;
background: var(--bg-body);
}
/* ── Main Wrapper (right side of sidebar) ── */
.app__main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0; /* Prevent flex overflow */
min-height: 100vh;
min-height: 100dvh;
width: 100%;
}
/* ── Content Area ── */
.app__content {
flex: 1;
padding: var(--space-4);
padding-bottom: calc(var(--bottom-nav-height) + var(--space-6));
width: 100%;
max-width: var(--content-max-width);
margin: 0 auto;
}
/* Auth/public pages — no sidebar, centered */
.app__content--centered {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-bottom: var(--space-6);
}
/* Full-width content (no max-width constraint) */
.app__content--full {
max-width: 100%;
}
/* ── Page Header ── */
.page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
margin-bottom: var(--space-6);
}
.page-header__text {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.page-header__content {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.page-header__desc {
font-size: var(--text-sm);
color: var(--text-secondary);
max-width: 540px;
line-height: var(--leading-relaxed);
}
.page-header__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
.page-header__title {
font-family: var(--font-family-heading);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--text-primary);
line-height: var(--leading-tight);
}
.page-header__subtitle {
font-size: var(--text-sm);
color: var(--text-secondary);
margin-top: var(--space-1);
max-width: 540px;
line-height: var(--leading-relaxed);
}
.page-header__actions {
display: flex;
align-items: center;
gap: var(--space-3);
flex-shrink: 0;
}
/* ── Breadcrumb ── */
.breadcrumb {
display: flex;
align-items: center;
gap: var(--space-1-5);
font-size: var(--text-sm);
color: var(--text-tertiary);
margin-bottom: var(--space-4);
}
.breadcrumb__item {
color: var(--text-tertiary);
transition: color var(--transition-fast);
}
.breadcrumb__item:hover {
color: var(--text-link);
}
.breadcrumb__item--active {
color: var(--text-secondary);
font-weight: var(--weight-medium);
}
.breadcrumb__separator {
color: var(--color-neutral-300);
font-size: var(--text-xs);
}
/* ── Content Grid ── */
.content-grid {
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
}
.content-grid--2 {
grid-template-columns: 1fr;
}
.content-grid--3 {
grid-template-columns: 1fr;
}
.content-grid--4 {
grid-template-columns: 1fr;
}
/* ── Section ── */
.section {
margin-bottom: var(--space-6);
}
.section__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
gap: var(--space-3);
}
.section__title {
font-family: var(--font-family-heading);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.section__subtitle {
font-size: var(--text-sm);
color: var(--text-secondary);
}
/* ── Content Panel (white card wrapper) ── */
.panel {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-card);
overflow: hidden;
}
.panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-5);
border-bottom: 1px solid var(--border-light);
gap: var(--space-3);
}
.panel__title {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.panel__actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.panel__body {
padding: var(--space-5);
}
.panel__body--flush {
padding: 0;
}
.panel__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--border-light);
background: var(--bg-surface-alt);
}
/* ── Filter Bar ── */
.filter-bar {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) 0;
flex-wrap: wrap;
}
.filter-bar__search {
flex: 1;
min-width: 200px;
max-width: 320px;
}
.filter-bar__actions {
display: flex;
align-items: center;
gap: var(--space-2);
margin-left: auto;
}
/* ── Stats Row (horizontal KPIs) ── */
.stats-row {
display: flex;
gap: var(--space-4);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding-bottom: var(--space-2);
margin-bottom: var(--space-4);
}
.stats-row > * {
flex-shrink: 0;
scroll-snap-align: start;
}
/* ── Stat Card (KPI mini card inside stats-row) ── */
.stat-card {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-xl);
min-width: 150px;
transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.stat-card:hover {
border-color: var(--border-default);
box-shadow: var(--shadow-sm);
}
.stat-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-lg);
flex-shrink: 0;
}
.stat-card__icon svg {
width: 22px;
height: 22px;
}
.stat-card__icon--primary {
background: var(--color-primary-50);
color: var(--color-primary-600);
}
.stat-card__icon--success {
background: var(--color-success-50);
color: var(--color-success-600);
}
.stat-card__icon--info {
background: var(--color-info-50);
color: var(--color-info-600);
}
.stat-card__icon--warning {
background: var(--color-warning-50);
color: var(--color-warning-600);
}
.stat-card__icon--danger {
background: var(--color-danger-50);
color: var(--color-danger-600);
}
.stat-card__icon--blue {
background: var(--color-info-50);
color: var(--color-info-600);
}
.stat-card__icon--green {
background: var(--color-success-50);
color: var(--color-success-600);
}
.stat-card__icon--purple {
background: #f5f3ff;
color: #7c3aed;
}
.stat-card__icon--teal {
background: var(--color-primary-50);
color: var(--color-primary-600);
}
.stat-card__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.stat-card__value {
font-size: var(--text-xl);
font-weight: var(--weight-bold);
color: var(--text-primary);
line-height: 1;
}
.stat-card__label {
font-size: var(--text-xs);
color: var(--text-tertiary);
white-space: nowrap;
}
/* ── Empty State — see css/states/states.css for full component ── */
/* ── Overlay ── */
.overlay {
position: fixed;
inset: 0;
background: var(--bg-overlay);
z-index: var(--z-overlay);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
}
.overlay.is-active {
opacity: 1;
visibility: visible;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
TABLET (768px+)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 768px) {
.app__content {
padding: var(--space-6);
padding-bottom: var(--space-6);
}
.content-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
.content-grid--3 {
grid-template-columns: repeat(2, 1fr);
}
.content-grid--4 {
grid-template-columns: repeat(2, 1fr);
}
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DESKTOP (1024px+)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1024px) {
.app__content {
padding: var(--space-8);
}
.content-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.content-grid--4 {
grid-template-columns: repeat(3, 1fr);
}
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
LARGE DESKTOP (1280px+)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1280px) {
.content-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PRINT STYLES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media print {
.sidebar,
.header,
.bottom-nav,
.fab,
.overlay,
.page-header__actions,
.filter-bar {
display: none !important;
}
.app__main {
margin-left: 0 !important;
}
.app__content {
padding: 0 !important;
max-width: 100% !important;
}
.panel {
border: 1px solid #ddd;
box-shadow: none;
break-inside: avoid;
}
}
/* ============================================================
EVDE BAKIM - HEADER v2.0
Top navigation bar — mobile & desktop variants.
Sticky, with backdrop blur for premium layering.
============================================================ */
.header {
position: sticky;
top: 0;
z-index: var(--z-header);
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height-mobile);
padding: 0 var(--space-4);
background: rgba(255, 255, 255, 0.92);
border-bottom: 1px solid var(--border-light);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* ── Left Section ── */
.header__left {
display: flex;
align-items: center;
gap: var(--space-3);
}
.header__menu-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
color: var(--text-secondary);
transition: all var(--transition-fast);
}
.header__menu-btn:hover {
background: var(--color-neutral-100);
color: var(--text-primary);
}
.header__menu-btn svg {
width: 22px;
height: 22px;
}
.header__page-title {
font-family: var(--font-family-heading);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
/* ── Right Section ── */
.header__right {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* ── Search ── */
.header__search {
display: none;
position: relative;
}
.header__search-input {
width: 240px;
height: 38px;
padding: 0 var(--space-4) 0 var(--space-10);
background: var(--color-neutral-50);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
font-size: var(--text-sm);
color: var(--text-primary);
transition: all var(--transition-base);
}
.header__search-input:focus {
background: var(--bg-surface);
border-color: var(--border-focus);
box-shadow: var(--ring-primary);
width: 300px;
}
.header__search-icon {
position: absolute;
left: var(--space-3);
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--text-tertiary);
pointer-events: none;
}
.header__search-shortcut {
position: absolute;
right: var(--space-3);
top: 50%;
transform: translateY(-50%);
font-size: var(--text-xs);
font-family: var(--font-family-mono);
color: var(--text-tertiary);
background: var(--color-neutral-100);
padding: 2px 6px;
border-radius: var(--radius-xs);
border: 1px solid var(--border-default);
}
/* ── Icon Button (notification, etc.) ── */
.header__icon-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
color: var(--text-secondary);
transition: all var(--transition-fast);
}
.header__icon-btn:hover {
background: var(--color-neutral-100);
color: var(--text-primary);
}
.header__icon-btn svg {
width: 20px;
height: 20px;
}
.header__icon-btn .badge-dot {
position: absolute;
top: 8px;
right: 8px;
width: 8px;
height: 8px;
background: var(--color-danger-500);
border: 2px solid var(--bg-surface);
border-radius: var(--radius-full);
}
/* ── User Avatar ── */
.header__avatar {
display: flex;
align-items: center;
gap: var(--space-2-5);
padding: var(--space-1-5) var(--space-2);
border-radius: var(--radius-lg);
cursor: pointer;
transition: background var(--transition-fast);
}
.header__avatar:hover {
background: var(--color-neutral-50);
}
.header__avatar-img {
width: 34px;
height: 34px;
border-radius: var(--radius-full);
object-fit: cover;
background: var(--color-primary-100);
}
.header__avatar-initials {
width: 34px;
height: 34px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}
.header__avatar-info {
display: none;
}
.header__avatar-name {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-primary);
line-height: var(--leading-tight);
}
.header__avatar-role {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
/* ── Mobile page title ── */
.header__page-title--mobile {
font-family: var(--font-family-heading);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
/* ── Dropdown Menu (user profile, etc.) ── */
.dropdown {
position: relative;
}
.dropdown__menu {
position: absolute;
top: calc(100% + var(--space-2));
z-index: var(--z-dropdown);
min-width: 200px;
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-1-5);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: all var(--transition-fast);
}
.dropdown__menu--right {
right: 0;
}
.dropdown__menu--left {
left: 0;
}
.dropdown.is-open .dropdown__menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown__item {
display: flex;
align-items: center;
gap: var(--space-2-5);
padding: var(--space-2-5) var(--space-3);
border-radius: var(--radius-md);
font-size: var(--text-sm);
color: var(--text-secondary);
text-decoration: none;
transition: all var(--transition-fast);
cursor: pointer;
min-height: 38px;
}
.dropdown__item:hover {
background: var(--color-neutral-50);
color: var(--text-primary);
}
.dropdown__item--danger {
color: var(--color-danger-600);
}
.dropdown__item--danger:hover {
background: var(--color-danger-50);
color: var(--color-danger-700);
}
.dropdown__divider {
height: 1px;
background: var(--border-light);
margin: var(--space-1-5) 0;
}
/* ━━━ TABLET ━━━ */
@media (min-width: 768px) {
.header {
height: var(--header-height);
padding: 0 var(--space-6);
}
.header__menu-btn {
display: none;
}
.header__page-title--mobile {
display: none;
}
.header__search {
display: block;
}
.header__avatar-info {
display: flex;
flex-direction: column;
}
}
/* ━━━ DESKTOP ━━━ */
@media (min-width: 1024px) {
.header {
padding: 0 var(--space-8);
}
.header__search-input {
width: 280px;
}
.header__search-input:focus {
width: 360px;
}
}
/* ============================================================
EVDE BAKIM - SIDEBAR v2.0
Dark sidebar navigation — hidden on mobile, visible on tablet+.
Mobile: drawer overlay via JS toggle (.is-open)
Tablet: collapsed 72px icon-only with tooltips
Desktop: full 260px with labels
============================================================ */
.sidebar {
position: fixed;
top: 0;
left: 0;
z-index: var(--z-sidebar);
width: var(--sidebar-width);
height: 100vh;
height: 100dvh;
background: var(--bg-sidebar);
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform var(--transition-smooth);
overflow: hidden;
}
.sidebar.is-open {
transform: translateX(0);
}
/* ── Brand / Logo ── */
.sidebar__brand {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-5) var(--space-5);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
}
.sidebar__logo {
width: 36px;
height: 36px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sidebar__logo svg {
width: 20px;
height: 20px;
color: white;
}
.sidebar__brand-text {
display: flex;
flex-direction: column;
}
.sidebar__brand-name {
font-family: var(--font-family-heading);
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--text-sidebar-active);
line-height: var(--leading-tight);
}
.sidebar__brand-label {
font-size: var(--text-xs);
color: var(--text-sidebar);
opacity: 0.5;
}
/* ── Tenant Selector (Super Admin) ── */
.sidebar__tenant-select {
margin: var(--space-3) var(--space-4);
padding: var(--space-2-5) var(--space-3);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-md);
display: flex;
align-items: center;
gap: var(--space-2-5);
cursor: pointer;
transition: background var(--transition-fast);
}
.sidebar__tenant-select:hover {
background: rgba(255, 255, 255, 0.10);
}
.sidebar__tenant-icon {
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
background: var(--color-secondary-500);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sidebar__tenant-icon svg {
width: 14px;
height: 14px;
color: white;
}
.sidebar__tenant-name {
flex: 1;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-sidebar-active);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar__tenant-arrow {
width: 16px;
height: 16px;
color: var(--text-sidebar);
opacity: 0.5;
flex-shrink: 0;
}
/* ── Navigation Section ── */
.sidebar__nav {
flex: 1;
overflow-y: auto;
padding: var(--space-3) 0;
scrollbar-width: none;
}
.sidebar__nav::-webkit-scrollbar {
display: none;
}
.sidebar__nav-group {
margin-bottom: var(--space-2);
}
.sidebar__nav-label {
padding: var(--space-3) var(--space-5) var(--space-2);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: rgba(255, 255, 255, 0.30);
}
/* ── Nav Item ── */
.sidebar__nav-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2-5) var(--space-5);
margin: 0 var(--space-2);
border-radius: var(--radius-md);
color: var(--text-sidebar);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
text-decoration: none;
transition: all var(--transition-fast);
cursor: pointer;
position: relative;
min-height: 42px; /* Touch target for tablet */
}
.sidebar__nav-item:hover {
background: var(--bg-sidebar-hover);
color: var(--text-sidebar-active);
}
.sidebar__nav-item.is-active {
background: var(--bg-sidebar-active);
color: var(--text-sidebar-active);
}
.sidebar__nav-item.is-active::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 20px;
background: var(--color-primary-400);
border-radius: 0 3px 3px 0;
}
.sidebar__nav-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
opacity: 0.7;
}
.sidebar__nav-item.is-active .sidebar__nav-icon {
opacity: 1;
}
.sidebar__nav-text {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar__nav-badge {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 2px 8px;
border-radius: var(--radius-full);
background: rgba(239, 68, 68, 0.15);
color: #fca5a5;
line-height: 1.4;
}
.sidebar__nav-badge--info {
background: rgba(0, 151, 167, 0.15);
color: var(--color-primary-300);
}
/* ── Sidebar Footer ── */
.sidebar__footer {
padding: var(--space-3) var(--space-4);
border-top: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
}
.sidebar__user {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2-5) var(--space-2);
border-radius: var(--radius-md);
transition: background var(--transition-fast);
cursor: pointer;
}
.sidebar__user:hover {
background: var(--bg-sidebar-hover);
}
.sidebar__user-avatar {
width: 34px;
height: 34px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--color-primary-400), var(--color-secondary-500));
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: white;
flex-shrink: 0;
}
.sidebar__user-info {
flex: 1;
min-width: 0;
}
.sidebar__user-name {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-sidebar-active);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar__user-email {
font-size: var(--text-xs);
color: var(--text-sidebar);
opacity: 0.6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar__user-menu {
width: 18px;
height: 18px;
color: var(--text-sidebar);
opacity: 0.4;
flex-shrink: 0;
}
/* ━━━ TABLET (768px+) — Sidebar visible, collapsed with tooltips ━━━ */
@media (min-width: 768px) {
.sidebar {
transform: translateX(0);
width: var(--sidebar-width-collapsed);
}
.sidebar__brand-text,
.sidebar__nav-label,
.sidebar__nav-text,
.sidebar__nav-badge,
.sidebar__tenant-select,
.sidebar__user-info,
.sidebar__user-menu,
.sidebar__brand-label {
display: none;
}
.sidebar__nav-item {
justify-content: center;
padding: var(--space-2-5) var(--space-3);
margin: var(--space-0-5) var(--space-2);
}
.sidebar__nav-icon {
width: 22px;
height: 22px;
}
.sidebar__user {
justify-content: center;
}
.app__main {
margin-left: var(--sidebar-width-collapsed);
}
/* Tooltip on hover for collapsed items */
.sidebar__nav-item[title] {
position: relative;
}
.sidebar__nav-item[title]::after {
content: attr(title);
position: absolute;
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
padding: 6px 12px;
background: var(--bg-elevated);
color: var(--text-primary);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 150ms ease;
z-index: 9999;
}
.sidebar__nav-item[title]:hover::after {
opacity: 1;
}
}
/* ━━━ DESKTOP (1024px+) — Full sidebar, no tooltips needed ━━━ */
@media (min-width: 1024px) {
.sidebar {
width: var(--sidebar-width);
}
.sidebar__brand-text,
.sidebar__nav-label,
.sidebar__nav-text,
.sidebar__nav-badge,
.sidebar__tenant-select,
.sidebar__user-info,
.sidebar__user-menu,
.sidebar__brand-label {
display: flex;
}
.sidebar__nav-label {
display: block;
}
.sidebar__nav-badge {
display: inline-flex;
}
.sidebar__nav-item {
justify-content: flex-start;
padding: var(--space-2-5) var(--space-5);
margin: 0 var(--space-2);
}
.sidebar__user {
justify-content: flex-start;
}
.app__main {
margin-left: var(--sidebar-width);
}
/* Disable CSS tooltips when labels are visible */
.sidebar__nav-item[title]::after {
display: none;
}
}
/* ============================================================
EVDE BAKIM - BOTTOM NAVIGATION v2.0
Mobile bottom tab bar — visible only on mobile.
Large touch targets (minimum 48px) for nurse/tablet use.
"More" item uses data-action="openSidebar" (handled by JS).
============================================================ */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--z-sticky);
height: var(--bottom-nav-height);
background: var(--bg-surface);
border-top: 1px solid var(--border-light);
display: flex;
align-items: stretch;
padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav__item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-0-5);
color: var(--text-tertiary);
text-decoration: none;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
transition: color var(--transition-fast);
min-height: 48px; /* Accessibility touch target */
position: relative;
-webkit-tap-highlight-color: transparent;
}
.bottom-nav__item:hover,
.bottom-nav__item:active {
color: var(--color-primary-600);
}
.bottom-nav__item.is-active {
color: var(--color-primary-600);
}
.bottom-nav__item.is-active::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 2px;
background: var(--color-primary-500);
border-radius: 0 0 2px 2px;
}
.bottom-nav__icon {
width: 22px;
height: 22px;
}
.bottom-nav__label {
line-height: 1;
}
/* Badge on nav item */
.bottom-nav__badge {
position: absolute;
top: 6px;
left: 50%;
margin-left: 6px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: var(--color-danger-500);
color: white;
font-size: 10px;
font-weight: var(--weight-bold);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* ── FAB (Floating Action Button) ── */
.fab {
position: fixed;
bottom: calc(var(--bottom-nav-height) + var(--space-4) + env(safe-area-inset-bottom, 0));
right: var(--space-4);
z-index: var(--z-fab);
width: var(--fab-size);
height: var(--fab-size);
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
color: white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-primary), var(--shadow-lg);
transition: all var(--transition-base);
-webkit-tap-highlight-color: transparent;
}
.fab:hover {
transform: scale(1.05);
box-shadow: var(--shadow-primary), var(--shadow-xl);
}
.fab:active {
transform: scale(0.98);
}
.fab svg {
width: 24px;
height: 24px;
}
/* ━━━ TABLET+ — Hide bottom nav, hide FAB (use sidebar instead) ━━━ */
@media (min-width: 768px) {
.bottom-nav {
display: none;
}
.fab {
bottom: var(--space-6);
right: var(--space-6);
}
}
@media (min-width: 1024px) {
.fab {
display: none;
}
}
/* ============================================================
EVDE BAKIM - BUTTONS v2.0
Premium button system with:
- Soft gradients for depth
- Hover glow effects
- Smooth spring transitions
- Accessible disabled states
- Loading spinner with pulse
- 44px minimum touch targets (healthcare/tablet)
============================================================ */
/* ── Base Button ── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: 44px;
padding: 0 var(--space-5);
font-family: var(--font-family-primary);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
line-height: 1;
border-radius: var(--radius-button);
border: 1px solid transparent;
cursor: pointer;
transition:
all var(--transition-base),
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
user-select: none;
-webkit-tap-highlight-color: transparent;
text-decoration: none;
position: relative;
overflow: hidden;
letter-spacing: 0.01em;
}
.btn:active {
transform: scale(0.97);
transition-duration: 80ms;
}
.btn:disabled,
.btn.is-disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
filter: grayscale(0.2);
}
.btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* ── Primary — Signature gradient ── */
.btn--primary {
background: linear-gradient(135deg, #14b8a6, #0d9488);
color: white;
border-color: rgba(13, 148, 136, 0.5);
box-shadow:
var(--shadow-xs),
inset 0 1px 0 rgba(255, 255, 255, 0.15),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.btn--primary:hover {
background: linear-gradient(135deg, #0d9488, #0f766e);
box-shadow:
0 4px 16px rgba(13, 148, 136, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}
.btn--primary:active {
transform: translateY(0) scale(0.98);
box-shadow:
0 2px 6px rgba(13, 148, 136, 0.25),
inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.btn--primary:focus-visible {
box-shadow: var(--ring-primary), 0 4px 16px rgba(13, 148, 136, 0.25);
}
/* ── Secondary ── */
.btn--secondary {
background: var(--bg-surface);
color: var(--text-primary);
border-color: var(--border-default);
box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.btn--secondary:hover {
background: var(--color-neutral-50);
border-color: var(--color-neutral-300);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.btn--secondary:active {
transform: translateY(0) scale(0.98);
background: var(--color-neutral-100);
}
.btn--secondary:focus-visible {
box-shadow: var(--ring-primary);
}
/* ── Ghost ── */
.btn--ghost {
background: transparent;
color: var(--text-secondary);
border-color: transparent;
}
.btn--ghost:hover {
background: var(--color-neutral-100);
color: var(--text-primary);
}
.btn--ghost:active {
background: var(--color-neutral-200);
}
/* ── Danger — Gradient with urgency ── */
.btn--danger {
background: linear-gradient(135deg, #f87171, #ef4444);
color: white;
border-color: rgba(239, 68, 68, 0.5);
box-shadow:
var(--shadow-xs),
inset 0 1px 0 rgba(255, 255, 255, 0.15),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.btn--danger:hover {
background: linear-gradient(135deg, #ef4444, #dc2626);
box-shadow: 0 4px 16px rgba(239, 68, 68, 0.30);
transform: translateY(-1px);
}
.btn--danger:active {
transform: translateY(0) scale(0.98);
}
.btn--danger:focus-visible {
box-shadow: var(--ring-danger);
}
/* ── Danger Outline ── */
.btn--danger-outline {
background: transparent;
color: var(--color-danger-600);
border-color: var(--color-danger-200);
}
.btn--danger-outline:hover {
background: var(--color-danger-50);
border-color: var(--color-danger-300);
}
/* ── Success — Gradient with confidence ── */
.btn--success {
background: linear-gradient(135deg, #34d399, #10b981);
color: white;
border-color: rgba(16, 185, 129, 0.5);
box-shadow:
var(--shadow-xs),
inset 0 1px 0 rgba(255, 255, 255, 0.15),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.btn--success:hover {
background: linear-gradient(135deg, #10b981, #059669);
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.30);
transform: translateY(-1px);
}
.btn--success:active {
transform: translateY(0) scale(0.98);
}
/* ── Warning ── */
.btn--warning {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: var(--color-neutral-900);
border-color: rgba(245, 158, 11, 0.5);
box-shadow:
var(--shadow-xs),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn--warning:hover {
background: linear-gradient(135deg, #f59e0b, #d97706);
box-shadow: 0 4px 16px rgba(245, 158, 11, 0.30);
transform: translateY(-1px);
}
/* ── Soft / Tinted Button ── */
.btn--soft-primary {
background: rgba(13, 148, 136, 0.10);
color: var(--color-primary-700);
border-color: transparent;
}
.btn--soft-primary:hover {
background: rgba(13, 148, 136, 0.18);
}
.btn--soft-danger {
background: rgba(239, 68, 68, 0.10);
color: var(--color-danger-700);
border-color: transparent;
}
.btn--soft-danger:hover {
background: rgba(239, 68, 68, 0.18);
}
/* ── Outline — Border only, transparent bg ── */
.btn--outline {
background: var(--bg-surface);
color: var(--text-secondary);
border-color: var(--border-default);
box-shadow: var(--shadow-xs);
}
.btn--outline:hover {
background: var(--color-neutral-50);
border-color: var(--color-neutral-300);
color: var(--text-primary);
}
.btn--outline:active {
background: var(--color-neutral-100);
}
/* ── Active state (e.g. view toggle) ── */
.btn--active,
.btn--outline.btn--active {
background: var(--color-primary-50);
color: var(--color-primary-700);
border-color: var(--color-primary-300);
}
/* ── Block — Full width ── */
.btn--block {
display: flex;
width: 100%;
}
/* ── Size Variants ── */
.btn--xs {
height: 28px;
padding: 0 var(--space-2);
font-size: 11px;
border-radius: var(--radius-sm);
}
.btn--sm {
height: 36px;
padding: 0 var(--space-3);
font-size: var(--text-xs);
border-radius: var(--radius-md);
}
.btn--md {
height: 40px;
padding: 0 var(--space-4);
font-size: var(--text-sm);
}
.btn--lg {
height: 50px;
padding: 0 var(--space-6);
font-size: var(--text-base);
}
.btn--xl {
height: 56px;
padding: 0 var(--space-8);
font-size: var(--text-md);
border-radius: var(--radius-xl);
}
/* ── Icon Only ── */
.btn--icon {
width: 44px;
padding: 0;
}
.btn--icon.btn--sm {
width: 36px;
}
.btn--icon.btn--lg {
width: 50px;
}
/* ── Full Width ── */
.btn--full {
width: 100%;
}
/* ── Loading State ── */
.btn.is-loading {
color: transparent;
pointer-events: none;
}
.btn.is-loading::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: var(--radius-full);
animation: btn-spin 600ms linear infinite;
color: white;
}
.btn--secondary.is-loading::after {
color: var(--text-secondary);
}
@keyframes btn-spin {
to { transform: rotate(360deg); }
}
/* ── Button Group ── */
.btn-group {
display: flex;
gap: var(--space-2);
}
.btn-group--sm {
gap: var(--space-1-5);
}
/* ============================================================
EVDE BAKIM - BADGES v2.0
Enterprise badge system with:
- Semi-transparent backgrounds with subtle blur
- Universal status token integration
- Icon support
- Animated dot variants
- Minimal border for definition
- Role badges for healthcare staff
============================================================ */
/* ── Base Badge ── */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 3px var(--space-2-5);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
line-height: 1.6;
border-radius: var(--radius-badge);
white-space: nowrap;
letter-spacing: 0.01em;
border: 1px solid transparent;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.badge svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
/* ── Dot Badge ── */
.badge--dot::before {
content: '';
width: 6px;
height: 6px;
border-radius: var(--radius-full);
flex-shrink: 0;
}
/* ── Animated Dot (for active/critical states) ── */
.badge--pulse::before {
animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.75); }
}
/* ── Variants — Using status tokens ── */
/* Default / Neutral */
.badge--default {
background: var(--status-inactive-bg);
color: var(--status-inactive-text);
border-color: var(--status-inactive-border);
}
.badge--default.badge--dot::before {
background: var(--status-inactive-dot);
}
/* Primary */
.badge--primary {
background: var(--status-completed-bg);
color: var(--status-completed-text);
border-color: var(--status-completed-border);
}
.badge--primary.badge--dot::before {
background: var(--status-completed-dot);
}
/* Success / Active */
.badge--success {
background: var(--status-active-bg);
color: var(--status-active-text);
border-color: var(--status-active-border);
}
.badge--success.badge--dot::before {
background: var(--status-active-dot);
}
/* Warning / Pending */
.badge--warning {
background: var(--status-pending-bg);
color: var(--status-pending-text);
border-color: var(--status-pending-border);
}
.badge--warning.badge--dot::before {
background: var(--status-pending-dot);
}
/* Danger / Critical */
.badge--danger {
background: var(--status-critical-bg);
color: var(--status-critical-text);
border-color: var(--status-critical-border);
}
.badge--danger.badge--dot::before {
background: var(--status-critical-dot);
}
/* Info / Blue */
.badge--info {
background: var(--status-info-bg);
color: var(--status-info-text);
border-color: var(--status-info-border);
}
.badge--info.badge--dot::before {
background: var(--status-info-dot);
}
/* Secondary / Purple */
.badge--secondary {
background: var(--status-scheduled-bg);
color: var(--status-scheduled-text);
border-color: var(--status-scheduled-border);
}
.badge--secondary.badge--dot::before {
background: var(--status-scheduled-dot);
}
/* Orange / Warning-alt */
.badge--orange {
background: var(--status-warning-bg);
color: var(--status-warning-text);
border-color: var(--status-warning-border);
}
.badge--orange.badge--dot::before {
background: var(--status-warning-dot);
}
/* ── Size Variants ── */
.badge--lg {
padding: var(--space-1) var(--space-3);
font-size: var(--text-sm);
}
.badge--sm {
padding: 1px var(--space-2);
font-size: 10px;
}
/* ── Outline Style ── */
.badge--outline {
background: transparent;
border: 1px solid currentColor;
opacity: 0.8;
backdrop-filter: none;
}
/* ── Status Badges (Universal across all modules) ── */
.badge-status--active {
background: var(--status-active-bg);
color: var(--status-active-text);
border-color: var(--status-active-border);
}
.badge-status--inactive {
background: var(--status-inactive-bg);
color: var(--status-inactive-text);
border-color: var(--status-inactive-border);
}
.badge-status--critical {
background: var(--status-critical-bg);
color: var(--status-critical-text);
border-color: var(--status-critical-border);
}
.badge-status--pending {
background: var(--status-pending-bg);
color: var(--status-pending-text);
border-color: var(--status-pending-border);
}
.badge-status--warning {
background: var(--status-warning-bg);
color: var(--status-warning-text);
border-color: var(--status-warning-border);
}
.badge-status--scheduled {
background: var(--status-scheduled-bg);
color: var(--status-scheduled-text);
border-color: var(--status-scheduled-border);
}
.badge-status--completed {
background: var(--status-completed-bg);
color: var(--status-completed-text);
border-color: var(--status-completed-border);
}
.badge-status--info {
background: var(--status-info-bg);
color: var(--status-info-text);
border-color: var(--status-info-border);
}
/* ── Role Badges ── */
.badge-role--admin {
background: rgba(85, 99, 216, 0.10);
color: var(--color-secondary-700);
border-color: rgba(85, 99, 216, 0.20);
}
.badge-role--nurse {
background: rgba(13, 148, 136, 0.10);
color: var(--color-primary-700);
border-color: rgba(13, 148, 136, 0.20);
}
.badge-role--doctor {
background: rgba(16, 185, 129, 0.10);
color: var(--color-success-700);
border-color: rgba(16, 185, 129, 0.20);
}
.badge-role--caregiver {
background: rgba(249, 115, 22, 0.10);
color: var(--color-orange-700);
border-color: rgba(249, 115, 22, 0.20);
}
.badge-role--supervisor {
background: rgba(59, 130, 246, 0.10);
color: var(--color-info-700);
border-color: rgba(59, 130, 246, 0.20);
}
/* ============================================================
EVDE BAKIM - FORM INPUTS
Large, accessible inputs optimized for tablet data entry.
Minimum 48px touch targets.
============================================================ */
/* ── Form Group ── */
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-1-5);
margin-bottom: var(--space-5);
}
.form-group--inline {
flex-direction: row;
align-items: center;
gap: var(--space-3);
}
/* ── Label ── */
.form-label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-secondary);
line-height: var(--leading-tight);
}
.form-label--required::after {
content: ' *';
color: var(--color-danger-500);
}
/* ── Helper / Error Text ── */
.form-helper {
font-size: var(--text-xs);
color: var(--text-tertiary);
line-height: var(--leading-normal);
}
.form-error {
font-size: var(--text-xs);
color: var(--color-danger-600);
line-height: var(--leading-normal);
display: flex;
align-items: center;
gap: var(--space-1);
}
.form-error svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* ── Base Input ── */
.input {
width: 100%;
height: 48px; /* Large touch target */
padding: 0 var(--space-4);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-input);
font-size: var(--text-base);
color: var(--text-primary);
transition: all var(--transition-base);
-webkit-appearance: none;
appearance: none;
}
.input:hover {
border-color: var(--color-neutral-300);
}
.input:focus {
border-color: var(--border-focus);
box-shadow: var(--ring-primary);
outline: none;
}
.input.is-error {
border-color: var(--border-error);
}
.input.is-error:focus {
box-shadow: var(--ring-danger);
}
.input:disabled {
background: var(--color-neutral-50);
color: var(--text-tertiary);
cursor: not-allowed;
}
/* ── Small Input ── */
.input--sm {
height: 40px;
padding: 0 var(--space-3);
font-size: var(--text-sm);
}
/* ── Large Input ── */
.input--lg {
height: 56px;
padding: 0 var(--space-5);
font-size: var(--text-md);
border-radius: var(--radius-lg);
}
/* ── Input with Icon ── */
.input-wrapper {
position: relative;
}
.input-wrapper .input {
padding-left: var(--space-10);
}
.input-wrapper__icon {
position: absolute;
left: var(--space-3);
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
color: var(--text-tertiary);
pointer-events: none;
}
.input-wrapper--right .input {
padding-left: var(--space-4);
padding-right: var(--space-10);
}
.input-wrapper--right .input-wrapper__icon {
left: auto;
right: var(--space-3);
}
/* ── Textarea ── */
.textarea {
width: 100%;
min-height: 120px;
padding: var(--space-3) var(--space-4);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-input);
font-size: var(--text-base);
color: var(--text-primary);
line-height: var(--leading-normal);
resize: vertical;
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.textarea:focus {
border-color: var(--border-focus);
box-shadow: var(--ring-primary);
outline: none;
}
/* ── Select ── */
.select {
width: 100%;
height: 48px;
padding: 0 var(--space-10) 0 var(--space-4);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-input);
font-size: var(--text-base);
color: var(--text-primary);
cursor: pointer;
transition: all var(--transition-base);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239aa5b1' viewBox='0 0 16 16'%3E%3Cpath d='M4.427 6.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 6H4.604a.25.25 0 00-.177.427z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
-webkit-appearance: none;
appearance: none;
}
.select:focus {
border-color: var(--border-focus);
box-shadow: var(--ring-primary);
outline: none;
}
.select--sm {
height: 40px;
font-size: var(--text-sm);
}
/* ── Search Input ── */
.search-input {
position: relative;
}
.search-input .input {
padding-left: var(--space-10);
padding-right: var(--space-10);
border-radius: var(--radius-lg);
background: var(--color-neutral-50);
}
.search-input .input:focus {
background: var(--bg-surface);
}
.search-input__icon {
position: absolute;
left: var(--space-3);
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
color: var(--text-tertiary);
pointer-events: none;
}
.search-input__clear {
position: absolute;
right: var(--space-2);
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
color: var(--text-tertiary);
cursor: pointer;
transition: all var(--transition-fast);
}
.search-input__clear:hover {
background: var(--color-neutral-100);
color: var(--text-secondary);
}
.search-input__clear svg {
width: 16px;
height: 16px;
}
/* ── Toggle / Switch ── */
.toggle {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-2-5);
cursor: pointer;
user-select: none;
}
.toggle__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.toggle__track {
position: relative;
width: 44px;
height: 24px;
background: var(--color-neutral-300);
border-radius: var(--radius-full);
transition: background var(--transition-base);
flex-shrink: 0;
}
.toggle__track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: white;
border-radius: var(--radius-full);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-base);
}
.toggle__input:checked + .toggle__track {
background: var(--color-primary-500);
}
.toggle__input:checked + .toggle__track::after {
transform: translateX(20px);
}
.toggle__input:focus-visible + .toggle__track {
box-shadow: var(--ring-primary);
}
.toggle__label {
font-size: var(--text-sm);
color: var(--text-primary);
}
/* ── Checkbox ── */
.checkbox {
display: inline-flex;
align-items: center;
gap: var(--space-2-5);
cursor: pointer;
user-select: none;
min-height: 44px; /* Touch target */
}
.checkbox__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.checkbox__mark {
position: relative;
width: 20px;
height: 20px;
border: 2px solid var(--color-neutral-300);
border-radius: var(--radius-xs);
background: var(--bg-surface);
transition: all var(--transition-fast);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.checkbox__input:checked + .checkbox__mark {
background: var(--color-primary-500);
border-color: var(--color-primary-500);
}
.checkbox__input:checked + .checkbox__mark::after {
content: '';
display: block;
width: 5px;
height: 9px;
border: 2px solid white;
border-top: none;
border-left: none;
transform: rotate(45deg) translateY(-1px);
}
.checkbox__input:focus-visible + .checkbox__mark {
box-shadow: var(--ring-primary);
}
.checkbox__label {
font-size: var(--text-sm);
color: var(--text-primary);
}
/* ── Radio ── */
.radio {
display: inline-flex;
align-items: center;
gap: var(--space-2-5);
cursor: pointer;
user-select: none;
min-height: 44px;
}
.radio__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.radio__mark {
width: 20px;
height: 20px;
border: 2px solid var(--color-neutral-300);
border-radius: var(--radius-full);
background: var(--bg-surface);
transition: all var(--transition-fast);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.radio__input:checked + .radio__mark {
border-color: var(--color-primary-500);
}
.radio__input:checked + .radio__mark::after {
content: '';
width: 10px;
height: 10px;
background: var(--color-primary-500);
border-radius: var(--radius-full);
}
.radio__label {
font-size: var(--text-sm);
color: var(--text-primary);
}
/* ── Form Row (side by side fields) ── */
.form-row {
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.form-row--2 {
grid-template-columns: repeat(2, 1fr);
}
.form-row--3 {
grid-template-columns: repeat(3, 1fr);
}
}
/* ── Form Grid aliases (legacy PHP views) ── */
.form-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) {
.form-grid--2 { grid-template-columns: repeat(2, 1fr); }
.form-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
/* ═══════════════════════════════════════════════════════════
SEARCH BAR
Full-width search + action strip used on list pages
═══════════════════════════════════════════════════════════ */
.search-bar {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.search-bar__form {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.search-bar__row {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.search-bar__input-wrap {
position: relative;
flex: 1;
min-width: 200px;
}
.search-bar__icon {
position: absolute;
left: var(--space-3);
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--text-tertiary);
pointer-events: none;
}
.search-bar__input {
width: 100%;
height: 44px;
padding: 0 var(--space-10) 0 var(--space-10);
font-size: var(--text-sm);
color: var(--text-primary);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-bar__input::placeholder {
color: var(--text-tertiary);
}
.search-bar__input:focus {
outline: none;
border-color: var(--color-primary-400);
box-shadow: var(--ring-primary);
}
.search-bar__clear {
position: absolute;
right: var(--space-3);
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--text-tertiary);
border-radius: var(--radius-full);
transition: background var(--transition-fast), color var(--transition-fast);
}
.search-bar__clear:hover {
background: var(--color-neutral-100);
color: var(--text-primary);
}
.search-bar__clear svg {
width: 16px;
height: 16px;
}
.search-bar__actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
@media (min-width: 640px) {
.search-bar__form {
flex-direction: row;
align-items: center;
}
}
/* ═══════════════════════════════════════════════════════════
FORM ELEMENT ALIASES
Views use form-input / form-select / form-textarea class
names. These map to the same styles as .input / .select /
.textarea defined above.
═══════════════════════════════════════════════════════════ */
/* ── form-input (alias for .input) ── */
.form-input {
width: 100%;
height: 48px;
padding: 0 var(--space-4);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-input);
font-size: var(--text-base);
color: var(--text-primary);
transition: all var(--transition-base);
-webkit-appearance: none;
appearance: none;
}
.form-input:hover {
border-color: var(--color-neutral-300);
}
.form-input:focus {
border-color: var(--border-focus);
box-shadow: var(--ring-primary);
outline: none;
}
.form-input:disabled {
background: var(--color-neutral-50);
color: var(--text-tertiary);
cursor: not-allowed;
}
.form-input::placeholder {
color: var(--text-tertiary);
}
/* ── form-select (alias for .select) ── */
.form-select {
width: 100%;
height: 48px;
padding: 0 var(--space-10) 0 var(--space-4);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-input);
font-size: var(--text-base);
color: var(--text-primary);
cursor: pointer;
transition: all var(--transition-base);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239aa5b1' viewBox='0 0 16 16'%3E%3Cpath d='M4.427 6.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 6H4.604a.25.25 0 00-.177.427z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
-webkit-appearance: none;
appearance: none;
}
.form-select:focus {
border-color: var(--border-focus);
box-shadow: var(--ring-primary);
outline: none;
}
/* ── form-textarea (alias for .textarea) ── */
.form-textarea {
width: 100%;
min-height: 120px;
padding: var(--space-3) var(--space-4);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-input);
font-size: var(--text-base);
color: var(--text-primary);
line-height: var(--leading-normal);
resize: vertical;
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.form-textarea::placeholder {
color: var(--text-tertiary);
}
.form-textarea:focus {
border-color: var(--border-focus);
box-shadow: var(--ring-primary);
outline: none;
}
/* ── Validation state: is-invalid ── */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid,
.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid {
border-color: var(--border-error);
}
.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
.form-textarea.is-invalid:focus,
.input.is-invalid:focus,
.select.is-invalid:focus,
.textarea.is-invalid:focus {
box-shadow: var(--ring-danger);
}
/* ── form-required (red asterisk after label text) ── */
.form-required {
color: var(--color-danger-500);
margin-left: 2px;
}
/* ============================================================
EVDE BAKIM - CARDS
White background, soft shadow, rounded corners.
Primary content container for the entire system.
============================================================ */
/* ── Base Card ── */
.card {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-card);
box-shadow: var(--shadow-xs);
transition: box-shadow var(--transition-base);
}
.card:hover {
box-shadow: var(--shadow-sm);
}
.card--flat {
box-shadow: none;
}
.card--flat:hover {
box-shadow: none;
}
.card--interactive {
cursor: pointer;
}
.card--interactive:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-neutral-200);
}
/* ── Card Parts ── */
.card__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-5);
border-bottom: 1px solid var(--border-light);
}
.card__title {
font-family: var(--font-family-heading);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.card__subtitle {
font-size: var(--text-sm);
color: var(--text-secondary);
margin-top: var(--space-0-5);
}
.card__body {
padding: var(--space-5);
}
.card__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--border-light);
}
/* ── Metric Card (Dashboard KPI) ── */
.metric-card {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-card);
padding: var(--space-5);
box-shadow: var(--shadow-xs);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.metric-card__header {
display: flex;
align-items: center;
justify-content: space-between;
}
.metric-card__icon {
width: 40px;
height: 40px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.metric-card__icon svg {
width: 20px;
height: 20px;
}
.metric-card__icon--primary {
background: var(--metric-inventory-bg);
color: var(--metric-inventory-icon);
}
.metric-card__icon--success {
background: var(--metric-visits-bg);
color: var(--metric-visits-icon);
}
.metric-card__icon--warning {
background: var(--metric-tasks-bg);
color: var(--metric-tasks-icon);
}
.metric-card__icon--danger {
background: var(--metric-alerts-bg);
color: var(--metric-alerts-icon);
}
.metric-card__icon--info {
background: var(--metric-patients-bg);
color: var(--metric-patients-icon);
}
.metric-card__icon--secondary {
background: var(--metric-staff-bg);
color: var(--metric-staff-icon);
}
/* Module-specific metric icons (v2.0) */
.metric-card__icon--patients {
background: var(--metric-patients-bg);
color: var(--metric-patients-icon);
}
.metric-card__icon--staff {
background: var(--metric-staff-bg);
color: var(--metric-staff-icon);
}
.metric-card__icon--alerts {
background: var(--metric-alerts-bg);
color: var(--metric-alerts-icon);
}
.metric-card__icon--tasks {
background: var(--metric-tasks-bg);
color: var(--metric-tasks-icon);
}
.metric-card__icon--inventory {
background: var(--metric-inventory-bg);
color: var(--metric-inventory-icon);
}
.metric-card__icon--reports {
background: var(--metric-reports-bg);
color: var(--metric-reports-icon);
}
.metric-card__icon--visits {
background: var(--metric-visits-bg);
color: var(--metric-visits-icon);
}
.metric-card__icon--revenue {
background: var(--metric-revenue-bg);
color: var(--metric-revenue-icon);
}
/* Metric card with colored top accent line (v2.0) */
.metric-card--accent-top {
border-top: 3px solid transparent;
}
.metric-card--accent-patients { border-top-color: var(--metric-patients-accent); }
.metric-card--accent-staff { border-top-color: var(--metric-staff-accent); }
.metric-card--accent-alerts { border-top-color: var(--metric-alerts-accent); }
.metric-card--accent-tasks { border-top-color: var(--metric-tasks-accent); }
.metric-card--accent-visits { border-top-color: var(--metric-visits-accent); }
.metric-card--accent-revenue { border-top-color: var(--metric-revenue-accent); }
/* Metric card with colored left accent line (v2.0) */
.metric-card--accent-left {
border-left: 3px solid transparent;
}
.metric-card--accent-left.metric-card--accent-patients { border-left-color: var(--metric-patients-accent); border-top: 1px solid var(--border-light); }
.metric-card--accent-left.metric-card--accent-staff { border-left-color: var(--metric-staff-accent); border-top: 1px solid var(--border-light); }
.metric-card--accent-left.metric-card--accent-alerts { border-left-color: var(--metric-alerts-accent); border-top: 1px solid var(--border-light); }
.metric-card--accent-left.metric-card--accent-tasks { border-left-color: var(--metric-tasks-accent); border-top: 1px solid var(--border-light); }
.metric-card__label {
font-size: var(--text-sm);
color: var(--text-secondary);
font-weight: var(--weight-medium);
}
.metric-card__value {
font-family: var(--font-family-heading);
font-size: var(--text-3xl);
font-weight: var(--weight-bold);
color: var(--text-primary);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.metric-card__change {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}
.metric-card__change svg {
width: 14px;
height: 14px;
}
.metric-card__change--up {
color: var(--color-success-600);
}
.metric-card__change--down {
color: var(--color-danger-600);
}
.metric-card__footer {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
/* ── Patient Card ── */
.patient-card {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-card);
padding: var(--space-5);
box-shadow: var(--shadow-xs);
display: flex;
gap: var(--space-4);
align-items: flex-start;
cursor: pointer;
transition: all var(--transition-base);
}
.patient-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-neutral-200);
}
.patient-card__avatar {
width: 48px;
height: 48px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-200));
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--color-primary-700);
flex-shrink: 0;
}
.patient-card__content {
flex: 1;
min-width: 0;
}
.patient-card__name {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--text-primary);
margin-bottom: var(--space-0-5);
}
.patient-card__info {
font-size: var(--text-sm);
color: var(--text-secondary);
margin-bottom: var(--space-2);
}
.patient-card__meta {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.patient-card__meta-item {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.patient-card__meta-item svg {
width: 14px;
height: 14px;
}
.patient-card__status {
flex-shrink: 0;
}
/* ── Staff Card ── */
.staff-card {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-card);
padding: var(--space-5);
box-shadow: var(--shadow-xs);
text-align: center;
transition: all var(--transition-base);
}
.staff-card:hover {
box-shadow: var(--shadow-md);
}
.staff-card__avatar {
width: 56px;
height: 56px;
border-radius: var(--radius-full);
margin: 0 auto var(--space-3);
background: linear-gradient(135deg, var(--color-secondary-200), var(--color-secondary-400));
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: white;
}
.staff-card__name {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--text-primary);
margin-bottom: var(--space-1);
}
.staff-card__role {
font-size: var(--text-sm);
color: var(--text-secondary);
margin-bottom: var(--space-3);
}
.staff-card__stats {
display: flex;
justify-content: center;
gap: var(--space-5);
padding-top: var(--space-3);
border-top: 1px solid var(--border-light);
}
.staff-card__stat {
text-align: center;
}
.staff-card__stat-value {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.staff-card__stat-label {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
/* ── Activity Card ── */
.activity-card {
display: flex;
gap: var(--space-3);
padding: var(--space-4);
border-bottom: 1px solid var(--border-light);
transition: background var(--transition-fast);
}
.activity-card:hover {
background: var(--color-neutral-25);
}
.activity-card:last-child {
border-bottom: none;
}
.activity-card__icon {
width: 36px;
height: 36px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.activity-card__icon svg {
width: 16px;
height: 16px;
}
.activity-card__content {
flex: 1;
min-width: 0;
}
.activity-card__text {
font-size: var(--text-sm);
color: var(--text-primary);
line-height: var(--leading-normal);
}
.activity-card__text strong {
font-weight: var(--weight-semibold);
}
.activity-card__time {
font-size: var(--text-xs);
color: var(--text-tertiary);
margin-top: var(--space-0-5);
}
/* ============================================================
EVDE BAKIM - TABLES
Responsive data tables — converts to cards on mobile.
============================================================ */
/* ── Table Container ── */
.table-container {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-card);
box-shadow: var(--shadow-xs);
overflow: hidden;
}
.table-container__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border-light);
flex-wrap: wrap;
gap: var(--space-3);
}
.table-container__title {
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.table-container__count {
font-size: var(--text-sm);
color: var(--text-tertiary);
font-weight: var(--weight-regular);
margin-left: var(--space-2);
}
.table-container__actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.table-container__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-5);
border-top: 1px solid var(--border-light);
flex-wrap: wrap;
gap: var(--space-3);
}
/* ── Scrollable Table Wrapper ── */
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ── Base Table ── */
.table {
width: 100%;
min-width: var(--table-min-width);
border-collapse: collapse;
}
.table th {
padding: var(--space-3) var(--space-4);
text-align: left;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--text-tertiary);
background: var(--color-neutral-25);
border-bottom: 1px solid var(--border-default);
white-space: nowrap;
user-select: none;
}
.table th:first-child {
padding-left: var(--space-5);
}
.table th:last-child {
padding-right: var(--space-5);
}
.table th.is-sortable {
cursor: pointer;
transition: color var(--transition-fast);
}
.table th.is-sortable:hover {
color: var(--text-primary);
}
.table th .sort-icon {
display: inline-block;
width: 14px;
height: 14px;
vertical-align: middle;
margin-left: var(--space-1);
opacity: 0.4;
}
.table th.is-sorted .sort-icon {
opacity: 1;
color: var(--color-primary-500);
}
.table td {
padding: var(--space-3-5, 0.875rem) var(--space-4);
font-size: var(--text-sm);
color: var(--text-primary);
border-bottom: 1px solid var(--border-light);
vertical-align: middle;
}
.table td:first-child {
padding-left: var(--space-5);
}
.table td:last-child {
padding-right: var(--space-5);
}
.table tbody tr {
transition: background var(--transition-fast);
}
.table tbody tr:hover {
background: var(--color-neutral-25);
}
.table tbody tr:last-child td {
border-bottom: none;
}
/* ── Table Cell Helpers ── */
.table__cell-main {
font-weight: var(--weight-medium);
color: var(--text-primary);
}
.table__cell-sub {
font-size: var(--text-xs);
color: var(--text-tertiary);
margin-top: 2px;
}
.table__cell-actions {
display: flex;
align-items: center;
gap: var(--space-1);
justify-content: flex-end;
}
/* ── Mobile Card View ── */
.table-cards {
display: none;
}
.table-card {
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border-light);
}
.table-card:last-child {
border-bottom: none;
}
.table-card__row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: var(--space-1-5) 0;
}
.table-card__label {
font-size: var(--text-xs);
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
font-weight: var(--weight-medium);
}
.table-card__value {
font-size: var(--text-sm);
color: var(--text-primary);
text-align: right;
}
.table-card__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-2);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--border-light);
}
/* ── Pagination ── */
.pagination {
display: flex;
align-items: center;
gap: var(--space-1);
}
.pagination__info {
font-size: var(--text-sm);
color: var(--text-tertiary);
}
.pagination__btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-secondary);
background: var(--bg-surface);
cursor: pointer;
transition: all var(--transition-fast);
}
.pagination__btn:hover:not(:disabled) {
background: var(--color-neutral-50);
border-color: var(--color-neutral-300);
}
.pagination__btn.is-active {
background: var(--color-primary-500);
color: white;
border-color: var(--color-primary-500);
}
.pagination__btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.pagination__btn svg {
width: 16px;
height: 16px;
}
.pagination__controls {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
flex-wrap: wrap;
}
.pagination__item {
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 var(--space-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-secondary);
background: var(--bg-surface);
cursor: pointer;
transition: all var(--transition-fast);
text-decoration: none;
}
.pagination__item:hover {
background: var(--color-neutral-50);
border-color: var(--color-neutral-300);
}
.pagination__item.is-active {
background: var(--color-primary-500);
color: white;
border-color: var(--color-primary-500);
}
.pagination__dots {
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
font-size: var(--text-sm);
color: var(--text-tertiary);
user-select: none;
}
/* ── Clickable Rows (data-href navigation) ── */
.table__row--clickable {
cursor: pointer;
}
.table__row--clickable:hover {
background: var(--bg-surface-hover);
}
.table__col--actions {
width: 120px;
}
/* ── Icon sizing utility ── */
.icon-sm {
width: 14px;
height: 14px;
}
/* ━━━ MOBILE: Show cards, hide table ━━━ */
@media (max-width: 767px) {
.table-scroll {
display: none;
}
.table-cards {
display: block;
}
}
/* ============================================================
EVDE BAKIM - OVERLAYS v2.0
Modals, Toasts, Tabs, Dropdowns
Note: Alert components (inline, banner, critical modal,
alarm indicators) now live in css/alerts/alerts.css
============================================================ */
/* ── Modal Overlay ── */
.modal-overlay {
position: fixed;
inset: 0;
z-index: var(--z-modal);
background: var(--bg-overlay);
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
}
.modal-overlay.is-active {
opacity: 1;
visibility: visible;
}
/* ── Modal Container ── */
.modal {
background: var(--bg-surface);
border-radius: var(--radius-modal) var(--radius-modal) 0 0;
box-shadow: var(--shadow-2xl);
width: 100%;
max-height: 90vh;
max-height: 90dvh;
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform var(--transition-smooth);
}
.modal-overlay.is-active .modal {
transform: translateY(0);
}
/* ── Modal Parts ── */
.modal__handle {
width: 36px;
height: 4px;
background: var(--color-neutral-300);
border-radius: var(--radius-full);
margin: var(--space-3) auto var(--space-1);
}
.modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border-light);
flex-shrink: 0;
}
.modal__title {
font-family: var(--font-family-heading);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.modal__close {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
color: var(--text-tertiary);
transition: all var(--transition-fast);
}
.modal__close:hover {
background: var(--color-neutral-100);
color: var(--text-primary);
}
.modal__close svg {
width: 20px;
height: 20px;
}
.modal__body {
flex: 1;
padding: var(--space-5);
overflow-y: auto;
}
.modal__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--border-light);
flex-shrink: 0;
}
/* ── Modal Sizes ── */
.modal--sm { max-width: 440px; }
.modal--md { max-width: 600px; }
.modal--lg { max-width: 800px; }
.modal--xl { max-width: 1000px; }
/* ━━━ TABLET+ — Center modal ━━━ */
@media (min-width: 768px) {
.modal-overlay {
align-items: center;
padding: var(--space-6);
}
.modal {
border-radius: var(--radius-modal);
max-height: 85vh;
transform: translateY(20px) scale(0.98);
}
.modal-overlay.is-active .modal {
transform: translateY(0) scale(1);
}
.modal__handle {
display: none;
}
}
/* ============================================================
TOAST NOTIFICATIONS
============================================================ */
.toast-container {
position: fixed;
top: var(--space-5);
right: var(--space-5);
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: var(--space-3);
max-width: 400px;
width: calc(100% - var(--space-10));
}
.toast {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4);
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
animation: toast-in 300ms var(--transition-spring) forwards;
}
.toast.is-leaving {
animation: toast-out 200ms ease forwards;
}
.toast svg {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 1px;
}
.toast--success svg { color: var(--color-success-500); }
.toast--danger svg { color: var(--color-danger-500); }
.toast--warning svg { color: var(--color-warning-500); }
.toast--info svg { color: var(--color-info-500); }
.toast__content {
flex: 1;
}
.toast__title {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.toast__message {
font-size: var(--text-sm);
color: var(--text-secondary);
margin-top: var(--space-0-5);
}
@keyframes toast-in {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes toast-out {
to {
opacity: 0;
transform: translateX(100%);
}
}
/* ============================================================
TABS
============================================================ */
.tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border-default);
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar {
display: none;
}
.tabs__item {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-tertiary);
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: all var(--transition-fast);
cursor: pointer;
margin-bottom: -1px;
min-height: 44px;
}
.tabs__item:hover {
color: var(--text-primary);
}
.tabs__item.is-active {
color: var(--color-primary-600);
border-bottom-color: var(--color-primary-500);
}
.tabs__item svg {
width: 16px;
height: 16px;
}
.tabs__badge {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 1px 6px;
background: var(--color-neutral-100);
color: var(--color-neutral-600);
border-radius: var(--radius-full);
}
.tabs__item.is-active .tabs__badge {
background: rgba(0, 151, 167, 0.10);
color: var(--color-primary-600);
}
/* ============================================================
DROPDOWN MENU
============================================================ */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown__trigger {
cursor: pointer;
}
.dropdown__menu {
position: absolute;
top: 100%;
right: 0;
z-index: var(--z-dropdown);
min-width: 200px;
margin-top: var(--space-1);
padding: var(--space-1-5);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(-4px) scale(0.98);
transition: all var(--transition-fast);
}
.dropdown.is-open .dropdown__menu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.dropdown__item {
display: flex;
align-items: center;
gap: var(--space-2-5);
padding: var(--space-2-5) var(--space-3);
font-size: var(--text-sm);
color: var(--text-primary);
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--transition-fast);
min-height: 40px;
}
.dropdown__item:hover {
background: var(--color-neutral-50);
}
.dropdown__item svg {
width: 16px;
height: 16px;
color: var(--text-tertiary);
}
.dropdown__item--danger {
color: var(--color-danger-600);
}
.dropdown__item--danger svg {
color: var(--color-danger-500);
}
/* Dropdown form (e.g. logout) */
.dropdown__form {
margin: 0;
}
.dropdown__item--full {
width: 100%;
border: none;
background: none;
cursor: pointer;
text-align: left;
}
.dropdown__divider {
height: 1px;
background: var(--border-light);
margin: var(--space-1-5) 0;
}
/* ============================================================
EVDE BAKIM - AVATAR
============================================================ */
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
font-weight: var(--weight-semibold);
color: white;
flex-shrink: 0;
overflow: hidden;
user-select: none;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.avatar--sm { width: 32px; height: 32px; font-size: var(--text-xs); }
.avatar--md { width: 40px; height: 40px; font-size: var(--text-sm); }
.avatar--lg { width: 48px; height: 48px; font-size: var(--text-md); }
.avatar--xl { width: 64px; height: 64px; font-size: var(--text-xl); }
.avatar--2xl { width: 80px; height: 80px; font-size: var(--text-2xl); }
/* Color variants */
.avatar--primary { background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600)); }
.avatar--secondary { background: linear-gradient(135deg, var(--color-secondary-400), var(--color-secondary-600)); }
.avatar--success { background: linear-gradient(135deg, var(--color-success-400), var(--color-success-600)); }
.avatar--warning { background: linear-gradient(135deg, var(--color-warning-400), var(--color-warning-600)); }
.avatar--danger { background: linear-gradient(135deg, var(--color-danger-400), var(--color-danger-600)); }
/* Avatar group */
.avatar-group {
display: flex;
}
.avatar-group .avatar {
border: 2px solid var(--bg-surface);
margin-left: -8px;
}
.avatar-group .avatar:first-child {
margin-left: 0;
}
/* Online indicator */
.avatar-wrapper {
position: relative;
display: inline-block;
}
.avatar-wrapper__status {
position: absolute;
bottom: 0;
right: 0;
width: 12px;
height: 12px;
border: 2px solid var(--bg-surface);
border-radius: var(--radius-full);
}
.avatar-wrapper__status--online {
background: var(--color-success-500);
}
.avatar-wrapper__status--offline {
background: var(--color-neutral-400);
}
.avatar-wrapper__status--busy {
background: var(--color-danger-500);
}
/* ============================================================
EVDE BAKIM - PROGRESS BAR
============================================================ */
.progress {
width: 100%;
height: 6px;
background: var(--color-neutral-100);
border-radius: var(--radius-full);
overflow: hidden;
}
.progress__bar {
height: 100%;
border-radius: var(--radius-full);
transition: width var(--transition-smooth);
}
.progress__bar--primary { background: var(--color-primary-500); }
.progress__bar--success { background: var(--color-success-500); }
.progress__bar--warning { background: var(--color-warning-500); }
.progress__bar--danger { background: var(--color-danger-500); }
.progress--lg { height: 10px; }
.progress--sm { height: 4px; }
/* ============================================================
EVDE BAKIM - DIVIDER
============================================================ */
.divider {
height: 1px;
background: var(--border-light);
margin: var(--space-6) 0;
}
.divider--sm {
margin: var(--space-3) 0;
}
.divider--lg {
margin: var(--space-8) 0;
}
/* ============================================================
EVDE BAKIM - SKELETON LOADER
============================================================ */
.skeleton {
background: linear-gradient(90deg, var(--color-neutral-100) 25%, var(--color-neutral-50) 50%, var(--color-neutral-100) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease infinite;
border-radius: var(--radius-md);
}
.skeleton--text {
height: 14px;
width: 100%;
margin-bottom: var(--space-2);
}
.skeleton--text-sm {
height: 12px;
width: 60%;
}
.skeleton--heading {
height: 24px;
width: 40%;
margin-bottom: var(--space-3);
}
.skeleton--avatar {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
}
.skeleton--card {
height: 120px;
width: 100%;
}
.skeleton--btn {
height: 44px;
width: 120px;
border-radius: var(--radius-button);
}
@keyframes skeleton-loading {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* ============================================================
EVDE BAKIM - TOOLTIP
============================================================ */
.tooltip {
position: relative;
}
.tooltip__content {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-4px);
padding: var(--space-1-5) var(--space-2-5);
background: var(--color-neutral-900);
color: white;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
border-radius: var(--radius-sm);
white-space: nowrap;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: all var(--transition-fast);
z-index: var(--z-tooltip);
}
.tooltip:hover .tooltip__content {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-8px);
}
/* ============================================================
VIEW-SHARED COMPONENT PATTERNS
Reusable mini-patterns extracted from inline styles.
============================================================ */
/* Icon inline (14px with vertical-align for inline text) */
.icon-inline {
width: 14px;
height: 14px;
vertical-align: middle;
margin-right: 0.25rem;
}
/* Icon inline large (18px text-bottom align) */
.icon-inline-lg {
width: 18px;
height: 18px;
vertical-align: text-bottom;
}
/* Muted icon (14px, muted color) */
.icon-muted {
width: 14px;
height: 14px;
color: var(--text-muted);
}
/* Flex row with center + gap (common row pattern) */
.flex-center-gap {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Bordered info panel (repeated card-like box) */
.info-panel {
border: 1px solid var(--border);
border-radius: 10px;
padding: 1.25rem;
margin-bottom: 1.5rem;
}
/* Tiny muted text */
.text-muted-xs {
font-size: 0.75rem;
color: var(--text-muted);
}
/* Small gray text (text-xs + gray-500) */
.text-gray-xs {
font-size: var(--text-xs);
color: var(--color-gray-500);
}
/* Small gray text with tight bottom margin */
.text-gray-xs-tight {
font-size: var(--text-xs);
color: var(--color-gray-500);
margin-bottom: 2px;
}
/* Body-sm gray text */
.text-gray-sm {
font-size: var(--text-sm);
color: var(--color-gray-500);
}
/* Muted small text (0.8rem) */
.text-muted-sm {
color: var(--text-muted);
font-size: 0.8rem;
}
/* Muted small text with m-0 */
.text-muted-sm-flush {
font-size: 0.8rem;
color: var(--text-muted);
margin: 0;
}
/* Right-aligned semibold (table cells) */
.text-right-bold {
text-align: right;
font-weight: 600;
}
/* Section heading flush */
.section-heading-flush {
font-size: 1.125rem;
font-weight: 700;
margin: 0;
}
/* Small label text (font-size:0.875rem) */
.text-label-sm {
font-size: 0.875rem;
font-weight: 500;
}
.text-label-sm-bold {
font-size: 0.875rem;
font-weight: 600;
}
/* Small gray muted text (text-xs + gray-400) */
.text-gray-xs-light {
font-size: var(--text-xs);
color: var(--color-gray-400);
}
/* Section sub-header (table col headers) */
.table-col-header {
padding: var(--space-2) var(--space-3);
font-weight: 600;
font-size: var(--text-sm);
color: var(--color-gray-500);
}
/* Panel header bar */
.panel-header-bar {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 0.75rem;
}
/* Clickable row item (settings/list) */
.list-item-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--bg-muted);
border-radius: 8px;
cursor: pointer;
}
/* Table fixed-width columns */
.col-w-50 { width: 50px; }
.col-w-80 { width: 80px; }
.col-w-100 { width: 100px; }
.col-w-130 { width: 130px; }
/* Rounded card container */
.card-container {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
/* Auto-fit grids */
.grid-auto-220 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.grid-auto-280 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
/* Flex wrap filters row */
.filter-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: flex-end;
}
/* Muted label tiny */
.text-muted-xs-tight {
font-size: 0.75rem;
color: var(--text-muted);
margin-bottom: 0.25rem;
}
/* Flex min-width-0 fill */
.flex-fill {
flex: 1;
min-width: 0;
}
/* Small clickable link-style */
.link-sm {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
cursor: pointer;
}
/* Icon flex-shrink */
.icon-lg-shrink {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* Icon inline tiny */
.icon-inline-xs {
width: 14px;
height: 14px;
display: inline;
vertical-align: -2px;
}
/* Section title larger */
.section-title-lg {
font-size: 1.25rem;
font-weight: 700;
margin: 0;
}
/* Section title tight */
.section-title-tight {
font-size: 1.125rem;
font-weight: 700;
line-height: 1;
}
/* Compact button text */
.text-compact {
font-size: 0.8125rem;
padding: 0.4rem 0.6rem;
}
/* Small muted description */
.text-desc-sm {
font-size: 0.8125rem;
color: var(--text-muted);
margin: 0.25rem 0 0;
}
/* Tiny text */
.text-2xs {
font-size: 0.6875rem;
}
/* Info card item (bordered rounded flex row) */
.info-card-item {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.875rem 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
/* Selectable list container */
.selectable-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
max-height: 300px;
overflow-y: auto;
padding: var(--space-2);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-md);
}
/* Selectable list item */
.selectable-item {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background .15s;
}
.selectable-item:hover {
background: var(--bg-muted);
}
/* Stat value (large text right-aligned) */
.stat-value-lg {
font-weight: 700;
font-size: var(--text-lg);
min-width: 55px;
text-align: right;
}
/* Section heading with icon */
.section-heading-icon {
font-size: var(--text-lg);
font-weight: 700;
margin-bottom: var(--space-4);
display: flex;
align-items: center;
gap: var(--space-2);
}
/* Bold label tight */
.label-bold-tight {
font-weight: 600;
margin-bottom: 2px;
color: var(--color-gray-900);
}
/* Colored score badges */
.score-badge {
font-weight: 600;
font-size: 0.9rem;
padding: 0 0.5rem;
}
.score-badge--primary { color: var(--primary); }
.score-badge--purple { color: #a855f7; }
.score-badge--indigo { color: #6366f1; }
.score-badge--amber { color: #f59e0b; }
.score-badge--red { color: #ef4444; }
.score-badge--violet { color: #8b5cf6; }
/* Color chips */
.chip--purple { background: var(--color-purple-50); color: var(--color-purple-600); }
.chip--blue { background: var(--color-blue-50); color: var(--color-blue-600); }
.chip--green { background: var(--color-success-50); color: var(--color-success-600); }
.chip--amber { background: var(--color-warning-50); color: var(--color-warning-600); }
.chip--red { background: var(--color-danger-50); color: var(--color-danger-600); }
.chip--primary { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
/* Text link primary */
.link-primary {
font-size: 0.8125rem;
color: var(--family-primary, var(--primary));
text-decoration: none;
font-weight: 500;
}
/* Muted description text */
.text-muted-desc {
color: var(--text-muted);
font-size: 0.875rem;
margin: 0.25rem 0 0;
}
/* Table header cell compact */
.th-compact {
padding: 0.625rem 0.75rem;
text-align: left;
font-weight: 600;
color: var(--text-muted);
}
/* Table cell compact */
.td-compact {
padding: 0.625rem 0.75rem;
}
/* Cell compact padded */
.cell-padded {
padding: 0.75rem 1rem;
}
/* Auto-ml text helper */
.text-gray-sm-auto {
font-size: var(--text-sm);
color: var(--color-gray-500);
margin-left: auto;
}
/* Tiny label text */
.text-xs-tight {
font-size: 0.75rem;
margin-bottom: 2px;
}
/* ============================================================
NOTIFICATION DROPDOWN v2.0
Dropdown panel for notification bell in header
Used by: views/layouts/tenant.php
============================================================ */
.notification-badge {
position: absolute;
top: 2px;
right: 2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: var(--color-danger-500);
color: #fff;
font-size: 0.625rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
pointer-events: none;
}
.notification-dropdown-wrapper {
position: relative;
}
.notification-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 380px;
max-height: 480px;
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
z-index: var(--z-dropdown);
display: none;
flex-direction: column;
overflow: hidden;
}
.notification-dropdown[aria-hidden="false"] {
display: flex;
}
.notification-dropdown__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border-default);
}
.notification-dropdown__header h4 {
margin: 0;
font-size: var(--text-sm);
}
.notification-dropdown__body {
overflow-y: auto;
max-height: 340px;
flex: 1;
}
.notification-dropdown__empty {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-8) var(--space-4);
}
.notification-dropdown__empty i {
width: 32px;
height: 32px;
color: var(--text-tertiary);
}
.notification-dropdown__empty p {
color: var(--text-tertiary);
font-size: var(--text-sm);
margin: var(--space-2) 0 0;
}
.notification-dropdown__footer {
padding: var(--space-2-5) var(--space-4);
border-top: 1px solid var(--border-default);
text-align: center;
}
.notification-dropdown__footer a {
color: var(--color-primary-600);
text-decoration: none;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
.notification-dropdown__footer a:hover {
text-decoration: underline;
}
/* ── Notification Dropdown Items ── */
.notif-dd-item {
display: flex;
gap: var(--space-2-5);
padding: var(--space-2-5) var(--space-4);
text-decoration: none;
color: var(--text-primary);
border-bottom: 1px solid var(--border-light);
transition: background var(--transition-fast);
align-items: center;
}
.notif-dd-item:last-child {
border-bottom: none;
}
.notif-dd-item:hover {
background: var(--bg-surface-hover);
}
.notif-dd-item--unread {
background: color-mix(in srgb, var(--color-primary-500) 5%, transparent);
}
.notif-dd-item--unread:hover {
background: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
}
.notif-dd-item__prio {
width: 3px;
align-self: stretch;
border-radius: 2px;
flex-shrink: 0;
}
.notif-dd-item__prio--danger { background: var(--color-danger-500); }
.notif-dd-item__prio--warning { background: var(--color-warning-500); }
.notif-dd-item__prio--info { background: var(--color-info-500); }
.notif-dd-item__prio--muted { background: var(--border-default); }
.notif-dd-item__icon {
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-surface-alt);
color: var(--text-secondary);
flex-shrink: 0;
}
.notif-dd-item__icon i {
width: 14px;
height: 14px;
}
.notif-dd-item__content {
flex: 1;
min-width: 0;
}
.notif-dd-item__title {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: var(--leading-snug);
}
.notif-dd-item--unread .notif-dd-item__title {
font-weight: var(--weight-semibold);
}
.notif-dd-item__time {
font-size: var(--text-xs);
color: var(--text-tertiary);
margin-top: 2px;
}
/* ── Bell animation for new notifications ── */
.header__icon-btn.has-notifications {
animation: bellShake 0.5s ease-in-out;
}
@keyframes bellShake {
0%, 100% { transform: rotate(0); }
15% { transform: rotate(5deg); }
30% { transform: rotate(-5deg); }
45% { transform: rotate(3deg); }
60% { transform: rotate(-3deg); }
75% { transform: rotate(1deg); }
}
/* Empty state icon/text — replaces inline styles */
.notif-dd-empty__icon {
width: 32px;
height: 32px;
color: var(--text-secondary);
}
.notif-dd-empty__text {
color: var(--text-secondary);
font-size: var(--text-sm);
margin: var(--space-2) 0 0;
}
/* Dropdown header title */
.notification-dropdown__title {
margin: 0;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
/* Footer link */
.notification-dropdown__link {
font-size: var(--text-sm);
color: var(--color-primary-600);
text-decoration: none;
font-weight: var(--weight-medium);
}
.notification-dropdown__link:hover {
text-decoration: underline;
}
/* ── Responsive ── */
@media (max-width: 480px) {
.notification-dropdown {
width: calc(100vw - 2rem);
right: -1rem;
}
}
/* ============================================================
EVDE BAKIM - ALERT & NOTIFICATION SYSTEM v2.0
Enterprise healthcare alert system:
- Inline alerts (within content)
- Banner alerts (full-width top/bottom)
- Critical modal alerts (blocking)
- Toast notifications (non-blocking)
- Alarm state indicators (persistent)
- Timeline alerts (in feeds)
- Sound alert indicator (visual cue for audio)
Design principle: Serious but calm.
Healthcare alarms must convey urgency without panic.
============================================================ */
/* ============================================================
1. INLINE ALERTS — Within content flow
============================================================ */
.alert {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4);
border-radius: var(--radius-lg);
border: 1px solid transparent;
font-size: var(--text-sm);
line-height: var(--leading-normal);
position: relative;
}
.alert svg {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 1px;
}
.alert__content {
flex: 1;
min-width: 0;
}
.alert__title {
font-weight: var(--weight-semibold);
margin-bottom: var(--space-0-5);
}
.alert__description {
opacity: 0.85;
}
.alert__actions {
display: flex;
gap: var(--space-2);
margin-top: var(--space-3);
}
.alert__close {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
opacity: 0.6;
transition: opacity var(--transition-fast);
flex-shrink: 0;
cursor: pointer;
background: none;
border: none;
color: inherit;
}
.alert__close:hover {
opacity: 1;
}
.alert__close svg {
width: 16px;
height: 16px;
}
/* Alert variants */
.alert--info {
background: var(--color-info-50);
border-color: var(--color-info-200);
color: var(--color-info-700);
}
.alert--success {
background: var(--color-success-50);
border-color: var(--color-success-200);
color: var(--color-success-700);
}
.alert--warning {
background: var(--color-warning-50);
border-color: var(--color-warning-200);
color: var(--color-warning-700);
}
.alert--danger {
background: var(--color-danger-50);
border-color: var(--color-danger-200);
color: var(--color-danger-700);
}
/* Compact alert (less padding, no border-radius for stacking) */
.alert--compact {
padding: var(--space-3);
border-radius: var(--radius-md);
}
/* Alert with left accent bar */
.alert--accent {
border-left-width: 4px;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.alert--accent.alert--info { border-left-color: var(--color-info-500); }
.alert--accent.alert--success { border-left-color: var(--color-success-500); }
.alert--accent.alert--warning { border-left-color: var(--color-warning-500); }
.alert--accent.alert--danger { border-left-color: var(--color-danger-500); }
/* ============================================================
2. BANNER ALERTS — Full-width, persistent
============================================================ */
.alert-banner {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
line-height: var(--leading-normal);
position: relative;
z-index: var(--z-sticky);
}
.alert-banner svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.alert-banner__content {
flex: 1;
display: flex;
align-items: center;
gap: var(--space-3);
}
.alert-banner__action {
font-weight: var(--weight-semibold);
text-decoration: underline;
cursor: pointer;
white-space: nowrap;
}
.alert-banner__close {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
opacity: 0.7;
transition: opacity var(--transition-fast);
cursor: pointer;
background: none;
border: none;
color: inherit;
flex-shrink: 0;
}
.alert-banner__close:hover {
opacity: 1;
}
.alert-banner--info {
background: var(--color-info-600);
color: white;
}
.alert-banner--success {
background: var(--color-success-600);
color: white;
}
.alert-banner--warning {
background: var(--color-warning-500);
color: var(--color-neutral-900);
}
.alert-banner--danger {
background: var(--color-danger-600);
color: white;
}
/* Soft variant for less urgency */
.alert-banner--soft.alert-banner--info {
background: var(--color-info-50);
color: var(--color-info-700);
}
.alert-banner--soft.alert-banner--warning {
background: var(--color-warning-50);
color: var(--color-warning-700);
}
.alert-banner--soft.alert-banner--danger {
background: var(--color-danger-50);
color: var(--color-danger-700);
}
/* ============================================================
3. CRITICAL MODAL ALERT — Blocking, requires action
============================================================ */
.alert-modal-overlay {
position: fixed;
inset: 0;
z-index: var(--z-alarm);
background: var(--bg-overlay-heavy);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
}
.alert-modal-overlay.is-active {
opacity: 1;
visibility: visible;
}
.alert-modal {
background: var(--bg-surface);
border-radius: var(--radius-2xl);
padding: var(--space-8) var(--space-6);
max-width: 440px;
width: 100%;
text-align: center;
box-shadow: var(--shadow-2xl);
transform: scale(0.95) translateY(10px);
transition: transform var(--transition-spring);
}
.alert-modal-overlay.is-active .alert-modal {
transform: scale(1) translateY(0);
}
.alert-modal__icon {
width: 64px;
height: 64px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-5);
}
.alert-modal__icon svg {
width: 32px;
height: 32px;
}
.alert-modal__icon--danger {
background: var(--color-danger-50);
color: var(--color-danger-500);
animation: alert-icon-pulse 2s ease-in-out infinite;
}
.alert-modal__icon--warning {
background: var(--color-warning-50);
color: var(--color-warning-500);
}
.alert-modal__icon--info {
background: var(--color-info-50);
color: var(--color-info-500);
}
.alert-modal__icon--success {
background: var(--color-success-50);
color: var(--color-success-500);
}
@keyframes alert-icon-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
50% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
}
.alert-modal__title {
font-family: var(--font-family-heading);
font-size: var(--text-xl);
font-weight: var(--weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.alert-modal__message {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-6);
}
.alert-modal__actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
@media (min-width: 480px) {
.alert-modal__actions {
flex-direction: row;
justify-content: center;
}
}
/* ============================================================
4. ALARM STATE INDICATOR — Persistent badge/widget
============================================================ */
.alarm-indicator {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
cursor: pointer;
transition: all var(--transition-base);
}
.alarm-indicator svg {
width: 16px;
height: 16px;
}
/* Normal — no active alarms */
.alarm-indicator--normal {
background: var(--color-neutral-100);
color: var(--color-neutral-500);
}
/* Active alarm — attention needed */
.alarm-indicator--active {
background: var(--color-danger-50);
color: var(--color-danger-600);
border: 1px solid var(--color-danger-200);
}
.alarm-indicator--active::before {
content: '';
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: var(--color-danger-500);
animation: alarm-blink 1.5s ease-in-out infinite;
}
@keyframes alarm-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* Warning alarm — less urgent */
.alarm-indicator--warning {
background: var(--color-warning-50);
color: var(--color-warning-700);
border: 1px solid var(--color-warning-200);
}
.alarm-indicator--warning::before {
content: '';
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: var(--color-warning-500);
animation: alarm-blink 2.5s ease-in-out infinite;
}
/* Sound alert visual indicator — shows audio is playing */
.alarm-indicator__sound {
display: flex;
align-items: flex-end;
gap: 2px;
height: 14px;
}
.alarm-indicator__sound-bar {
width: 3px;
border-radius: 1px;
background: currentColor;
animation: sound-wave 1s ease-in-out infinite;
}
.alarm-indicator__sound-bar:nth-child(1) { height: 40%; animation-delay: 0s; }
.alarm-indicator__sound-bar:nth-child(2) { height: 70%; animation-delay: 0.15s; }
.alarm-indicator__sound-bar:nth-child(3) { height: 100%; animation-delay: 0.3s; }
.alarm-indicator__sound-bar:nth-child(4) { height: 55%; animation-delay: 0.45s; }
@keyframes sound-wave {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(0.4); }
}
/* ============================================================
5. TIMELINE ALERTS — In activity feeds
============================================================ */
.timeline-alert {
display: flex;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
border-left: 3px solid transparent;
margin: var(--space-2) 0;
transition: background var(--transition-fast);
}
.timeline-alert:hover {
background: var(--color-neutral-25);
}
.timeline-alert__icon {
width: 32px;
height: 32px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.timeline-alert__icon svg {
width: 16px;
height: 16px;
}
.timeline-alert__content {
flex: 1;
min-width: 0;
}
.timeline-alert__title {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.timeline-alert__description {
font-size: var(--text-xs);
color: var(--text-secondary);
margin-top: var(--space-0-5);
}
.timeline-alert__time {
font-size: var(--text-xs);
color: var(--text-tertiary);
white-space: nowrap;
flex-shrink: 0;
}
/* Timeline alert variants */
.timeline-alert--info {
border-left-color: var(--color-info-400);
}
.timeline-alert--info .timeline-alert__icon {
background: var(--color-info-50);
color: var(--color-info-500);
}
.timeline-alert--success {
border-left-color: var(--color-success-400);
}
.timeline-alert--success .timeline-alert__icon {
background: var(--color-success-50);
color: var(--color-success-500);
}
.timeline-alert--warning {
border-left-color: var(--color-warning-400);
}
.timeline-alert--warning .timeline-alert__icon {
background: var(--color-warning-50);
color: var(--color-warning-500);
}
.timeline-alert--danger {
border-left-color: var(--color-danger-400);
}
.timeline-alert--danger .timeline-alert__icon {
background: var(--color-danger-50);
color: var(--color-danger-500);
}
/* Critical timeline alert — stands out */
.timeline-alert--critical {
border-left-color: var(--color-danger-500);
background: var(--color-danger-50);
}
.timeline-alert--critical .timeline-alert__icon {
background: var(--color-danger-100);
color: var(--color-danger-600);
}
/* ============================================================
6. NOTIFICATION DOT — For nav items, icons
============================================================ */
.notification-dot {
position: relative;
}
.notification-dot::after {
content: '';
position: absolute;
top: -2px;
right: -2px;
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: var(--color-danger-500);
border: 2px solid var(--bg-surface);
}
/* Larger dot with count */
.notification-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--radius-full);
background: var(--color-danger-500);
color: white;
font-size: 10px;
font-weight: var(--weight-bold);
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--bg-surface);
line-height: 1;
}
/* ============================================================
EVDE BAKIM — DASHBOARD MODULE v2.0
Home Care Management Platform — Enterprise Edition
Complete dashboard layout & components for:
- Tenant Admin (clinical operations)
- Super Admin (platform oversight)
┌──────────────────────────────────────────────────────────┐
│ UX Philosophy │
│ │
│ Healthcare dashboards must answer ONE question: │
│ "What needs my attention RIGHT NOW?" │
│ │
│ Design decisions: │
│ • Urgent items first (visual hierarchy via color) │
│ • Readable at arm's length (tablet on a desk) │
│ • Low cognitive load (calm palette, clear sections) │
│ • Touch-friendly (min 44px tap targets) │
│ • Scannable in <5 seconds (pattern recognition) │
│ • No decorative clutter — every pixel earns its place │
└──────────────────────────────────────────────────────────┘
Section Order (intentional priority):
1. Alert banner (if critical) — IMMEDIATE attention
2. Metrics row — QUANTITATIVE snapshot
3. Alerts panel + Tasks panel — ACTIONABLE items
4. Schedule timeline — TEMPORAL awareness
5. Activity feed — CONTEXT & history
6. Quick actions — SHORTCUTS
============================================================ */
/* ============================================================
1. DASHBOARD LAYOUT GRID
The main dashboard uses a flexible section-based layout.
Each section is a full-width row that stacks vertically.
Within sections, panels use CSS Grid for columns.
Mobile: 1 column, everything stacked
Tablet: 2 columns, metrics 2x2, panels side-by-side
Desktop: Multi-column, metrics 4-across or 5-across
============================================================ */
/* ── Metrics Grid ── */
.dashboard-metrics {
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
margin-bottom: var(--space-6);
}
/* ── Primary Dashboard Grid (two-column panels) ── */
.dashboard-grid {
display: grid;
gap: var(--space-6);
grid-template-columns: 1fr;
margin-bottom: var(--space-6);
}
/* ── Three-column variant ── */
.dashboard-grid--3col {
grid-template-columns: 1fr;
}
/* ── Horizontal scroll row for metrics on mobile ── */
.dashboard-metrics--scroll {
display: flex;
gap: var(--space-3);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding-left: var(--space-4);
padding-bottom: var(--space-2);
margin-bottom: var(--space-6);
}
.dashboard-metrics--scroll > .metric-card {
flex: 0 0 72%;
max-width: 280px;
scroll-snap-align: start;
}
/* Scrollbar hidden on mobile for clean look */
.dashboard-metrics--scroll::-webkit-scrollbar {
display: none;
}
.dashboard-metrics--scroll {
scrollbar-width: none;
}
/* ━━━ TABLET ━━━ */
@media (min-width: 768px) {
.dashboard-metrics {
grid-template-columns: repeat(2, 1fr);
}
.dashboard-metrics--scroll {
display: grid;
grid-template-columns: repeat(2, 1fr);
overflow: visible;
}
.dashboard-metrics--scroll > .metric-card {
flex: none;
max-width: none;
}
.dashboard-grid {
grid-template-columns: 1fr 1fr;
}
.dashboard-grid--3col {
grid-template-columns: 1fr 1fr;
}
}
/* ━━━ DESKTOP ━━━ */
@media (min-width: 1024px) {
.dashboard-metrics {
grid-template-columns: repeat(4, 1fr);
}
.dashboard-grid {
grid-template-columns: 3fr 2fr;
}
.dashboard-grid--3col {
grid-template-columns: 1fr 1fr 1fr;
}
}
/* ━━━ LARGE DESKTOP — 5 metrics wide ━━━ */
@media (min-width: 1280px) {
.dashboard-metrics--5 {
grid-template-columns: repeat(5, 1fr);
}
}
/* ============================================================
2. SCHEDULE / SHIFT TIMELINE
Vertical timeline showing today's schedule.
Dots color-coded by status: completed, in-progress, pending.
Designed for quick scanning during shift handoffs.
============================================================ */
.schedule-item {
display: flex;
gap: var(--space-3);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--border-light);
transition: background var(--transition-fast);
}
.schedule-item:last-child {
border-bottom: none;
}
.schedule-item:hover {
background: var(--bg-surface-hover);
}
.schedule-item__time {
flex-shrink: 0;
width: 52px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--text-tertiary);
padding-top: var(--space-0-5);
font-variant-numeric: tabular-nums;
}
.schedule-item__line {
position: relative;
width: 2px;
background: var(--border-light);
flex-shrink: 0;
}
.schedule-item__dot {
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
border-radius: var(--radius-full);
border: 2px solid var(--bg-surface);
}
.schedule-item__dot--primary { background: var(--color-primary-500); }
.schedule-item__dot--success { background: var(--color-success-500); }
.schedule-item__dot--warning { background: var(--color-warning-500); }
.schedule-item__dot--danger { background: var(--color-danger-500); }
.schedule-item__dot--info { background: var(--color-info-500); }
.schedule-item__dot--secondary { background: var(--color-secondary-500); }
.schedule-item__content {
flex: 1;
min-width: 0;
}
.schedule-item__title {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-primary);
line-height: var(--leading-snug);
}
.schedule-item__desc {
font-size: var(--text-xs);
color: var(--text-tertiary);
margin-top: var(--space-0-5);
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.schedule-item__action {
margin-left: auto;
flex-shrink: 0;
align-self: center;
}
/* Currently active schedule item — subtle highlight */
.schedule-item--now {
background: var(--color-primary-25);
border-radius: var(--radius-md);
margin: 0 calc(var(--space-1) * -1);
padding-left: var(--space-1);
padding-right: var(--space-1);
}
.schedule-item--now .schedule-item__time {
color: var(--color-primary-600);
}
/* Empty schedule placeholder */
.schedule-empty {
text-align: center;
padding: var(--space-8) var(--space-4);
color: var(--text-tertiary);
}
.schedule-empty__icon {
width: 48px;
height: 48px;
margin: 0 auto var(--space-3);
color: var(--color-neutral-300);
}
.schedule-empty__text {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
.schedule-empty__sub {
font-size: var(--text-xs);
margin-top: var(--space-1);
}
/* ============================================================
3. TASK LIST COMPONENT
Prioritized task list with color-coded urgency.
Each task shows: priority indicator, title, assignee, due.
Designed for nurse workflow — "what do I do next?"
============================================================ */
.task-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3-5) var(--space-4);
border-bottom: 1px solid var(--border-light);
transition: background var(--transition-fast);
min-height: 52px;
}
/* Custom spacing token */
.task-item {
--space-3-5: 0.875rem;
padding: var(--space-3-5) var(--space-4);
}
.task-item:last-child {
border-bottom: none;
}
.task-item:hover {
background: var(--bg-surface-hover);
}
/* Priority bar — 3px left border */
.task-item--critical {
border-left: 3px solid var(--color-danger-500);
}
.task-item--high {
border-left: 3px solid var(--color-orange-500);
}
.task-item--medium {
border-left: 3px solid var(--color-warning-400);
}
.task-item--low {
border-left: 3px solid var(--color-neutral-300);
}
/* Overdue task — subtle danger background */
.task-item--overdue {
background: var(--color-danger-50);
}
.task-item--overdue:hover {
background: rgba(254, 226, 226, 0.8);
}
/* Priority dot (alternative to left-bar) */
.task-item__priority {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
flex-shrink: 0;
margin-top: 6px;
}
.task-item__priority--critical { background: var(--color-danger-500); }
.task-item__priority--high { background: var(--color-orange-500); }
.task-item__priority--medium { background: var(--color-warning-400); }
.task-item__priority--low { background: var(--color-neutral-300); }
.task-item__body {
flex: 1;
min-width: 0;
}
.task-item__title {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-primary);
line-height: var(--leading-snug);
}
.task-item__meta {
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-1);
font-size: var(--text-xs);
color: var(--text-tertiary);
flex-wrap: wrap;
}
.task-item__meta svg {
width: 12px;
height: 12px;
}
.task-item__meta-sep {
width: 3px;
height: 3px;
border-radius: var(--radius-full);
background: var(--color-neutral-300);
flex-shrink: 0;
}
.task-item__due--overdue {
color: var(--color-danger-600);
font-weight: var(--weight-semibold);
}
.task-item__checkbox {
width: 20px;
height: 20px;
border-radius: var(--radius-sm);
border: 2px solid var(--border-default);
flex-shrink: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
margin-top: 2px;
}
.task-item__checkbox:hover {
border-color: var(--color-primary-400);
background: var(--color-primary-25);
}
.task-item__checkbox.is-checked {
background: var(--color-primary-500);
border-color: var(--color-primary-500);
}
.task-item__checkbox.is-checked svg {
color: white;
width: 14px;
height: 14px;
}
/* Completed task — muted style */
.task-item--completed {
opacity: 0.55;
}
.task-item--completed .task-item__title {
text-decoration: line-through;
}
.task-item__actions {
display: flex;
align-items: center;
gap: var(--space-1);
flex-shrink: 0;
margin-left: auto;
align-self: center;
}
/* ============================================================
4. ALERTS PANEL — Healthcare-Critical
Visual hierarchy for healthcare alerts:
┌─────────┬─────────────┬───────────────────────────────┐
│ Level │ Visual │ Purpose │
├─────────┼─────────────┼───────────────────────────────┤
│ Critical│ Red bg+bar │ Life-threatening, immediate │
│ High │ Orange bar │ Urgent, within 1 hour │
│ Medium │ Amber bar │ Important, today │
│ Low │ Gray bar │ Informational, can wait │
└─────────┴─────────────┴───────────────────────────────┘
Critical alerts use stronger visual weight.
Pulsing dot indicates real-time / unresolved state.
============================================================ */
.alert-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3-5) var(--space-4);
border-bottom: 1px solid var(--border-light);
border-left: 3px solid transparent;
transition: background var(--transition-fast);
--space-3-5: 0.875rem;
}
.alert-item:last-child {
border-bottom: none;
}
.alert-item:hover {
background: var(--bg-surface-hover);
}
/* Priority levels */
.alert-item--critical {
border-left-color: var(--color-danger-500);
background: var(--color-danger-50);
}
.alert-item--critical:hover {
background: rgba(254, 226, 226, 0.8);
}
.alert-item--high {
border-left-color: var(--color-orange-500);
}
.alert-item--medium {
border-left-color: var(--color-warning-400);
}
.alert-item--low {
border-left-color: var(--color-neutral-300);
}
.alert-item__icon {
width: 32px;
height: 32px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.alert-item__icon svg {
width: 16px;
height: 16px;
}
.alert-item__icon--critical {
background: var(--status-critical-bg);
color: var(--status-critical-icon);
}
.alert-item__icon--high {
background: var(--status-warning-bg);
color: var(--status-warning-icon);
}
.alert-item__icon--medium {
background: var(--status-pending-bg);
color: var(--status-pending-icon);
}
.alert-item__icon--low {
background: var(--status-inactive-bg);
color: var(--status-inactive-icon);
}
.alert-item__body {
flex: 1;
min-width: 0;
}
.alert-item__title {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-primary);
line-height: var(--leading-snug);
}
.alert-item__desc {
font-size: var(--text-xs);
color: var(--text-secondary);
margin-top: var(--space-0-5);
line-height: var(--leading-normal);
}
.alert-item__time {
font-size: var(--text-xs);
color: var(--text-tertiary);
margin-top: var(--space-1);
display: flex;
align-items: center;
gap: var(--space-1);
}
.alert-item__time svg {
width: 12px;
height: 12px;
}
.alert-item__dismiss {
flex-shrink: 0;
align-self: center;
opacity: 0;
transition: opacity var(--transition-fast);
}
.alert-item:hover .alert-item__dismiss {
opacity: 1;
}
/* Alert count summary bar — top of alerts panel */
.alert-summary {
display: flex;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
background: var(--bg-surface-alt);
border-bottom: 1px solid var(--border-light);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}
.alert-summary__item {
display: flex;
align-items: center;
gap: var(--space-1-5);
}
.alert-summary__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: var(--radius-full);
font-size: 11px;
font-weight: var(--weight-bold);
line-height: 1;
}
.alert-summary__count--critical {
background: var(--status-critical-bg);
color: var(--status-critical-text);
}
.alert-summary__count--high {
background: var(--status-warning-bg);
color: var(--status-warning-text);
}
.alert-summary__count--medium {
background: var(--status-pending-bg);
color: var(--status-pending-text);
}
/* ============================================================
5. ACTIVITY FEED / TIMELINE
System activity stream: who did what, when.
Provides context and audit trail.
Less urgent than alerts — positioned lower.
============================================================ */
/* Activity cards already defined in cards.css */
/* Additional dashboard-specific activity styles: */
.activity-feed {
max-height: 420px;
overflow-y: auto;
scrollbar-width: thin;
}
.activity-feed::-webkit-scrollbar {
width: 4px;
}
.activity-feed::-webkit-scrollbar-thumb {
background: var(--color-neutral-200);
border-radius: var(--radius-full);
}
/* Activity type indicator colors */
.activity-card__icon--patient {
background: var(--metric-patients-bg);
color: var(--metric-patients-icon);
}
.activity-card__icon--staff {
background: var(--metric-staff-bg);
color: var(--metric-staff-icon);
}
.activity-card__icon--task {
background: var(--metric-tasks-bg);
color: var(--metric-tasks-icon);
}
.activity-card__icon--alert {
background: var(--metric-alerts-bg);
color: var(--metric-alerts-icon);
}
.activity-card__icon--inventory {
background: var(--metric-inventory-bg);
color: var(--metric-inventory-icon);
}
.activity-card__icon--system {
background: var(--color-neutral-100);
color: var(--color-neutral-500);
}
/* ============================================================
6. QUICK ACTIONS BAR
Touch-friendly action grid.
Minimum 44px tap target.
Icons + labels for clarity.
============================================================ */
.quick-actions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
.quick-action {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-4);
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-card);
cursor: pointer;
transition: all var(--transition-base);
text-decoration: none;
text-align: center;
min-height: 80px;
-webkit-tap-highlight-color: transparent;
}
.quick-action:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-primary-200);
transform: translateY(-1px);
}
.quick-action:active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
.quick-action__icon {
width: 40px;
height: 40px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
}
.quick-action__icon svg {
width: 20px;
height: 20px;
}
.quick-action__label {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--text-secondary);
}
@media (min-width: 768px) {
.quick-actions {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.quick-actions {
grid-template-columns: repeat(4, 1fr);
}
}
/* ============================================================
7. SHIFT ROSTER / ON-DUTY LIST
Shows who is currently working and their role.
Important for nurse coordinators managing assignments.
============================================================ */
.shift-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border-light);
transition: background var(--transition-fast);
min-height: 52px;
}
.shift-item:last-child {
border-bottom: none;
}
.shift-item:hover {
background: var(--bg-surface-hover);
}
.shift-item__avatar {
width: 36px;
height: 36px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-xs);
font-weight: var(--weight-bold);
color: white;
flex-shrink: 0;
position: relative;
}
.shift-item__avatar--nurse {
background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
}
.shift-item__avatar--doctor {
background: linear-gradient(135deg, var(--color-secondary-400), var(--color-secondary-600));
}
.shift-item__avatar--physio {
background: linear-gradient(135deg, var(--color-success-400), var(--color-success-600));
}
/* Online/availability indicator on avatar */
.shift-item__avatar-dot {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
border-radius: var(--radius-full);
border: 2px solid var(--bg-surface);
background: var(--color-success-500);
}
.shift-item__avatar-dot--away {
background: var(--color-warning-500);
}
.shift-item__avatar-dot--offline {
background: var(--color-neutral-400);
}
.shift-item__info {
flex: 1;
min-width: 0;
}
.shift-item__name {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-primary);
}
.shift-item__role {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.shift-item__time {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.shift-item__status {
flex-shrink: 0;
}
/* ============================================================
8. EMPTY STATE & LOADING SKELETON
Meaningful empty states for when sections have no data.
Skeleton loaders for perceived performance.
============================================================ */
/* ── Empty State ── */
.empty-state {
text-align: center;
padding: var(--space-8) var(--space-4);
}
.empty-state__icon {
width: 56px;
height: 56px;
margin: 0 auto var(--space-4);
color: var(--color-neutral-300);
background: var(--color-neutral-100);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
}
.empty-state__icon svg {
width: 28px;
height: 28px;
}
.empty-state__title {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--text-primary);
margin-bottom: var(--space-1);
}
.empty-state__desc {
font-size: var(--text-sm);
color: var(--text-tertiary);
max-width: 320px;
margin: 0 auto;
line-height: var(--leading-relaxed);
}
.empty-state__action {
margin-top: var(--space-5);
}
/* ── Loading Skeleton ── */
.skeleton {
position: relative;
overflow: hidden;
background: var(--color-neutral-100);
border-radius: var(--radius-md);
}
.skeleton::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.5) 50%,
transparent 100%
);
animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.skeleton--text {
height: 14px;
width: 100%;
border-radius: var(--radius-sm);
}
.skeleton--text-sm {
height: 10px;
width: 60%;
border-radius: var(--radius-sm);
}
.skeleton--title {
height: 22px;
width: 40%;
border-radius: var(--radius-sm);
}
.skeleton--circle {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
}
.skeleton--metric {
height: 36px;
width: 60px;
border-radius: var(--radius-sm);
}
.skeleton--card {
height: 120px;
border-radius: var(--radius-card);
}
/* Skeleton row layout mimicking real components */
.skeleton-row {
display: flex;
gap: var(--space-3);
align-items: center;
padding: var(--space-3-5) var(--space-4);
border-bottom: 1px solid var(--border-light);
--space-3-5: 0.875rem;
}
.skeleton-row__body {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
/* ============================================================
9. DASHBOARD HEADER VARIANTS
Greeting-style header for dashboard (replaces generic
page-header when on the home dashboard).
============================================================ */
.dashboard-welcome {
margin-bottom: var(--space-6);
}
.dashboard-welcome__greeting {
font-family: var(--font-family-heading);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-1);
line-height: var(--leading-tight);
}
.dashboard-welcome__subtext {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-normal);
}
.dashboard-welcome__date {
font-size: var(--text-xs);
color: var(--text-tertiary);
margin-top: var(--space-0-5);
font-variant-numeric: tabular-nums;
}
/* ============================================================
10. INVENTORY STATUS BAR
Compact horizontal bar showing critical supply levels.
Displayed above or within the dashboard.
============================================================ */
.inventory-bar {
display: flex;
gap: var(--space-4);
overflow-x: auto;
padding: var(--space-3) var(--space-4);
scrollbar-width: none;
}
.inventory-bar::-webkit-scrollbar {
display: none;
}
.inventory-bar__item {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--text-secondary);
}
.inventory-bar__level {
width: 48px;
height: 6px;
background: var(--color-neutral-100);
border-radius: var(--radius-full);
overflow: hidden;
}
.inventory-bar__fill {
height: 100%;
border-radius: var(--radius-full);
transition: width var(--transition-smooth);
}
.inventory-bar__fill--ok {
background: var(--color-success-500);
}
.inventory-bar__fill--low {
background: var(--color-warning-500);
}
.inventory-bar__fill--critical {
background: var(--color-danger-500);
}
/* ============================================================
11. DASHBOARD SECTION SEPARATOR
Used between major dashboard sections for visual grouping.
============================================================ */
.dashboard-section {
margin-bottom: var(--space-6);
}
.dashboard-section__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
gap: var(--space-3);
}
.dashboard-section__title {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.dashboard-section__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
background: var(--color-danger-50);
color: var(--color-danger-600);
border-radius: var(--radius-full);
font-size: 11px;
font-weight: var(--weight-bold);
line-height: 1;
margin-left: var(--space-2);
}
.dashboard-section__link {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-primary-600);
text-decoration: none;
transition: color var(--transition-fast);
}
.dashboard-section__link:hover {
color: var(--color-primary-700);
}
/* ============================================================
12. TABS FOR DASHBOARD PANELS
Small inline tabs used within panels to switch views
(e.g., "Today / This Week / All" on tasks panel).
============================================================ */
.panel-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border-light);
padding: 0 var(--space-4);
}
.panel-tabs__item {
padding: var(--space-3) var(--space-4);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--text-tertiary);
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all var(--transition-fast);
background: none;
border-top: none;
border-left: none;
border-right: none;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.panel-tabs__item:hover {
color: var(--text-primary);
}
.panel-tabs__item.is-active {
color: var(--color-primary-600);
border-bottom-color: var(--color-primary-500);
}
.panel-tabs__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
margin-left: var(--space-1-5);
background: var(--color-neutral-100);
border-radius: var(--radius-full);
font-size: 10px;
font-weight: var(--weight-bold);
line-height: 1;
}
.panel-tabs__item.is-active .panel-tabs__count {
background: var(--color-primary-50);
color: var(--color-primary-600);
}
/* Danger-colored count (e.g., overdue tasks) */
.panel-tabs__count--danger {
background: var(--color-danger-50);
color: var(--color-danger-600);
}
/* ============================================================
13. SUPER ADMIN SPECIFIC LAYOUTS
Super admin dashboard is lighter — more metrics, less
clinical detail. Focus on platform health.
============================================================ */
/* Tenant status list — compact rows */
.tenant-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border-light);
transition: background var(--transition-fast);
}
.tenant-row:last-child {
border-bottom: none;
}
.tenant-row:hover {
background: var(--bg-surface-hover);
}
.tenant-row__icon {
width: 36px;
height: 36px;
border-radius: var(--radius-lg);
background: var(--color-primary-50);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tenant-row__icon svg {
width: 18px;
height: 18px;
color: var(--color-primary-600);
}
.tenant-row__info {
flex: 1;
min-width: 0;
}
.tenant-row__name {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-primary);
}
.tenant-row__sub {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.tenant-row__stats {
display: flex;
align-items: center;
gap: var(--space-4);
flex-shrink: 0;
}
.tenant-row__stat {
text-align: right;
font-variant-numeric: tabular-nums;
}
.tenant-row__stat-value {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.tenant-row__stat-label {
font-size: 10px;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
}
.tenant-row__status {
flex-shrink: 0;
}
/* Hide detailed stats on mobile for tenant rows */
@media (max-width: 767px) {
.tenant-row__stats {
display: none;
}
}
/* ============================================================
EVDE BAKIM - AUTH PAGES (Login, Register, etc.)
============================================================ */
.auth-layout {
display: flex;
min-height: 100vh;
min-height: 100dvh;
}
.auth-layout__left {
display: none;
flex: 1;
background: linear-gradient(135deg, var(--color-primary-800), var(--color-primary-600));
padding: var(--space-10);
color: white;
position: relative;
overflow: hidden;
}
.auth-layout__left::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
top: -100px;
right: -100px;
}
.auth-layout__left::after {
content: '';
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.03);
bottom: -50px;
left: -50px;
}
.auth-layout__branding {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
max-width: 480px;
}
.auth-layout__branding h1 {
font-size: var(--text-3xl);
font-weight: var(--weight-bold);
margin-bottom: var(--space-4);
color: white;
}
.auth-layout__branding p {
font-size: var(--text-md);
opacity: 0.8;
line-height: var(--leading-relaxed);
}
.auth-layout__right {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
background: var(--bg-body);
}
/* ── Auth Form Card ── */
.auth-card {
width: 100%;
max-width: 420px;
}
.auth-card__logo {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-8);
}
.auth-card__logo-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
display: flex;
align-items: center;
justify-content: center;
}
.auth-card__logo-icon svg {
width: 24px;
height: 24px;
color: white;
}
.auth-card__logo-text {
font-family: var(--font-family-heading);
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--text-primary);
}
.auth-card__title {
font-family: var(--font-family-heading);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-1);
}
.auth-card__subtitle {
font-size: var(--text-sm);
color: var(--text-secondary);
margin-bottom: var(--space-8);
}
.auth-card__footer {
margin-top: var(--space-6);
text-align: center;
font-size: var(--text-sm);
color: var(--text-tertiary);
}
.auth-card__footer a {
font-weight: var(--weight-semibold);
color: var(--color-primary-600);
}
/* ── Divider with text ── */
.auth-divider {
display: flex;
align-items: center;
gap: var(--space-3);
margin: var(--space-6) 0;
}
.auth-divider::before,
.auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-default);
}
.auth-divider span {
font-size: var(--text-xs);
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
}
/* ━━━ TABLET+ ━━━ */
@media (min-width: 1024px) {
.auth-layout__left {
display: flex;
}
}
/* ── Branding Left Panel ── */
.auth-branding__logo {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-10);
}
.auth-branding__logo-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
}
.auth-branding__logo-text {
font-family: var(--font-family-heading);
font-size: var(--text-lg);
font-weight: var(--weight-bold);
}
.auth-branding__desc {
margin-top: var(--space-4);
font-size: var(--text-md);
opacity: 0.8;
line-height: var(--leading-relaxed);
}
.auth-branding__stats {
margin-top: var(--space-10);
display: flex;
gap: var(--space-6);
}
.auth-branding__stat-value {
font-size: var(--text-3xl);
font-weight: var(--weight-bold);
}
.auth-branding__stat-label {
font-size: var(--text-sm);
opacity: 0.7;
}
/* ── Form Header Row ── */
.form-group__header {
display: flex;
justify-content: space-between;
align-items: center;
}
.form-group__link {
font-size: var(--text-xs);
color: var(--color-primary-600);
font-weight: var(--weight-medium);
text-decoration: none;
}
.form-group__link:hover {
text-decoration: underline;
}
/* ── Footer Admin Variant ── */
.auth-card__footer--admin {
margin-top: var(--space-2);
font-size: var(--text-xs);
}
.auth-card__footer--admin a {
color: var(--text-tertiary);
font-weight: var(--weight-regular);
}
.auth-card__footer--admin a:hover {
color: var(--text-secondary);
}
/* ============================================================
EVDE BAKIM - PATIENTS MODULE v2.0
Hasta Yönetimi — Complete Patient Management Styles
Sections:
1. Patient List — Filter chips, view toggle, list/table
2. Patient Card (List) — Enhanced patient-card for listing
3. Patient Table — Desktop table enhancements
4. Patient Form — Multi-section create/edit
5. Patient Profile — Detail hub layout
6. Profile Header — Patient identity banner
7. Today Panel — Quick-view daily summary
8. Care Timeline — Visit/event timeline
9. Profile Tabs — 10-tab submodule navigation
10. Tab Content Components — Vitals, Meds, Shifts, etc.
11. Condition/Device Templates — Dynamic add/remove
12. Sticky Actions — Form save bar
13. Responsive Overrides
============================================================ */
/* ============================================================
1. PATIENT LIST — Filter chips, view toggle, search
============================================================ */
.patient-list-header {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
/* Search + actions row */
.patient-list-header__top {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.patient-list-header__search {
flex: 1;
min-width: 200px;
max-width: 400px;
}
.patient-list-header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
margin-left: auto;
}
/* Filter chips row */
.filter-chips {
display: flex;
align-items: center;
gap: var(--space-2);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: var(--space-1);
}
.filter-chips::-webkit-scrollbar {
display: none;
}
.filter-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding: var(--space-1-5) var(--space-3);
height: 36px;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-secondary);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-full);
cursor: pointer;
white-space: nowrap;
transition: all var(--transition-base);
user-select: none;
}
.filter-chip:hover {
background: var(--color-neutral-50);
border-color: var(--color-neutral-300);
}
.filter-chip.is-active {
background: var(--color-primary-50);
border-color: var(--color-primary-300);
color: var(--color-primary-700);
font-weight: var(--weight-semibold);
}
.filter-chip__count {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 1px 6px;
background: var(--color-neutral-100);
border-radius: var(--radius-full);
color: var(--text-tertiary);
line-height: 1.4;
}
.filter-chip.is-active .filter-chip__count {
background: rgba(13, 148, 136, 0.15);
color: var(--color-primary-600);
}
/* Status-colored filter chips */
.filter-chip--active.is-active {
background: var(--status-active-bg);
border-color: var(--status-active-border);
color: var(--status-active-text);
}
.filter-chip--critical.is-active {
background: var(--status-critical-bg);
border-color: var(--status-critical-border);
color: var(--status-critical-text);
}
.filter-chip--pending.is-active {
background: var(--status-pending-bg);
border-color: var(--status-pending-border);
color: var(--status-pending-text);
}
.filter-chip--inactive.is-active {
background: var(--status-inactive-bg);
border-color: var(--status-inactive-border);
color: var(--status-inactive-text);
}
/* View toggle (card/table) */
.view-toggle {
display: inline-flex;
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
overflow: hidden;
}
.view-toggle__btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 36px;
background: var(--bg-surface);
color: var(--text-tertiary);
cursor: pointer;
transition: all var(--transition-fast);
border: none;
}
.view-toggle__btn:not(:last-child) {
border-right: 1px solid var(--border-default);
}
.view-toggle__btn:hover {
background: var(--color-neutral-50);
color: var(--text-secondary);
}
.view-toggle__btn.is-active {
background: var(--color-primary-50);
color: var(--color-primary-600);
}
.view-toggle__btn svg {
width: 18px;
height: 18px;
}
/* Sort dropdown trigger */
.sort-trigger {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding: var(--space-1-5) var(--space-3);
height: 36px;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-secondary);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all var(--transition-fast);
}
.sort-trigger:hover {
border-color: var(--color-neutral-300);
}
.sort-trigger svg {
width: 16px;
height: 16px;
}
/* Results count */
.results-count {
font-size: var(--text-sm);
color: var(--text-tertiary);
padding: var(--space-1) 0;
}
.results-count strong {
color: var(--text-primary);
font-weight: var(--weight-semibold);
}
/* ============================================================
2. PATIENT CARD (List) — Enhanced card for patient listing
============================================================ */
.patient-cards {
display: grid;
gap: var(--space-3);
grid-template-columns: 1fr;
}
/* Enhanced patient card for list view */
.patient-card--list {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-left: 3px solid transparent;
border-radius: var(--radius-card);
padding: var(--space-4) var(--space-5);
display: flex;
gap: var(--space-4);
align-items: flex-start;
cursor: pointer;
transition: all var(--transition-base);
position: relative;
}
.patient-card--list:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-neutral-200);
transform: translateY(-1px);
}
/* Status left border */
.patient-card--list.state-border-left--active { border-left-color: var(--status-active-dot); }
.patient-card--list.state-border-left--critical { border-left-color: var(--status-critical-dot); }
.patient-card--list.state-border-left--pending { border-left-color: var(--status-pending-dot); }
.patient-card--list.state-border-left--warning { border-left-color: var(--status-warning-dot); }
.patient-card--list.state-border-left--inactive { border-left-color: var(--status-inactive-dot); opacity: 0.75; }
.patient-card__avatar--lg {
width: 52px;
height: 52px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--color-info-100), var(--color-info-200));
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-info-700);
flex-shrink: 0;
}
/* Female avatar gradient */
.patient-card__avatar--female {
background: linear-gradient(135deg, var(--color-danger-50), var(--color-danger-100));
color: var(--color-danger-600);
}
/* Male avatar gradient */
.patient-card__avatar--male {
background: linear-gradient(135deg, var(--color-info-100), var(--color-info-200));
color: var(--color-info-700);
}
.patient-card__body {
flex: 1;
min-width: 0;
}
.patient-card__name-row {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-1);
}
.patient-card__name {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.patient-card__age {
font-size: var(--text-sm);
color: var(--text-tertiary);
flex-shrink: 0;
}
.patient-card__id {
font-size: var(--text-xs);
color: var(--text-tertiary);
font-family: var(--font-family-mono);
margin-bottom: var(--space-2);
}
.patient-card__tags {
display: flex;
align-items: center;
gap: var(--space-1-5);
flex-wrap: wrap;
margin-bottom: var(--space-3);
}
.patient-card__details {
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.patient-card__detail {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.patient-card__detail svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.patient-card__aside {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-2);
flex-shrink: 0;
}
.patient-card__next-visit {
font-size: var(--text-xs);
color: var(--text-tertiary);
text-align: right;
}
.patient-card__next-visit strong {
display: block;
font-size: var(--text-sm);
color: var(--text-primary);
font-weight: var(--weight-semibold);
}
/* Quick action dots on card hover */
.patient-card__quick-actions {
display: flex;
gap: var(--space-1);
opacity: 0;
transition: opacity var(--transition-fast);
}
.patient-card--list:hover .patient-card__quick-actions {
opacity: 1;
}
/* ============================================================
3. PATIENT TABLE — Desktop table enhancements
============================================================ */
.patient-table .table td {
vertical-align: middle;
}
.patient-table__name-cell {
display: flex;
align-items: center;
gap: var(--space-3);
}
.patient-table__avatar {
width: 36px;
height: 36px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
flex-shrink: 0;
}
.patient-table__avatar--male {
background: linear-gradient(135deg, var(--color-info-100), var(--color-info-200));
color: var(--color-info-700);
}
.patient-table__avatar--female {
background: linear-gradient(135deg, var(--color-danger-50), var(--color-danger-100));
color: var(--color-danger-600);
}
.patient-table__name-text {
min-width: 0;
}
.patient-table__name-text .table__cell-main {
display: flex;
align-items: center;
gap: var(--space-1-5);
}
/* Risk indicator in table */
.risk-indicator {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 2px 8px;
border-radius: var(--radius-full);
}
.risk-indicator--high {
background: var(--status-critical-bg);
color: var(--status-critical-text);
}
.risk-indicator--medium {
background: var(--status-warning-bg);
color: var(--status-warning-text);
}
.risk-indicator--low {
background: var(--status-active-bg);
color: var(--status-active-text);
}
/* Care type badge */
.care-type-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
padding: 2px 8px;
border-radius: var(--radius-full);
background: var(--color-neutral-100);
color: var(--text-secondary);
}
.care-type-badge svg {
width: 12px;
height: 12px;
}
/* ============================================================
4. PATIENT FORM — Multi-section create/edit
============================================================ */
.patient-form {
max-width: var(--form-max-width);
margin: 0 auto;
}
/* Wider form for patient (more fields) */
.patient-form--wide {
max-width: 840px;
}
.patient-form__section {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-card);
margin-bottom: var(--space-5);
overflow: hidden;
}
.patient-form__section-header {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border-light);
background: var(--bg-surface-alt);
}
.patient-form__section-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.patient-form__section-icon svg {
width: 18px;
height: 18px;
}
.patient-form__section-icon--identity {
background: var(--metric-patients-bg);
color: var(--metric-patients-icon);
}
.patient-form__section-icon--address {
background: var(--metric-visits-bg);
color: var(--metric-visits-icon);
}
.patient-form__section-icon--care {
background: var(--metric-inventory-bg);
color: var(--metric-inventory-icon);
}
.patient-form__section-icon--status {
background: var(--metric-alerts-bg);
color: var(--metric-alerts-icon);
}
.patient-form__section-icon--conditions {
background: var(--metric-tasks-bg);
color: var(--metric-tasks-icon);
}
.patient-form__section-icon--notes {
background: var(--metric-reports-bg);
color: var(--metric-reports-icon);
}
.patient-form__section-title {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.patient-form__section-desc {
font-size: var(--text-xs);
color: var(--text-tertiary);
margin-top: 2px;
}
.patient-form__section-body {
padding: var(--space-5);
}
/* Sub-header (inline label + button) */
.patient-form__sub-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-3);
}
/* Dynamic item row (PHP create/edit pattern) */
.dynamic-item {
position: relative;
transition: opacity 200ms ease, transform 200ms ease;
}
/* Danger-zone section (edit page) */
.patient-form__section--danger {
border-color: var(--color-danger-200);
}
.patient-form__section-icon--danger {
background: var(--color-danger-100);
color: var(--color-danger-600);
}
.patient-form__section-title--danger {
color: var(--color-danger-700);
}
/* ── Form action bar (submit/cancel buttons) ── */
.patient-form__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-5);
border-top: 1px solid var(--border-light);
margin-top: var(--space-6);
}
/* ── Additional section icon variants ── */
.patient-form__section-icon--heart-pulse {
background: var(--color-danger-50);
color: var(--color-danger-500);
}
.patient-form__section-icon--clipboard {
background: var(--color-info-50);
color: var(--color-info-600);
}
.patient-form__section-icon--map-pin {
background: var(--color-warning-50);
color: var(--color-warning-600);
}
.patient-form__section-icon--shield,
.patient-form__section-icon--shield-check {
background: var(--color-success-50);
color: var(--color-success-600);
}
.patient-form__section-icon--user {
background: var(--color-primary-50);
color: var(--color-primary-600);
}
/* File / Photo upload area */
.photo-upload {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-5);
}
.photo-upload__preview {
width: 80px;
height: 80px;
border-radius: var(--radius-full);
background: var(--color-neutral-100);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
border: 2px dashed var(--border-default);
transition: border-color var(--transition-fast);
}
.photo-upload__preview:hover {
border-color: var(--color-primary-300);
}
.photo-upload__preview svg {
width: 28px;
height: 28px;
color: var(--text-tertiary);
}
.photo-upload__preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-upload__info {
flex: 1;
}
.photo-upload__label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-primary);
margin-bottom: var(--space-1);
}
.photo-upload__hint {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
/* ============================================================
5. PATIENT PROFILE — Detail hub layout
============================================================ */
.patient-profile {
display: grid;
gap: var(--space-5);
grid-template-columns: 1fr;
}
/* Two-column layout for desktop (profile header spans full) */
.patient-profile__full {
grid-column: 1 / -1;
}
/* ============================================================
6. PROFILE HEADER — Patient identity banner
============================================================ */
.profile-header {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-card);
overflow: hidden;
}
/* Optional: Colored top accent strip based on status */
.profile-header--critical {
border-top: 3px solid var(--status-critical-dot);
}
.profile-header--active {
border-top: 3px solid var(--status-active-dot);
}
.profile-header--warning {
border-top: 3px solid var(--status-warning-dot);
}
.profile-header__body {
padding: var(--space-5);
display: flex;
gap: var(--space-5);
align-items: flex-start;
}
.profile-header__avatar {
width: 72px;
height: 72px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
flex-shrink: 0;
position: relative;
}
.profile-header__avatar--male {
background: linear-gradient(135deg, var(--color-info-100), var(--color-info-200));
color: var(--color-info-700);
}
.profile-header__avatar--female {
background: linear-gradient(135deg, var(--color-danger-50), var(--color-danger-100));
color: var(--color-danger-600);
}
/* Status dot on avatar */
.profile-header__avatar-status {
position: absolute;
bottom: 2px;
right: 2px;
width: 14px;
height: 14px;
border-radius: var(--radius-full);
border: 2px solid var(--bg-surface);
}
.profile-header__info {
flex: 1;
min-width: 0;
}
.profile-header__name {
font-family: var(--font-family-heading);
font-size: var(--text-xl);
font-weight: var(--weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-1);
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.profile-header__subtitle {
font-size: var(--text-sm);
color: var(--text-secondary);
margin-bottom: var(--space-3);
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.profile-header__subtitle-item {
display: flex;
align-items: center;
gap: var(--space-1);
}
.profile-header__subtitle-item svg {
width: 14px;
height: 14px;
}
.profile-header__subtitle-divider {
width: 1px;
height: 14px;
background: var(--border-default);
}
.profile-header__tags {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.profile-header__actions {
display: flex;
flex-direction: column;
gap: var(--space-2);
flex-shrink: 0;
}
/* Quick stats bar under header */
.profile-header__stats {
display: flex;
border-top: 1px solid var(--border-light);
background: var(--bg-surface-alt);
}
.profile-header__stat {
flex: 1;
padding: var(--space-3) var(--space-4);
text-align: center;
border-right: 1px solid var(--border-light);
}
.profile-header__stat:last-child {
border-right: none;
}
.profile-header__stat-value {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.profile-header__stat-label {
font-size: var(--text-xs);
color: var(--text-tertiary);
margin-top: 2px;
}
/* ============================================================
7. TODAY PANEL — Quick-view daily summary
============================================================ */
.today-panel {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-card);
overflow: hidden;
}
.today-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border-light);
}
.today-panel__title {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--text-primary);
display: flex;
align-items: center;
gap: var(--space-2);
}
.today-panel__title svg {
width: 18px;
height: 18px;
color: var(--color-primary-500);
}
.today-panel__date {
font-size: var(--text-sm);
color: var(--text-tertiary);
}
.today-panel__body {
padding: 0;
}
/* Today items */
.today-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
border-bottom: 1px solid var(--border-light);
transition: background var(--transition-fast);
}
.today-item:last-child {
border-bottom: none;
}
.today-item:hover {
background: var(--color-neutral-25);
}
.today-item__time {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--text-tertiary);
min-width: 48px;
padding-top: 2px;
font-variant-numeric: tabular-nums;
}
.today-item__icon {
width: 32px;
height: 32px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.today-item__icon svg {
width: 16px;
height: 16px;
}
.today-item__icon--visit {
background: var(--metric-visits-bg);
color: var(--metric-visits-icon);
}
.today-item__icon--med {
background: var(--status-warning-bg);
color: var(--status-warning-icon);
}
.today-item__icon--task {
background: var(--metric-tasks-bg);
color: var(--metric-tasks-icon);
}
.today-item__icon--vital {
background: var(--status-info-bg);
color: var(--status-info-icon);
}
.today-item__icon--alert {
background: var(--status-critical-bg);
color: var(--status-critical-icon);
}
.today-item__content {
flex: 1;
min-width: 0;
}
.today-item__label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-primary);
}
.today-item__desc {
font-size: var(--text-xs);
color: var(--text-tertiary);
margin-top: 1px;
}
.today-item__status {
flex-shrink: 0;
padding-top: 2px;
}
/* Overdue highlight */
.today-item--overdue {
background: rgba(239, 68, 68, 0.04);
}
.today-item--overdue .today-item__time {
color: var(--color-danger-600);
}
/* ============================================================
8. CARE TIMELINE — Visit/event timeline (uses states.css)
============================================================ */
.care-timeline {
position: relative;
padding-left: var(--space-8);
}
.care-timeline::before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: 0;
width: 2px;
background: var(--border-light);
}
.care-timeline__item {
position: relative;
padding-bottom: var(--space-5);
}
.care-timeline__item:last-child {
padding-bottom: 0;
}
.care-timeline__dot {
position: absolute;
left: calc(-1 * var(--space-8) + 8px);
top: 4px;
width: 16px;
height: 16px;
border-radius: var(--radius-full);
border: 3px solid var(--bg-surface);
z-index: 1;
}
.care-timeline__dot--visit { background: var(--status-active-dot); }
.care-timeline__dot--med { background: var(--status-warning-dot); }
.care-timeline__dot--vital { background: var(--status-info-dot); }
.care-timeline__dot--task { background: var(--status-completed-dot); }
.care-timeline__dot--alert { background: var(--status-critical-dot); }
.care-timeline__dot--note { background: var(--color-neutral-300); }
.care-timeline__card {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: var(--space-3) var(--space-4);
transition: box-shadow var(--transition-fast);
}
.care-timeline__card:hover {
box-shadow: var(--shadow-sm);
}
.care-timeline__card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-1);
}
.care-timeline__card-title {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.care-timeline__card-time {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.care-timeline__card-body {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-normal);
}
.care-timeline__card-meta {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-2);
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.care-timeline__card-meta svg {
width: 12px;
height: 12px;
}
.care-timeline__date-label {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
margin-bottom: var(--space-3);
padding-left: var(--space-1);
}
/* ============================================================
9. PROFILE TABS — 10-tab submodule navigation
============================================================ */
.profile-tabs {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-card);
overflow: hidden;
}
.profile-tabs__nav {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border-default);
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
background: var(--bg-surface-alt);
}
.profile-tabs__nav::-webkit-scrollbar {
display: none;
}
.profile-tabs__tab {
display: flex;
align-items: center;
gap: var(--space-1-5);
padding: var(--space-3) var(--space-4);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-tertiary);
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: all var(--transition-fast);
cursor: pointer;
margin-bottom: -1px;
min-height: 48px;
}
.profile-tabs__tab:hover {
color: var(--text-primary);
background: rgba(0, 0, 0, 0.02);
}
.profile-tabs__tab.is-active {
color: var(--color-primary-600);
border-bottom-color: var(--color-primary-500);
background: var(--bg-surface);
}
.profile-tabs__tab svg {
width: 16px;
height: 16px;
}
.profile-tabs__tab-badge {
font-size: 10px;
font-weight: var(--weight-bold);
padding: 1px 6px;
border-radius: var(--radius-full);
background: var(--color-neutral-100);
color: var(--text-tertiary);
line-height: 1.4;
}
.profile-tabs__tab.is-active .profile-tabs__tab-badge {
background: rgba(13, 148, 136, 0.12);
color: var(--color-primary-600);
}
/* Alert badge on tab (e.g., critical vitals) */
.profile-tabs__tab-alert {
font-size: 10px;
font-weight: var(--weight-bold);
padding: 1px 6px;
border-radius: var(--radius-full);
background: var(--status-critical-bg);
color: var(--status-critical-text);
line-height: 1.4;
}
.profile-tabs__content {
padding: var(--space-5);
}
/* Tab panel visibility */
.tab-panel {
display: none;
}
.tab-panel.is-active {
display: block;
}
/* ── Info Grid (profile overview panels) ── */
.info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3) var(--space-5);
}
.info-item__label {
font-size: var(--text-xs);
color: var(--text-tertiary);
margin-bottom: 2px;
}
.info-item__value {
font-size: var(--text-sm);
color: var(--text-primary);
}
/* ── List Row (flush panel items) ── */
.list-row {
padding: var(--space-3) var(--space-5);
border-bottom: 1px solid var(--border-light);
display: flex;
justify-content: space-between;
align-items: center;
}
.list-row:last-child { border-bottom: 0; }
.list-row__main { display: flex; gap: var(--space-3); align-items: center; }
.list-row__icon {
width: 36px; height: 36px; border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.list-row__icon--info { background: var(--color-info-50); color: var(--color-info-600); }
.list-row__icon svg { width: 18px; height: 18px; }
.list-row__title { font-weight: var(--weight-semibold); color: var(--text-primary); }
.list-row__subtitle { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; }
/* ── Quick Info (sidebar detail items) ── */
.quick-info { display: flex; flex-direction: column; gap: var(--space-3); }
.quick-info__label {
font-size: var(--text-xs); color: var(--text-tertiary);
text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: 2px;
}
.quick-info__value { font-size: var(--text-sm); color: var(--text-primary); }
/* ── Section sub-heading (contacts etc.) ── */
.contacts-section { margin-bottom: var(--space-5); }
.contacts-section__title {
font-size: var(--text-sm); font-weight: var(--weight-semibold);
color: var(--text-secondary); margin-bottom: var(--space-3);
}
.contacts-section__list { display: flex; flex-direction: column; gap: var(--space-3); }
/* ── Panel title color variant ── */
.panel__title--danger { color: var(--color-danger-600); }
/* ── Notes whitespace ── */
.notes-body { white-space: pre-wrap; font-size: var(--text-sm); color: var(--text-primary); }
.notes-meta { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-tertiary); }
/* ── Tag wrap (badges/allergies) ── */
.tag-wrap { display: flex; gap: var(--space-1); flex-wrap: wrap; }
/* ── Profile Stats (below header) ── */
.profile-stats {
display: flex; gap: var(--space-5); flex-wrap: wrap;
margin-top: var(--space-4); margin-bottom: var(--space-5);
}
.profile-stat { text-align: center; }
.profile-stat__value { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-primary); }
.profile-stat__label { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
/* ============================================================
10. TAB CONTENT COMPONENTS — Vitals, Meds, Shifts, etc.
============================================================ */
/* ── Vitals Grid ── */
.vitals-grid {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(2, 1fr);
}
.vital-card {
background: var(--bg-surface-alt);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: var(--space-4);
text-align: center;
transition: box-shadow var(--transition-fast);
}
.vital-card:hover {
box-shadow: var(--shadow-sm);
}
.vital-card__icon {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
margin: 0 auto var(--space-2);
display: flex;
align-items: center;
justify-content: center;
}
.vital-card__icon svg {
width: 20px;
height: 20px;
}
.vital-card__icon--normal {
background: var(--status-active-bg);
color: var(--status-active-icon);
}
.vital-card__icon--warning {
background: var(--status-warning-bg);
color: var(--status-warning-icon);
}
.vital-card__icon--critical {
background: var(--status-critical-bg);
color: var(--status-critical-icon);
}
.vital-card__value {
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--text-primary);
font-variant-numeric: tabular-nums;
line-height: 1;
margin-bottom: var(--space-1);
}
.vital-card__unit {
font-size: var(--text-xs);
color: var(--text-tertiary);
font-weight: var(--weight-regular);
}
.vital-card__label {
font-size: var(--text-sm);
color: var(--text-secondary);
font-weight: var(--weight-medium);
}
.vital-card__time {
font-size: var(--text-xs);
color: var(--text-tertiary);
margin-top: var(--space-1);
}
/* Vital trend indicator */
.vital-card__trend {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
margin-top: var(--space-1);
}
.vital-card__trend svg {
width: 12px;
height: 12px;
}
.vital-card__trend--up { color: var(--color-danger-500); }
.vital-card__trend--down { color: var(--color-info-500); }
.vital-card__trend--stable { color: var(--color-success-500); }
/* ── Medication Schedule ── */
.med-schedule {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.med-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
transition: all var(--transition-fast);
}
.med-item:hover {
background: var(--color-neutral-25);
}
.med-item__time {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-primary);
min-width: 56px;
font-variant-numeric: tabular-nums;
}
.med-item__pill-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.med-item__pill-icon svg {
width: 18px;
height: 18px;
}
.med-item__pill-icon--tablet {
background: var(--status-info-bg);
color: var(--status-info-icon);
}
.med-item__pill-icon--injection {
background: var(--status-critical-bg);
color: var(--status-critical-icon);
}
.med-item__pill-icon--liquid {
background: var(--status-active-bg);
color: var(--status-active-icon);
}
.med-item__pill-icon--cream {
background: var(--status-pending-bg);
color: var(--status-pending-icon);
}
.med-item__info {
flex: 1;
min-width: 0;
}
.med-item__name {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.med-item__dosage {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.med-item__status {
flex-shrink: 0;
}
/* ── Shift List ── */
.shift-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.shift-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--bg-surface-alt);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
}
.shift-item__avatar {
width: 36px;
height: 36px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-xs);
font-weight: var(--weight-bold);
color: white;
flex-shrink: 0;
}
.shift-item__info {
flex: 1;
min-width: 0;
}
.shift-item__name {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.shift-item__role {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.shift-item__time {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
text-align: right;
}
.shift-item__time-label {
font-size: var(--text-xs);
color: var(--text-tertiary);
font-weight: var(--weight-regular);
}
/* ── Task Checklist ── */
.task-checklist {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.task-check-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
transition: background var(--transition-fast);
}
.task-check-item:hover {
background: var(--color-neutral-25);
}
.task-check-item.is-completed {
opacity: 0.6;
}
.task-check-item.is-completed .task-check-item__label {
text-decoration: line-through;
}
.task-check-item__priority {
width: 4px;
height: 24px;
border-radius: 2px;
flex-shrink: 0;
}
.task-check-item__priority--high { background: var(--status-critical-dot); }
.task-check-item__priority--medium { background: var(--status-warning-dot); }
.task-check-item__priority--low { background: var(--status-active-dot); }
.task-check-item__label {
font-size: var(--text-sm);
color: var(--text-primary);
flex: 1;
}
.task-check-item__due {
font-size: var(--text-xs);
color: var(--text-tertiary);
font-variant-numeric: tabular-nums;
}
.task-check-item__assignee {
width: 24px;
height: 24px;
border-radius: var(--radius-full);
background: var(--color-secondary-200);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: var(--weight-bold);
color: var(--color-secondary-700);
flex-shrink: 0;
}
/* ── File List ── */
.file-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.file-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
transition: all var(--transition-fast);
}
.file-item:hover {
background: var(--color-neutral-25);
border-color: var(--color-neutral-200);
}
.file-item__icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.file-item__icon svg {
width: 20px;
height: 20px;
}
.file-item__icon--pdf {
background: rgba(239, 68, 68, 0.10);
color: var(--color-danger-500);
}
.file-item__icon--image {
background: rgba(59, 130, 246, 0.10);
color: var(--color-info-500);
}
.file-item__icon--doc {
background: rgba(13, 148, 136, 0.10);
color: var(--color-primary-500);
}
.file-item__icon--other {
background: var(--color-neutral-100);
color: var(--text-tertiary);
}
.file-item__info {
flex: 1;
min-width: 0;
}
.file-item__name {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-item__meta {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.file-item__actions {
display: flex;
gap: var(--space-1);
}
/* ── Notes List ── */
.note-item {
padding: var(--space-4);
border-bottom: 1px solid var(--border-light);
}
.note-item:last-child {
border-bottom: none;
}
.note-item__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-2);
}
.note-item__author {
display: flex;
align-items: center;
gap: var(--space-2);
}
.note-item__author-avatar {
width: 28px;
height: 28px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: var(--weight-bold);
color: white;
background: var(--color-secondary-400);
}
.note-item__author-name {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.note-item__time {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.note-item__body {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
}
.note-item__body--pinned {
border-left: 3px solid var(--color-primary-300);
padding-left: var(--space-3);
}
/* ── Contact Card ── */
.contact-card {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
background: var(--bg-surface-alt);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
}
.contact-card__avatar {
width: 44px;
height: 44px;
border-radius: var(--radius-full);
background: var(--color-neutral-200);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-card__avatar svg {
width: 20px;
height: 20px;
color: var(--text-tertiary);
}
.contact-card__info {
flex: 1;
min-width: 0;
}
.contact-card__name {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.contact-card__relation {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.contact-card__actions {
display: flex;
gap: var(--space-2);
}
/* Emergency contact highlight */
.contact-card--emergency {
border-color: var(--status-critical-border);
background: rgba(239, 68, 68, 0.03);
}
.contact-card--emergency .contact-card__avatar {
background: var(--status-critical-bg);
color: var(--status-critical-icon);
}
/* ── Supply Item ── */
.supply-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border-light);
}
.supply-item:last-child {
border-bottom: none;
}
.supply-item__icon {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
background: var(--metric-inventory-bg);
color: var(--metric-inventory-icon);
flex-shrink: 0;
}
.supply-item__icon svg {
width: 18px;
height: 18px;
}
.supply-item__info {
flex: 1;
min-width: 0;
}
.supply-item__name {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-primary);
}
.supply-item__quantity {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.supply-item__stock {
flex-shrink: 0;
text-align: right;
}
.supply-item__stock-value {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
}
.supply-item__stock-value--low {
color: var(--color-danger-600);
}
.supply-item__stock-value--ok {
color: var(--color-success-600);
}
/* ============================================================
11. CONDITION/DEVICE TEMPLATES — Dynamic add/remove
============================================================ */
.template-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.template-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4);
background: var(--bg-surface-alt);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
position: relative;
}
.template-item__body {
flex: 1;
min-width: 0;
}
.template-item__remove {
position: absolute;
top: var(--space-2);
right: var(--space-2);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
color: var(--text-tertiary);
cursor: pointer;
transition: all var(--transition-fast);
}
.template-item__remove:hover {
background: var(--color-danger-50);
color: var(--color-danger-500);
}
.template-item__remove svg {
width: 16px;
height: 16px;
}
/* Add template button */
.template-add {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3);
border: 2px dashed var(--border-default);
border-radius: var(--radius-lg);
color: var(--text-tertiary);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
cursor: pointer;
transition: all var(--transition-fast);
}
.template-add:hover {
border-color: var(--color-primary-300);
color: var(--color-primary-600);
background: rgba(13, 148, 136, 0.04);
}
.template-add svg {
width: 18px;
height: 18px;
}
/* ============================================================
12. STICKY ACTIONS — Form save bar
============================================================ */
.sticky-actions {
position: sticky;
bottom: 0;
z-index: var(--z-sticky);
background: var(--bg-surface);
border-top: 1px solid var(--border-default);
padding: var(--space-4) var(--space-5);
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-3);
box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.06);
}
.sticky-actions__info {
flex: 1;
font-size: var(--text-xs);
color: var(--text-tertiary);
}
/* Mobile: full-width bottom bar */
@media (max-width: 767px) {
.sticky-actions {
position: fixed;
bottom: var(--bottom-nav-height);
left: 0;
right: 0;
padding: var(--space-3) var(--space-4);
}
}
/* ============================================================
13. RESPONSIVE OVERRIDES
============================================================ */
/* ━━━ MOBILE (base) ━━━ */
/* Profile header stacks vertically */
@media (max-width: 639px) {
.profile-header__body {
flex-direction: column;
align-items: center;
text-align: center;
}
.profile-header__info {
text-align: center;
}
.profile-header__name {
justify-content: center;
}
.profile-header__subtitle {
justify-content: center;
}
.profile-header__tags {
justify-content: center;
}
.profile-header__actions {
flex-direction: row;
width: 100%;
}
.profile-header__actions .btn {
flex: 1;
}
.profile-header__stats {
flex-wrap: wrap;
}
.profile-header__stat {
flex: 1 1 45%;
min-width: 0;
}
/* Patient card aside goes under */
.patient-card--list {
flex-direction: column;
}
.patient-card__aside {
flex-direction: row;
align-items: center;
gap: var(--space-3);
width: 100%;
padding-top: var(--space-3);
border-top: 1px solid var(--border-light);
}
.patient-card__next-visit {
text-align: left;
}
/* Today panel full width */
.today-item__time {
min-width: 40px;
font-size: 11px;
}
}
/* ━━━ SM+ (640px) — Cards 2-col ━━━ */
@media (min-width: 640px) {
.patient-cards {
grid-template-columns: repeat(2, 1fr);
}
.vitals-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ━━━ TABLET (768px+) ━━━ */
@media (min-width: 768px) {
.patient-list-header {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.patient-list-header__top {
flex: 1;
}
.patient-profile {
grid-template-columns: 1fr 340px;
}
.patient-cards {
grid-template-columns: 1fr;
}
/* Profile tabs mobile scroll hint */
.profile-tabs__tab {
padding: var(--space-3) var(--space-5);
}
}
/* ━━━ DESKTOP (1024px+) ━━━ */
@media (min-width: 1024px) {
.patient-cards {
grid-template-columns: repeat(2, 1fr);
}
.patient-profile {
grid-template-columns: 1fr 380px;
}
.vitals-grid {
grid-template-columns: repeat(4, 1fr);
}
/* Quick actions always visible on desktop */
.patient-card__quick-actions {
opacity: 1;
}
}
/* ━━━ LARGE DESKTOP (1280px+) ━━━ */
@media (min-width: 1280px) {
.patient-cards {
grid-template-columns: repeat(3, 1fr);
}
}
/* ━━━ PRINT — Patient profile ━━━ */
@media print {
.profile-tabs__nav,
.today-panel__header .btn,
.sticky-actions,
.patient-card__quick-actions,
.view-toggle,
.filter-chips,
.template-item__remove,
.template-add {
display: none !important;
}
.tab-panel {
display: block !important;
break-inside: avoid;
}
.profile-header {
border: 1px solid #ddd;
box-shadow: none;
}
.patient-profile {
grid-template-columns: 1fr;
}
}
/* ============================================================
EVDE BAKIM — CALENDAR PAGES
Extracted from calendar/index.php, week.php, day.php inline styles
============================================================ */
/* ─── Filter Chips ───────────────────────────────────── */
.cal-filter-chip {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.625rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 500;
text-decoration: none;
border: 1px solid var(--border);
color: var(--text-muted);
background: transparent;
transition: all 0.15s;
cursor: pointer;
white-space: nowrap;
}
.cal-filter-chip:hover { border-color: var(--primary); color: var(--primary); }
.cal-filter-chip--active { background: var(--primary); color: #fff; border-color: var(--primary); }
.cal-filter-chip--shift.cal-filter-chip--active { background: #3b82f6; border-color: #3b82f6; }
.cal-filter-chip--task.cal-filter-chip--active { background: #f97316; border-color: #f97316; }
.cal-filter-chip--medication.cal-filter-chip--active { background: #22c55e; border-color: #22c55e; }
.cal-filter-chip--incident.cal-filter-chip--active { background: #ef4444; border-color: #ef4444; }
.cal-filter-chip--reminder.cal-filter-chip--active { background: #a855f7; border-color: #a855f7; }
.cal-filter-chip--vital.cal-filter-chip--active { background: #ec4899; border-color: #ec4899; }
/* ─── Event Type Colors ──────────────────────────────── */
.cal-event--shift { background: color-mix(in srgb, #3b82f6 15%, transparent); color: #1e40af; border-left: 3px solid #3b82f6; }
.cal-event--task { background: color-mix(in srgb, #f97316 15%, transparent); color: #c2410c; border-left: 3px solid #f97316; }
.cal-event--medication { background: color-mix(in srgb, #22c55e 15%, transparent); color: #15803d; border-left: 3px solid #22c55e; }
.cal-event--incident { background: color-mix(in srgb, #ef4444 15%, transparent); color: #b91c1c; border-left: 3px solid #ef4444; }
.cal-event--reminder { background: color-mix(in srgb, #a855f7 15%, transparent); color: #7e22ce; border-left: 3px solid #a855f7; }
.cal-event--vital { background: color-mix(in srgb, #ec4899 15%, transparent); color: #be185d; border-left: 3px solid #ec4899; }
.cal-event--default { background: var(--bg-muted); color: var(--text-muted); border-left: 3px solid var(--border); }
/* ─── Legend ──────────────────────────────────────────── */
.cal-legend-item { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--text); }
.cal-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.cal-legend-dot--shift { background: #3b82f6; }
.cal-legend-dot--task { background: #f97316; }
.cal-legend-dot--medication { background: #22c55e; }
.cal-legend-dot--incident { background: #ef4444; }
.cal-legend-dot--reminder { background: #a855f7; }
.cal-legend-dot--vital { background: #ec4899; }
/* ─── Event Modal ────────────────────────────────────── */
.cal-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 2000;
display: none;
justify-content: center;
align-items: center;
padding: 1rem;
}
.cal-modal-overlay.is-open { display: flex; }
.cal-modal {
background: var(--bg-card);
border-radius: 14px;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
width: 100%;
max-width: 420px;
overflow: hidden;
animation: calModalIn 0.2s ease;
}
@keyframes calModalIn {
from { opacity: 0; transform: translateY(16px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.cal-modal__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border);
}
.cal-modal__title {
margin: 0;
font-size: 1rem;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 280px;
}
.cal-modal__type-icon {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cal-modal__type-icon i { width: 16px; height: 16px; }
.cal-modal__body { padding: 1rem 1.25rem; }
.cal-modal__row {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 0;
font-size: 0.875rem;
border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.cal-modal__row:last-child { border-bottom: none; }
.cal-modal__footer {
padding: 0.75rem 1.25rem;
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
/* ─── Month View: Calendar Grid ──────────────────────── */
.cal-grid { overflow-x: auto; }
.cal-grid__header {
display: grid;
grid-template-columns: repeat(7, 1fr);
border-bottom: 2px solid var(--border);
}
.cal-grid__day-name {
padding: 0.625rem;
text-align: center;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.cal-grid__body {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.cal-grid__cell {
min-height: 100px;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 0.375rem;
cursor: pointer;
transition: background 0.12s;
position: relative;
}
.cal-grid__cell:nth-child(7n) { border-right: none; }
.cal-grid__cell:hover { background: var(--bg-hover); }
.cal-grid__cell--empty { background: var(--bg-muted); cursor: default; opacity: 0.4; }
.cal-grid__cell--today { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.cal-grid__cell--today:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.cal-grid__cell-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.25rem;
}
.cal-grid__day-num {
font-size: 0.8125rem;
font-weight: 500;
color: var(--text);
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.cal-grid__day-num--today {
background: var(--primary);
color: #fff;
font-weight: 700;
}
.cal-grid__event-count {
font-size: 0.625rem;
font-weight: 600;
background: var(--bg-muted);
color: var(--text-muted);
border-radius: 10px;
padding: 0 6px;
height: 18px;
display: flex;
align-items: center;
}
.cal-grid__cell-events {
display: flex;
flex-direction: column;
gap: 2px;
}
/* ─── Month View: Event Chips ────────────────────────── */
.cal-event-chip {
display: flex;
align-items: center;
gap: 0.25rem;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.6875rem;
line-height: 1.3;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
transition: opacity 0.12s;
}
.cal-event-chip:hover { opacity: 0.85; }
.cal-event-chip__time { font-weight: 600; font-size: 0.625rem; opacity: 0.8; }
.cal-event-chip__title { overflow: hidden; text-overflow: ellipsis; }
.cal-event-chip--more { font-size: 0.6875rem; font-weight: 600; color: var(--primary); background: transparent; text-align: center; justify-content: center; }
/* ─── Week View ──────────────────────────────────────── */
.cal-week { overflow-x: auto; }
.cal-week__header {
display: grid;
grid-template-columns: 60px repeat(7, 1fr);
border-bottom: 2px solid var(--border);
position: sticky;
top: 0;
background: var(--bg-card);
z-index: 10;
}
.cal-week__time-gutter--header {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.625rem;
color: var(--text-muted);
}
.cal-week__col-header {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem 0.25rem;
gap: 0.125rem;
border-left: 1px solid var(--border);
}
.cal-week__col-header--today {
background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.cal-week__col-day-name {
font-size: 0.6875rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.cal-week__col-day-num {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 0.8125rem;
font-weight: 500;
color: var(--text);
text-decoration: none;
transition: background 0.12s;
}
.cal-week__col-day-num:hover { background: var(--bg-hover); }
.cal-week__col-day-num--today {
background: var(--primary);
color: #fff;
font-weight: 700;
}
.cal-week__col-day-num--today:hover { background: var(--primary); opacity: 0.9; }
.cal-week__col-badge {
font-size: 0.625rem;
font-weight: 600;
background: var(--bg-muted);
color: var(--text-muted);
border-radius: 10px;
padding: 0 5px;
height: 16px;
display: flex;
align-items: center;
}
.cal-week__body { max-height: 600px; overflow-y: auto; }
.cal-week__row {
display: grid;
grid-template-columns: 60px repeat(7, 1fr);
min-height: 52px;
border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.cal-week__time-gutter {
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 4px;
font-size: 0.6875rem;
font-weight: 500;
color: var(--text-muted);
border-right: 1px solid var(--border);
}
.cal-week__cell {
border-left: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
padding: 2px;
min-height: 52px;
transition: background 0.12s;
}
.cal-week__cell:hover { background: var(--bg-hover); }
.cal-week__cell--today { background: color-mix(in srgb, var(--primary) 3%, transparent); }
.cal-week__cell--today:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.cal-week-event {
display: flex;
align-items: center;
gap: 0.25rem;
padding: 3px 6px;
border-radius: 4px;
font-size: 0.6875rem;
margin-bottom: 2px;
cursor: pointer;
transition: opacity 0.12s;
overflow: hidden;
}
.cal-week-event:hover { opacity: 0.85; }
.cal-week-event__time { font-weight: 600; font-size: 0.625rem; opacity: 0.8; flex-shrink: 0; }
.cal-week-event__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ─── Day View: Timeline ─────────────────────────────── */
.cal-timeline__row {
display: grid;
grid-template-columns: 70px 1fr;
min-height: 60px;
border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
transition: background 0.12s;
}
.cal-timeline__row:hover { background: var(--bg-hover); }
.cal-timeline__row--current {
background: color-mix(in srgb, var(--primary) 4%, transparent);
border-left: 3px solid var(--primary);
}
.cal-timeline__time {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 0.75rem;
border-right: 1px solid var(--border);
position: relative;
}
.cal-timeline__time-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
}
.cal-timeline__now-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary);
margin-top: 0.25rem;
animation: calPulse 2s ease infinite;
}
@keyframes calPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.3); }
}
.cal-timeline__events {
padding: 0.5rem 0.75rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.cal-timeline__empty {
font-size: 0.75rem;
color: var(--text-muted);
opacity: 0.4;
padding: 0.25rem 0;
}
/* Timeline Event Card */
.cal-timeline-event {
padding: 0.75rem;
border-radius: 8px;
cursor: pointer;
transition: opacity 0.12s, transform 0.12s;
}
.cal-timeline-event:hover {
opacity: 0.92;
transform: translateX(2px);
}
.cal-timeline-event__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem;
margin-bottom: 0.375rem;
}
.cal-timeline-event__title { font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.cal-timeline-event__time { font-size: 0.75rem; font-weight: 600; opacity: 0.7; white-space: nowrap; flex-shrink: 0; }
.cal-timeline-event__meta { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.375rem; }
.cal-timeline-event__tag {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.6875rem;
padding: 0.125rem 0.5rem;
border-radius: 12px;
background: rgba(255,255,255,0.5);
}
.cal-timeline-event__tag--prio { font-weight: 600; }
.cal-timeline-event__action { display: flex; justify-content: flex-end; }
/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
/* Month */
.cal-grid__cell { min-height: 68px; padding: 0.25rem; }
.cal-grid__day-name { padding: 0.375rem; font-size: 0.6875rem; }
.cal-event-chip__time { display: none; }
.cal-event-chip { font-size: 0.625rem; padding: 1px 4px; }
/* Week */
.cal-week__header { grid-template-columns: 40px repeat(7, 1fr); }
.cal-week__row { grid-template-columns: 40px repeat(7, 1fr); min-height: 44px; }
.cal-week__time-gutter { font-size: 0.5625rem; }
.cal-week__col-day-name { font-size: 0.5625rem; }
.cal-week__col-day-num { width: 24px; height: 24px; font-size: 0.75rem; }
.cal-week-event__title { display: none; }
.cal-week-event { padding: 2px 4px; }
/* Day */
.cal-timeline__row { grid-template-columns: 55px 1fr; min-height: 50px; }
.cal-timeline__time-label { font-size: 0.6875rem; }
.cal-timeline-event { padding: 0.5rem; }
.cal-timeline-event__header { flex-direction: column; gap: 0.25rem; }
.cal-timeline-event__meta { gap: 0.25rem; }
.cal-timeline-event__tag { font-size: 0.625rem; padding: 0.125rem 0.375rem; }
}
@media (max-width: 480px) {
.cal-grid__cell { min-height: 56px; }
.cal-grid__cell-events { display: none; }
.cal-grid__event-count {
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
}
}
/* ═══════════════════════════════════════════════════════════
COMMON PAGE STYLES
Shared styles used across multiple tenant view pages
═══════════════════════════════════════════════════════════ */
/* ── Timeline ── */
.timeline {
position: relative;
padding-left: var(--space-6);
}
.timeline::before {
content: '';
position: absolute;
left: 10px;
top: 0;
bottom: 0;
width: 2px;
background: var(--color-gray-200);
}
.timeline__item {
position: relative;
margin-bottom: var(--space-4);
}
.timeline__dot {
position: absolute;
left: calc(-1 * var(--space-6) + 4px);
top: 4px;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 2px var(--color-gray-200);
}
.timeline__title {
font-weight: 500;
font-size: var(--text-sm);
}
.timeline__time {
font-size: var(--text-xs);
color: var(--color-gray-500);
margin-top: 2px;
}
/* ── Detail Table (key-value) ── */
.detail-table {
width: 100%;
border-collapse: collapse;
}
.detail-table th,
.detail-table td {
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-gray-100);
font-size: var(--text-sm);
vertical-align: top;
}
.detail-table th {
font-weight: 600;
color: var(--color-gray-500);
white-space: nowrap;
width: 120px;
text-align: left;
}
.detail-table td {
color: var(--color-gray-800);
}
.detail-table tr:last-child th,
.detail-table tr:last-child td {
border-bottom: none;
}
/* ── Data Table (tabular data) ── */
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th,
.data-table td {
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-gray-100);
font-size: var(--text-sm);
text-align: left;
}
.data-table th {
font-weight: 600;
color: var(--color-gray-500);
background: var(--color-gray-50);
}
/* ── Detail List (flex key-value pairs) ── */
.detail-list__item {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border);
}
.detail-list__item:last-child {
border-bottom: none;
}
.detail-list__label {
color: var(--text-muted);
font-size: 0.8125rem;
}
.detail-list__value {
font-weight: 500;
text-align: right;
}
/* ── Drop Zone (file upload) ── */
.drop-zone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-8) var(--space-4);
border: 2px dashed var(--color-gray-300);
border-radius: var(--radius-lg);
background: var(--color-gray-50);
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
text-align: center;
}
.drop-zone:hover,
.drop-zone--active {
border-color: var(--color-blue-400);
background: var(--color-blue-50);
}
.drop-zone__text {
display: flex;
flex-direction: column;
gap: var(--space-1);
font-size: var(--text-sm);
color: var(--color-gray-600);
}
.drop-zone__text strong {
font-size: var(--text-base);
color: var(--color-gray-800);
}
.drop-zone__hint {
font-size: var(--text-xs);
color: var(--color-gray-400);
}
.drop-zone__input {
display: none;
}
/* ── Form Input Suffix (units like mmHg, bpm) ── */
.form-input-suffix {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-size: var(--text-xs);
color: var(--color-gray-400);
pointer-events: none;
font-weight: 500;
}
/* ── Form Hint ── */
.form-hint {
font-size: var(--text-xs);
color: var(--color-gray-400);
margin-top: var(--space-1);
}
/* ── Abnormal Input (vitals) ── */
.input--abnormal {
border-color: var(--color-red-500) !important;
background-color: var(--color-red-50) !important;
}
/* ── Settings Tabs ── */
.settings-tab:hover {
background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
color: var(--primary) !important;
}
.settings-tab[style*="background:var(--primary)"]:hover {
background: var(--primary) !important;
color: #fff !important;
opacity: 0.9;
}
/* ── Severity Option (incidents) ── */
.severity-option {
transition: border-color 0.2s, background 0.2s;
}
/* ── Schedule Row (medications) ── */
.schedule-row {
display: flex;
gap: var(--space-2);
align-items: center;
margin-bottom: var(--space-2);
}
/* ── Template Field Card ── */
.template-field-card {
padding: var(--space-3);
position: relative;
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-lg);
}
.template-field-card__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-2);
}
.template-field-card__grip {
cursor: grab;
color: var(--color-gray-400);
}
.template-field-card__number {
font-weight: 600;
font-size: var(--text-sm);
color: var(--color-gray-500);
}
.template-field-card__footer {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-2);
}
.input--mono {
font-family: monospace;
font-size: var(--text-sm);
}
/* ── Pulse animation ── */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* ── Badge XS variant ── */
.badge--xs {
font-size: 0.65rem;
padding: 0.125rem 0.375rem;
border-radius: 4px;
}
/* ═══ Print Media Queries ═══ */
@media print {
.sidebar,
.topbar,
.page-header__actions,
.filter-bar,
.btn,
.card__footer,
.mobile-cards {
display: none !important;
}
.main-content {
margin: 0 !important;
padding: 0 !important;
}
.stats-row,
.card {
page-break-inside: avoid;
}
.card {
box-shadow: none !important;
border: 1px solid #ddd !important;
}
form {
display: none !important;
}
}
/* ═══ Responsive ═══ */
@media (max-width: 900px) {
.responsive-grid-collapse {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 768px) {
.page-header__actions {
flex-wrap: wrap;
}
.settings-tabs {
overflow-x: auto;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
}
.desktop-table {
display: none !important;
}
.mobile-cards {
display: block !important;
}
.responsive-grid-collapse {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 640px) {
.hide-mobile {
display: none;
}
.stats-grid--4 {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* ═══════════════════════════════════════════════════════════
NOTIFICATIONS PAGE STYLES
═══════════════════════════════════════════════════════════ */
/* ── List ── */
.notification-list {
display: flex;
flex-direction: column;
}
.notification-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border);
transition: background 0.15s;
position: relative;
}
.notification-item:last-child {
border-bottom: none;
}
.notification-item:hover {
background: var(--bg-hover);
}
.notification-item--unread {
background: color-mix(in srgb, var(--primary) 4%, transparent);
}
.notification-item--unread:hover {
background: color-mix(in srgb, var(--primary) 8%, transparent);
}
/* ── Priority Strip ── */
.notification-item__priority {
width: 3px;
min-height: 40px;
border-radius: 2px;
flex-shrink: 0;
align-self: stretch;
}
.notification-item__priority--danger { background: var(--danger); }
.notification-item__priority--warning { background: var(--warning); }
.notification-item__priority--info { background: var(--info); }
.notification-item__priority--muted { background: var(--border); }
/* ── Category Icon ── */
.notification-item__icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.notification-item__icon i {
width: 18px;
height: 18px;
}
.notification-item__icon--primary { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.notification-item__icon--success { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.notification-item__icon--danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.notification-item__icon--warning { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning); }
.notification-item__icon--info { background: color-mix(in srgb, var(--info) 12%, transparent); color: var(--info); }
.notification-item__icon--muted { background: var(--bg-muted); color: var(--text-muted); }
/* ── Content ── */
.notification-item__content {
flex: 1;
min-width: 0;
}
.notification-item__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem;
}
.notification-item__title {
font-size: 0.875rem;
color: var(--text);
text-decoration: none;
line-height: 1.4;
}
.notification-item__title:hover {
color: var(--primary);
text-decoration: underline;
}
.notification-item__title.fw-600 {
font-weight: 600;
}
.notification-item__time {
font-size: 0.75rem;
color: var(--text-muted);
white-space: nowrap;
flex-shrink: 0;
}
.notification-item__body {
font-size: 0.8125rem;
color: var(--text-muted);
margin: 0.25rem 0 0.5rem;
line-height: 1.5;
}
.notification-item__meta {
display: flex;
gap: 0.375rem;
flex-wrap: wrap;
}
/* ── Actions ── */
.notification-item__actions {
display: flex;
gap: 0.25rem;
flex-shrink: 0;
opacity: 0;
transition: opacity 0.15s;
}
.notification-item:hover .notification-item__actions {
opacity: 1;
}
/* ── Responsive ── */
@media (max-width: 640px) {
.notification-item {
padding: 0.75rem 1rem;
}
.notification-item__actions {
opacity: 1;
}
.notification-item__header {
flex-direction: column;
gap: 0.125rem;
}
}