/* Laget av: Bahram Aiobi */
:root{
  --bg:#f4f6f9; --card:#ffffff; --border:#e5e9f0; --text:#1a2233; --muted:#6b7688;
  --sidebar:#111a2e; --sidebar-hover:#1c2942; --sidebar-text:#c4cede;
  --blue:#2563eb; --blue-bg:#eaf0fe;
  --purple:#7c3aed; --purple-bg:#f1eafe;
  --orange:#ea580c; --orange-bg:#fdece1;
  --green:#16a34a; --green-bg:#e8f7ee;
  --yellow:#d97706; --yellow-bg:#fdf3e2;
  --red:#dc2626; --red-bg:#fde9e9;
  --gray:#64748b; --gray-bg:#eef1f5;
  --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);}
a{color:inherit;text-decoration:none}
.app{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{width:236px;background:var(--sidebar);color:var(--sidebar-text);flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden}
.brand{display:flex;flex-direction:column;gap:6px;padding:22px 18px 18px;}
.brand-logo{display:block;height:28px;max-width:180px;width:auto;object-fit:contain}
.brand .subline{font-weight:600;font-size:13px;color:#8b96ad;margin-top:2px}
.nav{padding:6px 10px;flex:1;overflow-y:auto}
.icon{flex-shrink:0;vertical-align:middle}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:14.5px;color:var(--sidebar-text);margin-bottom:2px;}
.nav a .icon{opacity:.85}
.logout-link{display:flex;align-items:center;gap:8px;color:#8b96ad;font-size:12px}
.nav a:hover{background:var(--sidebar-hover);color:#fff}
.nav a.active{background:var(--orange);color:#fff}
.nav .section-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#5b6a89;margin:16px 12px 6px}
.sidebar-user{padding:14px 16px;border-top:1px solid #223050;font-size:13px;display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.sidebar-user .role{color:#8b96ad;font-size:12px}

/* Main area */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;background:#fff;border-bottom:1px solid var(--border);gap:16px;position:sticky;top:0;z-index:10}
.topbar h1{font-size:20px;margin:0}
.topbar .subtitle{color:var(--muted);font-size:13px;margin-top:2px}
.search-box{flex:1;max-width:420px;position:relative}
.search-box input[type="text"]{width:100%;padding:9px 14px 9px 36px;border-radius:10px;border:1px solid var(--border);background:var(--bg);font-size:14px}
.search-box .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.topbar-actions{display:flex;align-items:center;gap:18px}
.topbar-user{display:flex;align-items:center;gap:10px;padding-left:16px;border-left:1px solid var(--border)}
.topbar-user .info{line-height:1.25}
.topbar-user .name{font-size:13.5px;font-weight:600}
.topbar-user .role{font-size:12px;color:var(--muted)}
.bell{position:relative;cursor:pointer;background:none;border:none;color:var(--text);display:flex;align-items:center;padding:4px}
.bell .dot{position:absolute;top:-4px;right:-6px;background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:50%;min-width:16px;height:16px;display:none;align-items:center;justify-content:center;padding:0 3px}
.content{padding:26px 28px 60px;max-width:1400px;width:100%;margin:0 auto}

/* Cards & KPIs */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.kpi-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;position:relative}
.kpi-card .label{font-size:12.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding-right:40px}
.kpi-card .value{font-size:32px;font-weight:700;margin-top:6px}
.kpi-card .icon-badge{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px}
.kpi-card.blue .icon-badge{background:var(--blue-bg);color:var(--blue)}
.kpi-card.purple .icon-badge{background:var(--purple-bg);color:var(--purple)}
.kpi-card.orange .icon-badge{background:var(--orange-bg);color:var(--orange)}
.kpi-card.red .icon-badge{background:var(--red-bg);color:var(--red)}
.kpi-card.yellow .icon-badge{background:var(--yellow-bg);color:var(--yellow)}
.kpi-card.green .icon-badge{background:var(--green-bg);color:var(--green)}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px}
.card h2{margin:0 0 14px;font-size:16px}
.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
@media (max-width:980px){.two-col{grid-template-columns:1fr}}

/* Badges / pills */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600}
.badge.blue{background:var(--blue-bg);color:var(--blue)}
.badge.purple{background:var(--purple-bg);color:var(--purple)}
.badge.orange{background:var(--orange-bg);color:var(--orange)}
.badge.green{background:var(--green-bg);color:var(--green)}
.badge.yellow{background:var(--yellow-bg);color:var(--yellow)}
.badge.red{background:var(--red-bg);color:var(--red)}
.badge.gray{background:var(--gray-bg);color:var(--gray)}
.dot-ind{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot-ind.blue{background:var(--blue)}.dot-ind.purple{background:var(--purple)}.dot-ind.orange{background:var(--orange)}
.dot-ind.green{background:var(--green)}.dot-ind.yellow{background:var(--yellow)}.dot-ind.red{background:var(--red)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:10px;font-size:14.5px;font-weight:600;border:1px solid var(--border);background:#fff;color:var(--text);cursor:pointer}
.btn:hover{background:var(--bg)}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-primary:hover{background:#1d4ed8}
.btn-success{background:var(--green);border-color:var(--green);color:#fff}
.btn-success:hover{background:#128040}
.btn-block{width:100%}
.btn-lg{padding:16px 22px;font-size:15.5px;border-radius:12px}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}

/* Forms */
label{display:block;font-size:13px;font-weight:600;margin:14px 0 6px;color:#374155}
label:first-child{margin-top:0}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=tel],select,textarea{
  width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--border);font-size:14.5px;background:#fff;color:var(--text);font-family:inherit;
}
textarea{min-height:80px;resize:vertical}
.checkbox-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid #f0f2f6}
.checkbox-row input{margin-top:3px}
.hint{color:var(--muted);font-size:12.5px;margin-top:4px}
.form-error{background:var(--red-bg);color:var(--red);padding:10px 14px;border-radius:9px;font-size:13.5px;margin-bottom:14px}
.form-success{background:var(--green-bg);color:var(--green);padding:10px 14px;border-radius:9px;font-size:13.5px;margin-bottom:14px}

/* Wizard */
.steps{display:flex;align-items:center;gap:4px;margin-bottom:26px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.step .num{width:24px;height:24px;border-radius:50%;background:var(--gray-bg);color:var(--gray);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.step.active .num{background:var(--blue);color:#fff}
.step.done .num{background:var(--green);color:#fff}
.step.active{color:var(--text);font-weight:600}
.step-sep{width:26px;height:1px;background:var(--border);margin:0 4px}

.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:860px){.type-grid{grid-template-columns:1fr}}
.type-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:28px 22px;text-align:center}
.type-card .emoji{margin-bottom:10px;display:flex;justify-content:center;color:inherit}
.type-card.service .emoji{color:var(--blue)}
.type-card.rma .emoji{color:var(--purple)}
.type-card.claims .emoji{color:var(--orange)}
.type-card h3{margin:6px 0 8px;font-size:19px}
.type-card p{color:var(--muted);font-size:13.5px;min-height:40px}
.type-card.service{border-top:4px solid var(--blue)}
.type-card.rma{border-top:4px solid var(--purple)}
.type-card.claims{border-top:4px solid var(--orange)}

.option-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin:10px 0 20px}
.option-btn{border:1px solid var(--border);background:#fff;border-radius:12px;padding:16px 10px;text-align:center;cursor:pointer;font-size:13.5px;font-weight:600}
.option-btn:hover{border-color:var(--blue)}
.option-btn.selected{border-color:var(--blue);background:var(--blue-bg);color:var(--blue)}
.option-btn .emoji{font-size:24px;display:flex;justify-content:center;margin-bottom:6px}

.pick-list{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.pick-list .pick-item{padding:11px 14px;border-bottom:1px solid #f0f2f6;cursor:pointer;font-size:14px}
.pick-list .pick-item:last-child{border-bottom:none}
.pick-list .pick-item:hover{background:var(--bg)}
.pick-list .pick-item.selected{background:var(--blue-bg);color:var(--blue);font-weight:600}

.summary-box{background:var(--bg);border-radius:12px;padding:16px 18px;font-size:14px}
.summary-box .row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border)}
.summary-box .row:last-child{border-bottom:none}
.summary-box .row span:first-child{color:var(--muted)}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:10px 12px;border-bottom:1px solid var(--border)}
td{padding:12px;border-bottom:1px solid #f0f2f6}
tr:hover td{background:var(--bg)}
.table-wrap{overflow-x:auto}

/* Timeline */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:flex;gap:14px;padding-bottom:20px;position:relative}
.timeline li:not(:last-child)::before{content:"";position:absolute;left:9px;top:22px;bottom:0;width:2px;background:var(--border)}
.timeline .tl-dot{width:20px;height:20px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:2px}
.timeline .tl-date{font-size:12px;color:var(--muted)}
.timeline .tl-text{font-size:14px;font-weight:600}
.timeline .tl-note{font-size:13px;color:var(--muted)}

/* Filters */
.filter-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.filter-tabs a{padding:8px 14px;border-radius:999px;border:1px solid var(--border);font-size:13px;background:#fff}
.filter-tabs a.active{background:var(--text);color:#fff;border-color:var(--text)}

/* Notification dropdown */
.notif-panel{position:absolute;right:28px;top:60px;width:360px;max-height:70vh;overflow-y:auto;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 30px rgba(20,25,40,.15);z-index:50}
.notif-item{padding:14px 16px;border-bottom:1px solid #f0f2f6;font-size:13.5px}
.notif-item:last-child{border-bottom:none}
.notif-item .msg{font-weight:500}
.notif-item .time{color:var(--muted);font-size:12px;margin-top:3px}
.notif-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:14px}

.next-step-box{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:12px;margin-bottom:18px}
.next-step-box.blue{background:var(--blue-bg)} .next-step-box.green{background:var(--green-bg)}
.next-step-box.yellow{background:var(--yellow-bg)} .next-step-box.gray{background:var(--gray-bg)}
.next-step-box .label{font-size:12px;text-transform:uppercase;font-weight:700;color:var(--muted);letter-spacing:.03em;margin-bottom:2px}

.actions-grid{display:flex;flex-wrap:wrap;gap:10px}

.upload-row{display:flex;align-items:center;justify-content:space-between;border:1px dashed var(--border);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.upload-row input[type=file]{font-size:13px}

.mobile-nav{display:none}
@media (max-width:860px){
  .sidebar{display:none}
  .mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#111a2e;padding:8px 4px;justify-content:space-around;z-index:40}
  .mobile-nav a{color:#c4cede;font-size:10.5px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px}
  .mobile-nav a.active{color:#fff}
  .content{padding-bottom:90px}
  .type-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .search-box{display:none}
}