/* ===========================
   Webwright – Tema & Componenti
   =========================== */

/* ---- Tema base ---- */
:root{
  --ww-primary:#3B5BDB;    /* indigo */
  --ww-accent:#00B894;     /* teal  */
  --ww-text:#1F2937;       /* slate-800 */
  --ww-muted:#6B7280;      /* slate-500 */
  --ww-bg:#F8FAFC;         /* slate-50  */
  --ww-surface:#FFFFFF;
  --ww-border:#E5E7EB;     /* slate-200 */
  --ww-danger:#E11D48;     /* rose-600 */
  --ww-warning:#F59E0B;    /* amber-500 */
  --ww-radius:12px;
  --ww-shadow:0 6px 24px rgba(0,0,0,.06);
}
@media (prefers-color-scheme:dark){
  :root{
    --ww-text:#E5E7EB;
    --ww-muted:#9CA3AF;
    --ww-bg:#0B1220;
    --ww-surface:#0F172A;
    --ww-border:#1F2A44;
    --ww-shadow:0 6px 24px rgba(0,0,0,.35);
  }
}

html, body{
  background:var(--ww-bg);
  color:var(--ww-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  margin:0px!important;
}

/* ---- Link ---- */
a{ color:var(--ww-primary); text-decoration:none; }
a:hover{ color:#2f49b6; }

header{
    font-size: 26px;
    display: flex;
    background-color: #0f0f17;
    border-bottom: 1px solid #262634;
    height: 65px;
    padding: 10px;
    gap: 25px;
    align-items: center;
}
header img {width:65px;}
header .ww-brand-tagline {margin-left:-15px;}

/* ---- Bottoni (override gentile, funziona anche senza Bootstrap) ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.4rem; font-weight:600; padding:.55rem .9rem; border-radius:10px;
  border:1px solid transparent; cursor:pointer; user-select:none;
}
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.btn-primary{ background:var(--ww-primary); border-color:var(--ww-primary); color:#fff; }
.btn-primary:hover{ filter:brightness(0.95); }

.btn-secondary{
  background:transparent; border-color:var(--ww-border); color:var(--ww-text);
}
.btn-secondary:hover{ background:rgba(0,0,0,.04); }

.btn-outline-secondary{
  background:transparent; border-color:var(--ww-border); color:var(--ww-text);
}
.btn-outline-secondary:hover{ background:rgba(0,0,0,.06); }

.btn-outline-danger{
  background:transparent; border-color:var(--ww-danger); color:var(--ww-danger);
}
.btn-outline-danger:hover{ background:rgba(225,29,72,.08); }

.btn-sm{ padding:.4rem .6rem; font-size:.92rem; border-radius:9px; }

/* ---- Topbar ---- */
.ww-topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.25rem 0 1rem;
}
.ww-topbar h4{ margin:0; font-size:1.25rem; }

/* ---- Stato vuoto ---- */
.ww-empty{
  display:flex; flex-direction:column; gap:.6rem;
  padding:1rem; border:1px dashed var(--ww-border); border-radius:var(--ww-radius);
  background:rgba(59,91,219,0.03);
}

/* ---- Lista “tableless” ---- */
.ww-list{ display:flex; flex-direction:column; gap:.75rem; }
.ww-item{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1rem; border-radius:var(--ww-radius);
  background:var(--ww-surface); border:1px solid var(--ww-border);
  box-shadow:var(--ww-shadow);
}
.ww-item:hover{ transform:translateY(-1px); transition:.15s ease; }
.ww-item-main{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.ww-item-title{ font-weight:700; font-size:1.05rem; }
.ww-item-meta{
  font-size:.92rem; color:var(--ww-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60vw;
}
.ww-actions{ display:flex; align-items:center; gap:.5rem; }

/* ---- Moduli / form ---- */
.ww-form{ display:flex; flex-direction:column; gap:.9rem; max-width:840px; }
.ww-field{ display:flex; flex-direction:column; gap:.35rem; }
.ww-label{ font-weight:600; font-size:.95rem; }
.ww-input, .ww-textarea{
  width:100%; border:1px solid var(--ww-border); border-radius:10px;
  background:var(--ww-surface); color:var(--ww-text);
  padding:.6rem .75rem; outline:none;
}
.ww-input:focus, .ww-textarea:focus{ box-shadow:0 0 0 3px rgba(59,91,219,.15); border-color:var(--ww-primary); }
.ww-textarea{ min-height:88px; resize:vertical; }

/* ---- Toolbar generica ---- */
.ww-toolbar{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0 1rem; }

/* ---- Divider ---- */
.ww-divider{ height:1px; background:var(--ww-border); margin:1rem 0; }

/* ---- Selezione evidenziata (per “scegli cosa catturare”) ---- */
.ww-highlight{ outline:2px dashed var(--ww-accent) !important; outline-offset:2px; }


/* === Modal (popup) === */
.ww-modal-backdrop{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.45);
  display:flex; align-items:flex-start; justify-content:center;
  padding:10vh 1rem 2rem;
}
.ww-modal{
  width:min(760px, 96vw);
  background:var(--ww-surface);
  border:1px solid var(--ww-border);
  border-radius:var(--ww-radius);
  box-shadow:var(--ww-shadow);
  overflow:hidden;
}
.ww-modal-header, .ww-modal-footer{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.85rem 1rem; background:rgba(0,0,0,.02);
  border-bottom:1px solid var(--ww-border);
}
.ww-modal-footer{ border-top:1px solid var(--ww-border); border-bottom:none; }
.ww-modal-title{ font-weight:700; }
.ww-modal-body{ padding:1rem; display:flex; flex-direction:column; gap:.9rem; }
.ww-close{
  background:transparent; border:0; font-size:1.25rem; line-height:1; cursor:pointer;
  color:var(--ww-muted);
}
.ww-inline{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.ww-modal-backdrop.is-front { z-index: 1010; }
.ww-modal-backdrop.is-back  { z-index: 1000; }

/* === Modal XL (editor) === */
.ww-modal-xl{
  width:min(1400px, 98vw);
  height:88vh;
  display:flex; flex-direction:column;
}
.ww-modal-xl .ww-modal-body{
  flex:1; overflow:hidden; padding:0; /* corpo full-height senza padding */
}

/* Editor layout */
.ww-editor{
  height:100%;
  display:grid; grid-template-columns: 1fr 320px; gap:1rem;
  padding:1rem;
}
@media (max-width: 1100px){
  .ww-editor{ grid-template-columns: 1fr; }
}

/* Toolbar in alto nell’editor */
.ww-editor-toolbar{
  display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
  padding:.75rem 1rem; border-bottom:1px solid var(--ww-border);
  background:rgba(0,0,0,.02);
}

/* Browser virtuale */
.ww-browser{
  display:flex; flex-direction:column; min-height:0;
  border:1px solid var(--ww-border); border-radius:var(--ww-radius);
  background:var(--ww-surface); box-shadow:var(--ww-shadow);
}
.ww-browser-chrome{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem; border-bottom:1px solid var(--ww-border);
}
.ww-dot{ width:10px; height:10px; border-radius:50%; background:#f43f5e; opacity:.8; }
.ww-dot:nth-child(2){ background:#f59e0b; }
.ww-dot:nth-child(3){ background:#22c55e; }
.ww-address{ flex:1; min-width:0; border:1px solid var(--ww-border); border-radius:999px;
  padding:.35rem .6rem; font-size:.9rem; color:var(--ww-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ww-browser-viewport{
  flex:1; min-height:0; position:relative; overflow:auto;
  background:
    linear-gradient(45deg, rgba(0,0,0,.025) 25%, transparent 25%) -16px 0/32px 32px,
    linear-gradient(-45deg, rgba(0,0,0,.025) 25%, transparent 25%) 0px 0/32px 32px,
    linear-gradient(45deg, transparent 75%, rgba(0,0,0,.025) 75%) -16px 0/32px 32px,
    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,.025) 75%) 0px 0/32px 32px;
}
.ww-viewport-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--ww-muted); font-weight:600;
}

/* Pannello laterale (steps/mappings) — placeholder per ora */
.ww-side{
  display:flex; flex-direction:column; gap:.75rem; min-height:0;
}
.ww-side .card{
  flex:1; overflow:auto; padding:1rem; border:1px solid var(--ww-border);
  border-radius:var(--ww-radius); background:var(--ww-surface);
}


.confirm-dialog-overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.45);
  display:grid; place-items:center;
  z-index: 9999; /* alto abbastanza */
}

    /* #ANCORA-SIDEBAR-STYLES */
    .sidebar-nav {
        width: 240px;
        min-width: 240px;
        background-color: #1e1e2f;
        color: #fff;
        display: flex;
        flex-direction: column;
        /*height: 100vh;*/
        border-right: 1px solid rgba(255,255,255,0.07);
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
        position: sticky;
        top: 0;
    }

    .sidebar-header {
        padding: 1rem 1.25rem 1rem 1.25rem;
        border-bottom: 1px solid rgba(255,255,255,0.07);
    }

    .app-title {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.2;
        color: #fff;
    }

    .app-sub {
        font-size: .75rem;
        color: rgba(255,255,255,.45);
        margin-top: .2rem;
    }

    .sidebar-links {
        list-style: none;
        margin: 0;
        padding: .75rem 0;
        flex: 1;
        overflow-y: auto;
    }

    .sidebar-links li {
        margin-bottom: .25rem;
    }

    .nav-item {
        display: flex;
        flex-direction: column;
        padding: .6rem 1rem .6rem 1.25rem;
        text-decoration: none;
        border-left: 3px solid transparent;
        color: rgba(255,255,255,.8);
        background-color: transparent;
        transition: all .12s ease;
        border-radius: 0 4px 4px 0;
    }

    .nav-item:hover {
        background-color: rgba(255,255,255,0.05);
        color: #fff;
    }

    .nav-item.active {
        background-color: rgba(255,255,255,0.08);
        border-left-color: #4f7cff;
        color: #fff;
    }

    .nav-main {
        font-size: .9rem;
        font-weight: 500;
        line-height: 1.2;
    }

    .nav-sub {
        font-size: .7rem;
        line-height: 1.2;
        color: rgba(255,255,255,.45);
    }

    .nav-item.active .nav-sub {
        color: rgba(255,255,255,.8);
    }

/*    @media (max-width: 768px) {
        .sidebar-nav

    {
        position: fixed;
        z-index: 9999;
        height: 100%;
    }

    }
*/
    /* #ANCORA-LAYOUT-STYLES */
    .app-shell {
        display: flex;
        flex-direction: row;
        /*min-height: 100vh;*/
        background-color: #0f0f17;
        color: #fff;
        min-height: calc(100vh - 86px);
    }

    .page-surface {
        flex: 1;
        min-width: 0;
        background-color: #0f0f17;
        padding: 1rem 1.5rem 3rem 1.5rem;
        color: #000;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* contenitore principale delle pagine */
    .page-card {
        background-color: #1b1b2a;
        border: 1px solid rgba(255,255,255,.07);
        border-radius: 12px;
        padding: 1rem 1.25rem;
        box-shadow: 0 20px 60px rgba(0,0,0,.8);
    }

    .page-title {
        font-size: 1rem;
        font-weight: 600;
        color: #fff;
        display: flex;
        align-items: baseline;
        gap: .5rem;
    }

    .page-subtitle {
        font-size: .8rem;
        font-weight: 400;
        color: rgba(255,255,255,.5);
    }

    .pagination-controls{ 
        color: #FFF; display: flex;
        gap: 50px;
        align-items: center;
            padding-top: 10px;
            flex-direction: row-reverse;
    }
    .pagination-buttons{ 
        color: #FFF; display: flex;
        gap: 13px;
        align-items: baseline;
    }

    .page-size-selector {        
        display: flex;
        gap: 13px;
        align-items: baseline;
    }
    .page-size-selector > select{    
        width: 80px!important;
        height: 34px;
        border-radius: 10px;
        text-align: center;
    }

    /* #ANCORA-SIDEBAR-BOTTOM-STYLES */
    .sidebar-grow { /*flex: 1 1 auto;*/ }

    .sidebar-bottom {
        list-style: none;
        margin: .5rem 0 1rem 0;
        padding: 0;
        border-top: 1px solid rgba(255,255,255,0.07);
        position:relative;
    }

    .sidebar-bottom .nav-item.danger {
        border-left-color: transparent;
    }

    .sidebar-bottom .nav-item.danger:hover {
        background-color: rgba(255,0,0,0.08);
    }

    .sidebar-bottom .nav-item.danger.active {
        background-color: rgba(255,255,255,0.08);
    }

/* #ANCORA-CONFIRM-DIALOG-WW */

/* overlay scuro + blur */
.confirm-dialog-overlay{
  position: fixed;
  inset: 0;
  z-index: 2000;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(1200px 700px at 20% 30%, rgba(120,110,255,.18), transparent 60%),
    radial-gradient(900px 600px at 80% 40%, rgba(0,200,255,.14), transparent 55%),
    rgba(10,11,20,.65);

  backdrop-filter: blur(6px);
}

/* box principale */
.confirm-dialog-box{
  width: min(420px, 92vw);
  padding: 22px 22px 20px 22px;

  border-radius: 16px;

  background: rgba(22, 23, 44, .95);
  border: 1px solid rgba(255,255,255,.10);

  box-shadow:
    0 24px 80px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.04);

  color: rgba(233,233,245,.95);

  animation: ww-confirm-scale-in .18s ease-out;
}

/* testo */
.confirm-dialog-box p{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(233,233,245,.92);
}

/* pulsanti */
.dialog-buttons{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.btn-confirm{
  min-width: 110px;
  height: 38px;
  padding: 0 14px;

  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);

  font-weight: 800;
  font-size: 13px;

  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}

/* primary = conferma */
.btn-confirm.primary{
  background: linear-gradient(135deg, #4f6dff, #3aa7ff);
  color: #fff;
  border: none;
  box-shadow: 0 10px 26px rgba(79,109,255,.25);
}

.btn-confirm.primary:hover{
  box-shadow: 0 14px 34px rgba(79,109,255,.35);
  transform: translateY(-1px);
}

/* secondary = annulla */
.btn-confirm.secondary{
  background: rgba(255,255,255,.06);
  color: rgba(233,233,245,.92);
}

.btn-confirm.secondary:hover{
  background: rgba(255,255,255,.10);
}

/* focus accessibilità */
.btn-confirm:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(84,110,255,.45);
}

/* animazione */
@keyframes ww-confirm-scale-in{
  from{
    opacity: 0;
    transform: scale(.96);
  }
  to{
    opacity: 1;
    transform: scale(1);
  }
}

/* mobile */
@media (max-width: 480px){
  .dialog-buttons{
    flex-direction: column-reverse;
    gap: 8px;
  }

  .btn-confirm{
    width: 100%;
  }
}

/* #ANCORA-SELECT-DARK-FIX */

/* forza schema colore scuro */
.popup-body select,
.popup-body option{
  color-scheme: dark;
}

/* colore base (quando chiuso) */
.popup-body .form-select{
  background-color: rgba(255,255,255,.06);
  color: rgba(233,233,245,.95);
}

/* alcune versioni di Chrome rispettano questo */
.popup-body select option{
  background-color: #14152b;
  color: #e9e9f5;
}

/* hover (supporto parziale, ma aiuta) */
.popup-body select option:hover{
  background-color: #2a2c55;
}

/* #ANCORA-NUMBER-SPINNER-HIDE */

/* Chrome, Edge, Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"]{
  -moz-appearance: textfield;
}


/* #ANCORA-LOADING-CSS */
/*.ww-loading-overlay{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;*/

    /* overlay scuro, come popup */
    /*background: rgba(0,0,0,.55);
    backdrop-filter: blur(3px);*/

    /* blocca click/scroll sotto */
    /*pointer-events: all;
}*/

/*.ww-loading-modal{
    width: min(520px, calc(100% - 32px));
    border-radius: 16px;
    background: rgba(20, 20, 20, .92);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
    overflow: hidden;
}

.ww-loading-header{
    padding: 14px 16px 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.ww-loading-title{
    font-weight: 700;
    font-size: 1rem;
    color: rgba(255,255,255,.92);
    letter-spacing: .2px;
}

.ww-loading-body{
    padding: 16px;
}

.ww-loading-message{
    color: rgba(255,255,255,.85);
    font-size: .95rem;
    line-height: 1.35;
    margin-bottom: 14px;
    text-align:center;
}

.ww-loading-indicator{*/
    /*display: flex;
    align-items: center;
    gap: 10px;*/
    /*width: fit-content;
    margin: 0 auto;
}*/

/* spinner */
/*.ww-spinner{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.18);
    border-top-color: rgba(255,255,255,.85);
    animation: ww-spin .85s linear infinite;
}

@keyframes ww-spin{
    to { transform: rotate(360deg); }
}


.ww-loading-dots span:nth-child(2){ animation-delay: .15s; }
.ww-loading-dots span:nth-child(3){ animation-delay: .30s; }*/

/* #ANCORA-LOADING-OVERLAY-CSS */
.ww-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.ww-modal{
  background: rgba(20,20,20,.92);
  color: #fff;
  border-radius: 14px;
  padding: 18px 18px;
  min-width: 300px;
  max-width: 520px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  width:fit-content;
  padding:25px 45px
}

.ww-title{
  font-size: 14px;
  line-height: 1.3;
  opacity: .95;
}

.ww-spinner{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: rgba(255,255,255,.95);
  animation: ww-spin .8s linear infinite;
}

@keyframes ww-spin { to { transform: rotate(360deg); } }


/* #ANCORA-TRASH-BADGE */
.trash-badge {
    /*margin-left: 8px;*/
    padding: 2px 7px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    background: #e74c3c;
    color: #fff;
    line-height: 1;
    vertical-align: middle;
    position: absolute;
    right:15px;
    top:16px
}

/* ===== WW-SELECT CUSTOM DROPDOWN ===== */
.ww-select {
    position: relative;  
    /*height: 38px;*/

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    /*padding: 0.4rem 0.75rem;*/
    padding: 0 12px;
    /*border: 1px solid rgba(255, 255, 255, 0.12);*/
    border: 1px solid rgba(255,255,255,.10);

    /*border-radius: 8px;*/
    border-radius: 10px;
    /*background: rgba(255, 255, 255, 0.05);*/
    background: rgba(255,255,255,.06);
    cursor: pointer;
    user-select: none;
    min-height: 36px;
}


.ww-select:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

.ww-select-value {
    color: rgba(233,233,245,.95);
    font-weight: 400;
    font-size: 13px;

    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*font-size: 0.875rem;*/
}


.ww-select-chevron {
    font-size: 0.75rem;
    /*opacity: 0.6;*/
      opacity: .85;

    /*transition: transform 0.2s ease;*/
    transition: transform .12s ease;
    flex-shrink: 0;
}


.ww-select-chevron.open {
    transform: rotate(180deg);
}


.ww-select-menu {
    position: absolute;
    /*top: calc(100% + 4px);*/
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    /*z-index: 1000;*/
    z-index: 60;

    /*background: var(--color-surface, #1e2235);*/
    background: rgba(18,19,38,.98);
    /*border: 1px solid rgba(255, 255, 255, 0.12);*/
    border: 1px solid rgba(255,255,255,.10);
    /*border-radius: 8px;*/
    border-radius: 12px;
    /*box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);*/
    box-shadow: 0 18px 60px rgba(0,0,0,.65);
    max-height: 220px;
    overflow-y: auto;
    /*padding: 0.25rem;*/
  padding: 6px;
}


.ww-select-item {
    /*padding: 0.4rem 0.65rem;*/
    padding: 10px 10px;
    border-radius: 10px;
    /*border-radius: 6px;*/
    /*font-size: 0.875rem;*/
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s;
    color: rgba(233,233,245,.92);
}


.ww-select-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.ww-select-item.active {
    /*background: rgba(var(--color-accent-rgb, 79, 142, 247), 0.2);*/
    background: rgba(79,109,255,.18);
    border: 1px solid rgba(79,109,255,.25);
    color: var(--color-accent, #4f8ef7);
    font-weight: 500;
}

.ww-select-compact {
    min-height: unset;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    /* width: 160px;*/
}


.ww-select-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== END WW-SELECT ===== */