/* ================================================================
   public/css/style.css
   WorkSync — Global Stylesheet
   This one file styles the entire app: login, sidebar layout,
   tables, forms, badges, alerts, buttons — everything.
   We keep it simple and flat — no SASS, no framework needed.
   ================================================================ */


/* ----------------------------------------------------------------
   CSS CUSTOM PROPERTIES (variables)
   Change these to re-theme the whole app in one place.
   ---------------------------------------------------------------- */
:root {
    --color-primary:      #2563eb;   /* clear blue — strong and trustworthy */
    --color-primary-dark: #1d4ed8;   /* slightly darker for hover */
    --color-secondary:    #0891b2;   /* teal — used for badges and accents */
    --color-success:      #15803d;   /* forest green — success states */
    --color-danger:       #dc2626;   /* red — errors and delete buttons */
    --color-warning:      #b45309;   /* amber — warnings */

    --color-bg:           #f8fafc;   /* very light cool white — easy on eyes */
    --color-sidebar:      #0f172a;   /* almost black navy — sharp and clean */
    --color-sidebar-text: #94a3b8;   /* muted slate — readable without glowing */
    --color-sidebar-hover:#1e293b;   /* dark slate on hover */
    --color-card:         #ffffff;   /* pure white cards */

    --color-text:         #0f172a;   /* near-black — highest readability */
    --color-text-muted:   #64748b;   /* slate-500 — secondary text */
    --color-border:       #e2e8f0;   /* slate-200 — subtle dividers */

    --sidebar-width:      248px;
    --topbar-height:      64px;

    --radius:             6px;       /* tighter radius = more professional feel */
    --shadow:             0 1px 2px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.06);
    --shadow-lg:          0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);

    --font-family:        'Segoe UI', system-ui, -apple-system, sans-serif;
}


/* ----------------------------------------------------------------
   RESET & BASE
   ---------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    font-family:    var(--font-family);
    font-size:      15px;
    line-height:    1.6;
    color:          var(--color-text);
    background:     var(--color-bg);
}

a {
    color:           var(--color-primary);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

ul {
    list-style: none;
}


/* ================================================================
   LOGIN PAGE
   ================================================================ */

/* Full-height centred login screen — flat split layout, no gradients */
.login-body {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      100vh;
    background:      #f1f5f9;   /* flat light grey — nothing flashy */
}

/* The white card in the middle — clean border instead of heavy shadow */
.login-wrapper {
    background:    var(--color-card);
    border-radius: var(--radius);
    border:        1px solid var(--color-border);
    box-shadow:    var(--shadow);
    padding:       48px 40px;
    width:         100%;
    max-width:     400px;
}

/* WorkSync heading above the form */
.login-brand {
    text-align:    left;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
}
.login-brand h1 {
    font-size:    1.5rem;
    font-weight:  700;
    color:        var(--color-text);
    letter-spacing: -0.3px;
}
.login-brand p {
    color:     var(--color-text-muted);
    font-size: 0.85rem;
    margin-top: 4px;
}


/* ================================================================
   APP LAYOUT (sidebar + main content)
   ================================================================ */

/* The outer wrapper that holds sidebar and main side by side */
.app-wrapper {
    display:    flex;
    min-height: 100vh;
}

/* ----------------------------------------------------------------
   SIDEBAR
   ---------------------------------------------------------------- */
.sidebar {
    width:         var(--sidebar-width);
    min-height:    100vh;
    background:    var(--color-sidebar);
    display:       flex;
    flex-direction: column;
    position:      fixed;   /* sticks to the side while content scrolls */
    top:           0;
    left:          0;
    bottom:        0;
    overflow-y:    auto;
    z-index:       100;
}

/* Brand / logo at the top of sidebar */
.sidebar-brand {
    padding:       20px 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display:       flex;
    align-items:   center;
    gap:           10px;
}
.brand-icon {
    font-size:        1.1rem;
    width:            30px;
    height:           30px;
    background:       var(--color-primary);
    color:            #fff;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    border-radius:    var(--radius);
}
.brand-name {
    font-size:      0.95rem;
    font-weight:    700;
    color:          #f1f5f9;
    letter-spacing: 0.2px;
}

/* User info block under the brand */
.sidebar-user {
    padding:      16px 20px;
    display:      flex;
    align-items:  center;
    gap:          12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.user-avatar {
    width:            40px;
    height:           40px;
    border-radius:    50%;
    background:       var(--color-primary);
    color:            #fff;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-weight:      700;
    font-size:        1rem;
    flex-shrink:      0;
}
.user-name {
    display:     block;
    color:       #fff;
    font-weight: 600;
    font-size:   0.9rem;
    max-width:   150px;
    overflow:    hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.user-role {
    font-size:     0.7rem;
    font-weight:   600;
    padding:       2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-admin { background: rgba(79,70,229,0.4); color: #c7d2fe; }
.badge-staff { background: rgba(14,165,233,0.3); color: #bae6fd; }

/* Navigation links */
.sidebar-nav {
    flex: 1;
    padding: 16px 0;
}
.sidebar-nav ul li a {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     11px 20px;
    color:       var(--color-sidebar-text);
    font-size:   0.9rem;
    transition:  background 0.15s, color 0.15s;
}
.sidebar-nav ul li a:hover,
.sidebar-nav ul li.active a {
    background:      var(--color-sidebar-hover);
    color:           #ffffff;
    text-decoration: none;
}
.sidebar-nav ul li.active a {
    border-left: 3px solid var(--color-secondary); /* highlight the active page */
}
.nav-icon {
    font-size: 1rem;
    opacity:   0.8;
}

/* Logout link at the very bottom */
.sidebar-footer {
    padding:       16px 20px;
    border-top:    1px solid rgba(255,255,255,0.08);
    margin-top:    auto;
}
.logout-link {
    color:     #f87171;   /* red-ish — visually distinct from nav links */
    font-size: 0.875rem;
    display:   flex;
    align-items: center;
    gap:       6px;
}
.logout-link:hover {
    color:           #fca5a5;
    text-decoration: none;
}

/* ----------------------------------------------------------------
   MAIN CONTENT AREA
   Offset by sidebar width so nothing hides behind the sidebar
   ---------------------------------------------------------------- */
.main-content {
    margin-left: var(--sidebar-width);
    flex:        1;
    padding:     0 28px 40px;
    min-height:  100vh;
}

/* Top bar: page title on left, date on right */
.topbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 0 16px;
    border-bottom:   1px solid var(--color-border);
    margin-bottom:   24px;
}
.topbar-title {
    font-size:   1.3rem;
    font-weight: 700;
    color:       var(--color-text);
}
.topbar-date {
    font-size: 0.85rem;
    color:     var(--color-text-muted);
}


/* ================================================================
   STAT CARDS (dashboard summary row)
   ================================================================ */
.stats-row {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:                   20px;
    margin-bottom:         28px;
}

.stat-card {
    background:    var(--color-card);
    border-radius: var(--radius);
    box-shadow:    var(--shadow);
    padding:       24px;
    display:       flex;
    align-items:   center;
    gap:           16px;
}
/* Left accent stripe — colour coded by type, no gradients */
.stat-card--primary  { border-left: 3px solid var(--color-primary); }
.stat-card--secondary { border-left: 3px solid var(--color-secondary); }
.stat-card--accent   { border-left: 3px solid var(--color-warning); }

.stat-icon {
    font-size:   2rem;
    line-height: 1;
}
.stat-info {
    display:        flex;
    flex-direction: column;
}
.stat-number {
    font-size:   2rem;
    font-weight: 800;
    line-height: 1;
    color:       var(--color-text);
}
.stat-label {
    font-size: 0.8rem;
    color:     var(--color-text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}


/* ================================================================
   CARDS / PANELS
   ================================================================ */
.card {
    background:    var(--color-card);
    border-radius: var(--radius);
    box-shadow:    var(--shadow);
    margin-bottom: 24px;
    overflow:      hidden;
}

.card-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         16px 20px;
    border-bottom:   1px solid var(--color-border);
}
.card-header h3 {
    font-size:   1rem;
    font-weight: 600;
    display:     flex;
    align-items: center;
    gap:         8px;
}

.card-body {
    padding: 20px;
}

/* Small number badge next to headings */
.badge-count {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    background:    var(--color-primary);
    color:         #fff;
    border-radius: 20px;
    font-size:     0.7rem;
    font-weight:   700;
    padding:       2px 8px;
    min-width:     24px;
}


/* ================================================================
   DATA TABLE
   ================================================================ */
.data-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.875rem;
}
.data-table th {
    text-align:       left;
    padding:          10px 12px;
    background:       #f8fafc;
    color:            var(--color-text-muted);
    font-size:        0.75rem;
    font-weight:      600;
    text-transform:   uppercase;
    letter-spacing:   0.5px;
    border-bottom:    2px solid var(--color-border);
}
.data-table td {
    padding:       12px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.data-table tbody tr:last-child td {
    border-bottom: none; /* no line under the last row */
}
.data-table tbody tr:hover {
    background: #f8fafc;  /* slight highlight on row hover */
}

/* Content preview cell — greyed out snippet */
.content-preview {
    color:     var(--color-text-muted);
    font-size: 0.8rem;
}

/* Muted text under things like emails */
.text-muted {
    color:     var(--color-text-muted);
    font-size: 0.8rem;
}


/* ================================================================
   BADGES
   ================================================================ */
.badge {
    display:       inline-block;
    padding:       3px 10px;
    border-radius: 20px;
    font-size:     0.72rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.badge-admin { background: #ede9fe; color: #5b21b6; }
.badge-staff { background: #e0f2fe; color: #0369a1; }


/* ================================================================
   ALERTS / FLASH MESSAGES
   ================================================================ */
.alert {
    padding:       12px 16px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size:     0.875rem;
    border:        1px solid transparent;
}
.alert ul {
    padding-left: 16px;
    list-style:   disc;
}
.alert-success {
    background:   #f0fdf4;
    border-color: #bbf7d0;
    color:        var(--color-success);
}
.alert-error {
    background:   #fef2f2;
    border-color: #fecaca;
    color:        var(--color-danger);
}


/* ================================================================
   FORMS
   ================================================================ */
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display:       block;
    font-size:     0.875rem;
    font-weight:   600;
    color:         var(--color-text);
    margin-bottom: 6px;
}
.form-control {
    display:       block;
    width:         100%;
    padding:       10px 14px;
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    font-size:     0.9rem;
    color:         var(--color-text);
    background:    #fff;
    transition:    border-color 0.15s, box-shadow 0.15s;
    font-family:   inherit;
}
.form-control:focus {
    outline:      none;
    border-color: var(--color-primary);
    box-shadow:   0 0 0 3px rgba(79, 70, 229, 0.15);
}
textarea.form-control {
    resize:      vertical;
    min-height:  120px;
}
.form-hint {
    display:    block;
    margin-top: 5px;
    font-size:  0.78rem;
    color:      var(--color-text-muted);
}

/* Mark a field as required */
.required {
    color: var(--color-danger);
}

/* Optional label badge */
.optional-badge {
    font-size:     0.7rem;
    font-weight:   500;
    color:         var(--color-text-muted);
    background:    #f1f5f9;
    padding:       1px 6px;
    border-radius: 4px;
    margin-left:   6px;
}

/* Inline filter form — fields sit side by side */
.filter-form {
    display:     flex;
    flex-wrap:   wrap;
    gap:         16px;
    align-items: flex-end;
}
.form-group--inline {
    margin-bottom: 0;
}
.form-group--inline .form-control {
    min-width: 180px;
}
.form-group--actions {
    display:    flex;
    gap:        8px;
    align-items: flex-end;
}

/* Form card max width so it doesn't stretch edge to edge */
.form-card {
    max-width: 640px;
}

/* Action bar below form buttons */
.form-actions {
    display:    flex;
    gap:        12px;
    margin-top: 8px;
}

/* Page-level action bar (e.g. "Add User" button above a table) */
.page-actions {
    display:       flex;
    gap:           12px;
    margin-bottom: 20px;
}


/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         10px 20px;
    border:          2px solid transparent;
    border-radius:   var(--radius);
    font-size:       0.875rem;
    font-weight:     600;
    cursor:          pointer;
    text-decoration: none;
    transition:      background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    white-space:     nowrap;
    font-family:     inherit;
}
.btn:hover {
    text-decoration: none;
}

/* Primary — solid blue, no gradient */
.btn-primary {
    background:   var(--color-primary);
    color:        #fff;
    border-color: var(--color-primary);
}
.btn-primary:hover {
    background:   var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow:   0 1px 3px rgba(0,0,0,0.15);
}

/* Outline — transparent with border */
.btn-outline {
    background:   transparent;
    color:        var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline:hover {
    background: var(--color-primary);
    color:      #fff;
}

/* Danger — red, for delete actions */
.btn-danger {
    background:   var(--color-danger);
    color:        #fff;
    border-color: var(--color-danger);
}
.btn-danger:hover {
    background:   #b91c1c;
    border-color: #b91c1c;
}

/* Small button variant */
.btn-sm {
    padding:   6px 12px;
    font-size: 0.8rem;
}

/* Full-width button (used on login form) */
.btn-full {
    width:           100%;
    justify-content: center;
}


/* ================================================================
   REPORT DETAIL VIEW
   ================================================================ */
.report-detail-card .card-body {
    line-height: 1.8;
}
.report-meta {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap:                   16px;
    margin-bottom:         24px;
    padding:               16px;
    background:            #f8fafc;
    border-radius:         var(--radius);
}
.meta-item {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}
.meta-label {
    font-size:      0.72rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color:          var(--color-text-muted);
}
.meta-value {
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--color-text);
}
.report-content {
    font-size:   0.95rem;
    line-height: 1.9;
    color:       var(--color-text);
    white-space: pre-wrap;   /* respect line breaks in the report text */
}
hr {
    border:        none;
    border-top:    1px solid var(--color-border);
    margin:        20px 0;
}


/* ================================================================
   EMPTY STATE
   Shown when a table has no rows
   ================================================================ */
.empty-state {
    text-align: center;
    padding:    48px 20px;
    color:      var(--color-text-muted);
    font-size:  0.9rem;
}
.empty-state a {
    color:       var(--color-primary);
    font-weight: 600;
}


/* ================================================================
   RESPONSIVE — collapse sidebar on mobile
   ================================================================ */
@media (max-width: 768px) {
    .sidebar {
        width:     100%;
        min-height: auto;
        position:  relative;
    }
    .main-content {
        margin-left: 0;
        padding:     0 16px 32px;
    }
    .app-wrapper {
        flex-direction: column;
    }
    .filter-form {
        flex-direction: column;
    }
    .form-group--inline .form-control {
        min-width: unset;
        width:     100%;
    }
    .stats-row {
        grid-template-columns: 1fr;
    }
    .login-wrapper {
        margin: 20px;
        padding: 32px 24px;
    }
}