/* SOP Manager Pro - Frontend CSS v1.0.0 */
:root {
  --sp-primary:#3b82f6; --sp-success:#10b981; --sp-warning:#f59e0b;
  --sp-danger:#ef4444; --sp-dark:#1e293b; --sp-gray:#64748b;
  --sp-light:#f1f5f9; --sp-white:#fff; --sp-border:#e2e8f0;
  --sp-shadow:0 4px 6px -1px rgba(0,0,0,0.1);
  --sp-grad:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
}
#sopmp-app,#sopmp-tasks-app{font-family:'Segoe UI',Tahoma,sans-serif;color:var(--sp-dark);max-width:1400px;margin:0 auto;}
.sopmp-header{background:#fff;box-shadow:var(--sp-shadow);padding:14px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:20px;border-radius:12px;}
.sopmp-logo{display:flex;align-items:center;gap:10px;font-size:1.4rem;font-weight:700;background:var(--sp-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.sopmp-header-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.sopmp-date{padding:6px 12px;background:var(--sp-light);border-radius:8px;font-weight:600;font-size:0.85rem;color:var(--sp-dark);}
/* Buttons */
.sopmp-btn{padding:8px 16px;border:none;border-radius:8px;cursor:pointer;font-size:0.9rem;font-weight:600;transition:all 0.2s;display:inline-flex;align-items:center;gap:6px;box-shadow:var(--sp-shadow);text-decoration:none;}
.sopmp-btn:hover{transform:translateY(-2px);}
.sopmp-btn-primary{background:var(--sp-primary);color:#fff;}
.sopmp-btn-success{background:var(--sp-success);color:#fff;}
.sopmp-btn-secondary{background:var(--sp-gray);color:#fff;}
.sopmp-btn-danger{background:var(--sp-danger);color:#fff;}
.sopmp-btn-warning{background:var(--sp-warning);color:#fff;}
.sopmp-btn-sm{padding:5px 10px;font-size:0.82rem;}
/* Dashboard */
.sopmp-dashboard{display:grid;grid-template-columns:220px 1fr;gap:20px;}
.sopmp-sidebar{background:#fff;border-radius:12px;padding:18px;box-shadow:var(--sp-shadow);height:fit-content;}
.sopmp-sidebar-header{font-weight:700;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;}
#sopmpCategoryList{list-style:none;padding:0;margin:0;}
#sopmpCategoryList li{padding:10px 14px;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;transition:all 0.2s;}
#sopmpCategoryList li:hover{background:var(--sp-light);}
#sopmpCategoryList li.active{background:var(--sp-primary);color:#fff;}
.sp-cat-count{background:var(--sp-light);padding:2px 8px;border-radius:12px;font-size:0.8rem;font-weight:600;}
#sopmpCategoryList li.active .sp-cat-count{background:rgba(255,255,255,0.3);color:#fff;}
.sopmp-main{background:#fff;border-radius:12px;padding:22px;box-shadow:var(--sp-shadow);}
/* Stats */
.sopmp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:20px;}
.sopmp-stat{background:var(--sp-grad);color:#fff;padding:16px;border-radius:12px;cursor:pointer;transition:transform 0.2s;}
.sopmp-stat:hover{transform:translateY(-3px);}
.sopmp-stat h3{font-size:1.9rem;margin:0 0 4px;}
.sopmp-stat p{opacity:0.9;font-size:0.85rem;margin:0;}
/* Search */
.sopmp-search{margin-bottom:18px;}
.sopmp-search input{width:100%;padding:11px 14px;border:2px solid var(--sp-border);border-radius:8px;font-size:1rem;box-sizing:border-box;}
.sopmp-search input:focus{outline:none;border-color:var(--sp-primary);}
/* SOP Cards */
.sopmp-sop-list{display:grid;gap:14px;}
.sopmp-sop-card{border:2px solid var(--sp-border);border-radius:12px;padding:18px;transition:all 0.2s;position:relative;}
.sopmp-sop-card:hover{border-color:var(--sp-primary);box-shadow:var(--sp-shadow);transform:translateY(-2px);}
.sopmp-sop-card.overdue{border-color:var(--sp-danger);background:#fee2e2;}
.sopmp-sop-card.due-soon{border-color:var(--sp-warning);background:#fef3c7;}
.sp-due-badge{position:absolute;top:14px;right:14px;padding:4px 10px;border-radius:12px;font-size:0.8rem;font-weight:600;color:#fff;}
.sp-due-badge.overdue{background:var(--sp-danger);}
.sp-due-badge.due-soon{background:var(--sp-warning);}
.sp-due-badge.on-track{background:var(--sp-success);}
.sopmp-sop-title{font-size:1.05rem;font-weight:700;margin:0 0 8px;}
.sopmp-sop-meta{display:flex;gap:10px;color:var(--sp-gray);font-size:0.85rem;flex-wrap:wrap;margin:8px 0;}
.sopmp-prog-track{width:100%;height:7px;background:var(--sp-light);border-radius:10px;overflow:hidden;margin:8px 0;}
.sopmp-prog-fill{height:100%;background:var(--sp-success);border-radius:10px;transition:width 0.3s;}
.sopmp-sop-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
/* Card/Editor */
.sopmp-card{background:#fff;border-radius:12px;padding:22px;box-shadow:var(--sp-shadow);margin-bottom:20px;}
.sopmp-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid var(--sp-border);flex-wrap:wrap;gap:12px;}
.sopmp-card-header>div{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.sopmp-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;}
.sopmp-form-group{margin:0;}
.sopmp-form-group.sopmp-full{grid-column:1/-1;}
.sopmp-form-group label{display:block;margin-bottom:6px;font-weight:600;font-size:0.9rem;}
.sopmp-form-group input,.sopmp-form-group select,.sopmp-form-group textarea{width:100%;padding:9px 12px;border:2px solid var(--sp-border);border-radius:8px;font-size:0.95rem;font-family:inherit;box-sizing:border-box;}
.sopmp-form-group input:focus,.sopmp-form-group select:focus,.sopmp-form-group textarea:focus{outline:none;border-color:var(--sp-primary);}
.sopmp-form-group textarea{min-height:75px;resize:vertical;}
/* Progress */
.sopmp-progress-wrap{margin-bottom:20px;padding:16px;background:var(--sp-light);border-radius:12px;}
.sopmp-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:600;}
.sopmp-progress-track{width:100%;height:26px;background:#fff;border-radius:14px;overflow:hidden;}
.sopmp-progress-bar{height:100%;background:linear-gradient(90deg,#10b981,#059669);display:flex;align-items:center;justify-content:flex-end;padding-right:10px;color:#fff;font-weight:700;font-size:0.85rem;transition:width 0.5s;border-radius:14px;min-width:30px;}
/* Steps */
.sopmp-steps-section{margin-top:24px;}
.sopmp-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.sopmp-steps-container{display:grid;gap:12px;}
.sopmp-step-card{border:2px solid var(--sp-border);border-radius:12px;padding:14px;background:var(--sp-light);}
.sopmp-step-card.completed{background:#d1fae5;border-color:var(--sp-success);}
.sopmp-step-header{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.sopmp-step-num{background:var(--sp-primary);color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.sopmp-step-card.completed .sopmp-step-num{background:var(--sp-success);}
.sopmp-step-content{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;}
.sopmp-step-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;}
.sopmp-lock-btn{background:var(--sp-gray);color:#fff;border:none;padding:4px 8px;border-radius:6px;cursor:pointer;font-size:0.8rem;}
.sopmp-lock-btn.locked{background:var(--sp-danger);}
/* Spreadsheet */
.sopmp-table-wrap{overflow-x:auto;}
.sopmp-spreadsheet{width:100%;border-collapse:separate;border-spacing:0;}
.sopmp-spreadsheet th{background:var(--sp-primary);color:#fff;padding:11px 8px;text-align:center;font-weight:600;border:1px solid rgba(255,255,255,0.15);}
.sopmp-spreadsheet td{padding:11px 8px;text-align:center;border:1px solid var(--sp-border);}
.sopmp-spreadsheet td:first-child{text-align:left;padding-left:14px;font-weight:600;}
.sopmp-task-cell.done{background:#d1fae5;}
.sopmp-task-cb{width:20px;height:20px;cursor:pointer;}
.sopmp-task-cb:disabled{opacity:0.5;cursor:not-allowed;}
/* Layout grid */
.sopmp-layout-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;}
.sopmp-layout-card{border:3px solid var(--sp-border);border-radius:12px;padding:14px;cursor:pointer;text-align:center;transition:all 0.2s;}
.sopmp-layout-card:hover{border-color:var(--sp-primary);transform:translateY(-3px);}
.sopmp-layout-icon{font-size:2rem;margin-bottom:8px;}
.sopmp-layout-card h4{margin:0 0 4px;font-size:0.95rem;}
.sopmp-layout-card p{color:var(--sp-gray);font-size:0.8rem;margin:0;}
/* Modals */
.sopmp-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:99999;align-items:center;justify-content:center;padding:20px;overflow-y:auto;box-sizing:border-box;}
.sopmp-modal.active{display:flex;}
.sopmp-modal-content{background:#fff;padding:26px;border-radius:14px;max-width:860px;width:100%;box-shadow:0 20px 25px rgba(0,0,0,0.2);max-height:90vh;overflow-y:auto;}
.sopmp-modal-sm{max-width:460px;}
.sopmp-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.sopmp-modal-header h3{font-size:1.2rem;font-weight:700;margin:0;}
.sopmp-close{background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--sp-gray);line-height:1;}
/* Decision / Troubleshoot */
.sopmp-decision-node{background:#fef3c7;border:2px solid #fbbf24;border-radius:8px;padding:14px;}
.sopmp-decision-opt{margin-left:24px;margin-top:8px;padding-left:12px;border-left:3px solid var(--sp-primary);}
.sopmp-prob{background:#fee2e2;border:2px solid var(--sp-danger);border-radius:8px;padding:14px;margin-bottom:12px;}
.sopmp-sol{background:#d1fae5;border:2px solid var(--sp-success);border-radius:8px;padding:14px;margin-left:24px;margin-top:8px;}
.sopmp-flow-step{position:relative;padding-left:44px;}
.sopmp-flow-step:not(:last-child)::before{content:'';position:absolute;left:14px;top:34px;bottom:-12px;width:2px;background:var(--sp-primary);}
.sopmp-flow-arrow{position:absolute;left:6px;top:8px;width:18px;height:18px;background:var(--sp-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.75rem;}
/* Toast */
.sopmp-toast{position:fixed;bottom:26px;right:26px;background:var(--sp-success);color:#fff;padding:14px 22px;border-radius:8px;box-shadow:0 10px 15px rgba(0,0,0,0.2);display:none;z-index:100001;font-weight:600;}
.sopmp-toast.show{display:block;animation:spSlide 0.3s ease;}
@keyframes spSlide{from{transform:translateX(400px);opacity:0}to{transform:translateX(0);opacity:1}}
/* Task Manager */
.sopmp-tasks-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;background:#fff;padding:14px;border-radius:12px;box-shadow:var(--sp-shadow);}
.sopmp-tasks-filters input,.sopmp-tasks-filters select{padding:9px 12px;border:2px solid var(--sp-border);border-radius:8px;font-size:0.9rem;}
.sopmp-tasks-filters input{flex:1;min-width:160px;}
.sopmp-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start;}
.sopmp-kanban-col{background:var(--sp-light);border-radius:12px;overflow:hidden;box-shadow:var(--sp-shadow);}
.sopmp-kanban-header{color:#fff;padding:12px 16px;font-weight:700;display:flex;justify-content:space-between;align-items:center;}
.sopmp-kanban-header span{background:rgba(255,255,255,0.3);padding:2px 10px;border-radius:12px;font-size:0.85rem;}
.sopmp-kanban-body{padding:12px;display:grid;gap:10px;min-height:80px;}
.sopmp-task-card{background:#fff;border-radius:10px;padding:14px;border-left:4px solid var(--sp-primary);box-shadow:0 2px 4px rgba(0,0,0,0.08);cursor:pointer;transition:all 0.2s;}
.sopmp-task-card:hover{transform:translateY(-2px);box-shadow:var(--sp-shadow);}
.sopmp-task-card.high{border-left-color:var(--sp-danger);}
.sopmp-task-card.medium{border-left-color:var(--sp-warning);}
.sopmp-task-card.low{border-left-color:var(--sp-success);}
.sopmp-task-title{font-weight:700;margin:0 0 6px;font-size:0.95rem;}
.sopmp-task-meta{font-size:0.82rem;color:var(--sp-gray);display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.sopmp-task-tag{background:var(--sp-light);padding:2px 8px;border-radius:10px;font-size:0.78rem;}
.sopmp-task-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
/* Login msg */
.sopmp-login-msg{padding:20px;background:#fef3c7;border-radius:8px;border:2px solid #fbbf24;font-weight:600;}
/* Responsive */
@media(max-width:900px){
  .sopmp-dashboard,.sopmp-kanban{grid-template-columns:1fr;}
  .sopmp-form-grid,.sopmp-step-content{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .sopmp-header{flex-direction:column;align-items:flex-start;}
  .sopmp-stats{grid-template-columns:repeat(2,1fr);}
}

/* ── v1.2.0 Additions ── */

/* Category edit/delete buttons in sidebar */
.sopmp-sidebar ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 9px 14px;
    gap: 4px;
}
.sopmp-sidebar ul li > span:first-child {
    flex: 1;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-cat-actions {
    display: none;
    gap: 2px;
    align-items: center;
    flex-shrink: 0;
}
.sopmp-sidebar ul li:hover .sp-cat-actions {
    display: flex;
}
.sopmp-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s;
}
.sopmp-icon-btn:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.sopmp-icon-btn-danger:hover { background: #fee2e2; }

/* Recurring alert badge */
.sopmp-recur-badge {
    font-size: 0.78rem;
    background: #e0f2fe;
    color: #0369a1;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
    white-space: nowrap;
}

/* ── v1.2.4 Due Date Color Coding ── */
@keyframes sopmp-pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.75; transform:scale(1.04); }
}
.sopmp-step-card { transition: border-left 0.2s, background 0.2s; }