/**
 *   uicolors.app/tailwind-colors/gray
 */

:root {
    --vfd-colour        : #56af00;
    
    --vfd-border-colour : #e5e7eb;                                                  /* gray-200 */
    --vfd-shadow        : 0 8px 24px rgb(3,7,18,.06), 0 1px 1px rgb(3,7,18,.04);    /* gray-950 */
}

/*
  :root{
      --brand:#56af31;         /* VFD green *//*
      --brand-700:#3f8425;
      --ink:#0f172a;           /* slate-900 *//*
      --text:#334155;          /* slate-700 *//*
      --muted:#64748b;         /* slate-500 *//*
      --line:#e2e8f0;          /* slate-200 *//*
      --bg:#f8fafc;            /* slate-50 *//*
      --card:#ffffff;          /* white *//*
      --success:#16a34a;
      --warning:#f59e0b;
      --radius:14px;
      --shadow:0 8px 24px rgba(2,6,23,.06), 0 1px 1px rgba(2,6,23,.04);
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:Montserrat,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text)}
    a{color:inherit}
    /* Top bar *//*
    .topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
    .topbar__inner{max-width:1200px;margin:auto;display:flex;align-items:center;gap:18px;padding:12px 20px}
    .brand{display:flex;align-items:center;gap:10px;text-decoration:none}
    .logo{display:grid;place-items:center;height:34px;width:34px;border-radius:10px;background:var(--brand);color:#fff;font-weight:800}
    .brand span{font-weight:700;color:var(--ink)}
    .spacer{flex:1}
    .top-links{display:flex;gap:18px;align-items:center}
    .top-links a{font-size:14px;color:var(--muted);text-decoration:none}
    .top-links a:hover{color:var(--ink)}
    .hello{font-size:12px;color:var(--muted)}
 
    /* Main *//*
    .wrap{max-width:1200px;margin:auto;padding:22px}
    .crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:14px}
    .crumbs a{color:var(--muted);text-decoration:none}
    .crumbs svg{opacity:.6}
 
    .pagehead{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
    .title{font-size:22px;color:var(--ink);font-weight:800;margin:0}
 
    /* Search / actions *//*
    .toolbar{display:grid;grid-template-columns:1fr auto;gap:16px;margin-bottom:16px}
    .searchcard{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius);padding:14px}
    .row{display:flex;flex-wrap:wrap;gap:10px}
    .input{appearance:none;border:1px solid var(--line);background:#f8fafc;height:40px;padding:0 12px;border-radius:10px;color:var(--ink);font-size:14px;min-width:220px}
    .select{appearance:none;border:1px solid var(--line);background:#f8fafc;height:40px;padding:0 40px 0 12px;border-radius:10px;color:var(--ink);font-size:14px;min-width:160px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');background-repeat:no-repeat;background-position:right 10px center}
    .btn{border:1px solid var(--line);background:#fff;height:40px;padding:0 14px;border-radius:12px;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer}
    .btn:hover{background:#f1f5f9}
    .btn--brand{background:var(--brand);border-color:var(--brand);color:#fff}
    .btn--brand:hover{background:var(--brand-700)}
 
    /* Stat card *//*
    .stats{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius);padding:14px;min-width:260px;height:100%}
    .stats h4{margin:0 0 8px 0;font-size:13px;color:var(--muted);font-weight:700}
    .kpi{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px dashed var(--line)}
    .kpi:first-of-type{border-top:0}
    .kpi .label{font-size:13px}
    .kpi .value{font-weight:800;color:var(--ink)}
    .kpi small{color:var(--muted)}
 
    /* Table *//*
    .card{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius)}
    .card__head{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid var(--line)}
    .card__title{margin:0;font-size:14px;font-weight:800;color:var(--ink)}
    .table{width:100%;border-collapse:separate;border-spacing:0}
    .table thead th{font-size:12px;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);background:linear-gradient(#fff,#fcfdff)}
    .table tbody td{padding:14px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink)}
    .table tbody tr:hover{background:#fafcff}
 
    .badge{display:inline-flex;gap:6px;align-items:center;border:1px solid #dbeafe;background:#eff6ff;color:#1d4ed8;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700}
    .badge--ok{border-color:#dcfce7;background:#f0fdf4;color:#15803d}
 
    .ops{display:flex;gap:10px}
    .op{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:12px;color:var(--text);text-decoration:none}
    .op:hover{background:#f1f5f9}
 
    /* Utilities *//*
    .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 
    /* Responsive *//*
    @media (max-width: 900px){
      .toolbar{grid-template-columns:1fr}
      .stats{order:-1}
    }
*/

table.vfd-sortable-table thead th {
    color           : #6a7282; /* gray-500 */
}

/*
.table thead th{font-size:12px;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);background:linear-gradient(#fff,#fcfdff)}
body{margin:0;font-family:Montserrat,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text)}
*/

body {
    /*background-color: #E6F2DE;*/
    background-color: #f9fafb;
    color           : #334155;
    font-family     : Montserrat,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    font-size       : 14px;


    background-color: #d1d5dc;
}   







/**********************************************************************************************************************/

a {
    color: #56af00;
}

a:hover {
    color: #4b6730;
    text-decoration: underline;
}
/*
.btn, input.btn, a.btn { /* extra tags added to by-pass .form-input styling *//*
    background		: #56AF00 none repeat scroll 0 0;
    border			: 0px solid #182260;
    border-radius	: 5px;
    box-sizing		: border-box;
    color			: #fff;
    cursor			: pointer;
    display			: inline-block;
    font-family		: inherit;
    font-size		: inherit;
    /*height		: 30px;*//*
    letter-spacing	: 1px;
    line-height		: 1.5em;
    margin			: 0 0 0 5px;
    padding			: 4px 4px;
    text-align		: center;
    width			: 150px;
    vertical-align	: middle;
    
    min-width: 150px;
    width: auto;
}

.btn:hover, .btn:focus {	
    background-color: #333333;
    color			: #fff;
}
*/
/*.btn-primary,
.btn-danger { 
    min-width: 150px;
    width: auto;
}*/
/*
.btn,
a.btn {
  color: #fff;
  padding: 0.2rem 0.75rem;
}
*/


input.btn-secondary, button.btn-secondary {
    background		: #ffffff none repeat scroll 0 0;
    border			: 1px solid #56AF00;
    border-radius	: 10px;
    color			: #56AF00;
    padding         : 3px 10px;
    font-size       : 14px;
}

input.btn-secondary:hover, input.btn-secondary:focus, button.btn-secondary:hover, button.btn-secondary:focus {	
    background-color: #333333;
    color			: #fff;
}

input.btn-secondary, button.btn-secondary i {
    vertical-align: middle;
}



input.btn-primary, a.btn-primary {
    background		: #56AF00 none repeat scroll 0 0;
    border			: 1px solid #56AF00;
    border-radius	: 10px;
    color			: #fff;
    padding         : 2px 10px;
    font-size       : 16px;
    margin			: 0 0 0 5px;
    min-width			: 150px;
}

input.btn-primary:hover, input.btn-primary:focus, a.btn-primary:hover, a.btn-primary:focus {	
    background-color: #333333;
    color			: #fff;
}

input.btn-primary i, a.btn-primary i {
    vertical-align: middle;
}


.link-primary {
    color			: #56AF00;
}

.link-primary:hover {
    color           : #4b6730;
    text-decoration : underline;
}


/**  CARDS  **/
/**********************************************************************************************************************/
.card {
    background-color: #ffffff;
    border          : 1px solid var(--vfd-border-colour);
    box-shadow      : var(--vfd-shadow);
    color           : #676a6c;
    padding         : 0px;
    border-radius   : 14px;
}

.card-header {
    background-color    : rgb(255,255,255,0);
    border-color        : var(--vfd-border-colour);
    color               : #101828;  /* gray-900 */
    font-weight         : 800;
    font-size           : 14px;
    padding: 14px;
    margin: 0xp;
}
/*.searchcard{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius);padding:14px}
*/

.card-header .vfd-controls {
    margin: -5px;
    padding: 0px;
}

.card-header h2 {
    font-weight         : 800;
    font-size           : 14px;
    margin              : 0xp;
}

.card-body {
    padding: 0.5rem 0.5rem;
}




/**********************************************************************************************************************
 *                                                                                                                    *
 *  MAIN                                                                                                              *
 *                                                                                                                    *
 **********************************************************************************************************************/

main {
    margin-bottom: 1rem;
}




/**********************************************************************************************************************
 *                                                                                                                    *
 *  PAGE CONTENT                                                                                                      *
 *                                                                                                                    *
 **********************************************************************************************************************/

header.vfd-page-header {
    margin-bottom: 0.25rem;
    padding-left: 0.25rem;
}

header.vfd-page-header h3 {
    margin: 0px;
    font-size: 1.6rem;
}

header.vfd-page-header .title {
    color: #56af00;
    display: inline-block;
    padding-right: 8px;
}

header.vfd-page-header .title + .title {
    border-left: 2px solid #56af00;
    padding-left: 6px;
}




/**********************************************************************************************************************
 *                                                                                                                    *
 *  FOOTER                                                                                                            *
 *                                                                                                                    *
 **********************************************************************************************************************/

/*footer {
    padding-top: 1rem;
}*/


/**********************************************************************************************************************
 *                                                                                                                    *
 *  TOOLTIP                                                                                                           *
 *                                                                                                                    *
 **********************************************************************************************************************/

.btn-tooltip {
    border: 0px solid blue;
    border-radius: 0px;
    color: #56AF00;
    font-size: 10px;
    padding: 0px;
    margin: 0 0 0 2px;
    width: auto;
    vertical-align: top;
    line-height: 10px;
    background-color: transparent;
}

.btn-tooltip i, 
.btn-tooltip svg {
    border: 0px solid red;
    font-size: 10px;
    vertical-align: top;
}

.btn-tooltip:hover {
  color: #333333;
    background-color: transparent;
}
.btn-tooltip:focus,
.btn-tooltip.focus {
  color: #333333;
    background-color: transparent;
}
.btn-tooltip.disabled,
.btn-tooltip:disabled {
  color: #666666;
    background-color: transparent;
}

.btn-tooltip:hover i {
  color: #333333;
}
.btn-tooltip:focus i,
.btn-tooltip.focus i {
  color: #333333;
}
.btn-tooltip.disabled i,
.btn-tooltip:disabled i {
  color: #666666;
}