/* Payroll System Styles - Based on Ticketing System Design */
:root{ 
  --primary:#1f7ae0; 
  --bg:#f6f8fb; 
  --card:#fff; 
  --text:#1f2937; 
  --muted:#6b7280; 
  --success:#16a34a; 
  --warning:#f59e0b; 
  --danger:#dc2626; 
}

/* Basic Styles */
body{ 
  margin:0; 
  font-family:'Aptos', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif; 
  color:var(--text); 
  background:var(--bg); 
}

*{ box-sizing:border-box; }

/* App Shell Layout */
.app{display:flex;min-height:100vh}
.sidebar{width:220px;background:#fff;border-right:1px solid #e5e7eb;position:sticky;top:0;height:100vh}
.sidebar .brand{font-weight:800;padding:14px 16px;border-bottom:1px solid #e5e7eb}
.nav{padding:8px}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:#374151;text-decoration:none}
.nav a:hover{background:#f3f4f6}
.nav a.active{background:#eff6ff;color:#1f7ae0}
.nav svg{width:18px;height:18px}
.main{flex:1;min-width:0}
.topbar{position:sticky;top:0;background:#ffffffcc;-webkit-backdrop-filter:saturate(180%) blur(8px);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e5e7eb;z-index:20}
.topbar-inner{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between}
.icon-btn{appearance:none;border:1px solid #e5e7eb;background:#fff;border-radius:8px;padding:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{background:#f9fafb}

/* Container */
.container{ max-width:1100px; margin:0 auto; padding:24px; }

/* Header */
.header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.brand{ font-weight:700; color:var(--primary); }

/* Card Styles */
.card{ background:var(--card); border-radius:12px; padding:20px; box-shadow:0 10px 25px rgba(0,0,0,.05); }
.card:hover{ transform:translateY(-2px); box-shadow:0 15px 35px rgba(0,0,0,.1); transition:all .3s ease; }

/* Grid System */
.grid{ display:grid; gap:16px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:1200px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media(max-width:768px){ .grid-3{ grid-template-columns:1fr; } }

/* Form Styles */
label{ display:block; font-size:14px; color:var(--muted); margin-bottom:6px; }
input, select, textarea{ width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px; font-size:14px; }
textarea{ min-height:120px; resize:vertical; }

/* Button Styles */
button{ background:var(--primary); border:none; color:#fff; padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:600; }
button.secondary{ background:#eef2ff; color:#3730a3; }
.btn-primary{ background:var(--primary); color:#fff; padding:12px 24px; border-radius:8px; text-decoration:none; font-weight:600; display:inline-block; transition:all .2s ease; border:none; cursor:pointer; }
.btn-primary:hover{ background:#1e40af; transform:translateY(-1px); box-shadow:0 4px 12px rgba(31,122,224,.3); }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid #e5e7eb; }
.btn-ghost:hover{ background:#f9fafb; }
.btn-ghost:active{ background:#f3f4f6; }
.btn{ background:var(--primary); color:#fff; padding:10px 14px; border-radius:8px; font-weight:600; border:none; cursor:pointer; transition:all .2s ease; display:inline-flex; align-items:center; gap:8px; }
.btn:hover{ filter:brightness(0.95); transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.06); }
.btn:focus-visible{ outline:2px solid rgba(31,122,224,.55); outline-offset:2px; box-shadow:0 0 0 2px rgba(31,122,224,.15); }
.btn:active{ transform:none; filter:brightness(0.92); box-shadow:0 2px 6px rgba(0,0,0,.06); }
.btn-sm{ padding:6px 10px; font-size:12px; }
.btn-secondary{ background:#eef2ff; color:#1e3a8a; border:1px solid #e5e7eb; }
.btn-secondary:hover{ background:#e0e7ff; }
.btn-success{ background:var(--success); color:#fff; }
.btn-success:hover{ background:#15803d; }
.btn-info{ background:#06b6d4; color:#fff; }
.btn-info:hover{ background:#0e7490; }
button:disabled, .btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }
/* Normalize icon sizing inside buttons */
.btn i{ font-size:14px; line-height:1; }
/* Outline variants */
.btn-outline-primary{ background:transparent; color:var(--primary); border:1px solid var(--primary); }
.btn-outline-primary:hover{ background:rgba(31,122,224,0.06); }
.btn-outline-secondary{ background:transparent; color:#374151; border:1px solid #e5e7eb; }
.btn-outline-secondary:hover{ background:#f3f4f6; }

/* Table Styles */
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table th,.table td{ padding:12px; text-align:left; border-bottom:1px solid #f1f5f9; font-size:14px; vertical-align:top; }
.table th { background-color: #f8fafc; font-weight: 600; }
.table tr:hover { background-color: #f8fafc; }

/* Typography */
.sub-header {
  font-size: 12px;
  color: var(--muted);
  font-weight: normal;
  margin-top: 4px;
}
.small { font-size: 12px; line-height: 1.4; }
.muted { color: var(--muted); }

/* Badge Styles */
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; }
.badge.open{ background:#dbeafe; color:#1e40af; }
.badge.in_progress{ background:#fef3c7; color:#92400e; }
.badge.resolved{ background:#dcfce7; color:#14532d; }

/* Toolbar */
.toolbar{ display:flex; gap:8px; flex-wrap:wrap; }
input[type="search"]{ max-width:260px; }
small.muted{ color:var(--muted); }

/* Utilities */
.overflow-auto{ overflow:auto; }
.span-full{ grid-column:1 / -1; }
.mt-12{ margin-top:12px; }
.header-actions{ display:flex; gap:8px; align-items:center; }
.header-actions{ flex-wrap:wrap; }
.card-narrow{ max-width:520px; }
.mx-auto{ margin-left:auto; margin-right:auto; }

/* Dashboard Card Styles */
.card-header{ display:flex; align-items:center; margin-bottom:20px; }
.card-icon{ width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-right:16px; font-size:20px; }
.card.tickets .card-icon{ background:linear-gradient(135deg, #3b82f6, #1d4ed8); color:#fff; }
.card.assets .card-icon{ background:linear-gradient(135deg, #10b981, #059669); color:#fff; }
.card.inventory .card-icon{ background:linear-gradient(135deg, #f59e0b, #d97706); color:#fff; }
.card.knowledge .card-icon{ background:linear-gradient(135deg, #8b5cf6, #7c3aed); color:#fff; }
.card.reports .card-icon{ background:linear-gradient(135deg, #ef4444, #dc2626); color:#fff; }
.card.actions .card-icon{ background:linear-gradient(135deg, #06b6d4, #0891b2); color:#fff; }

/* Dashboard Stats */
.dashboard-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:20px; }
.stat-item{ text-align:center; padding:16px; background:#f8fafc; border-radius:8px; border:1px solid #e5e7eb; transition:all .2s ease; }
.stat-item:hover{ background:#f1f5f9; transform:scale(1.02); }
.stat-number{ font-size:28px; font-weight:700; margin-bottom:4px; color:var(--text); }
.stat-label{ font-size:12px; color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:0.5px; }
.card-actions{ text-align:center; }

/* Quick Actions */
.quick-actions-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.quick-action-btn{ display:flex; flex-direction:column; align-items:center; padding:20px 16px; background:#f8fafc; border:2px solid #e5e7eb; border-radius:12px; text-decoration:none; color:var(--text); font-weight:500; transition:all .3s ease; }
.quick-action-btn:hover{ background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-2px); box-shadow:0 8px 25px rgba(31,122,224,.2); }
.quick-action-btn i{ font-size:24px; margin-bottom:8px; }

/* Progress Ring */
.progress-ring{ position:relative; width:60px; height:60px; margin:0 auto 12px; }
.progress-ring-circle{ transform:rotate(-90deg); transform-origin:50% 50%; stroke-dasharray:164; stroke-dashoffset:164; transition:stroke-dashoffset .3s ease; }
.stat-progress{ display:flex; align-items:center; justify-content:center; flex-direction:column; }
.progress-text{ font-size:10px; color:var(--muted); margin-top:4px; }

/* Status Indicators */
.status-indicator{ display:inline-flex; align-items:center; gap:6px; }
.status-dot{ width:8px; height:8px; border-radius:50%; }
.status-open .status-dot{ background:#3b82f6; }
.status-in_progress .status-dot{ background:#f59e0b; }
.status-resolved .status-dot{ background:#10b981; }
.status-hardware .status-dot{ background:#8b5cf6; }
.status-software .status-dot{ background:#06b6d4; }
.status-network .status-dot{ background:#10b981; }
.status-dot.status-active{ background:#10b981; }
.status-dot.status-inactive{ background:#9ca3af; }
.status-dot.status-on_leave{ background:#f59e0b; }
.status-dot.status-probationary{ background:#3b82f6; }

/* Modal */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; padding:16px; z-index:1000; }
.modal-backdrop.show{ display:flex; }
.modal, .modal-card{ background:#fff; width:100%; max-width:640px; border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,.2); border:1px solid #e5e7eb; animation:modalIn .18s ease-out; }
.modal header, .modal-card .modal-header, .modal-card header{ padding:16px 20px; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; justify-content:space-between; }
.modal main, .modal-card .modal-body, .modal-card main{ padding:20px; }
.modal footer, .modal-card .modal-footer, .modal-card footer{ padding:16px 20px; border-top:1px solid #e5e7eb; display:flex; gap:10px; justify-content:flex-end; }
.modal-title{ font-size:18px; font-weight:700; }
.modal-close{ background:none; border:none; font-size:20px; cursor:pointer; color:#6b7280; }
@keyframes modalIn{ from{ transform:translateY(10px); opacity:0;} to{ transform:translateY(0); opacity:1;} }

/* Form Grid */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid .full{ grid-column:1 / -1; }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-size:12px; color:#374151; font-weight:600; }

/* User Info Section */
.user-info {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.avatar {
  width: 40px;
  height: 40px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Mobile Sidebar */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -220px;
    top: 0;
    height: 100vh;
    z-index: 50;
    transition: left 0.3s ease;
  }
  
  .sidebar.open {
    left: 0;
  }
  
  .main {
    margin-left: 0;
  }
  
  .hamburger-btn {
    display: block;
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 51;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 0.375rem;
    padding: 0.5rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(31, 122, 224, 0.3);
    transition: all 0.2s ease;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .hamburger-btn:hover {
    background: #1e40af;
    transform: translateY(-1px);
  }
  
  .hamburger-btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  
  .sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
    display: none;
  }
  
  .sidebar-backdrop.show {
    display: block;
  }
}

/* Responsive adjustments */
@media(max-width:768px){ 
  .dashboard-stats{ grid-template-columns:1fr; }
  .quick-actions-grid{ grid-template-columns:repeat(2,1fr); }
}

.modal-compact{ max-width:500px; }

/* Print Styles */
@media print {
  .sidebar,
  .hamburger-btn,
  .sidebar-backdrop,
  .btn,
  .modal {
    display: none !important;
  }
  
  .main {
    margin-left: 0 !important;
  }
  
  .card {
    box-shadow: none;
    border: 1px solid #dee2e6;
  }
}