/* ERP Sales Manager — Frontend Styles v1.2 */
:root {
    --esm-primary:   #1e3a5f;
    --esm-accent:    #e74c3c;
    --esm-success:   #27ae60;
    --esm-warning:   #f39c12;
    --esm-info:      #2980b9;
    --esm-light:     #f4f6f9;
    --esm-border:    #dde3ec;
    --esm-text:      #2c3e50;
    --esm-muted:     #7f8c8d;
    --esm-white:     #ffffff;
    --esm-radius:    8px;
    --esm-shadow:    0 2px 12px rgba(0,0,0,.08);
    --esm-shadow-lg: 0 8px 32px rgba(0,0,0,.12);
    --esm-font:      'Segoe UI', system-ui, -apple-system, sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}

/* ── Wrapper ── */
.esm-wrap{font-family:var(--esm-font);color:var(--esm-text);max-width:1000px;margin:0 auto;padding:20px 16px;}
.esm-portal .esm-wrap{max-width:100%;padding:0;}

/* ── Form header ── */
.esm-form-header{text-align:center;margin-bottom:26px;}
.esm-form-header h2{font-size:24px;font-weight:700;color:var(--esm-primary);margin:0 0 6px;}
.esm-form-header p{color:var(--esm-muted);margin:0;font-size:14px;}

/* ── Form sections ── */
.esm-form{width:100%;}
.esm-form-section{background:var(--esm-white);border:1px solid var(--esm-border);border-radius:var(--esm-radius);padding:20px 22px;margin-bottom:16px;box-shadow:var(--esm-shadow);}
.esm-form-section h3{font-size:14px;font-weight:700;color:var(--esm-primary);margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--esm-border);}

/* ── Row / grid ── */
.esm-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px;}
.esm-row:last-child{margin-bottom:0;}
.esm-field-group{flex:1;min-width:180px;display:flex;flex-direction:column;gap:5px;}
.esm-field-group.esm-full{flex:0 0 100%;}

/* ── Labels ── */
.esm-field-group label{font-size:11px;font-weight:700;color:var(--esm-text);text-transform:uppercase;letter-spacing:.4px;}
.esm-field-group .req{color:var(--esm-accent);}

/* ── Inputs ── */
.esm-field-group input[type="text"],
.esm-field-group input[type="email"],
.esm-field-group input[type="number"],
.esm-field-group input[type="date"],
.esm-field-group input[type="password"],
.esm-field-group select,
.esm-field-group textarea{
    width:100%;padding:9px 12px;border:1.5px solid var(--esm-border);border-radius:6px;
    font-size:14px;font-family:var(--esm-font);color:var(--esm-text);background:var(--esm-white);
    transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none;
}
.esm-field-group input:focus,.esm-field-group select:focus,.esm-field-group textarea:focus{
    outline:none;border-color:var(--esm-primary);box-shadow:0 0 0 3px rgba(30,58,95,.1);
}

/* ── Geo wrapper ── */
.esm-geo-wrapper{display:flex;flex-wrap:wrap;gap:12px;}
.esm-geo-wrapper .esm-field-group{min-width:160px;flex:1;}

/* ── Buttons ── */
.esm-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:6px;
    font-size:14px;font-weight:600;font-family:var(--esm-font);cursor:pointer;border:none;
    transition:all .18s;text-decoration:none;line-height:1;}
.esm-btn:disabled{opacity:.65;cursor:not-allowed;}
.esm-btn-primary{background:var(--esm-primary);color:#fff;}
.esm-btn-primary:hover{background:#162d4e;color:#fff;}
.esm-btn-success{background:var(--esm-success);color:#fff;}
.esm-btn-success:hover{background:#1e8449;}
.esm-btn-danger{background:var(--esm-accent);color:#fff;}
.esm-btn-danger:hover{background:#c0392b;}
.esm-btn-outline{background:transparent;color:var(--esm-primary);border:2px solid var(--esm-primary);}
.esm-btn-outline:hover{background:var(--esm-primary);color:#fff;}
.esm-btn-sm{padding:5px 12px;font-size:12px;}
.esm-btn-block{width:100%;}

/* ── Upload zone ── */
.esm-upload-field{margin-bottom:10px;}
.esm-upload-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:8px;}
.esm-upload-zone{border:2px dashed var(--esm-border);border-radius:var(--esm-radius);padding:26px 20px;
    text-align:center;cursor:pointer;transition:all .2s;position:relative;background:var(--esm-light);}
.esm-upload-zone:hover,.esm-upload-zone.dragover{border-color:var(--esm-primary);background:rgba(30,58,95,.04);}
.esm-upload-icon{font-size:28px;margin-bottom:6px;}
.esm-upload-text{font-size:13px;font-weight:600;color:var(--esm-primary);}
.esm-upload-hint{font-size:11px;color:var(--esm-muted);margin-top:4px;}
.esm-file-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.esm-upload-previews{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.esm-preview-item{position:relative;width:84px;text-align:center;}
.esm-preview-item img{width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid var(--esm-border);display:block;}
.esm-preview-remove{position:absolute;top:-6px;right:-6px;width:20px;height:20px;background:var(--esm-accent);
    color:#fff;border:2px solid #fff;border-radius:50%;font-size:11px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;padding:0;}
.esm-compress-info{font-size:10px;color:var(--esm-success);margin-top:3px;word-break:break-all;}

/* ── Messages ── */
.esm-msg{padding:12px 16px;border-radius:6px;font-size:14px;margin-top:14px;display:none;}
.esm-msg-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb;}
.esm-msg-error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb;}
.esm-notice{padding:12px 16px;background:var(--esm-light);border-radius:6px;color:var(--esm-muted);font-size:14px;}

/* ── Badges ── */
.esm-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.esm-badge-active,.esm-badge-approved{background:#d4edda;color:#155724;}
.esm-badge-inactive,.esm-badge-rejected{background:#f8d7da;color:#721c24;}
.esm-badge-pending{background:#fff3cd;color:#856404;}
.esm-badge-info{background:#d1ecf1;color:#0c5460;}

/* ── Tables ── */
.esm-table-wrap{overflow-x:auto;}
.esm-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--esm-white);border-radius:var(--esm-radius);overflow:hidden;box-shadow:var(--esm-shadow);}
.esm-table th{background:var(--esm-primary);color:#fff;padding:11px 14px;text-align:left;font-weight:600;font-size:12px;white-space:nowrap;}
.esm-table td{padding:10px 14px;border-bottom:1px solid var(--esm-border);vertical-align:middle;}
.esm-table tr:last-child td{border-bottom:none;}
.esm-table tbody tr:hover td{background:#f9fafb;}
.esm-empty{text-align:center;color:var(--esm-muted);padding:34px !important;font-size:14px;}

/* ── Detail box ── */
.esm-detail-box{background:var(--esm-light);border-radius:6px;padding:14px;font-size:13px;line-height:1.8;}
.esm-attachments{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.esm-attachment-thumb{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;}
.esm-attachment-thumb img{width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid var(--esm-border);transition:transform .2s;}
.esm-attachment-thumb:hover img{transform:scale(1.06);}
.esm-attachment-thumb span{font-size:10px;color:var(--esm-success);}

/* ── Portal ── */
.esm-portal-header{display:flex;align-items:center;gap:16px;background:var(--esm-white);border-radius:var(--esm-radius);padding:16px 20px;margin-bottom:14px;box-shadow:var(--esm-shadow);flex-wrap:wrap;}
.esm-portal-avatar img,.esm-avatar-placeholder{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.esm-avatar-placeholder{background:var(--esm-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;}
.esm-avatar-placeholder.large{width:96px;height:96px;font-size:34px;}
.esm-portal-info{flex:1;min-width:0;}
.esm-portal-info h2{margin:0 0 3px;font-size:18px;}
.esm-portal-info p{margin:0;color:var(--esm-muted);font-size:13px;}
.esm-portal-info .esm-location{color:var(--esm-info);margin-top:2px;}
.esm-portal-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}
.esm-notif-badge{background:var(--esm-accent);color:#fff;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:700;}

/* ── Tab nav ── */
.esm-portal-nav{display:flex;gap:3px;background:var(--esm-white);border-radius:var(--esm-radius);padding:5px;margin-bottom:16px;box-shadow:var(--esm-shadow);flex-wrap:wrap;}
.esm-tab-btn{flex:1;min-width:90px;padding:9px 12px;border:none;background:transparent;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;color:var(--esm-muted);transition:all .18s;font-family:var(--esm-font);}
.esm-tab-btn.active,.esm-tab-btn:hover{background:var(--esm-primary);color:#fff;}
.esm-tab-badge{background:var(--esm-accent);color:#fff;border-radius:10px;padding:1px 6px;font-size:10px;font-weight:700;margin-left:4px;vertical-align:middle;}
.esm-tab-pane{display:none;}
.esm-tab-pane.active{display:block;}

/* ── Notifications (frontend) ── */
.esm-notif-list{display:flex;flex-direction:column;gap:10px;}
.esm-notif-item-fe{display:flex;gap:12px;align-items:flex-start;background:var(--esm-white);border:1px solid var(--esm-border);border-left:4px solid var(--esm-border);border-radius:8px;padding:14px 16px;position:relative;}
.esm-notif-item-fe.esm-notif-unread-fe{border-left-color:var(--esm-primary);background:#f0f4fa;}
.esm-notif-icon{font-size:22px;flex-shrink:0;}
.esm-notif-body{flex:1;}
.esm-notif-body strong{font-size:14px;color:var(--esm-primary);}
.esm-notif-body p{margin:4px 0;font-size:13px;color:var(--esm-text);}
.esm-notif-body small{font-size:11px;color:var(--esm-muted);}
.esm-notif-dot{position:absolute;top:14px;right:14px;width:8px;height:8px;background:var(--esm-accent);border-radius:50%;}

/* ── Profile table ── */
.esm-profile-grid{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;}
.esm-profile-photo{flex:0 0 120px;text-align:center;}
.esm-profile-details{flex:1;min-width:0;}
.esm-detail-table{width:100%;border-collapse:collapse;font-size:14px;}
.esm-detail-table th{width:130px;text-align:left;padding:8px 12px;background:var(--esm-light);color:var(--esm-muted);font-weight:600;font-size:12px;}
.esm-detail-table td{padding:8px 12px;border-bottom:1px solid var(--esm-border);}
.esm-detail-table tr:last-child td{border-bottom:none;}

/* ── Login ── */
.esm-login-wrap{max-width:440px;margin:40px auto;padding:0 16px;}
.esm-login-box{background:var(--esm-white);border-radius:var(--esm-radius);padding:36px;box-shadow:var(--esm-shadow-lg);}
.esm-login-header{text-align:center;margin-bottom:24px;}
.esm-login-header h2{font-size:22px;color:var(--esm-primary);margin:0 0 6px;}
.esm-login-header p{color:var(--esm-muted);margin:0;font-size:13px;}

/* ── KPI cards (frontend dashboard) ── */
.esm-kpi-fe{background:var(--esm-white);border:1px solid var(--esm-border);border-top:4px solid #ccc;border-radius:8px;padding:16px;text-align:center;box-shadow:var(--esm-shadow);}
.esm-kpi-ico{font-size:22px;margin-bottom:6px;}
.esm-kpi-val{font-size:22px;font-weight:800;color:var(--esm-primary);line-height:1;}
.esm-kpi-lbl{font-size:11px;color:var(--esm-muted);margin-top:4px;font-weight:600;}

/* ── Filters bar ── */
.esm-filters{background:var(--esm-light);border:1px solid var(--esm-border);border-radius:var(--esm-radius);padding:14px 16px;margin-bottom:16px;}

/* ── Form actions ── */
.esm-form-actions{margin-top:18px;}

/* ── Admin bar notif bell ── */
#wp-admin-bar-esm-notifications .esm-notif-count{background:#e74c3c;color:#fff;border-radius:10px;padding:1px 7px;font-size:11px;font-weight:700;margin-left:4px;vertical-align:middle;}

/* ── Responsive ── */
@media(max-width:640px){
    .esm-row,.esm-geo-wrapper{flex-direction:column;}
    .esm-portal-header{flex-direction:column;align-items:flex-start;}
    .esm-portal-actions{width:100%;}
    .esm-tab-btn{min-width:40%;}
    .esm-login-wrap{margin:20px auto;}
}