/* TOBE Sales UI - Dark Mode */
:root{
  --bg:#0a0a0a;
  --panel:#0f0f0f;
  --card:#111;
  --border:#222;
  --muted:#b9b9b9;
  --text:#fff;
  --accent:#e4ff00;
  --accent2:#b7cc00;
  --shadow: 0 18px 55px rgba(0,0,0,.45);
}

.tobe-ui{direction:rtl; font-family:'Cairo', system-ui, -apple-system, Segoe UI, Tahoma, Arial, sans-serif;}
.tobe-box{max-width:1200px; margin:28px auto; background:linear-gradient(180deg, #0a0a0a, #070707); border:1px solid var(--border); border-radius:18px; padding:22px; box-shadow: var(--shadow);}
.tobe-header{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:18px;}
.tobe-title{color:var(--accent); font-weight:800; font-size:28px; letter-spacing:.2px;}
.tobe-sub{color:var(--muted); font-size:14px;}

.tobe-toolbar{display:flex; align-items:flex-end; gap:10px; margin:12px 0 18px;}
.tobe-spacer{flex:1;}

.tobe-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px;}
.tobe-grid.two{grid-template-columns:repeat(2, minmax(0, 1fr));}
@media (max-width: 720px){ .tobe-grid.two{grid-template-columns:1fr;} .tobe-box{margin:16px auto; padding:16px;} .tobe-title{font-size:22px;} }

.tobe-card{background:radial-gradient(1200px 240px at 10% 0%, rgba(228,255,0,.06), transparent), var(--card);
  border:1px solid var(--border); border-radius:16px; padding:16px; position:relative; overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tobe-card:hover{transform: translateY(-2px); border-color: rgba(228,255,0,.55); box-shadow: 0 0 0 1px rgba(228,255,0,.12), var(--shadow);}
.tobe-card-title{color:#fff; font-weight:800; font-size:18px; margin-bottom:6px;}
.tobe-card-sub{color:var(--muted); font-size:13px; line-height:1.45; min-height:18px;}
.tobe-pill{display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:8px 10px; border-radius:999px; border:1px solid rgba(228,255,0,.25); color:var(--accent); font-size:12px;}

.tobe-actions{display:flex; gap:10px; justify-content:flex-start; margin-top:18px;}
.tobe-btn{border-radius:12px; padding:10px 14px; border:1px solid var(--border); background:#0d0d0d; color:#fff; cursor:pointer; transition:.18s;}
.tobe-btn:hover{border-color:rgba(228,255,0,.45); box-shadow: 0 0 0 1px rgba(228,255,0,.12);}
.tobe-btn.primary{background: linear-gradient(180deg, var(--accent), var(--accent2)); color:#000; border-color: transparent; font-weight:900;}
.tobe-btn.primary:hover{filter:brightness(.96); box-shadow:0 8px 30px rgba(228,255,0,.12);}
.tobe-btn.ghost{background:transparent;}
.tobe-icon-btn{width:38px; height:38px; border-radius:12px; background:transparent; border:1px solid var(--border); color:#fff; cursor:pointer;}
.tobe-icon-btn:hover{border-color:rgba(228,255,0,.45);}

.tobe-empty{padding:18px; border:1px dashed rgba(228,255,0,.25); border-radius:16px; color:var(--muted); background:rgba(228,255,0,.03);}

.tobe-form .tobe-field{margin-bottom:14px;}
.tobe-field label{display:block; margin-bottom:7px; color:var(--accent); font-weight:700;}
.tobe-field input, .tobe-field select, .tobe-field textarea{
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid #2a2a2a; background:#0f0f0f; color:#fff;
  outline:none; transition:border-color .18s ease, box-shadow .18s ease;
}
.tobe-field input:focus, .tobe-field select:focus, .tobe-field textarea:focus{
  border-color:rgba(228,255,0,.55); box-shadow: 0 0 0 4px rgba(228,255,0,.08);
}
.tobe-section-title{margin:18px 0 10px; color:#fff; font-weight:900; font-size:16px;}
.tobe-service-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px;}
.tobe-service-card{display:block; cursor:pointer;}
.tobe-service-card input{display:none;}
.tobe-service-card-body{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px; transition:.18s;
}
.tobe-service-card:hover .tobe-service-card-body{border-color:rgba(228,255,0,.45); box-shadow: 0 0 0 1px rgba(228,255,0,.12);}
.tobe-service-name{font-weight:900; color:#fff; margin-bottom:4px;}
.tobe-service-desc{color:var(--muted); font-size:13px; line-height:1.4;}
.tobe-service-meta{color:rgba(228,255,0,.75); font-size:12px; margin-top:10px;}
.tobe-service-card input:checked + .tobe-service-card-body{
  border-color:rgba(228,255,0,.8);
  box-shadow: 0 0 0 1px rgba(228,255,0,.2), 0 14px 45px rgba(228,255,0,.06);
}
.tobe-fields-area{border:1px solid var(--border); border-radius:16px; padding:14px; background:rgba(255,255,255,.02);}
.tobe-hint{color:var(--muted); font-size:13px;}

.tobe-modal{position:fixed; inset:0; display:none; z-index:99999;}
.tobe-modal.is-open{display:block;}
.tobe-modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.65); animation: tobeFade .14s ease;}
.tobe-modal-panel{
  position:absolute; right:50%; top:50%; transform:translate(50%,-50%);
  width:min(720px, calc(100% - 24px));
  background:linear-gradient(180deg, #0e0e0e, #090909);
  border:1px solid rgba(228,255,0,.18);
  border-radius:18px; overflow:hidden;
  box-shadow: var(--shadow);
  animation: tobePop .14s ease;
}
.tobe-modal-header{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border);}
.tobe-modal-title{color:var(--accent); font-weight:900;}
.tobe-modal-body{padding:16px;}

.tobe-toast{margin-top:12px; padding:10px 12px; border-radius:12px; background:rgba(228,255,0,.08); border:1px solid rgba(228,255,0,.25); color:#fff;}
.tobe-muted{color:var(--muted);}

.tobe-table-wrap{overflow:auto; border-radius:14px; border:1px solid var(--border);}
.tobe-table{width:100%; border-collapse:collapse; min-width:840px; background:#0b0b0b;}
.tobe-table th, .tobe-table td{padding:12px 12px; border-bottom:1px solid #1b1b1b; text-align:right; font-size:13px;}
.tobe-table th{color:var(--accent); background:#0d0d0d; position:sticky; top:0;}
.tobe-row-sub{background:#070707;}
.tobe-mini-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:10px; padding:10px;}
.tobe-mini-card{border:1px solid var(--border); border-radius:14px; padding:12px; background:#0b0b0b;}
.tobe-mini-title{color:#fff; font-weight:900; margin-bottom:8px;}
.tobe-mini-body{color:var(--muted); font-size:12px;}
.tobe-kv{display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px dashed rgba(255,255,255,.06);}
.tobe-kv:last-child{border-bottom:none;}
.tobe-kv span{color:var(--muted);}
.tobe-kv b{color:#fff; font-weight:800;}

.tobe-tabs{display:flex; gap:10px; margin-bottom:14px;}
.tobe-tab{padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:#0d0d0d; color:#fff; cursor:pointer;}
.tobe-tab.is-active{border-color:rgba(228,255,0,.55); box-shadow: 0 0 0 1px rgba(228,255,0,.12);}
.tobe-tabpanel{display:none;}
.tobe-tabpanel.is-active{display:block;}

@keyframes tobeFade{from{opacity:0}to{opacity:1}}
@keyframes tobePop{from{opacity:0; transform:translate(50%,-52%) scale(.985)}to{opacity:1; transform:translate(50%,-50%) scale(1)}}

.tobe-alert{margin:14px 0; padding:12px 14px; border-radius:14px; border:1px solid var(--border); background:#0d0d0d; color:#fff;}
.tobe-alert.success{border-color:rgba(228,255,0,.35); background:rgba(228,255,0,.08);}
.tobe-alert.error{border-color:rgba(255,90,90,.35); background:rgba(255,90,90,.08);}

.tobe-filters{margin:10px 0 18px; padding:14px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.02);}
.tobe-badges{display:flex; flex-wrap:wrap; gap:8px; padding:10px; margin-bottom:10px;}
.tobe-badge{display:inline-flex; padding:8px 10px; border-radius:999px; border:1px solid rgba(228,255,0,.25); color:var(--accent); background:rgba(228,255,0,.05); font-size:12px; font-weight:800;}
.tobe-notif.is-read{opacity:.65}