:root{
      --bg:#f5f8f5; --card:#fff; --text:#193126; --muted:#6b7c72; --line:#dfe8e2;
      --primary:#2f8f5b; --primary2:#51a978; --green:#24945c; --orange:#e99a35; --red:#dc554f;
      --blue:#2f80ed; --shadow:0 8px 24px rgba(31,42,68,.07); --radius:16px;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text)}
    button,input,select,textarea{font:inherit}
    .app{min-height:100vh;display:grid;grid-template-columns:260px 1fr}
    aside{background:linear-gradient(180deg,#173d2a,#0f2f20);color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh}
    .brand{display:flex;gap:12px;align-items:center;padding:0 8px 24px}
    .brand-logo{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#65b889,#2f8f5b);display:grid;place-items:center;font-size:24px}
    .brand small{display:block;color:#c8dfd1;margin-top:3px}
    nav{display:grid;gap:8px}
    nav button{width:100%;border:0;background:transparent;color:#d8eadf;padding:12px 14px;border-radius:12px;text-align:right;cursor:pointer;display:flex;align-items:center;gap:10px}
    nav button.active,nav button:hover{background:linear-gradient(90deg,#2f8f5b,#51a978);color:#fff}
    main{padding:24px}
    .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
    .topbar h1{margin:0;font-size:28px}
    .top-actions{display:flex;gap:10px;align-items:center}
    .btn{border:0;border-radius:12px;padding:11px 16px;cursor:pointer}
    .btn-primary{background:var(--primary);color:#fff}
    .btn-light{background:#fff;border:1px solid var(--line);color:var(--text)}
    .btn-wa{background:#e8f8ef;color:#128c4b;border:1px solid #c8eed8;padding:7px 10px;border-radius:10px;text-decoration:none;display:inline-block;margin-top:5px}
    .grid-kpi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}
    .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
    .kpi{padding:18px}
    .kpi .label{color:var(--muted);font-size:14px}
    .kpi .value{font-size:30px;font-weight:700;margin:10px 0 6px}
    .kpi .delta{font-size:12px;color:var(--green)}
    .content-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}
    .panel{padding:18px}
    .panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
    .panel h3{margin:0;font-size:18px}
    .filters{display:flex;gap:8px;flex-wrap:wrap}
    .filters select,.filters input{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
    table{width:100%;border-collapse:collapse}
    th,td{padding:13px 10px;border-bottom:1px solid var(--line);text-align:right;font-size:14px;vertical-align:top}
    th{color:#596174;background:#fafbfe}
    tr:hover td{background:#f7fbf8}
    .tag{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:12px;margin:2px;background:#eaf6ef;color:#2f7f52}
    .status{padding:6px 10px;border-radius:8px;font-size:12px;display:inline-block}
    .s-new{background:#e8f3ec;color:#2f7f52}.s-contact{background:#e9f4ff;color:#2977c9}
    .s-trial{background:#fff3dd;color:#a46200}.s-paid{background:#e7faef;color:#138b4f}.s-lost{background:#ffe9e8;color:#c83b36}
    .timeline{display:grid;gap:12px}
    .event{border-right:3px solid var(--primary);padding:8px 12px;background:#f7fbf8;border-radius:10px}
    .event small{color:var(--muted)}
    .kanban{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:12px;overflow:auto;padding-bottom:6px}
    .col{background:#f4f5f9;border:1px solid var(--line);border-radius:14px;padding:10px;min-height:360px}
    .col h4{margin:4px 4px 10px;display:flex;justify-content:space-between}
    .lead{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:0 4px 12px rgba(31,42,68,.04)}
    .lead b{display:block;margin-bottom:5px}
    .lead small{color:var(--muted)}
    .hidden{display:none!important}
    .modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:grid;place-items:center;padding:20px;z-index:50}
    .modal-box{width:min(760px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:18px;padding:20px;box-shadow:0 24px 70px rgba(0,0,0,.2)}
    .modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    label{font-size:13px;color:#4b5563;display:block;margin-bottom:6px}
    input,select,textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px}
    textarea{min-height:90px;resize:vertical}
    .student-row{display:grid;grid-template-columns:1.1fr 1fr .8fr .8fr auto;gap:8px;margin-bottom:8px}
    .close{background:#f3f4f6;border:0;border-radius:9px;width:36px;height:36px;cursor:pointer}
    .section{display:none}.section.active{display:block}
    .chart{height:220px;display:flex;align-items:flex-end;gap:14px;padding:15px 10px 0}
    .bar-wrap{flex:1;text-align:center}
    .bar{border-radius:10px 10px 0 0;background:linear-gradient(180deg,#65b889,#2f8f5b);min-height:10px}
    .bar-wrap span{display:block;margin-top:8px;font-size:12px;color:var(--muted)}
    .empty{padding:25px;text-align:center;color:var(--muted)}

    .btn-primary:hover{background:#26774c}
    .btn-light:hover{border-color:#b9d5c3;background:#f7fbf8}
    input:focus,select:focus,textarea:focus{outline:3px solid rgba(47,143,91,.12);border-color:var(--primary)}
    .card{transition:box-shadow .2s ease,border-color .2s ease}
    .card:hover{border-color:#cfe0d4}
    .kpi .value{color:#214f36}
    th{background:#f4f8f5;color:#50655a}

    /* تحسينات تخطيط صفحة العميل */
    body{overflow-x:hidden}
    aside{width:230px;min-width:230px}
    main{width:calc(100% - 230px);min-width:0}
    .content{max-width:none;width:100%;padding:22px}
    #clientDetails .panel-head{align-items:center;gap:12px;flex-wrap:wrap}
    #clientDetails .hero-card{padding:22px}
    #clientDetails .hero-card > .panel-head{margin-bottom:8px}
    #clientDetails .parent-title{margin-top:18px}
    #clientDetails .detail-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
    #clientDetails .detail-actions > *{max-width:100%}
    #clientDetails .btn,#clientDetails .btn-wa{white-space:nowrap}
    #clientDetails .owner-line{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
    #clientDetails .hero-students{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
    #clientDetails .hero-student{min-width:0}
    #clientDetails .detail-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
    #clientDetails .info-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
    #clientDetails .info-item{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 0;border-bottom:1px solid var(--line);min-width:0}
    #clientDetails .info-item b,#clientDetails .info-item span{overflow-wrap:anywhere;word-break:break-word}
    #clientDetails .timeline{max-width:100%}
    #clientDetails .event{overflow-wrap:anywhere}
    .topbar{padding-inline:22px}
    .topbar h1{font-size:30px}
    .subtitle{font-size:16px}
    .btn-wa{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
    .sidebar-toggle{display:none}

    @media (max-width:1200px){
      aside{width:205px;min-width:205px}
      main{width:calc(100% - 205px)}
      .content{padding:18px}
      .topbar{padding-inline:18px}
      .topbar h1{font-size:27px}
      #clientDetails .detail-grid{grid-template-columns:1fr}
      #clientDetails .info-list{grid-template-columns:repeat(2,minmax(0,1fr))}
    }

    @media (max-width:900px){
      body{display:block}
      aside{
        position:fixed;right:0;top:0;bottom:0;z-index:50;
        width:250px;min-width:250px;
        transform:translateX(100%);
        transition:transform .25s ease;
        box-shadow:-12px 0 30px rgba(0,0,0,.18)
      }
      body.sidebar-open aside{transform:translateX(0)}
      main{width:100%;min-width:0}
      .sidebar-toggle{
        display:inline-flex;align-items:center;justify-content:center;
        width:42px;height:42px;border:1px solid var(--line);border-radius:12px;
        background:#fff;font-size:20px;cursor:pointer
      }
      .topbar{display:flex;align-items:flex-start;gap:12px}
      .topbar > div{min-width:0}
      .content{padding:14px}
      #clientDetails .hero-card{padding:16px}
      #clientDetails .hero-students{grid-template-columns:1fr}
      #clientDetails .info-list{grid-template-columns:1fr}
      #clientDetails .detail-actions{align-items:stretch}
      #clientDetails .detail-actions > *{flex:1 1 210px}
      .topbar h1{font-size:24px}
      .subtitle{font-size:14px}
    }

    @media (max-width:560px){
      .content{padding:10px}
      .topbar{padding:14px 10px}
      .topbar h1{font-size:21px}
      #clientDetails .panel-head .btn{width:100%}
      #clientDetails .detail-actions > *{flex:1 1 100%;width:100%}
      #clientDetails .parent-title{font-size:20px}
      #clientDetails .status-hero{font-size:16px}
      #clientDetails .hero-card{padding:14px}
      #clientDetails .detail-grid{gap:10px}
      .card.panel{padding:14px}
    }

    .topbar{
      display:flex!important;
      justify-content:space-between!important;
      align-items:flex-start!important;
      gap:20px!important
    }
    .topbar .top-actions{
      margin-inline-start:auto!important;
      display:flex!important;gap:10px!important;flex-wrap:wrap!important
    }

    /* v7: استغلال كامل للمساحة وإعادة بناء صفحة تفاصيل العميل */
    .content{max-width:none!important;width:100%!important;margin:0!important}
    #clientDetails{width:100%}
    #clientDetails > .panel-head{
      display:flex;justify-content:space-between;align-items:center;
      margin-bottom:14px;width:100%
    }
    #clientDetails .hero-card{
      width:100%;
      min-height:auto!important;
      padding:18px 20px!important;
      display:block
    }
    #clientDetails .hero-card > .panel-head{
      min-height:auto!important;
      margin:0 0 10px 0!important;
      display:flex;justify-content:flex-start
    }
    #clientDetails .hero-students{
      margin:12px 0 14px!important;
      display:grid!important;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;
      gap:12px!important
    }
    #clientDetails .hero-student{
      background:#f7fbf8!important;
      border:1px solid #d7e8dc!important;
      border-radius:14px!important;
      padding:14px 16px!important;
      box-shadow:none!important
    }
    #clientDetails .hero-student b{
      font-size:18px;
      margin-bottom:9px!important
    }
    #clientDetails .parent-title{
      margin:8px 0 2px!important;
      font-size:22px!important
    }
    #clientDetails .detail-actions{
      width:100%;
      display:grid!important;
      grid-template-columns:repeat(5,minmax(140px,1fr))!important;
      gap:10px!important;
      margin-top:14px!important
    }
    #clientDetails .detail-actions > *{
      width:100%!important;
      min-width:0!important;
      justify-content:center!important;
      text-align:center!important
    }
    #clientDetails .owner-line{
      margin-top:12px!important;
      padding:12px 0 0!important;
      border-top:1px solid var(--line)!important
    }
    #followAlert .follow-alert{
      display:flex;align-items:center;
      min-height:46px;margin-bottom:12px!important
    }
    #clientDetails .detail-grid{
      width:100%;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
      align-items:start
    }
    #clientDetails .card.panel{width:100%;min-width:0}
    #clientDetails .info-list{
      grid-template-columns:repeat(2,minmax(0,1fr))!important
    }

    @media (max-width:1350px){
      #clientDetails .detail-actions{
        grid-template-columns:repeat(3,minmax(160px,1fr))!important
      }
    }

    /* v8: إصلاح أزرار واتساب والأزرار الطويلة */
    #clientDetails .detail-actions{
      grid-template-columns:repeat(auto-fit,minmax(185px,1fr))!important;
      align-items:stretch!important
    }
    #clientDetails .detail-actions .btn,
    #clientDetails .detail-actions .btn-wa{
      white-space:normal!important;
      overflow-wrap:anywhere!important;
      word-break:break-word!important;
      line-height:1.25!important;
      min-height:54px!important;
      padding:10px 12px!important;
      font-size:15px!important;
      display:flex!important;
      align-items:center!important;
      justify-content:center!important;
      text-align:center!important;
      border-radius:12px!important
    }
    #clientDetails .detail-actions .btn-wa{
      background:#eef8f2!important;
      border:1px solid #cfe2d5!important;
      color:#1f6f46!important
    }
    #clientDetails .detail-actions .btn{
      font-weight:600!important
    }
    @media (max-width:900px){
      #clientDetails .detail-actions{
        grid-template-columns:repeat(2,minmax(160px,1fr))!important
      }
      #clientDetails .detail-actions .btn,
      #clientDetails .detail-actions .btn-wa{
        font-size:14px!important;
        min-height:50px!important
      }
    }
    @media (max-width:560px){
      #clientDetails .detail-actions{
        grid-template-columns:1fr!important
      }
      #clientDetails .detail-actions .btn,
      #clientDetails .detail-actions .btn-wa{
        font-size:15px!important
      }
    }

    /* v9: حل انضغاط الصفحة ناحية اليمين واستغلال العرض بالكامل */
    .app{
      grid-template-columns:230px minmax(0,1fr)!important;
      align-items:stretch!important;
      width:100%!important;
    }
    aside{
      width:auto!important;
      min-width:0!important;
    }
    main{
      width:auto!important;
      max-width:none!important;
      min-width:0!important;
      padding:24px!important;
    }
    main > .topbar,
    main > section{
      width:100%!important;
      max-width:none!important;
      margin:0 0 20px 0!important;
    }
    .card,
    .card.panel,
    .content-grid,
    .kanban,
    table,
    .filters,
    #dashboard,
    #clients,
    #clientDetails,
    #tasks,
    #reports{
      width:100%!important;
      max-width:none!important;
    }
    #clients .card.panel,
    #tasks .card.panel,
    #reports .content-grid,
    #dashboard .content-grid{
      margin-inline:0!important;
    }
    #clients .filters{
      display:flex!important;
      flex-wrap:wrap!important;
      gap:10px!important;
    }
    #clients .filters input,
    #clients .filters select{
      flex:1 1 220px!important;
      min-width:0!important;
    }
    #clients table{
      table-layout:auto!important;
    }
    #clients td,#clients th{
      white-space:normal!important;
      vertical-align:top!important;
    }
    .topbar{
      width:100%!important;
      display:flex!important;
      justify-content:space-between!important;
      align-items:flex-start!important;
      gap:16px!important;
    }
    .topbar > div:first-child{
      flex:1 1 auto!important;
      min-width:0!important;
    }
    .top-actions{
      flex:0 0 auto!important;
    }

    #modal .modal-box{width:min(920px,100%)}
    #modal .student-row{align-items:center}
    #modal .student-row .close{min-width:42px;height:42px}
    @media(max-width:900px){
      #modal .student-row{grid-template-columns:1fr 1fr}
      #modal .student-row .close{grid-column:1/-1;width:100%}
    }
    @media(max-width:560px){
      #modal .student-row{grid-template-columns:1fr}
    }

    /* v14: تحسين تصميم صفحة العملاء فقط مع الحفاظ على الوظائف */
    #clients .card.panel{
      padding:20px!important;
      background:#fff;
      border:1px solid #dfe8e2;
      border-radius:18px;
      box-shadow:0 8px 24px rgba(31,42,68,.045);
    }

    #clients .panel-head{
      align-items:flex-start!important;
      gap:18px!important;
      margin-bottom:18px!important;
    }

    #clients .panel-head h3{
      margin:4px 0 0!important;
      font-size:24px!important;
      color:#1f3428;
    }

    #clients .filters{
      flex:1 1 auto!important;
      display:grid!important;
      grid-template-columns:minmax(260px,2fr) minmax(170px,1fr) minmax(170px,1fr)!important;
      gap:12px!important;
      align-items:end!important;
    }

    #clients .filters input,
    #clients .filters select{
      width:100%!important;
      min-width:0!important;
      height:46px!important;
      padding:11px 14px!important;
      border:1px solid #d7e4db!important;
      border-radius:12px!important;
      background:#f8fbf9!important;
      color:#24372c!important;
      font-size:14px!important;
      box-shadow:none!important;
    }

    #clients .filters input:focus,
    #clients .filters select:focus{
      background:#fff!important;
      border-color:var(--primary)!important;
      outline:3px solid rgba(47,143,91,.10)!important;
    }

    #clients .card.panel > div[style*="overflow:auto"]{
      overflow:auto!important;
      border:1px solid #dfe8e2!important;
      border-radius:16px!important;
      background:#f5f9f6!important;
      padding:10px!important;
    }

    #clients table{
      border-collapse:separate!important;
      border-spacing:0 10px!important;
      min-width:980px!important;
      width:100%!important;
      background:transparent!important;
    }

    #clients thead th{
      background:transparent!important;
      border-bottom:none!important;
      color:#627369!important;
      font-size:13px!important;
      font-weight:800!important;
      padding:6px 12px 9px!important;
    }

    #clients tbody td{
      background:#fff!important;
      border-top:1px solid #edf2ee!important;
      border-bottom:1px solid #edf2ee!important;
      padding:16px 12px!important;
      vertical-align:top!important;
      box-shadow:0 4px 12px rgba(31,42,68,.025)!important;
    }

    #clients tbody tr td:first-child{
      border-right:1px solid #edf2ee!important;
      border-top-right-radius:14px!important;
      border-bottom-right-radius:14px!important;
    }

    #clients tbody tr td:last-child{
      border-left:1px solid #edf2ee!important;
      border-top-left-radius:14px!important;
      border-bottom-left-radius:14px!important;
    }

    #clients tbody tr:hover td{
      background:#fbfdfb!important;
      border-color:#d9e7dd!important;
    }

    /* إزالة شكل الزر القديم من اسم ولي الأمر */
    #clients .client-link{
      appearance:none!important;
      -webkit-appearance:none!important;
      border:0!important;
      background:transparent!important;
      padding:0!important;
      margin:0!important;
      border-radius:0!important;
      box-shadow:none!important;
      color:#1e3428!important;
      font-size:18px!important;
      font-weight:800!important;
      line-height:1.35!important;
      cursor:pointer!important;
      text-align:right!important;
    }

    #clients .client-link:hover{
      color:var(--primary)!important;
      text-decoration:underline!important;
      text-underline-offset:3px!important;
    }

    #clients td:first-child .tag{
      background:#f1f6f2!important;
      color:#5a6d61!important;
      border:1px solid #e0e9e3!important;
      font-size:11px!important;
      padding:4px 8px!important;
      margin-inline-start:8px!important;
      vertical-align:middle!important;
    }

    #clients td:first-child small{
      display:block!important;
      margin-top:7px!important;
      color:#738178!important;
      line-height:1.45!important;
      font-size:12px!important;
    }

    #clients .btn-wa{
      display:inline-flex!important;
      align-items:center!important;
      justify-content:center!important;
      min-height:36px!important;
      padding:8px 11px!important;
      margin-top:6px!important;
      border-radius:10px!important;
      font-size:13px!important;
      white-space:normal!important;
      text-align:center!important;
    }

    #clients td:nth-child(3){
      text-align:center!important;
      font-size:17px!important;
      font-weight:800!important;
      color:#245f3f!important;
    }

    #clients td:nth-child(4) .tag{
      background:#eef7f1!important;
      color:#2f7f52!important;
      border:1px solid #d7e8dc!important;
      margin:3px!important;
      padding:5px 9px!important;
    }

    #clients .status{
      font-weight:700!important;
      font-size:12px!important;
      padding:7px 10px!important;
      border-radius:10px!important;
      white-space:nowrap!important;
    }

    /* المسؤول يظل هادئًا كما طلب المستخدم */
    #clients td:nth-child(7){
      color:#2f3f35!important;
      font-weight:500!important;
    }

    #clients td:nth-child(8){
      color:#67776d!important;
      font-size:13px!important;
    }

    .client-stage-status{
      display:flex;
      align-items:flex-start;
      gap:18px;
      flex-wrap:wrap;
    }
    .stage-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:9px 14px;
      border-radius:12px;
      background:#eaf5ee;
      color:#236d45;
      border:1px solid #d1e5d8;
      font-size:16px;
      font-weight:800;
    }

    @media (max-width:1100px){
      #clients .panel-head{
        flex-direction:column!important;
      }

      #clients .filters{
        width:100%!important;
        grid-template-columns:1fr 1fr!important;
      }

      #clients .filters input{
        grid-column:1/-1!important;
      }
    }

    @media (max-width:700px){
      #clients .card.panel{
        padding:14px!important;
      }

      #clients .filters{
        grid-template-columns:1fr!important;
      }

      #clients .filters input{
        grid-column:auto!important;
      }
    }

    @media (max-width:1100px){
      #clientDetails .detail-grid{grid-template-columns:1fr!important}
      #clientDetails .detail-actions{
        grid-template-columns:repeat(2,minmax(160px,1fr))!important
      }
    }
    @media (max-width:700px){
      #clientDetails .detail-actions{grid-template-columns:1fr!important}
      #clientDetails .info-list{grid-template-columns:1fr!important}
    }

    @media (max-width:1100px){.grid-kpi{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}.app{grid-template-columns:90px 1fr}aside .brand-text,nav button span{display:none}aside{padding-inline:12px}nav button{justify-content:center}}
    @media (max-width:700px){.detail-grid,.info-list,.student-cards{grid-template-columns:1fr}main{padding:14px}.grid-kpi{grid-template-columns:1fr}.topbar{align-items:flex-start;gap:12px}.form-grid{grid-template-columns:1fr}.student-row{grid-template-columns:1fr}.app{grid-template-columns:1fr}aside{position:static;height:auto}.brand{padding-bottom:10px}nav{grid-template-columns:repeat(4,1fr)}nav button{padding:10px}.content-grid{grid-template-columns:1fr}}
  
    /* v16: إصلاح Responsive عام لكل النظام */

    html,body{
      max-width:100%;
      overflow-x:hidden;
    }

    *{
      box-sizing:border-box;
    }

    img,svg,video,canvas{
      max-width:100%;
      height:auto;
    }

    .app{
      grid-template-columns:230px minmax(0,1fr)!important;
      width:100%!important;
      min-height:100vh!important;
    }

    aside{
      width:auto!important;
      min-width:0!important;
      overflow-y:auto!important;
      overscroll-behavior:contain;
    }

    main{
      min-width:0!important;
      width:auto!important;
      max-width:none!important;
    }

    main > section,
    .card,
    .panel,
    .content-grid,
    .detail-grid,
    .kanban,
    .filters,
    table{
      max-width:100%!important;
    }

    input,select,textarea,button,a{
      max-width:100%;
    }

    .topbar{
      flex-wrap:wrap!important;
    }

    .top-actions{
      flex-wrap:wrap!important;
    }

    .modal-box{
      width:min(760px,calc(100vw - 24px))!important;
      max-height:calc(100vh - 24px)!important;
      overflow:auto!important;
    }

    .student-row{
      min-width:0!important;
    }

    .kanban{
      overflow-x:auto!important;
      overflow-y:hidden!important;
      scroll-snap-type:x proximity;
      -webkit-overflow-scrolling:touch;
    }

    .kanban .col{
      scroll-snap-align:start;
    }

    .sidebar-toggle{
      display:none;
    }

    @media (max-width: 1100px){
      .app{
        grid-template-columns:205px minmax(0,1fr)!important;
      }

      main{
        padding:18px!important;
      }

      .content-grid,
      .detail-grid{
        grid-template-columns:1fr!important;
      }

      .form-grid{
        grid-template-columns:1fr 1fr!important;
      }

      .kanban{
        grid-template-columns:repeat(7,minmax(250px,250px))!important;
      }

      .filters{
        width:100%!important;
      }
    }

    @media (max-width: 900px){
      .app{
        display:block!important;
      }

      aside{
        position:fixed!important;
        top:0!important;
        right:0!important;
        bottom:0!important;
        z-index:100!important;
        width:260px!important;
        min-width:260px!important;
        height:100vh!important;
        transform:translateX(105%)!important;
        transition:transform .25s ease!important;
        box-shadow:-14px 0 35px rgba(0,0,0,.20)!important;
      }

      body.sidebar-open aside{
        transform:translateX(0)!important;
      }

      body.sidebar-open::after{
        content:"";
        position:fixed;
        inset:0;
        background:rgba(12,28,19,.38);
        z-index:90;
      }

      main{
        width:100%!important;
        min-width:0!important;
        padding:14px!important;
      }

      .sidebar-toggle{
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        width:42px!important;
        height:42px!important;
        min-width:42px!important;
        border:1px solid var(--line)!important;
        border-radius:12px!important;
        background:#fff!important;
        font-size:20px!important;
        cursor:pointer!important;
      }

      .topbar{
        display:grid!important;
        grid-template-columns:auto minmax(0,1fr)!important;
        align-items:start!important;
        gap:12px!important;
      }

      .topbar > div:first-of-type{
        min-width:0!important;
      }

      .top-actions{
        grid-column:1/-1!important;
        width:100%!important;
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
        gap:10px!important;
      }

      .top-actions .btn{
        width:100%!important;
      }

      .topbar h1{
        font-size:24px!important;
        line-height:1.3!important;
      }

      .card,
      .panel{
        border-radius:16px!important;
      }

      .kpis,
      .stats-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
      }

      .filters,
      #clients .filters{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:10px!important;
      }

      .filters input,
      .filters select,
      #clients .filters input,
      #clients .filters select{
        width:100%!important;
        min-width:0!important;
      }

      .form-grid{
        grid-template-columns:1fr!important;
      }

      .detail-actions{
        grid-template-columns:1fr 1fr!important;
      }

      .detail-actions > *{
        width:100%!important;
      }

      .hero-students{
        grid-template-columns:1fr!important;
      }

      .info-list{
        grid-template-columns:1fr!important;
      }

      .kanban{
        grid-template-columns:repeat(7,minmax(240px,240px))!important;
        gap:12px!important;
        padding-bottom:12px!important;
      }

      .kanban .col{
        min-height:320px!important;
      }

      .clients-table-wrap,
      #clients .card.panel > div[style*="overflow:auto"]{
        overflow-x:auto!important;
        -webkit-overflow-scrolling:touch;
      }

      table{
        min-width:900px!important;
      }

      .modal{
        padding:8px!important;
        align-items:start!important;
      }

      .modal-box{
        width:calc(100vw - 16px)!important;
        max-height:calc(100vh - 16px)!important;
        margin-top:8px!important;
        padding:16px!important;
        border-radius:16px!important;
      }

      .student-row{
        grid-template-columns:1fr 1fr!important;
      }

      .student-row .close{
        grid-column:1/-1!important;
        width:100%!important;
      }
    }

    @media (max-width: 600px){
      main{
        padding:10px!important;
      }

      .topbar{
        margin-bottom:14px!important;
      }

      .topbar h1{
        font-size:21px!important;
      }

      .top-actions{
        grid-template-columns:1fr!important;
      }

      .kpis,
      .stats-grid{
        grid-template-columns:1fr!important;
      }

      .card,
      .panel,
      .hero-card{
        padding:14px!important;
      }

      .panel-head{
        flex-direction:column!important;
        align-items:stretch!important;
        gap:10px!important;
      }

      .panel-head .btn{
        width:100%!important;
      }

      .detail-actions{
        grid-template-columns:1fr!important;
      }

      .detail-actions .btn,
      .detail-actions .btn-wa{
        width:100%!important;
        min-height:50px!important;
        white-space:normal!important;
      }

      .client-stage-status{
        flex-direction:column!important;
        gap:12px!important;
      }

      .stage-badge,
      .status-hero{
        width:100%!important;
        text-align:center!important;
      }

      .student-row{
        grid-template-columns:1fr!important;
      }

      .student-row .close{
        grid-column:auto!important;
      }

      .modal-head{
        align-items:flex-start!important;
      }

      textarea{
        min-height:110px!important;
      }

      .kanban{
        grid-template-columns:repeat(7,minmax(225px,225px))!important;
      }

      .task-card{
        padding:12px!important;
      }

      .task-card > div:first-child{
        flex-direction:column!important;
      }
    }

    @media (max-width: 420px){
      main{
        padding:8px!important;
      }

      .topbar h1{
        font-size:19px!important;
      }

      .sidebar-toggle{
        width:40px!important;
        height:40px!important;
        min-width:40px!important;
      }

      .card,
      .panel,
      .hero-card{
        padding:12px!important;
        border-radius:14px!important;
      }

      .btn,
      .btn-wa{
        font-size:14px!important;
        padding:10px 12px!important;
      }

      .kanban{
        grid-template-columns:repeat(7,minmax(210px,210px))!important;
      }
    }

    /* v17: تفعيل السحب الأفقي لجدول لوحة التحكم على الموبايل */
    #dashboard .content-grid{
      min-width:0!important;
    }

    #dashboard .content-grid > *{
      min-width:0!important;
    }

    #dashboard .card.panel > div[style*="overflow:auto"]{
      display:block!important;
      width:100%!important;
      max-width:100%!important;
      overflow-x:auto!important;
      overflow-y:hidden!important;
      -webkit-overflow-scrolling:touch!important;
      touch-action:pan-x pan-y!important;
      overscroll-behavior-x:contain!important;
      padding-bottom:8px!important;
    }

    #dashboard .card.panel > div[style*="overflow:auto"] table{
      min-width:760px!important;
      width:max-content!important;
    }

    #dashboard .card.panel > div[style*="overflow:auto"]::-webkit-scrollbar{
      height:7px;
    }

    #dashboard .card.panel > div[style*="overflow:auto"]::-webkit-scrollbar-thumb{
      background:#bfd8c8;
      border-radius:999px;
    }

    #dashboard .card.panel > div[style*="overflow:auto"]::-webkit-scrollbar-track{
      background:#eef5f0;
      border-radius:999px;
    }

    @media(max-width:600px){
      #dashboard .card.panel{
        overflow:hidden!important;
      }

      #dashboard .card.panel > div[style*="overflow:auto"]{
        margin-inline:0!important;
      }

      #dashboard .card.panel > div[style*="overflow:auto"]::after{
        content:"اسحب يمينًا ويسارًا لعرض باقي البيانات";
        display:block;
        position:sticky;
        right:0;
        width:max-content;
        margin-top:6px;
        color:var(--muted);
        font-size:11px;
      }
    }

    /* v19: تعديل المنيو فقط — خلفية فاتحة وتباين أوضح */
    aside{
      background:linear-gradient(180deg,#eef8f1 0%,#dcefe3 100%)!important;
      color:#173d2a!important;
      border-left:1px solid #cfe2d5!important;
      box-shadow:-8px 0 24px rgba(31,79,54,.06)!important;
    }

    .brand{
      border-bottom:1px solid #cfe2d5!important;
      margin-bottom:14px!important;
      padding-bottom:20px!important;
    }

    .brand-logo{
      background:linear-gradient(135deg,#5ab07f,#2f8f5b)!important;
      color:#fff!important;
      box-shadow:0 6px 16px rgba(47,143,91,.18)!important;
    }

    .brand strong{
      color:#173d2a!important;
    }

    .brand small{
      color:#587365!important;
    }

    nav{
      gap:9px!important;
    }

    nav button{
      background:transparent!important;
      color:#244c35!important;
      border:1px solid transparent!important;
      font-weight:700!important;
      transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease!important;
    }

    nav button:hover{
      background:#e1f1e7!important;
      color:#1d653e!important;
      border-color:#c7dfd0!important;
      transform:translateX(-2px)!important;
    }

    nav button.active{
      background:linear-gradient(90deg,#4fa874,#2f8f5b)!important;
      color:#fff!important;
      border-color:#2f8f5b!important;
      box-shadow:0 7px 18px rgba(47,143,91,.20)!important;
      transform:none!important;
    }

    nav button span{
      color:inherit!important;
    }

    @media(max-width:900px){
      aside{
        background:linear-gradient(180deg,#f2faf4 0%,#dcefe3 100%)!important;
        border-left:1px solid #c8dfd0!important;
        box-shadow:-14px 0 34px rgba(31,79,54,.16)!important;
      }
    }

    /* v20: إظهار نصوص المنيو على الموبايل */
    @media(max-width:1100px){
      aside .brand-text{
        display:block!important;
      }

      nav button span{
        display:inline!important;
      }

      aside{
        padding-inline:16px!important;
      }

      nav button{
        justify-content:flex-start!important;
        width:100%!important;
        gap:12px!important;
        padding:13px 14px!important;
        text-align:right!important;
        white-space:normal!important;
      }

      nav button span{
        flex:1 1 auto!important;
        min-width:0!important;
        color:inherit!important;
        font-size:16px!important;
        line-height:1.35!important;
      }
    }

    @media(max-width:900px){
      aside{
        width:280px!important;
        min-width:280px!important;
      }

      .brand{
        display:flex!important;
        align-items:center!important;
        gap:12px!important;
      }

      .brand-text{
        min-width:0!important;
      }

      .brand strong{
        display:block!important;
        font-size:18px!important;
      }

      .brand small{
        display:block!important;
        font-size:13px!important;
        line-height:1.35!important;
      }
    }

    /* v21: إظهار كل عناصر المنيو على الموبايل */
    @media(max-width:900px){
      aside{
        display:flex!important;
        flex-direction:column!important;
        height:100vh!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
      }

      aside nav{
        display:flex!important;
        flex-direction:column!important;
        grid-template-columns:none!important;
        gap:9px!important;
        width:100%!important;
        flex:0 0 auto!important;
      }

      aside nav button{
        display:flex!important;
        flex:0 0 auto!important;
        width:100%!important;
        min-height:50px!important;
        justify-content:flex-start!important;
        align-items:center!important;
        gap:12px!important;
        padding:13px 14px!important;
      }

      aside nav button span{
        display:block!important;
        flex:1 1 auto!important;
        min-width:0!important;
        white-space:normal!important;
        overflow:visible!important;
      }

      aside .brand{
        flex:0 0 auto!important;
      }
    }

    /* v22: Kanban بالمراحل الأساسية في صف أفقي واحد */
    #kanban{
      min-width:0;
    }

    .kanban-toolbar{
      margin-bottom:16px!important;
      padding:18px 20px!important;
    }

    .kanban-filters{
      display:grid;
      grid-template-columns:repeat(6,minmax(150px,1fr));
      gap:12px;
    }

    .kanban-filters .filter-field{
      background:#f7fbf8;
      border:1px solid #dbe8de;
      border-radius:14px;
      padding:11px;
      min-width:0;
    }

    .kanban-filters label{
      display:block;
      color:var(--muted);
      font-size:12px;
      font-weight:800;
      margin-bottom:7px;
    }

    .kanban-filters input,
    .kanban-filters select{
      width:100%;
      min-width:0;
      height:43px;
      padding:10px 12px;
      border:1px solid var(--line);
      border-radius:11px;
      background:#fff;
    }

    .kanban-scroll-wrap{
      width:100%;
      max-width:100%;
      max-height:calc(100vh - 245px);
      min-height:360px;
      overflow:auto;
      padding:2px 2px 12px;
      -webkit-overflow-scrolling:touch;
      overscroll-behavior:contain;
      scrollbar-gutter:stable;
      border-radius:14px;
    }

    #kanban .kanban{
      display:grid!important;
      grid-template-columns:none!important;
      grid-auto-flow:column!important;
      grid-auto-columns:280px!important;
      grid-template-rows:minmax(100%,auto)!important;
      align-items:start!important;
      gap:14px!important;
      width:max-content!important;
      min-width:max-content!important;
      overflow:visible!important;
      padding:2px 2px 8px!important;
    }

    #kanban .kanban-stage{
      width:280px!important;
      min-width:280px!important;
      min-height:440px;
      height:auto;
      align-self:stretch!important;
      background:#f3f7f4;
      border:1px solid #dce7df;
      border-radius:16px;
      padding:12px;
    }

    #kanban .kanban-stage h4{
      position:sticky;
      top:0;
      z-index:8;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin:0 0 12px;
      padding:10px 2px;
      border-bottom:1px solid #dce7df;
      color:#254532;
      background:#f3f7f4;
      box-shadow:0 5px 8px rgba(243,247,244,.96);
    }

    .stage-count{
      min-width:28px;
      height:28px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      background:#e0efe5;
      color:#246e45;
      font-size:13px;
    }

    .stage-cards{
      display:grid;
      gap:10px;
    }

    #kanban .lead{
      margin:0;
      padding:13px;
      border-radius:13px;
    }

    #kanban .lead .client-link{
      font-size:16px;
      font-weight:800;
      background:transparent;
      border:0;
      padding:0;
    }

    .kanban-empty{
      min-height:70px;
      display:grid;
      place-items:center;
      border:1px dashed #d3dfd7;
      border-radius:12px;
      background:rgba(255,255,255,.55);
    }

    @media(max-width:1100px){
      .kanban-filters{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }

    }

    @media(max-width:650px){
      .kanban-toolbar{
        padding:14px!important;
      }

      .kanban-filters{
        grid-template-columns:1fr;
      }

      #kanban .kanban{
        grid-template-columns:repeat(7,245px)!important;
      }

      #kanban .kanban-stage{
        width:245px!important;
        min-width:245px!important;
      }
    }

    /* v24: تصميم كارت العميل داخل Kanban */
    .kanban-client-card{
      cursor:pointer;
      transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
      background:#fff!important;
      border:1px solid #dfe8e2!important;
      box-shadow:0 6px 16px rgba(31,42,68,.035)!important;
    }

    .kanban-client-card:hover{
      transform:translateY(-2px);
      box-shadow:0 10px 24px rgba(31,42,68,.07)!important;
      border-color:#c9dfd1!important;
    }

    .kanban-card-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:10px;
      margin-bottom:12px;
    }

    .kanban-card-head .client-link{
      flex:1 1 auto;
      min-width:0;
      text-align:right;
      line-height:1.4;
    }

    .kanban-card-head .status{
      flex:0 0 auto;
      max-width:120px;
      white-space:normal!important;
      text-align:center;
      line-height:1.25;
    }

    .kanban-card-section{
      padding:10px 0;
      border-top:1px solid #edf2ee;
      border-bottom:1px solid #edf2ee;
    }

    .kanban-card-label{
      color:var(--muted);
      font-size:11px;
      font-weight:800;
      margin-bottom:6px;
    }

    .kanban-student-line{
      color:#254532;
      font-size:13px;
      margin-bottom:6px;
    }

    .kanban-tags{
      display:flex;
      flex-wrap:wrap;
      gap:4px;
    }

    .kanban-tags .tag{
      margin:0!important;
      font-size:11px!important;
      padding:4px 7px!important;
    }

    .kanban-card-meta{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
      margin-top:10px;
    }

    .kanban-card-meta span{
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:34px;
      padding:7px 8px;
      border-radius:10px;
      background:#f4f8f5;
      border:1px solid #e1ebe4;
      color:#50655a;
      font-size:12px;
      text-align:center;
    }

    .kanban-follow{
      margin-top:10px;
      padding:8px 10px;
      border-radius:10px;
      font-size:12px;
      font-weight:800;
      text-align:center;
    }

    .follow-overdue{
      background:#ffe9e8;
      color:#b43b35;
      border:1px solid #ffc9c6;
    }

    .follow-today{
      background:#fff3dd;
      color:#965f08;
      border:1px solid #ffe0a6;
    }

    .follow-upcoming{
      background:#eaf4ff;
      color:#2a699e;
      border:1px solid #cfe7ff;
    }

    .kanban-owner{
      margin-top:10px;
      color:#758279;
      font-size:11px;
      text-align:left;
    }

    @media(max-width:650px){
      .kanban-card-head{
        gap:8px;
      }

      .kanban-card-head .status{
        max-width:105px;
        font-size:11px!important;
      }

      .kanban-card-meta{
        grid-template-columns:1fr;
      }
    }

    /* v25: تغيير مرحلة العميل من داخل Kanban */
    .kanban-stage-change{
      margin-top:10px;
      padding-top:10px;
      border-top:1px solid #edf2ee;
    }

    .kanban-stage-change label{
      display:block;
      margin-bottom:6px;
      color:var(--muted);
      font-size:11px;
      font-weight:800;
    }

    .kanban-stage-change select{
      width:100%;
      min-width:0;
      height:38px;
      padding:8px 10px;
      border:1px solid #d9e6dd;
      border-radius:10px;
      background:#f8fbf9;
      color:#294634;
      font-size:12px;
      font-weight:700;
      cursor:pointer;
    }

    .kanban-stage-change select:focus{
      outline:3px solid rgba(47,143,91,.10);
      border-color:var(--primary);
      background:#fff;
    }

    /* v26: معاينة تصميم صفحة المهام */
    #tasks{display:grid;gap:16px}
    .tasks-summary{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:14px;
    }
    .task-stat{
      background:#fff;
      border:1px solid var(--line);
      border-radius:16px;
      padding:16px 18px;
      box-shadow:0 6px 18px rgba(31,42,68,.04);
    }
    .task-stat small{display:block;color:var(--muted);margin-bottom:8px;font-weight:700}
    .task-stat b{font-size:30px}
    .task-stat.overdue{border-top:4px solid #dc554f}
    .task-stat.today{border-top:4px solid #e99a35}
    .task-stat.upcoming{border-top:4px solid #438ac3}
    .task-stat.done{border-top:4px solid #2f8f5b}
    .tasks-toolbar{padding:18px 20px!important}
    .tasks-filters{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
    }
    .tasks-filters .filter-field{
      background:#f7fbf8;
      border:1px solid #dbe8de;
      border-radius:14px;
      padding:11px;
    }
    .tasks-filters label{
      display:block;
      color:var(--muted);
      font-size:12px;
      font-weight:800;
      margin-bottom:7px;
    }
    .tasks-filters select{
      width:100%;
      height:43px;
      padding:10px 12px;
      border:1px solid var(--line);
      border-radius:11px;
      background:#fff;
    }
    .tasks-groups{display:grid;gap:16px}
    .task-group{
      background:#fff;
      border:1px solid var(--line);
      border-radius:18px;
      padding:16px;
    }
    .task-group-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:12px;
    }
    .task-group-head h3{margin:0;font-size:18px}
    .task-group-head span{
      width:30px;height:30px;border-radius:999px;
      display:grid;place-items:center;
      background:#edf5ef;color:#246e45;font-weight:800
    }
    .task-group-list{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
    }
    .task-card{
      margin:0!important;
      padding:15px!important;
      border-radius:15px!important;
      opacity:1!important;
    }
    .task-card-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:10px;
    }
    .task-card-head .client-link{
      background:transparent;border:0;padding:0;
      font-size:17px;font-weight:800;color:#1f3428
    }
    .task-state{
      padding:6px 9px;border-radius:9px;
      font-size:11px;font-weight:800
    }
    .task-overdue .task-state{background:#ffe9e8;color:#b43b35}
    .task-today .task-state{background:#fff3dd;color:#965f08}
    .task-upcoming .task-state{background:#eaf4ff;color:#2a699e}
    .task-done .task-state{background:#e7faef;color:#138b4f}
    .task-text{
      margin:12px 0;
      color:#33463a;
      line-height:1.6;
    }
    .task-info{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
      padding-top:11px;
      border-top:1px solid #edf2ee;
    }
    .task-info span{
      background:#f7faf8;
      border:1px solid #e4ece6;
      border-radius:10px;
      padding:9px;
    }
    .task-info small{display:block;color:var(--muted);margin-bottom:5px}
    .task-info b{font-size:13px}
    .task-result-btn{width:100%;margin-top:11px}
    .task-completed-note{
      margin-top:11px;padding:9px;border-radius:10px;
      text-align:center;background:#edf8f1;color:#26764b;font-weight:700
    }
    .task-empty{
      grid-column:1/-1;
      padding:22px;text-align:center;
      color:var(--muted);
      border:1px dashed #d4e0d7;
      border-radius:12px;background:#fafcfb
    }
    @media(max-width:900px){
      .tasks-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
      .task-group-list{grid-template-columns:1fr}
    }
    @media(max-width:600px){
      .tasks-summary{grid-template-columns:1fr 1fr;gap:10px}
      .task-stat{padding:13px}
      .task-stat b{font-size:25px}
      .tasks-filters{grid-template-columns:1fr}
      .task-info{grid-template-columns:1fr}
    }

    /* v27: إصلاح ظهور صفحة المهام تحت كل الصفحات */
    #tasks.section{
      display:none!important;
    }

    #tasks.section.active{
      display:grid!important;
      gap:16px!important;
    }

    /* v28: نظام تكليف التواصل */
    .task-actions{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-top:11px;
    }
    .task-actions .btn{flex:1;min-width:120px}
    .task-creator{
      margin-top:10px;
      color:var(--muted);
      font-size:12px;
      text-align:left;
    }
    .task-edit-btn{
      background:#f5f8f6;
      border:1px solid #dbe5de;
      color:#315b43;
    }
    .task-cancel-btn{
      background:#fff4f3;
      border:1px solid #f0cfcc;
      color:#a53a34;
    }
    .task-followup-hint{
      background:#edf8f1;
      color:#256c47;
      border:1px solid #cfe8d8;
      padding:10px 12px;
      border-radius:11px;
      margin-bottom:12px;
      font-weight:700;
    }

.login-screen{min-height:100vh;display:grid;place-items:center;background:#eef7f1;padding:20px}.login-screen.hidden,#appShell.hidden{display:none!important}.login-card{width:min(420px,100%);background:#fff;border:1px solid #dce8df;border-radius:20px;padding:28px;box-shadow:0 18px 45px rgba(30,70,46,.1)}.login-card h1{margin:0 0 5px}.login-card p{color:var(--muted);margin:0 0 20px}.login-card label{display:block;margin:12px 0 7px;font-weight:800}.login-card input{width:100%;height:46px}.login-btn{width:100%;margin-top:16px;height:46px}.login-demo{margin-top:16px;background:#f5faf7;border:1px dashed #cfe2d4;border-radius:12px;padding:11px;display:grid;gap:4px;font-size:13px}.password-wrap{position:relative;display:flex;align-items:center}.password-wrap input{width:100%;padding-left:72px}.password-wrap button{position:absolute;left:8px;border:0;background:#edf6f0;color:#2c6d47;border-radius:8px;padding:7px 10px}.users-table{width:100%;border-collapse:collapse}.users-table th,.users-table td{padding:13px 12px;text-align:right;border-bottom:1px solid #edf1ee;white-space:nowrap}.role-badge{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}.role-manager{background:#eaf4ff;color:#2a699e}.role-employee{background:#edf8f1;color:#26764b}.password-user-name{background:#f5faf7;border:1px solid #dfeae2;border-radius:11px;padding:10px;margin-bottom:13px;font-weight:800}.current-user-box{margin-top:12px;padding:10px;border:1px solid #dce8df;border-radius:12px;background:#f7fbf8}.current-user-box small{display:block;color:var(--muted)}

.role-hidden{display:none!important}

    /* v32: كارت المهام المتأخرة في لوحة التحكم */
    .clickable-kpi{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
    .clickable-kpi:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(28,73,44,.10)}

    /* v33: فتح وإغلاق سجل المتابعات */
    #detailTimeline.collapsed .event:nth-child(n+4){display:none}
    #toggleTimelineBtn.hidden{display:none!important}

    /* v35: زر حذف الطالب واضح */
    #modal .student-row .delete-student-btn{
      width:auto;
      min-width:118px;
      padding:0 12px;
      background:#fff1f1;
      color:#b42318;
      border:1px solid #f3c7c7;
      font-weight:800;
      white-space:nowrap;
    }
    #modal .student-row .delete-student-btn:hover{
      background:#ffe5e5;
    }
    @media (max-width:700px){
      #modal .student-row .delete-student-btn{
        width:100%;
      }
    }

    /* v39: عرض مستخدمين مناسب للموبايل */
    .mobile-users-list{display:none}
    .user-password-btn{
      border:1px solid #b9d8c4;
      background:#f2faf5;
      color:#246b43;
      font-weight:800;
      white-space:nowrap;
    }
    .user-password-btn:hover{background:#e6f5eb}

    @media (max-width:700px){
      .desktop-users-table{display:none}
      .mobile-users-list{
        display:grid;
        gap:12px;
        margin-top:16px;
      }
      .mobile-user-card{
        background:#fff;
        border:1px solid #dfe9e2;
        border-radius:16px;
        padding:14px;
        box-shadow:0 5px 14px rgba(25,67,39,.05);
      }
      .mobile-user-row{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:14px;
        padding:10px 0;
        border-bottom:1px solid #edf2ee;
      }
      .mobile-user-row:last-of-type{border-bottom:0}
      .mobile-user-label{
        color:var(--muted);
        font-size:13px;
        font-weight:800;
        flex:0 0 auto;
      }
      .mobile-user-email{
        direction:ltr;
        text-align:left;
        word-break:break-all;
      }
      .mobile-password-btn{
        width:100%;
        min-height:44px;
        margin-top:12px;
      }
    }

    /* v40: حالة مستقلة لكل طالب */
    .student-row{
      grid-template-columns:1.05fr 1fr .72fr .72fr .82fr auto;
    }
    .st-status{
      font-weight:700;
      color:#315d43;
      background:#f7fbf8;
    }
    .student-status-tag{
      display:inline-flex;
      width:max-content;
      max-width:100%;
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:800;
      background:#f1f4f2;
      color:#526159;
      border:1px solid #dfe7e1;
    }
    .student-status-حجز-تجربة{background:#fff8e8;color:#956b13;border-color:#f1dfae}
    .student-status-جرّب{background:#eef5ff;color:#356c9e;border-color:#cddff2}
    .student-status-اشترك{background:#eaf8ef;color:#267447;border-color:#c8e6d3}
    .student-status-لم-يشترك{background:#fff0f0;color:#a83f3f;border-color:#efcccc}
    @media(max-width:900px){
      .student-row{grid-template-columns:1fr 1fr}
      .student-row .delete-student-btn{grid-column:1/-1}
    }
    @media(max-width:560px){
      .student-row{grid-template-columns:1fr}
      .student-row .delete-student-btn{grid-column:auto}
    }

    /* v41: تقارير الطلاب وأولياء الأمور */
    .report-filters-card{margin-bottom:16px}
    .report-filters{
      grid-template-columns:repeat(3,minmax(160px,1fr));
      align-items:end;
    }
    .report-kpis{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:14px;
      margin-bottom:16px;
    }
    .report-summary-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px;
      border:1px solid var(--line);
      border-radius:12px;
      background:#fff;
    }
    @media(max-width:900px){
      .report-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
      .report-filters{grid-template-columns:1fr}
    }
    @media(max-width:560px){
      .report-kpis{grid-template-columns:1fr}
      .report-filters-card .panel-head{align-items:stretch;gap:12px}
      .report-filters-card .panel-head .btn{width:100%}
    }

    /* v42: تقارير بعرض الصفحة وكل الصفوف */
    .reports-stack{
      display:grid;
      gap:16px;
    }
    .grade-chart-scroll{
      width:100%;
      overflow-x:auto;
      overflow-y:hidden;
      padding-bottom:8px;
    }
    .report-grade-chart{
      min-width:max-content;
      justify-content:flex-start;
      gap:22px;
      padding-inline:8px;
    }
    .report-grade-chart .bar-wrap{
      min-width:88px;
      flex:0 0 88px;
    }
    @media(max-width:700px){
      .report-grade-chart{
        gap:16px;
      }
      .report-grade-chart .bar-wrap{
        min-width:78px;
        flex-basis:78px;
      }
    }

    /* v43: تصدير تقارير الطلاب إلى Excel */
    .report-head-actions{
      display:flex;
      align-items:center;
      gap:9px;
      flex-wrap:wrap;
    }
    .report-export-btn{
      background:#2f8f5b;
      color:#fff;
      border-color:#2f8f5b;
      font-weight:800;
    }
    .report-export-btn:hover{
      background:#26784c;
      border-color:#26784c;
    }
    @media(max-width:560px){
      .report-head-actions{
        display:grid;
        grid-template-columns:1fr;
        width:100%;
      }
      .report-head-actions .btn{width:100%}
    }

    /* v44: Supabase Auth الحقيقي */
    .login-btn:disabled{
      opacity:.65;
      cursor:wait;
    }
    .supabase-auth-note{
      margin-top:10px;
      font-size:12px;
      color:var(--muted);
    }

    /* v45: ربط قراءة وإضافة العملاء بـ Supabase */
    #saveClientBtn:disabled{
      opacity:.65;
      cursor:wait;
    }

    /* v46: تعديل العملاء + المستخدمون الحقيقيون + رسائل مركزية */
    .center-message-modal{
      z-index:9999;
      background:rgba(15,23,42,.58);
    }
    .center-message-box{
      max-width:430px;
      text-align:center;
      padding:30px 26px;
      border-radius:22px;
    }
    .center-message-icon{
      width:58px;
      height:58px;
      margin:0 auto 14px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:#fff1f0;
      color:#d92d20;
      font-size:32px;
      font-weight:800;
    }
    .center-message-box h3{
      margin:0 0 10px;
      font-size:22px;
    }
    .center-message-box p{
      margin:0;
      line-height:1.8;
      color:var(--muted);
      white-space:pre-line;
    }
    .center-message-close{
      min-width:130px;
      margin-top:22px;
    }
    .field-error{
      border:2px solid #d92d20 !important;
      background:#fff8f7 !important;
      box-shadow:0 0 0 3px rgba(217,45,32,.10);
    }

    /* v48: إدارة المستخدمين الحقيقية */
    #saveNewUserBtn:disabled,
    #saveChangedPasswordBtn:disabled{
      opacity:.65;
      cursor:wait;
    }
    .password-input-wrap{
      position:relative;
      width:100%;
    }
    .password-input-wrap input{
      width:100%;
      padding-left:72px;
    }
    .password-eye{
      position:absolute;
      left:8px;
      top:50%;
      transform:translateY(-50%);
      border:0;
      background:transparent;
      color:var(--primary);
      font-weight:700;
      cursor:pointer;
      padding:6px 8px;
    }
    .password-target{
      margin:-4px 0 14px;
      color:var(--muted);
    }

    /* v49: المتابعات الحقيقية في Supabase */
    #followupBox .btn-primary:disabled{
      opacity:.65;
      cursor:wait;
    }

    /* v51: أنواع رسائل واضحة */
    .center-message-modal.message-success .center-message-icon{
      background:#ecfdf3;
      color:#16a34a;
    }
    .center-message-modal.message-error .center-message-icon{
      background:#fff1f0;
      color:#d92d20;
    }
    .center-message-modal.message-warning .center-message-icon{
      background:#fffaeb;
      color:#d97706;
    }

    /* v52: حفظ مرحلة الكانبان يدويًا */
    .kanban-stage-save{
      width:100%;
      margin-top:8px;
    }
    .kanban-stage-save:disabled{
      opacity:.65;
      cursor:wait;
    }

    /* v55: منع وميض لوحة التحكم أثناء استرجاع آخر صفحة */
    .app-restoring .main-content,
    .app-restoring main,
    .app-restoring .content,
    .app-restoring #mainContent{
      visibility:hidden !important;
    }

    /* v60: تطوير لوحة التحكم */
    #dashboard .dashboard-stack{
      display:grid!important;
      grid-template-columns:1fr!important;
      gap:18px!important;
    }
    #dashboard .dashboard-stack > .card{
      width:100%!important;
    }
    .special-filter-notice{
      margin:12px 0 0;
      padding:10px 12px;
      border:1px solid #cfe2d4;
      background:#f1f8f3;
      border-radius:11px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      color:#245f3d;
      font-weight:800;
    }
    .special-filter-notice.hidden{display:none!important}
    .special-filter-notice button{
      border:0;
      background:transparent;
      color:#b42318;
      font-weight:800;
      cursor:pointer;
    }

    /* v61: اختيار الطلاب المشتركين عند تغيير مرحلة المبيعات */
    .subscription-students-box{
      width:min(520px,calc(100vw - 28px));
      position:relative;
    }
    .subscription-help{
      margin:6px 0 14px;
      color:var(--muted);
    }
    .subscription-students-list{
      display:grid;
      gap:10px;
      max-height:360px;
      overflow:auto;
      margin-bottom:18px;
    }
    .subscription-student-option{
      display:flex;
      align-items:center;
      gap:12px;
      padding:12px;
      border:1px solid var(--line);
      border-radius:12px;
      cursor:pointer;
      background:#fff;
    }
    .subscription-student-option:hover{
      background:#f8faf9;
    }
    .subscription-student-option input{
      width:19px;
      height:19px;
      flex:0 0 auto;
    }
    .subscription-student-option span{
      display:grid;
      gap:3px;
    }
    .subscription-student-option small{
      color:var(--muted);
    }
    .subscription-actions{
      display:flex;
      justify-content:flex-end;
      gap:10px;
    }

    /* v63: تحديث فوري وعرض جميع الصفوف */
    .grade-chart-scroll{
      overflow:visible!important;
      padding-bottom:0!important;
    }
    .report-grade-chart{
      min-width:0!important;
      height:auto!important;
      display:grid!important;
      grid-template-columns:repeat(auto-fit,minmax(125px,1fr))!important;
      align-items:stretch!important;
      gap:14px!important;
      padding:8px!important;
    }
    .grade-stat-card{
      min-height:190px;
      border:1px solid var(--line);
      border-radius:14px;
      padding:12px 10px;
      display:grid;
      grid-template-rows:1fr auto auto;
      align-items:end;
      justify-items:center;
      gap:7px;
      background:#fff;
    }
    .grade-stat-bar{
      width:58px;
      height:110px;
      display:flex;
      align-items:flex-end;
      justify-content:center;
    }
    .grade-stat-bar span{
      width:100%;
      min-height:14px;
      border-radius:9px 9px 3px 3px;
      background:linear-gradient(180deg,#65b889,#2f8f5b);
    }
    .grade-stat-card b{
      font-size:22px;
    }
    .grade-stat-card small{
      color:var(--muted);
      text-align:center;
      line-height:1.45;
      font-size:13px;
    }
    @media(max-width:600px){
      .report-grade-chart{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
      }
      .grade-stat-card{
        min-height:165px;
      }
    }

    /* v64: صفحة التقارير التفصيلية */
    .report-number-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
      gap:12px;
    }
    .report-number-grid.compact{
      grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .report-number-card{
      min-height:115px;
      border:1px solid var(--line);
      border-radius:14px;
      padding:14px;
      background:#fff;
      display:grid;
      align-content:center;
      justify-items:center;
      gap:5px;
      text-align:center;
    }
    .report-number-card span{
      color:var(--muted);
      font-weight:800;
      line-height:1.45;
    }
    .report-number-card b{
      font-size:30px;
      line-height:1;
      color:var(--text);
    }
    .report-number-card small{
      color:var(--muted);
    }

    .report-clickable,
    .report-number-card.report-clickable,
    .report-count-row.report-clickable{
      cursor:pointer;
      transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
    }
    .report-clickable:hover,
    .report-number-card.report-clickable:hover,
    .report-count-row.report-clickable:hover{
      transform:translateY(-2px);
      border-color:#bcdac6;
      box-shadow:0 10px 24px rgba(31,79,54,.09);
      background:#fbfefc;
    }
    .report-clickable:active,
    .report-number-card.report-clickable:active,
    .report-count-row.report-clickable:active{
      transform:translateY(0);
    }
    .report-lists-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
    }
    .report-count-list{
      display:grid;
      gap:9px;
    }
    .report-count-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:11px 12px;
      border:1px solid var(--line);
      border-radius:11px;
      background:#fff;
    }
    .report-count-row span{
      font-weight:700;
      min-width:0;
    }
    .report-count-row b{
      white-space:nowrap;
      color:var(--green);
    }
    @media(max-width:950px){
      .report-lists-grid{
        grid-template-columns:1fr;
      }
    }
    @media(max-width:600px){
      .report-number-grid,
      .report-number-grid.compact{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .report-number-card{
        min-height:105px;
        padding:11px 8px;
      }
      .report-number-card b{
        font-size:26px;
      }
    }



    /* تحديث فلاتر قائمة العملاء وهوية الشعار */
    .brand-logo{
      display:flex!important;
      align-items:center!important;
      justify-content:center!important;
      overflow:hidden!important;
    }
    .brand-logo img{
      width:42px!important;
      height:42px!important;
      object-fit:contain!important;
      display:block!important;
    }
    /* تثبيت ألوان الفلاتر المميزة على عنصر select نفسه */
    #clients #stageFilter{
      background-color:#2f8f5b!important;
      background-image:none!important;
      color:#ffffff!important;
      -webkit-text-fill-color:#ffffff!important;
      border-color:#2f8f5b!important;
      font-weight:700!important;
      color-scheme:dark;
    }
    #clients #stageFilter:hover,
    #clients #stageFilter:focus{
      background-color:#2f8f5b!important;
      color:#ffffff!important;
      -webkit-text-fill-color:#ffffff!important;
      border-color:#2f8f5b!important;
    }
    #clients #stageFilter option{
      background:#ffffff!important;
      color:#24372c!important;
      -webkit-text-fill-color:#24372c!important;
    }
    #clients #periodFilter{
      background-color:#F3B91A!important;
      background-image:none!important;
      color:#173b2a!important;
      -webkit-text-fill-color:#173b2a!important;
      border-color:#F3B91A!important;
      font-weight:700!important;
      color-scheme:light;
    }
    #clients #periodFilter:hover,
    #clients #periodFilter:focus{
      background-color:#F3B91A!important;
      color:#173b2a!important;
      -webkit-text-fill-color:#173b2a!important;
      border-color:#F3B91A!important;
    }
    #clients #periodFilter option{
      background:#ffffff!important;
      color:#24372c!important;
      -webkit-text-fill-color:#24372c!important;
    }


    /* المسؤول يتحدد تلقائيًا حسب المستخدم الحالي وغير قابل للتعديل */
    #owner:disabled{
      background:#f2f6f3!important;
      color:#315743!important;
      opacity:1!important;
      cursor:not-allowed!important;
      font-weight:700!important;
    }

    /* زر مسح الفلاتر: يظهر فقط عند وجود فلتر وبشكل مختلف وواضح */
    #clients .clear-filters-btn{
      background:#fff1f1!important;
      color:#b42318!important;
      border:1px solid #f2c7c3!important;
      font-weight:800!important;
    }
    #clients .clear-filters-btn:hover{
      background:#ffe4e2!important;
      border-color:#e9aaa4!important;
    }


    /* صفحة المراحل: إخفاء عنوان الصفحة وزر إضافة عميل من هذه الصفحة فقط */
    .topbar.kanban-clean{
      margin-bottom:0!important;
      min-height:0!important;
    }
    .topbar.kanban-clean > div{
      display:none!important;
    }


    /* v-brand: Fesool official brand theme */
    :root{
      --brand-green:#0b5a44;
      --brand-yellow:#f8b810;
      --brand-green-2:#174f3f;
      --brand-green-soft:#eef7f3;
      --brand-green-soft-2:#e2f0ea;
      --brand-yellow-soft:#fff7df;
      --brand-yellow-soft-2:#ffefbd;
      --bg:#f7faf8;
      --card:#ffffff;
      --text:#17372d;
      --muted:#6b7d75;
      --line:#dbe7e1;
      --primary:var(--brand-green);
      --primary2:#2f7a66;
      --green:var(--brand-green);
      --orange:var(--brand-yellow);
      --shadow:0 8px 24px rgba(11,90,68,.07);
    }

    body{
      background:var(--bg)!important;
      color:var(--text)!important;
    }

    aside{
      background:linear-gradient(180deg,#f6fbf8 0%,#e8f3ee 100%)!important;
      color:var(--brand-green)!important;
      border-left:1px solid #d4e5dd!important;
      box-shadow:-8px 0 24px rgba(11,90,68,.06)!important;
    }

    .brand{
      border-bottom:1px solid #d7e6df!important;
    }

    .brand-logo{
      background:var(--brand-green)!important;
      color:#fff!important;
      box-shadow:0 6px 16px rgba(11,90,68,.18)!important;
    }

    .brand strong,.brand b{
      color:var(--brand-green)!important;
    }

    .brand small{
      color:#58736a!important;
    }

    nav button{
      color:#245b4b!important;
    }

    nav button:hover{
      background:var(--brand-yellow-soft)!important;
      color:var(--brand-green)!important;
      border-color:#f2d787!important;
      transform:translateX(-2px)!important;
    }

    nav button.active{
      background:var(--brand-yellow)!important;
      color:var(--brand-green)!important;
      border-color:var(--brand-yellow)!important;
      box-shadow:0 7px 18px rgba(248,184,16,.24)!important;
    }

    .btn-primary{
      background:var(--brand-green)!important;
      color:#fff!important;
    }

    .btn-primary:hover{
      background:#084936!important;
    }

    .btn-light{
      background:#fff!important;
      border-color:#d8e5df!important;
      color:var(--brand-green)!important;
    }

    .btn-light:hover{
      background:var(--brand-green-soft)!important;
      border-color:#bcd5ca!important;
    }

    input:focus,select:focus,textarea:focus{
      outline:3px solid rgba(11,90,68,.11)!important;
      border-color:var(--brand-green)!important;
    }

    .kpi .value,
    #clients td:nth-child(3),
    .report-count-row b{
      color:var(--brand-green)!important;
    }

    .stage-badge{
      background:var(--brand-green-soft)!important;
      color:var(--brand-green)!important;
      border-color:#cfe1d9!important;
    }

    .tag{
      background:#eef6f2!important;
      color:#2f6e5a!important;
    }

    .event{
      border-right-color:var(--brand-green)!important;
      background:#f8fbf9!important;
    }

    .bar,
    .grade-stat-bar span{
      background:linear-gradient(180deg,#2f7a66,var(--brand-green))!important;
    }

    .stage-count,
    .task-group-head span{
      background:#e5f1ec!important;
      color:var(--brand-green)!important;
    }

    .report-export-btn{
      background:var(--brand-green)!important;
      border-color:var(--brand-green)!important;
      color:#fff!important;
    }

    .report-export-btn:hover{
      background:#084936!important;
      border-color:#084936!important;
    }

    #clients #stageFilter{
      background-color:var(--brand-green)!important;
      border-color:var(--brand-green)!important;
      color:#fff!important;
      -webkit-text-fill-color:#fff!important;
    }

    #clients #stageFilter:hover,
    #clients #stageFilter:focus{
      background-color:var(--brand-green)!important;
      border-color:var(--brand-green)!important;
      color:#fff!important;
      -webkit-text-fill-color:#fff!important;
    }

    #clients #periodFilter{
      background-color:var(--brand-yellow)!important;
      border-color:var(--brand-yellow)!important;
      color:var(--brand-green)!important;
      -webkit-text-fill-color:var(--brand-green)!important;
    }

    #clients #periodFilter:hover,
    #clients #periodFilter:focus{
      background-color:var(--brand-yellow)!important;
      border-color:var(--brand-yellow)!important;
      color:var(--brand-green)!important;
      -webkit-text-fill-color:var(--brand-green)!important;
    }

    .kanban-filters .filter-field,
    .tasks-filters .filter-field{
      background:#f8fbf9!important;
      border-color:#dbe7e1!important;
    }

    #kanban .kanban-stage{
      background:#f5f9f7!important;
      border-color:#dbe7e1!important;
    }

    #kanban .kanban-stage h4{
      color:var(--brand-green)!important;
      background:#f5f9f7!important;
      border-bottom-color:#dbe7e1!important;
      box-shadow:0 5px 8px rgba(245,249,247,.96)!important;
    }

    .kanban-stage-change select{
      background:#f9fbfa!important;
      color:var(--brand-green)!important;
      border-color:#d8e5df!important;
    }

    .task-stat.done{border-top-color:var(--brand-green)!important}
    .task-stat.today{border-top-color:var(--brand-yellow)!important}
    .task-completed-note,
    .task-followup-hint,
    .special-filter-notice{
      background:#edf7f2!important;
      color:var(--brand-green)!important;
      border-color:#d0e4db!important;
    }

    .login-screen{
      background:linear-gradient(180deg,#f8fbf9 0%,#eef6f2 100%)!important;
    }

    .login-card{
      border-color:#d9e6e0!important;
      box-shadow:0 18px 45px rgba(11,90,68,.10)!important;
    }

    /* v12.12 — official Fesool logo on login */
    .login-logo{
      display:block;
      width:82px;
      height:82px;
      object-fit:contain;
      margin:0 auto 12px;
      border-radius:18px;
      filter:drop-shadow(0 8px 18px rgba(11,90,68,.12));
    }

    .login-card h1{
      margin-top:0;
      margin-bottom:22px;
      text-align:center;
    }

    .password-wrap button,
    .password-eye{
      background:#edf6f2!important;
      color:var(--brand-green)!important;
    }

    .role-employee{
      background:#edf7f2!important;
      color:var(--brand-green)!important;
    }

    .user-password-btn{
      border-color:#bed7cc!important;
      background:#f3f9f6!important;
      color:var(--brand-green)!important;
    }

    .user-password-btn:hover{
      background:#e8f4ef!important;
    }

    .client-link:hover{
      color:var(--brand-green)!important;
    }

    .current-user-box{
      background:#f8fbf9!important;
      border-color:#d9e6e0!important;
    }

    @media(max-width:900px){
      aside{
        background:linear-gradient(180deg,#f8fcfa 0%,#e9f4ef 100%)!important;
        border-left-color:#d4e5dd!important;
        box-shadow:-14px 0 34px rgba(11,90,68,.16)!important;
      }
    }


    /* v-brand-sidebar: professional Fesool sidebar */
    aside{
      background:linear-gradient(180deg,#0b5a44 0%,#084a38 100%)!important;
      color:#fff!important;
      border-left:0!important;
      box-shadow:-12px 0 32px rgba(5,47,36,.16)!important;
      padding:20px 14px!important;
    }

    .brand{
      display:flex!important;
      align-items:center!important;
      gap:12px!important;
      padding:4px 4px 18px!important;
      margin-bottom:14px!important;
      border-bottom:1px solid rgba(255,255,255,.14)!important;
    }

    .brand-logo{
      width:58px!important;
      height:58px!important;
      flex:0 0 58px!important;
      padding:7px!important;
      border-radius:17px!important;
      background:#fff9ea!important;
      border:1px solid rgba(248,184,16,.45)!important;
      box-shadow:0 8px 20px rgba(0,0,0,.12)!important;
      overflow:hidden!important;
    }

    .brand-logo img{
      width:44px!important;
      height:44px!important;
      object-fit:contain!important;
      display:block!important;
      border-radius:10px!important;
    }

    .brand-text{
      min-width:0!important;
      line-height:1.25!important;
    }

    .brand strong,.brand b{
      color:#fff!important;
      font-size:18px!important;
      letter-spacing:.1px!important;
    }

    .brand small{
      color:rgba(255,255,255,.72)!important;
      margin-top:4px!important;
      font-size:12px!important;
      line-height:1.45!important;
    }

    nav{
      display:grid!important;
      gap:7px!important;
    }

    nav button{
      min-height:48px!important;
      padding:12px 13px!important;
      border-radius:12px!important;
      border:1px solid transparent!important;
      background:transparent!important;
      color:rgba(255,255,255,.88)!important;
      font-weight:700!important;
      font-size:15px!important;
      gap:11px!important;
      transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease!important;
    }

    nav button:hover{
      background:rgba(255,255,255,.08)!important;
      color:#fff!important;
      border-color:rgba(255,255,255,.08)!important;
      transform:translateX(-2px)!important;
    }

    nav button.active{
      background:#f8b810!important;
      color:#0b5a44!important;
      border-color:#f8b810!important;
      box-shadow:0 7px 18px rgba(248,184,16,.22)!important;
      transform:none!important;
    }

    nav button span{
      color:inherit!important;
    }

    .current-user-box{
      margin-top:16px!important;
      padding:12px!important;
      border:1px solid rgba(255,255,255,.13)!important;
      border-radius:14px!important;
      background:rgba(255,255,255,.07)!important;
      color:#fff!important;
      box-shadow:none!important;
    }

    .current-user-box b{
      color:#fff!important;
    }

    .current-user-box small{
      color:rgba(255,255,255,.68)!important;
    }

    .current-user-box .btn{
      background:rgba(255,255,255,.10)!important;
      border:1px solid rgba(255,255,255,.14)!important;
      color:#fff!important;
    }

    .current-user-box .btn:hover{
      background:rgba(255,255,255,.16)!important;
    }

    @media(max-width:900px){
      aside{
        background:linear-gradient(180deg,#0b5a44 0%,#084a38 100%)!important;
        box-shadow:-16px 0 38px rgba(5,47,36,.28)!important;
      }
    }


    /* v-brand-sidebar-2: cleaner professional navigation */
    .brand{
      background:#ffffff!important;
      border:1px solid rgba(255,255,255,.35)!important;
      border-radius:18px!important;
      padding:12px!important;
      margin:0 0 18px!important;
      box-shadow:0 10px 24px rgba(0,0,0,.12)!important;
    }

    .brand-logo{
      width:52px!important;
      height:52px!important;
      flex:0 0 52px!important;
      padding:0!important;
      border-radius:14px!important;
      background:#fff!important;
      border:0!important;
      box-shadow:none!important;
    }

    .brand-logo img{
      width:52px!important;
      height:52px!important;
      object-fit:contain!important;
      border-radius:12px!important;
    }

    .brand strong,.brand b{
      color:#0b5a44!important;
      font-size:18px!important;
    }

    .brand small{
      color:#6a7c75!important;
      font-size:12px!important;
    }

    nav button{
      justify-content:flex-start!important;
      gap:12px!important;
      padding:11px 12px!important;
    }

    .nav-icon{
      width:34px!important;
      height:34px!important;
      flex:0 0 34px!important;
      display:grid!important;
      place-items:center!important;
      border-radius:10px!important;
      background:rgba(255,255,255,.08)!important;
      color:rgba(255,255,255,.92)!important;
      transition:background .18s ease,color .18s ease!important;
    }

    .nav-icon svg{
      width:19px!important;
      height:19px!important;
      fill:none!important;
      stroke:currentColor!important;
      stroke-width:1.8!important;
      stroke-linecap:round!important;
      stroke-linejoin:round!important;
      display:block!important;
    }

    .nav-label{
      flex:1 1 auto!important;
      min-width:0!important;
      color:inherit!important;
    }

    nav button:hover .nav-icon{
      background:rgba(255,255,255,.14)!important;
      color:#fff!important;
    }

    nav button.active .nav-icon{
      background:#0b5a44!important;
      color:#f8b810!important;
    }

    nav button.active .nav-label{
      color:#0b5a44!important;
    }

    @media(max-width:1100px){
      nav button .nav-label{
        display:inline!important;
      }
      .nav-icon{
        flex:0 0 34px!important;
      }
    }


    /* v-brand-sidebar-3: compact brand header with separator */
    .brand{
      background:transparent!important;
      border:0!important;
      border-radius:0!important;
      box-shadow:none!important;
      padding:4px 4px 16px!important;
      margin:0 0 16px!important;
      border-bottom:1px solid rgba(255,255,255,.18)!important;
    }

    .brand-logo{
      width:50px!important;
      height:50px!important;
      flex:0 0 50px!important;
      padding:0!important;
      border-radius:13px!important;
      background:transparent!important;
      border:0!important;
      box-shadow:none!important;
    }

    .brand-logo img{
      width:50px!important;
      height:50px!important;
      object-fit:contain!important;
      border-radius:12px!important;
    }

    .brand-text{
      display:flex!important;
      align-items:center!important;
      min-height:50px!important;
    }

    .brand strong,.brand b{
      color:#fff!important;
      font-size:19px!important;
      font-weight:800!important;
      margin:0!important;
    }

    .brand small{
      display:none!important;
    }


    /* v-routing-links: real links for new-tab/context-menu support */
    nav a[data-section]{
      width:100%!important;
      min-height:48px!important;
      padding:11px 12px!important;
      border-radius:12px!important;
      border:1px solid transparent!important;
      background:transparent!important;
      color:rgba(255,255,255,.88)!important;
      font-weight:700!important;
      font-size:15px!important;
      gap:12px!important;
      display:flex!important;
      align-items:center!important;
      justify-content:flex-start!important;
      text-align:right!important;
      text-decoration:none!important;
      cursor:pointer!important;
      transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease!important;
    }

    nav a[data-section]:hover{
      background:rgba(255,255,255,.08)!important;
      color:#fff!important;
      border-color:rgba(255,255,255,.08)!important;
      transform:translateX(-2px)!important;
    }

    nav a[data-section].active{
      background:#f8b810!important;
      color:#0b5a44!important;
      border-color:#f8b810!important;
      box-shadow:0 7px 18px rgba(248,184,16,.22)!important;
      transform:none!important;
    }

    nav a[data-section]:hover .nav-icon{
      background:rgba(255,255,255,.14)!important;
      color:#fff!important;
    }

    nav a[data-section].active .nav-icon{
      background:#0b5a44!important;
      color:#f8b810!important;
    }

    nav a[data-section].active .nav-label{
      color:#0b5a44!important;
    }

    .client-link{
      display:inline!important;
      text-decoration:none!important;
    }

    .client-link:hover{
      text-decoration:underline!important;
      text-underline-offset:3px!important;
    }

    #clientDetails > .panel-head > a.btn{
      display:inline-flex!important;
      align-items:center!important;
      justify-content:center!important;
      text-decoration:none!important;
    }


    /* v10: شاشة بدء تمنع وميض تسجيل الدخول أثناء استرجاع الجلسة */
    .boot-screen{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#f7faf8;transition:opacity .18s ease,visibility .18s ease}
    .boot-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
    .boot-card{display:grid;justify-items:center;gap:12px;padding:24px;text-align:center}
    .boot-logo{width:74px;height:74px;object-fit:contain;border-radius:18px;filter:drop-shadow(0 8px 18px rgba(11,90,68,.12))}
    .boot-title{color:#0b5a44;font-size:22px;font-weight:800;letter-spacing:.2px}
    .boot-spinner{width:30px;height:30px;border:3px solid #dbe9e3;border-top-color:#f8b810;border-radius:50%;animation:fesoolBootSpin .8s linear infinite;margin-top:2px}
    @keyframes fesoolBootSpin{to{transform:rotate(360deg)}}


/* v12.4: صفحة التحليل المتقدم */
#advancedAnalysis{
  display:none;
  gap:16px;
}
#advancedAnalysis.section.active{
  display:grid!important;
}
.advanced-analysis-toolbar,
.advanced-active-panel,
.advanced-results-card{
  width:100%;
}
.advanced-analysis-head{
  align-items:flex-start!important;
}
.advanced-filter-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.advanced-filter-card{
  min-width:0;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fbfdfc;
  padding:12px;
}
.advanced-filter-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.advanced-filter-title b{
  font-size:14px;
}
.advanced-filter-count{
  padding:4px 7px;
  border-radius:999px;
  background:#edf5f1;
  color:var(--brand-green);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.advanced-filter-dual{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.advanced-filter-mode{
  min-width:0;
  border:1px solid var(--line);
  border-radius:12px;
  padding:9px;
  background:#fff;
}
.advanced-filter-mode.include{
  border-top:3px solid var(--brand-green);
}
.advanced-filter-mode.exclude{
  border-top:3px solid #b42318;
}
.advanced-filter-mode-label{
  margin-bottom:7px;
  font-size:11px;
  font-weight:800;
}
.advanced-filter-mode.include .advanced-filter-mode-label{
  color:var(--brand-green);
}
.advanced-filter-mode.exclude .advanced-filter-mode-label{
  color:#b42318;
}
.advanced-option-list{
  display:grid;
  gap:4px;
  max-height:165px;
  overflow:auto;
  overscroll-behavior:contain;
}
.advanced-option{
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 6px;
  border-radius:8px;
  font-size:12px;
  cursor:pointer;
  color:#33483d;
}
.advanced-option:hover{
  background:#f3f7f5;
}
.advanced-option input{
  width:16px;
  height:16px;
  flex:0 0 16px;
  margin:0;
}
.advanced-active-panel{
  border-right:4px solid var(--brand-yellow)!important;
}
.advanced-active-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.advanced-active-head > b{
  color:var(--brand-green);
}
.advanced-active-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.advanced-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 8px 7px 10px;
  border-radius:999px;
  border:1px solid;
  font-size:12px;
  font-weight:800;
}
.advanced-chip.include{
  background:#eef7f3;
  color:var(--brand-green);
  border-color:#cfe1d9;
}
.advanced-chip.exclude{
  background:#fff1f0;
  color:#b42318;
  border-color:#f2c7c3;
}
.advanced-chip button{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.08);
  color:inherit;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}
.advanced-chip button:hover{
  background:rgba(0,0,0,.14);
}
.advanced-no-filters,
.advanced-no-data{
  color:var(--muted);
  font-size:12px;
}
.advanced-dynamic-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.advanced-stat-card{
  min-height:120px;
  padding:16px;
  display:grid;
  align-content:center;
  gap:7px;
}
.advanced-stat-card > small{
  color:var(--muted);
  font-weight:800;
}
.advanced-stat-card > b{
  color:var(--brand-green);
  font-size:31px;
}
.advanced-stat-card > span{
  color:var(--muted);
  font-size:12px;
}
.advanced-stat-card.distribution{
  align-content:start;
}
.advanced-mini-list{
  display:grid;
  gap:6px;
  margin-top:3px;
}
.advanced-mini-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:7px 8px;
  border-radius:9px;
  background:#f7faf8;
  font-size:12px;
}
.advanced-mini-row span{
  min-width:0;
  overflow-wrap:anywhere;
}
.advanced-mini-row button{
  flex:0 0 auto;
  min-width:30px;
  border:0;
  background:transparent;
  color:var(--brand-green);
  font-weight:900;
  cursor:pointer;
  font-size:13px;
}
.advanced-mini-row button:hover{
  text-decoration:underline;
}
.advanced-table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
}
.advanced-results-table{
  min-width:1180px;
}
.advanced-results-table th{
  position:sticky;
  top:0;
  z-index:2;
}
.advanced-results-table .advanced-stage{
  font-size:11px!important;
  padding:6px 8px!important;
}
#advancedAnalysis .clear-filters-btn{
  background:#fff1f1!important;
  color:#b42318!important;
  border:1px solid #f2c7c3!important;
  font-weight:800!important;
}

@media(max-width:1200px){
  .advanced-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .advanced-dynamic-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:700px){
  .advanced-filter-grid,
  .advanced-dynamic-cards{
    grid-template-columns:1fr;
  }
  .advanced-filter-dual{
    grid-template-columns:1fr;
  }
  .advanced-analysis-head{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  #advancedClearAllBtn{
    width:100%;
  }
}


/* v12.5: زر تصغير القائمة الجانبية + مساحة أكبر للتحليل المتقدم */
.sidebar-collapse-btn{
  width:32px;
  height:32px;
  margin:0 0 12px auto;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:9px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  transition:background .18s ease,transform .18s ease;
}
.sidebar-collapse-btn:hover{
  background:rgba(255,255,255,.15);
}
body.sidebar-collapsed .app{
  grid-template-columns:78px minmax(0,1fr)!important;
}
body.sidebar-collapsed aside{
  padding-inline:10px!important;
}
body.sidebar-collapsed .brand{
  justify-content:center!important;
  padding-inline:0!important;
}
body.sidebar-collapsed .brand-text{
  display:none!important;
}
body.sidebar-collapsed .brand-logo{
  width:46px!important;
  height:46px!important;
  flex-basis:46px!important;
}
body.sidebar-collapsed .brand-logo img{
  width:46px!important;
  height:46px!important;
}
body.sidebar-collapsed .sidebar-collapse-btn{
  margin-inline:auto!important;
}
body.sidebar-collapsed nav a[data-section],
body.sidebar-collapsed nav button{
  justify-content:center!important;
  padding-inline:8px!important;
}
body.sidebar-collapsed .nav-label{
  display:none!important;
}
body.sidebar-collapsed .nav-icon{
  margin:0!important;
}
body.sidebar-collapsed .current-user-box{
  padding:8px!important;
  text-align:center!important;
}
body.sidebar-collapsed .current-user-box b,
body.sidebar-collapsed .current-user-box small{
  display:none!important;
}
body.sidebar-collapsed .current-user-box .btn{
  font-size:0!important;
  min-height:40px!important;
  padding:8px!important;
}
body.sidebar-collapsed .current-user-box .btn::after{
  content:"↪";
  font-size:19px;
}

/* التحليل المتقدم: سكرول أفقي واضح عند الحاجة */
#advancedAnalysis{
  min-width:0!important;
}
#advancedAnalysis .advanced-results-card{
  min-width:0!important;
}
#advancedAnalysis .advanced-table-wrap{
  overflow-x:auto!important;
  overflow-y:visible!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-gutter:stable;
  padding-bottom:8px;
}
#advancedAnalysis .advanced-results-table{
  width:max-content!important;
  min-width:1180px!important;
}
#advancedAnalysis .advanced-table-wrap::-webkit-scrollbar{
  height:10px;
}
#advancedAnalysis .advanced-table-wrap::-webkit-scrollbar-thumb{
  background:#b9d3c8;
  border-radius:999px;
}
#advancedAnalysis .advanced-table-wrap::-webkit-scrollbar-track{
  background:#eef4f1;
  border-radius:999px;
}

/* على الشاشات المتوسطة، اسمح أيضًا بتمرير منطقة الفلاتر لو ضاقت جدًا */
#advancedAnalysis .advanced-analysis-toolbar{
  min-width:0!important;
  overflow:hidden!important;
}
#advancedAnalysis .advanced-filter-grid{
  min-width:0!important;
}

@media(max-width:900px){
  .sidebar-collapse-btn{
    display:none!important;
  }
  body.sidebar-collapsed .app{
    display:block!important;
  }
}


/* v12.6: إصلاح سكرول التحليل المتقدم */

/* 1) جدول النتائج:
   - نجعل اتجاه حاوية السكرول LTR حتى يبدأ الشريط من أقصى اليسار/اليمين بشكل متوقع
     ويصل للطرفين كاملين.
   - نعيد الجدول نفسه RTL.
   - نثبت عمود ولي الأمر ناحية اليمين حتى لا يختفي جزء من الاسم أثناء السحب. */
#advancedAnalysis .advanced-table-wrap{
  direction:ltr!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  max-width:100%!important;
  width:100%!important;
  scroll-behavior:auto!important;
}
#advancedAnalysis .advanced-results-table{
  direction:rtl!important;
  width:max-content!important;
  min-width:1180px!important;
  margin:0!important;
}
#advancedAnalysis .advanced-results-table th,
#advancedAnalysis .advanced-results-table td{
  direction:rtl!important;
}
#advancedAnalysis .advanced-results-table th:first-child,
#advancedAnalysis .advanced-results-table td:first-child{
  position:sticky!important;
  right:0!important;
  z-index:4!important;
  min-width:190px!important;
  max-width:230px!important;
  background:#fff!important;
  box-shadow:-8px 0 12px rgba(11,90,68,.05)!important;
}
#advancedAnalysis .advanced-results-table th:first-child{
  z-index:6!important;
  background:#f4f8f5!important;
}
#advancedAnalysis .advanced-results-table td:first-child .client-link{
  display:inline-block!important;
  max-width:210px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}

/* 2) الفلاتر:
   نلغي السكرول الأفقي الصغير داخل كل يشمل/يستبعد،
   ونخلي كل كارت فلتر كامل بعرض مناسب داخل شريط أفقي واحد كبير. */
#advancedAnalysis .advanced-analysis-toolbar{
  overflow-x:auto!important;
  overflow-y:visible!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-gutter:stable;
  padding-bottom:14px!important;
}
#advancedAnalysis .advanced-filter-grid{
  display:grid!important;
  grid-template-columns:repeat(8,320px)!important;
  gap:12px!important;
  width:max-content!important;
  min-width:max-content!important;
  max-width:none!important;
}
#advancedAnalysis .advanced-filter-card{
  width:320px!important;
  min-width:320px!important;
  overflow:visible!important;
}
#advancedAnalysis .advanced-filter-dual{
  grid-template-columns:1fr 1fr!important;
  min-width:0!important;
}
#advancedAnalysis .advanced-filter-mode{
  min-width:0!important;
  overflow:hidden!important;
}
#advancedAnalysis .advanced-option-list{
  max-height:190px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-inline-end:3px!important;
}
#advancedAnalysis .advanced-option{
  min-width:0!important;
}
#advancedAnalysis .advanced-option span{
  min-width:0!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

/* شريط سكرول واحد واضح أسفل سكشن الفلاتر كله */
#advancedAnalysis .advanced-analysis-toolbar::-webkit-scrollbar{
  height:11px;
}
#advancedAnalysis .advanced-analysis-toolbar::-webkit-scrollbar-thumb{
  background:#b9d3c8;
  border-radius:999px;
}
#advancedAnalysis .advanced-analysis-toolbar::-webkit-scrollbar-track{
  background:#eef4f1;
  border-radius:999px;
}

/* منع أي شريط أفقي صغير داخل قوائم الاختيارات */
#advancedAnalysis .advanced-option-list::-webkit-scrollbar{
  width:7px;
  height:0!important;
}

/* على الشاشات الصغيرة نستمر بنفس فكرة شريط واحد للفلاتر،
   مع تصغير عرض الكارت بدل تحويلها لقائمة رأسية مزدحمة. */
@media(max-width:900px){
  #advancedAnalysis .advanced-filter-grid{
    grid-template-columns:repeat(8,285px)!important;
  }
  #advancedAnalysis .advanced-filter-card{
    width:285px!important;
    min-width:285px!important;
  }
}
@media(max-width:600px){
  #advancedAnalysis .advanced-filter-grid{
    grid-template-columns:repeat(8,260px)!important;
  }
  #advancedAnalysis .advanced-filter-card{
    width:260px!important;
    min-width:260px!important;
  }
  #advancedAnalysis .advanced-filter-dual{
    grid-template-columns:1fr 1fr!important;
  }
}


/* v12.7: hand drag scroll + WhatsApp under parent name */
#advancedAnalysis .advanced-analysis-toolbar,
#advancedAnalysis .advanced-table-wrap{
  cursor:grab;
}
#advancedAnalysis .advanced-analysis-toolbar.dragging-scroll,
#advancedAnalysis .advanced-table-wrap.dragging-scroll{
  cursor:grabbing!important;
  user-select:none!important;
}
#advancedAnalysis .advanced-analysis-toolbar a,
#advancedAnalysis .advanced-analysis-toolbar button,
#advancedAnalysis .advanced-analysis-toolbar input,
#advancedAnalysis .advanced-analysis-toolbar select,
#advancedAnalysis .advanced-analysis-toolbar textarea,
#advancedAnalysis .advanced-analysis-toolbar label,
#advancedAnalysis .advanced-table-wrap a,
#advancedAnalysis .advanced-table-wrap button,
#advancedAnalysis .advanced-table-wrap input,
#advancedAnalysis .advanced-table-wrap select,
#advancedAnalysis .advanced-table-wrap textarea,
#advancedAnalysis .advanced-table-wrap label{
  cursor:pointer;
}

.advanced-parent-cell{
  display:grid;
  justify-items:start;
  gap:7px;
  min-width:0;
}
.advanced-parent-cell .client-link{
  min-width:0;
}
.advanced-wa-link{
  width:29px;
  height:29px;
  display:inline-grid;
  place-items:center;
  border-radius:9px;
  background:#e9f7ef;
  color:#128c4b;
  border:1px solid #c8ead7;
  text-decoration:none!important;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.advanced-wa-link:hover{
  background:#ddf3e6;
  border-color:#acdabe;
  transform:translateY(-1px);
}
.advanced-wa-link svg{
  width:17px!important;
  height:17px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.65!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}


/* v12.8: 4 فلاتر في السطر بدون سكرول داخل الكارت */
#advancedAnalysis .advanced-analysis-toolbar{
  overflow-x:auto!important; /* يظل موجودًا كـ fallback */
  overflow-y:visible!important;
}

#advancedAnalysis .advanced-filter-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(250px,1fr))!important;
  gap:12px!important;
  width:100%!important;
  min-width:1040px!important; /* لو الشاشة أضيق، السكشن نفسه يسكرول */
  max-width:none!important;
}

#advancedAnalysis .advanced-filter-card{
  width:auto!important;
  min-width:0!important;
  overflow:visible!important;
}

#advancedAnalysis .advanced-filter-dual{
  grid-template-columns:1fr 1fr!important;
  min-width:0!important;
}

/* ممنوع أي سكرول داخل يشمل / يستبعد */
#advancedAnalysis .advanced-filter-mode{
  overflow:visible!important;
}
#advancedAnalysis .advanced-option-list{
  max-height:none!important;
  overflow:visible!important;
  padding-inline-end:0!important;
}

/* الشاشات المتوسطة: 2 في السطر */
@media(max-width:1050px){
  #advancedAnalysis .advanced-filter-grid{
    grid-template-columns:repeat(2,minmax(280px,1fr))!important;
    min-width:620px!important;
  }
}

/* الموبايل: كارت واحد في السطر */
@media(max-width:650px){
  #advancedAnalysis .advanced-filter-grid{
    grid-template-columns:1fr!important;
    min-width:0!important;
    width:100%!important;
  }
  #advancedAnalysis .advanced-filter-card{
    width:100%!important;
  }
  #advancedAnalysis .advanced-filter-dual{
    grid-template-columns:1fr 1fr!important;
  }
}


/* v12.9: رجوع سكرول البكرة رأسيًا داخل اختيارات الفلتر فقط */
#advancedAnalysis .advanced-filter-mode{
  overflow:hidden!important;
}

#advancedAnalysis .advanced-option-list{
  max-height:190px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-inline-end:4px!important;
  overscroll-behavior:contain;
}

/* لا يوجد سكرول أفقي داخل يشمل / يستبعد */
#advancedAnalysis .advanced-option-list::-webkit-scrollbar{
  width:7px!important;
  height:0!important;
}

/* scrollbar رأسي خفيف */
#advancedAnalysis .advanced-option-list::-webkit-scrollbar-thumb{
  background:#c8d7d0;
  border-radius:999px;
}
#advancedAnalysis .advanced-option-list::-webkit-scrollbar-track{
  background:transparent;
}


/* v12.10: أرشفة العملاء */
.btn-archive{
  background:#f8b810!important;
  border-color:#e3a300!important;
  color:#173b31!important;
  font-weight:800;
}
.btn-archive:hover{
  background:#e9aa08!important;
}
.btn-danger{
  background:#b42318!important;
  border-color:#b42318!important;
  color:#fff!important;
}
.btn-danger:hover{
  background:#912018!important;
}
.btn-danger:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}
.archived-client-banner{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid #e0b33a;
  border-radius:12px;
  background:#fff7d8;
  color:#694d00;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.archived-client-banner b{
  font-size:15px;
}
.archive-warning{
  padding:14px;
  border-radius:12px;
  background:#fff7d8;
  border:1px solid #e0b33a;
  color:#694d00;
  line-height:1.8;
}
.archive-confirm-text{
  line-height:1.9;
  padding:4px 0;
}
.archived-page-head{
  gap:16px;
  align-items:flex-end;
}
.archived-search-wrap{
  width:min(360px,100%);
}
.archived-table-wrap{
  overflow:auto;
}
.archived-row-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.archive-task-focus-notice{
  margin-bottom:12px;
  padding:10px 12px;
  border-radius:12px;
  background:#fff7d8;
  border:1px solid #e0b33a;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.delete-client-box{
  border-top:4px solid #b42318;
}
.delete-client-warning{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid #f2b8b5;
  background:#fff1f0;
  color:#8a1c13;
  border-radius:12px;
  line-height:1.7;
}
.delete-client-name{
  display:inline-block;
  margin-bottom:10px;
  padding:7px 10px;
  border-radius:9px;
  background:#f4f5f5;
  font-weight:800;
}
@media(max-width:700px){
  .archived-page-head{
    align-items:stretch;
  }
  .archived-search-wrap{
    width:100%;
  }
}


/* v12.10.1: ensure archived/active action groups are mutually exclusive */
#activeClientActions.hidden,
#archivedClientActions.hidden,
#archivedClientBanner.hidden{
  display:none!important;
}


/* v12.11 — UI cleanup */
body.crm-employee .manager-only,
.role-hidden{
  display:none!important;
}

.duplicate-client-link{
  color:#0b5a44!important;
  font-weight:800;
  text-decoration:underline!important;
  text-underline-offset:3px;
  cursor:pointer;
}

.password-input-clean{
  position:relative;
  width:100%;
}
.password-input-clean input{
  width:100%!important;
  padding-inline-end:44px!important;
}
.password-eye-clean{
  position:absolute!important;
  inset-inline-end:7px!important;
  inset-inline-start:auto!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:32px!important;
  height:32px!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:8px!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  color:#53645e!important;
  cursor:pointer!important;
}
.password-eye-clean:hover{
  background:#edf6f2!important;
  color:#0b5a44!important;
}
.password-eye-clean svg{
  width:19px!important;
  height:19px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.7!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.password-eye-clean .hidden{
  display:none!important;
}