/*
 * John Gear shared tool styles.
 * Load after mainmenustyle.css with /assets/css/johngear-tools.css.
 * Keep rules scoped under .jg-tool; use four spaces per nesting level.
 * White page surfaces, green actions, optional pale-green section panels.
 * Keep tool-specific rules in the relevant page or its own stylesheet.
 */

/* White overall surface; use pale green only for selected sections.
    Inherit the site font. Global menu CSS styles every nav element,
    so local tool navigation uses a div with role=navigation. */
.jg-tool{
    --jg-green:#2d6b4b;
    --jg-green-hover:#215238;
    --jg-green-soft:#eaf3ed;
    --jg-text:#292929;
    --jg-muted:#5b5b5b;
    --jg-border:#d5d5d5;
    --jg-surface:#fff;
    --jg-background:#fff;
    --jg-danger:#a12b2b;
    --jg-warning:#805313;
    /* Outer spacing belongs to the site's .page-container. */
    margin-top:-5px;
    padding:0px;
    background:var(--jg-background);
    color:var(--jg-text);
    font-family:inherit;
    line-height:1.5;
    border-radius:12px
}
.jg-tool *{
    box-sizing:border-box
}
.jg-tool h1{
    font-size:clamp(1.6rem,4vw,2.2rem);
    margin:0 0 8px
}
.jg-tool h2{
    font-size:1.2rem;
    color:var(--jg-green);
    margin:0 0 14px
}
.jg-tool p{
    margin:0 0 16px
}
.jg-tool a{
    color:var(--jg-green);
    text-underline-offset:3px
}
.jg-tool .jg-muted{
    color:var(--jg-muted)
}
.jg-tool .jg-toolbar,.jg-tool .jg-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px
}
.jg-tool .jg-toolbar{
    justify-content:space-between;
    margin-bottom:20px
}
.jg-tool .jg-nav{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:18px 0;
    padding:0;
    width:auto;
    height:auto;
    background:transparent;
    box-shadow:none
}
.jg-tool .jg-nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:9px 14px;
    border:1px solid var(--jg-green);
    border-radius:5px;
    background:#fff;
    color:var(--jg-green);
    text-decoration:none;
    font-weight:bold
}
.jg-tool .jg-nav a:hover{
    background:var(--jg-green-soft)
}
.jg-tool .jg-nav a[aria-current]{
    background:var(--jg-green);
    color:#fff
}
.jg-tool .jg-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:20px
}
.jg-tool .jg-panel{
    min-width:0;
    padding:22px;
    background:var(--jg-surface);
    border:1px solid var(--jg-border);
    border-radius:8px;
    margin-bottom:20px
}
.jg-tool .jg-panel-tinted{
    background:var(--jg-green-soft);
    border-color:#c5d9cb
}
.jg-tool .jg-grid .jg-panel{
    margin:0
}
.jg-tool .jg-field{
    margin-bottom:16px
}
.jg-tool label{
    display:block;
    font-weight:bold;
    margin-bottom:6px
}
.jg-tool input:not([type=hidden]),.jg-tool select,.jg-tool textarea{
    width:100%;
    min-height:44px;
    border:1px solid #81998a;
    border-radius:5px;
    padding:10px;
    font:inherit;
    color:var(--jg-text);
    background:#fff
}
.jg-tool textarea{
    resize:vertical;
    min-height:110px
}
.jg-tool small{
    display:block;
    color:var(--jg-muted);
    margin-top:5px
}
.jg-tool .jg-button{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 16px;
    border:1px solid var(--jg-green);
    border-radius:5px;
    background:var(--jg-green);
    color:#fff;
    text-decoration:none;
    font:inherit;
    font-weight:bold;
    cursor:pointer
}
.jg-tool .jg-button:hover{
    background:var(--jg-green-hover);
    color:#fff
}
.jg-tool .jg-secondary{
    background:#fff;
    color:var(--jg-green)
}
.jg-tool .jg-secondary:hover{
    background:var(--jg-green-soft);
    color:var(--jg-green)
}
.jg-tool .jg-danger{
    background:#fff;
    border-color:var(--jg-danger);
    color:var(--jg-danger)
}
.jg-tool .jg-danger:hover{
    background:var(--jg-danger);
    color:#fff
}
.jg-tool .jg-button:disabled{
    opacity:.55;
    cursor:not-allowed
}
.jg-tool :focus-visible{
    outline:3px solid #996300;
    outline-offset:3px
}
.jg-tool .jg-notice{
    padding:14px;
    border:1px solid var(--jg-green);
    border-radius:5px;
    background:var(--jg-green-soft);
    margin-bottom:18px
}
.jg-tool .jg-error{
    border-color:var(--jg-danger);
    background:#fff0ef;
    color:#802020
}
.jg-tool .jg-warning{
    border-color:var(--jg-warning);
    background:#fff6e5;
    color:var(--jg-warning)
}
.jg-tool .jg-badge{
    display:inline-block;
    padding:3px 10px;
    border-radius:20px;
    background:var(--jg-green-soft);
    color:var(--jg-green);
    font-weight:bold;
    font-size:.85rem
}
.jg-tool .jg-table-scroll{
    overflow-x:auto;
    max-width:100%;
    border:1px solid var(--jg-border);
    border-radius:6px
}
.jg-tool table{
    border-collapse:collapse;
    width:100%;
    text-align:left
}
.jg-tool th,.jg-tool td{
    padding:12px;
    border-bottom:1px solid var(--jg-border);
    vertical-align:top;
    overflow-wrap:anywhere
}
.jg-tool th{
    background:#f4f4f4
}
.jg-tool tr:last-child td{
    border-bottom:0
}
.jg-tool caption{
    text-align:left;
    padding:12px;
    font-weight:bold
}
.jg-tool .jg-table-actions{
    min-width:180px
}
/* Add jg-data-table to record lists. Keep readable columns inside jg-table-scroll. */
.jg-tool .jg-data-table{
    min-width:640px
}
.jg-tool .jg-data-table th,
.jg-tool .jg-data-table td:first-child{
    white-space:nowrap
}
.jg-tool .jg-data-table tbody tr:nth-child(odd),
.jg-tool .jg-data-table tbody tr:nth-child(odd) > td{
    background:#fff
}
.jg-tool .jg-data-table tbody tr:nth-child(even),
.jg-tool .jg-data-table tbody tr:nth-child(even) > td{
    background:#f3f5f4
}
.jg-tool .jg-data-table tbody tr:hover,
.jg-tool .jg-data-table tbody tr:focus-within,
.jg-tool .jg-data-table tbody tr:hover > td,
.jg-tool .jg-data-table tbody tr:focus-within > td{
    background:var(--jg-green-soft)
}
.jg-tool .jg-table-controls{
    display:grid;
    grid-template-columns:minmax(0,1fr) 110px auto auto;
    align-items:end;
    gap:8px;
    margin-bottom:14px
}
.jg-tool .jg-table-controls .jg-field{
    margin:0;
    min-width:0
}
.jg-tool .jg-filter-clear{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    white-space:nowrap
}
.jg-tool .jg-sort-form{
    margin:0
}
.jg-tool .jg-sort-button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    border:0;
    padding:4px;
    background:transparent;
    color:inherit;
    font:inherit;
    font-weight:bold;
    cursor:pointer;
    text-align:left;
    white-space:nowrap
}
.jg-tool .jg-sort-button:hover{
    color:var(--jg-green);
    text-decoration:underline;
    text-underline-offset:3px
}
.jg-tool .jg-table-pages{
    margin-top:16px
}
.jg-tool .jg-sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
@media(max-width:700px){
    .jg-tool{
        border-radius:0
    }
    .jg-tool .jg-table-controls{
        grid-template-columns:minmax(0,1fr) auto auto
    }
    .jg-tool .jg-table-controls .jg-filter-search{
        grid-column:1 / -1
    }
    .jg-tool .jg-grid{
        grid-template-columns:minmax(0,1fr)
    }
    .jg-tool .jg-panel{
        padding:16px
    }
    .jg-tool .jg-toolbar{
        align-items:flex-start
    }
    .jg-tool .jg-actions>.jg-button{
        flex:1 1 auto
    }
    .jg-tool th,.jg-tool td{
        padding:10px
    }
    .jg-tool .jg-nav a{
        flex:1;
        text-align:center
    }
}
@media(prefers-reduced-motion:reduce){
    .jg-tool *{
        scroll-behavior:auto
    }
}