/**
 * TimeLex — Automated Legal Time Capture
 * Copyright (c) [2026] [Kone Tshivhinda]
 * 
 * For assessment purposes only - not for production use
 * 
 * @license [MIT or Assessment-Specific]
 * @see LICENSE file in repository root
 */
 /* 
TimeLex — Legal Time Capture
Copyright (c) 2026 Kone Tshivhinda

ASSESSMENT PROTOTYPE - NOT FOR PRODUCTION USE
Developed exclusively for MB Motsoeneng Bill Attorneys Software Engineer Assessment 2026

ALL RIGHTS RESERVED
This work is protected by copyright law. Submission of this assessment does not constitute 
transfer of ownership. All intellectual property rights remain with the creator.

This code may not be used in production without express written permission.
For commercial licensing inquiries, contact: kone.tshivhinda@example.com

IMPORTANT: This assessment submission is provided under Assessment-Specific License terms
as documented in the complete project repository. Intentional limitations exist for 
assessment purposes only (not for production implementation).
*/

/* ==============================
   TimeLex — Legal Time Capture
   Design: Light Professional, Navy + Gold
   ============================== */

:root {
    /* Core Colors */
    --legal-navy: #0f172a;       /* Deep, authoritative navy */
    --slate-bg: #f8fafc;        /* Soft off-white for focus */
    --action-gold: #947a4d;     /* Muted gold for primary actions */
    --border-subtle: #e2e8f0;   /* Clean, thin borders */
    --text-main: #1e293b;       /* High-readability charcoal */
    --text-muted: #64748b;
    
    /* Layout */
    --sidebar-width: 260px;
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    
    /* Legacy variable mappings for compatibility */
    --bg: var(--slate-bg);
    --bg-card: #ffffff;
    --bg-card2: var(--slate-bg);
    --border: var(--border-subtle);
    --border2: #cbd5e1;
    --gold: var(--action-gold);
    --gold-light: #a68a6a;
    --gold-dim: rgba(148, 122, 77, 0.12);
    --text: var(--text-main);
    --text-dim: var(--text-muted);
    --green: #10b981;
    --green-dim: rgba(16, 185, 129, 0.12);
    --red: #ef4444;
    --red-dim: rgba(239, 68, 68, 0.12);
    --blue: #3b82f6;
    --blue-dim: rgba(59, 130, 246, 0.12);
    --orange: #f97316;
    --sidebar-w: var(--sidebar-width);
    --radius: 8px;
    --font-serif: 'Inter', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Fira Code', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    background: var(--slate-bg);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
}

/* ====== LAYOUT ====== */
/* Sidebar - The "Control Center" */
.app-container {
    display: flex;
    min-height: 100vh;
}

body { display: flex; }

.sidebar,
.app-sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--legal-navy);
    color: white;
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem 1.5rem;
    position: sticky;
    top: 0;
    height: 100vh;
    flex-shrink: 0;
}
.sidebar-footer {
    margin-top: auto;
    padding-top: 2rem;
    font-size: 0.8rem;
    opacity: 0.7;
    /* This ensures sidebar text stays ABOVE where the watermark might sit */
    padding-bottom: 40px; 
}

.main,
.main-content {
    flex: 1;
    overflow-y: auto;
    padding: 2.5rem;
    min-height: 100vh;
    max-width: 1200px;
    background: var(--slate-bg);
}

/* ====== SIDEBAR ====== */
.logo {
    padding: 24px 20px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--action-gold);
    letter-spacing: 0.5px;
}
.logo-icon { font-size: 22px; }

.nav {
    flex: 1;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.75rem 1rem;
    color: #94a3b8;
    text-decoration: none;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    transition: all var(--transition-smooth);
    font-weight: 500;
    cursor: pointer;
    font-size: 13px;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.nav-item.active {
    background: rgba(148, 122, 77, 0.15);
    color: white;
    border-left: 3px solid var(--action-gold);
    padding-left: calc(1rem - 3px);
}

.nav-icon { font-size: 16px; width: 20px; text-align: center; }

.sidebar-user {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(148, 122, 77, 0.2);
    border: 1px solid var(--action-gold);
    color: var(--action-gold);
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-mono);
}

.user-name {
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.user-role {
    font-size: 11px;
    color: #94a3b8;
}

/* ====== VIEWS & HEADERS ====== */
.view { display: none; }
.view.active { display: block; }

/* Page Header */
header.view-header,
.page-header {
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

header.view-header h1,
.page-header h1 {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 400;
    color: var(--legal-navy);
    letter-spacing: -0.3px;
}

.subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ====== LIVE DOT ====== */
.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(76, 175, 130, 0.4);
  animation: pulse-dot 1.8s infinite;
}
.active-text { color: var(--green); font-weight: 600; }

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(76, 175, 130, 0.4); }
  60%  { box-shadow: 0 0 0 6px rgba(76, 175, 130, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 175, 130, 0); }
}

/* ====== SCROLLBAR ====== */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* * main.css
 * Copyright (c) 2026 Kone Tshivhinda
 * ASSESSMENT PROTOTYPE - NOT FOR PRODUCTION USE
 */

/* Watermark Requirements */
#assessment-watermark {
    position: fixed;
    /* Move to the right to avoid the left-hand sidebar */
    bottom: 15px;
    right: 20px; 
    
    /* Typography */
    font-size: 10px;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    
    /* The "Anti-Clutter" Magic */
    background: rgba(248, 250, 252, 0.8); /* Matches your --slate-bg */
    backdrop-filter: blur(4px);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-subtle);
    
    /* Ensure it stays on top of EVERYTHING */
    z-index: 99999;
    pointer-events: none;
    white-space: nowrap;
}
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: var(--legal-navy);
    color: white;
    padding: 12px 20px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-left: 4px solid var(--action-gold);
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Print Specific Protections */
@media print {
    #assessment-watermark {
        color: rgba(0, 0, 0, 0.5) !important;
        position: fixed;
        bottom: 10px;
        right: 15px;
        display: block !important;
    }
    
    /* Hide navigation during print */
    .app-sidebar, .top-nav {
        display: none !important;
    }
}