/* ============================================================
   IT-Inventar v1.1 --- app.css
   ============================================================ */
:root {
  --bg:         #f0f2f5;
  --surface:    #ffffff;
  --sidebar-bg: #1c2333;
  --sidebar-w:  230px;
  --accent:     #3563e9;
  --accent-h:   #2450c7;
  --success:    #16a34a;
  --warning:    #d97706;
  --danger:     #dc2626;
  --info:       #0284c7;
  --text:       #1e293b;
  --muted:      #64748b;
  --border:     #e2e8f0;
  --radius:     7px;
  --topbar-h:   54px;
  --shadow:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}

/* Catppuccin Latte (refined) */
[data-theme="latte"] {
  --bg:         #eff1f5;
  --surface:    #ffffff;
  --sidebar-bg: #e6e9ef;

  --accent:     #1e66f5;
  --accent-h:   #1149c6;

  /* Links */
  --link:       #1d4ed8;
  --link-h:     #0b3aa6;

  --success:    #40a02b;
  --warning:    #df8e1d;
  --danger:     #d20f39;
  --info:       #04a5e5;

  --text:       #4c4f69;
  --muted:      #6c6f85;
  --border:     #dce0e8;

  --radius:     7px;
  --topbar-h:   54px;
  --shadow:     0 1px 3px rgba(76, 79, 105, 0.08), 0 1px 2px rgba(76, 79, 105, 0.04);
}
/* Catppuccin Frappé (light 2 / softer dark-light mix) */
[data-theme="frappe"] {
  --bg:         #e6e9ef;
  --surface:    #ffffff;
  --sidebar-bg: #303446;
  --accent:     #8caaee;
  --accent-h:   #6f8fd6;
  --success:    #a6d189;
  --warning:    #e5c890;
  --danger:     #e78284;
  --info:       #99d1db;
  --text:       #303446;
  --muted:      #626880;
  --border:     #c6d0f5;
}

/* Catppuccin Macchiato (dark 1) */
[data-theme="macchiato"] {
  --bg:         #24273a;
  --surface:    #1e2030;
  --sidebar-bg: #181926;
  --accent:     #8aadf4;
  --accent-h:   #6f8fd6;
  --success:    #a6da95;
  --warning:    #eed49f;
  --danger:     #ed8796;
  --info:       #91d7e3;
  --text:       #cad3f5;
  --muted:      #a5adcb;
  --border:     #363a4f;
}

/* Catppuccin Mocha (dark 2) */
[data-theme="mocha"] {
  --bg:         #1e1e2e;
  --surface:    #181825;
  --sidebar-bg: #11111b;
  --accent:     #89b4fa;
  --accent-h:   #6c8ed9;
  --success:    #a6e3a1;
  --warning:    #f9e2af;
  --danger:     #f38ba8;
  --info:       #89dceb;
  --text:       #cdd6f4;
  --muted:      #a6adc8;
  --border:     #313244;
}


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;font-size:14px;color:var(--text);background:var(--bg)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* --- LAYOUT --------------------------------------------------------------------------- */
.layout{display:flex;height:100vh;overflow:hidden}
.sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;transition:width .2s ease}
.sidebar.collapsed{width:0;overflow:hidden}
.main-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.content{flex:1;overflow-y:auto;padding:24px}

/* --- SIDEBAR -------------------------------------------------------------------------- */
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:18px 16px;font-size:15px;font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-brand:hover{text-decoration:none}
.nav{list-style:none;padding:10px 8px;flex:1}
.nav li a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:6px;color:rgba(255,255,255,.65);font-size:13.5px;transition:background .15s,color .15s;white-space:nowrap}
.nav li a svg{width:17px;height:17px;fill:currentColor;flex-shrink:0}
.nav li a:hover,.nav li.active a{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.sidebar-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.5);font-size:12px}
.btn-logout{color:rgba(255,255,255,.4);display:flex;padding:4px}
.btn-logout:hover{color:#ef4444}
.btn-logout svg{width:17px;height:17px;fill:currentColor}

.nav li a:hover,
.nav li.active a {
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

tbody tr:hover td {
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
}

thead tr {
  background: var(--surface);
}

/* --- TOPBAR ------------------------------------------------------------------------------ */
.topbar{height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 20px;flex-shrink:0;box-shadow:var(--shadow)}
.topbar-title{font-size:16px;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-right{display:flex;gap:8px;flex-shrink:0}
.sidebar-toggle{background:none;border:none;cursor:pointer;padding:6px;color:var(--muted);border-radius:5px;display:flex}
.sidebar-toggle:hover{background:var(--bg)}
.sidebar-toggle svg{width:20px;height:20px;fill:currentColor}

/* --- BUTTONS --------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;font-family:inherit;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s;white-space:nowrap}
.btn:hover{background:var(--bg);text-decoration:none}
.btn svg{width:15px;height:15px;fill:currentColor}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-h);border-color:var(--accent-h)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover{background:#b91c1c}
.btn-sm{padding:4px 10px;font-size:12px}
.btn-xs{padding:3px 7px;font-size:11px}

/* --- CARDS ------------------------------------------------------------------------------ */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.card-header h2,.card-header h3{font-size:14px;font-weight:700;color:var(--text)}
.card-body{padding:18px}
.card-body.p0{padding:0}

/* --- STAT CARDS ------------------------------------------------------------------------ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.stat-val{font-size:30px;font-weight:800;line-height:1;color:var(--accent)}
.stat-lbl{font-size:12px;color:var(--muted);margin-top:4px}
.stat.warn .stat-val{color:var(--warning)}
.stat.bad  .stat-val{color:var(--danger)}

/* --- TABLES ------------------------------------------------------------------------------ */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead tr{background:var(--bg)}
th{text-align:left;padding:9px 12px;color:var(--muted);font-weight:600;font-size:12px;border-bottom:2px solid var(--border);white-space:nowrap;cursor:pointer;user-select:none}
th[data-sort]:hover{color:var(--text)}
th .sort-icon{margin-left:3px;opacity:.4;font-style:normal;font-size:10px}
th.asc .sort-icon::after{content:'▲';opacity:1}
th.desc .sort-icon::after{content:'▼';opacity:1}
th:not([data-sort]){cursor:default}
td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#f8fafd}
tr.row-warn td{background:#fffbeb !important}
tr.row-danger td{background:#fef2f2 !important}
tr.row-warn:hover td{background:#fef9c3 !important}
tr.row-danger:hover td{background:#fee2e2 !important}


.table a {
  color: var(--link);
  font-weight: 500;
  text-decoration: none;
}

.table a:hover {
  text-decoration: underline;
}


/* --- BADGES ------------------------------------------------------------------------------ */
.badge{display:inline-block;padding:2px 8px;border-radius:30px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-success{background:#dcfce7;color:#15803d}
.badge-danger {background:#fee2e2;color:#b91c1c}
.badge-warning{background:#fef3c7;color:#92400e}
.badge-info   {background:#dbeafe;color:#1d4ed8}
.badge-neutral{background:#f1f5f9;color:#475569}
.stars{color:var(--warning);letter-spacing:-1px;font-size:13px}

/* --- FORMS ----------------------------------------------------------------------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 20px}
.form-group{margin-bottom:16px}
.form-group.full{grid-column:1/-1}
label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px}
input[type=text],input[type=email],input[type=number],input[type=date],input[type=password],
select,textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;font-size:13px;font-family:inherit;background:var(--surface);color:var(--text);outline:none;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(53,99,233,.1)}
textarea{resize:vertical;min-height:80px}
.form-hint{font-size:11px;color:var(--muted);margin-top:3px}
.form-actions{display:flex;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}

/* --- FILTER BAR ------------------------------------------------------------------------ */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.filter-bar select,.filter-bar input{border:1px solid var(--border);border-radius:var(--radius);padding:6px 10px;font-size:13px;background:var(--surface);color:var(--text);outline:none}
.filter-bar select:focus,.filter-bar input:focus{border-color:var(--accent)}
.filter-bar input[type=search]{min-width:200px}

/* --- ALERTS ------------------------------------------------------------------------------ */
.alert{padding:10px 14px;border-radius:var(--radius);font-size:13px;margin-bottom:16px;border-left:3px solid}
.alert-success{background:#f0fdf4;color:#15803d;border-color:var(--success)}
.alert-error  {background:#fef2f2;color:#b91c1c;border-color:var(--danger)}
.alert-warning{background:#fffbeb;color:#92400e;border-color:var(--warning)}
.alert-info   {background:#eff6ff;color:#1d4ed8;border-color:var(--info)}

/* --- DETAIL VIEW --------------------------------------------------------------------- */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}

.detail-section h3{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.detail-row{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px}
.detail-row:last-child{border-bottom:none}
.detail-label{color:var(--muted);min-width:130px;flex-shrink:0}
.detail-value{font-weight:500}

/* --- HISTORY --------------------------------------------------------------------------- */
.history-list{list-style:none}
.history-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12.5px;align-items:start}
.history-item:last-child{border-bottom:none}
.history-date{color:var(--muted);white-space:nowrap}
.history-action{font-weight:600}

/* --- TABS --------------------------------------------------------------------------------- */
.tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:20px}
.tab-link{padding:8px 16px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s}
.tab-link:hover{color:var(--text);text-decoration:none}
.tab-link.active{color:var(--accent);border-bottom-color:var(--accent)}

/* --- IMAGE ------------------------------------------------------------------------------ */
.asset-img{max-width:200px;max-height:150px;border-radius:var(--radius);border:1px solid var(--border);object-fit:cover}
.asset-img-placeholder{width:120px;height:90px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px}
.qr-img{max-width:140px;border:1px solid var(--border);border-radius:var(--radius)}

/* --- PAGE HEADER --------------------------------------------------------------------- */
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.page-header h1{font-size:20px;font-weight:800}

/* --- STOCK INDICATOR --------------------------------------------------------------- */
.stock-bar{display:inline-flex;align-items:center;gap:6px}
.stock-qty{font-weight:700}
.stock-qty.low{color:var(--danger)}
.stock-qty.ok {color:var(--success)}

/* --- MAINTENANCE DUE --------------------------------------------------------------- */
.due-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;background:#fee2e2;color:var(--danger);border-radius:30px;font-size:11px;font-weight:700}

/* --- LOGIN ------------------------------------------------------------------------------ */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:40px 36px;width:100%;max-width:380px;box-shadow:0 4px 24px rgba(0,0,0,.07)}
.login-logo{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;margin-bottom:28px}

/* --- PAGINATION ------------------------------------------------------------------------ */
.pagination{display:flex;gap:4px;align-items:center;justify-content:flex-end;margin-top:14px;font-size:13px}
.pagination a,.pagination span{padding:5px 10px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);text-decoration:none}
.pagination a:hover{background:var(--bg)}
.pagination .current{background:var(--accent);border-color:var(--accent);color:#fff}

/* --- RESPONSIVE ------------------------------------------------------------------------ */
@media(max-width:768px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:200;transform:translateX(-100%);transition:transform .2s}
  .sidebar.open{transform:translateX(0)}
  .main-wrap{margin-left:0}
  .form-grid,.form-grid-3,.detail-grid{grid-template-columns:1fr}
  .form-group.full{grid-column:1}
}

/* --- SIDEBAR BOTTOM (Profil, Settings, Logout) ------------------------ */
.sidebar-bottom{padding:8px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:2px}
.nav-util{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;color:rgba(255,255,255,.55);font-size:13px;text-decoration:none;transition:background .15s,color .15s;white-space:nowrap}
.nav-util svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}
.nav-util:hover,.nav-util.active{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.nav-util-danger:hover{background:rgba(220,38,38,.2);color:#fca5a5}

/* --- LOGIN FIX --- body muss flex sein --------------------------------------- */
body.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:40px 36px;width:100%;max-width:380px;box-shadow:0 4px 24px rgba(0,0,0,.08)}
.login-logo{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;margin-bottom:28px}
.w-full{width:100%}