/* ============================================================
   AmpleTrails Attendance System — global 2026 theme
   Injected into every page via web.config <pages theme="AmpleTrails">
   Overrides the legacy Telerik Office2007 / Office2010Blue skins.
   ============================================================ */

/* ---------- base ---------- */
body{
    background-color:#F2F5FA !important;
    font-family:"Segoe UI Variable Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
    color:#152238;
    -webkit-font-smoothing:antialiased;
}
a{ color:#0F3460; }
a:hover{ color:#6C9C27; }
hr{ border:0; border-top:1px solid #E3E8F0; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#C9D4E4; border-radius:8px; border:2px solid #F2F5FA; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- native form controls ---------- */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], textarea, select{
    border:1.5px solid #E3E8F0;
    border-radius:8px;
    padding:4px 9px;
    background-color:#FFFFFF;
    color:#152238;
    font-family:inherit;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="search"]:focus, textarea:focus, select:focus{
    border-color:#83B735;
    box-shadow:0 0 0 3px rgba(131,183,53,.16);
}
input[type="text"][disabled], input[type="password"][disabled],
textarea[disabled], select[disabled]{
    background-color:#F2F5FA; color:#8A97AB;
}
input[type="checkbox"], input[type="radio"]{
    accent-color:#83B735;
    width:15px; height:15px;
    vertical-align:middle;
}
input[type="submit"], input[type="button"]{
    font-family:inherit;
    color:#FFFFFF;
    background:#83B735;
    border:1px solid #6C9C27;
    border-radius:8px;
    padding:5px 16px;
    cursor:pointer;
    transition:filter .15s ease, box-shadow .15s ease;
}
input[type="submit"]:hover, input[type="button"]:hover{
    filter:brightness(1.06);
    box-shadow:0 4px 12px rgba(131,183,53,.35);
}
input[type="submit"][disabled], input[type="button"][disabled]{
    background:#C9D4E4; border-color:#C9D4E4; color:#FFFFFF; cursor:default; box-shadow:none;
}

/* Telerik single-line inputs (RadInput / RadDatePicker textboxes) */
.riTextBox{
    border:1.5px solid #E3E8F0 !important;
    border-radius:8px !important;
    background-color:#FFFFFF;
    color:#152238 !important;
    font-family:inherit !important;
}
.riTextBox:focus, .riFocused{
    border-color:#83B735 !important;
    box-shadow:0 0 0 3px rgba(131,183,53,.16) !important;
}

/* ---------- fieldsets (settings groups) ---------- */
fieldset{
    border:1.5px solid #E3E8F0;
    border-radius:12px;
    padding:12px 16px;
    background:#FFFFFF;
}
legend{
    color:#0F3460;
    font-weight:600;
    padding:0 8px;
}

/* ---------- RadWindow (popup dialogs) ---------- */
.RadWindow, .RadWindow table.rwTable{ background:transparent !important; }
.RadWindow table.rwTable td{ background-image:none !important; }
.RadWindow .rwCorner, .RadWindow .rwTitleRow td{ background-image:none !important; }
.RadWindow .rwTitlebar{
    background:#0F3460 !important;
    background-image:none !important;
    padding:6px 4px !important;
}
.RadWindow .rwTitlebar em,
.RadWindow .rwTitlebar .rwTitle,
.RadWindow .rwTitlebar span{
    color:#FFFFFF !important;
    font-family:"Segoe UI Variable Text","Segoe UI",Inter,Roboto,Arial,sans-serif !important;
    font-weight:600;
}
.RadWindow .rwWindowContent{ background:#FFFFFF !important; }
.RadWindow table.rwTable .rwWindowContent{ border:1px solid #E3E8F0; border-top:0; }
.RadWindow .rwStatusbar, .RadWindow .rwStatusbarRow td{
    background:#F7F9FC !important; background-image:none !important;
}
.rwShadow{ border-radius:12px; }

/* ---------- RadTabStrip (Basic / Additional / Push tabs) ---------- */
.RadTabStrip .rtsUL{ border-bottom:2px solid #E3E8F0; }
.RadTabStrip .rtsLink, .RadTabStrip .rtsOut, .RadTabStrip .rtsIn, .RadTabStrip .rtsTxt{
    background:none !important;
    background-image:none !important;
    border:0 !important;
}
.RadTabStrip .rtsLink{
    color:#5D6B82 !important;
    font-family:"Segoe UI Variable Text","Segoe UI",Inter,Roboto,Arial,sans-serif !important;
    font-size:12.5px !important;
    font-weight:600;
    padding:2px 2px;
}
.RadTabStrip .rtsLink:hover{ color:#0F3460 !important; }
.RadTabStrip .rtsLink.rtsSelected, .RadTabStrip .rtsSelected .rtsTxt{
    color:#0F3460 !important;
    box-shadow:inset 0 -2px 0 #83B735;
}
.RadTabStrip .rtsLevel1{ background:transparent !important; }

/* RadMultiPage content area */
.RadMultiPage{ background:#FFFFFF; }

/* ---------- RadGrid (data tables) ---------- */
.RadGrid{ border-color:#E3E8F0 !important; }
.RadGrid .rgHeader, .RadGrid th.rgHeader,
.RadGrid .rgHeaderWrapper, .RadGrid .rgMultiHeaderRow th{
    background:#F7F9FC !important;
    background-image:none !important;
    color:#0F3460 !important;
    font-weight:600;
    border-color:#E3E8F0 !important;
}
.RadGrid .rgHeader a{ color:#0F3460 !important; }
.RadGrid .rgRow td, .RadGrid .rgAltRow td{ border-color:#EDF1F7 !important; }
.RadGrid .rgRow{ background:#FFFFFF; }
.RadGrid .rgAltRow{ background:#FBFCFE; }
.RadGrid .rgHoveredRow{ background:#F4F9EC !important; }
.RadGrid .rgSelectedRow{ background:#EFF6E3 !important; }
.RadGrid .rgPager, .RadGrid .rgPager td{
    background:#F7F9FC !important; background-image:none !important;
}
.RadGrid .rgCommandRow, .RadGrid .rgCommandCell{
    background:#FFFFFF !important; background-image:none !important;
}
.RadGrid .rgFilterRow td{ background:#FFFFFF !important; }

/* ---------- RadToolBar on inner pages ---------- */
.RadToolBar, .RadToolBar .rtbOuter, .RadToolBar .rtbMiddle, .RadToolBar .rtbInner{
    background:#FFFFFF !important;
    background-image:none !important;
    border-color:#E3E8F0 !important;
}
.RadToolBar .rtbWrap{ background-image:none !important; border:0 !important; }
.RadToolBar .rtbText{
    color:#233A5C !important;
    font-family:"Segoe UI Variable Text","Segoe UI",Inter,Roboto,Arial,sans-serif !important;
}
.RadToolBar .rtbItem:hover .rtbWrap, .RadToolBar .rtbItemHovered .rtbWrap{
    background:#EFF6E3 !important;
}
.RadToolBar .rtbSeparator{
    background:#E3E8F0 !important; background-image:none !important; width:1px !important;
}

/* ---------- RadMenu dropdowns on inner pages ---------- */
/* Telerik's script writes inline width/height on slides, groups, links and
   text spans while opening; when it measures wrong, submenus collapse to an
   icon strip. These !important rules beat every inline value. */
.RadMenu .rmSlide{
    overflow:visible !important;
    width:auto !important;
    height:auto !important;
}
.RadMenu .rmSlide .rmGroup{
    background:#FFFFFF !important;
    background-image:none !important;
    border:1px solid #E3E8F0 !important;
    border-radius:12px;
    box-shadow:0 22px 48px rgba(10,35,66,.20) !important;
    padding:6px !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
    min-width:220px;
    overflow:visible !important;
    white-space:nowrap;
}
/* Icons are taken out of the text flow entirely (absolute, vertically
   centered in the row) so no Telerik DOM variant can stack or indent
   them; labels get a uniform left padding instead. */
.RadMenu .rmSlide .rmGroup .rmItem{
    display:block !important;
    float:none !important;
    clear:none !important;
    width:auto !important;
    position:relative !important;
}
.RadMenu .rmSlide .rmGroup .rmItem .rmLeftImage{
    position:absolute !important;
    left:12px !important;
    top:50% !important;
    transform:translateY(-50%);
    margin:0 !important;
    float:none !important;
}
.RadMenu .rmSlide .rmLink{
    display:block !important;
    width:auto !important;
    height:auto !important;
    white-space:nowrap !important;
    padding:7px 14px 7px 38px !important;
}
.RadMenu .rmSlide .rmLink .rmText{
    display:inline !important;
    float:none !important;
    width:auto !important;
    padding:0 !important;
    white-space:nowrap !important;
    overflow:visible !important;
}
.RadMenu .rmSlide .rmLink, .RadMenu .rmSlide .rmLink .rmText{
    background-image:none !important;
    color:#233A5C !important;
    border:0 !important;
}
.RadMenu .rmSlide .rmLink{ background:none !important; border-radius:8px; }
.RadMenu .rmSlide .rmLink:hover, .RadMenu .rmSlide .rmItem.rmFocused > .rmLink{
    background:#EFF6E3 !important; color:#0F3460 !important;
}

/* ---------- RadButton / decorated buttons ---------- */
a.RadButton, .RadButton{
    background-image:none !important;
}
.RadButton .rbText{ font-family:inherit; }
/* RadFormDecorator adds rfd* marker classes to <body> — only ever match rfd* on
   concrete button elements, never as a bare class selector. */
a.rfdButton, a.rfdSkinnedButton, input.rfdSkinnedButton, button.rfdSkinnedButton{
    background:#83B735 !important;
    background-image:none !important;
    border:1px solid #6C9C27 !important;
    border-radius:8px !important;
}
a.rfdButton span, a.rfdSkinnedButton span{
    color:#FFFFFF !important;
    background-image:none !important;
}

/* keep access-key letters visible inside toolbars/menus */
.RadToolBar .rtbWrap u, .RadToolBar .rtbText u, .RadMenu .rmText u{ color:inherit !important; }

/* ---------- Telerik loading panels / misc ---------- */
.RadAjax .raDiv, .RadAjax .raColor{ border-radius:10px; }
.RadPicker .rcCalPopup, .RadPicker .rcTimePopup{ opacity:.85; }
.RadPicker .rcCalPopup:hover, .RadPicker .rcTimePopup:hover{ opacity:1; }