/* sportinn shared UI styles (auth + client menu)
NOTE: Auth pages use so these rules don't affect the app pages.
*/
* {
box-sizing: border-box;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
body {
margin: 0;
color: #111827;
}
body.auth {
background: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
/* login / register container */
.auth-container {
width: 100%;
max-width: 420px;
background: #fff;
border-radius: 24px;
box-shadow: 0 10px 25px rgba(15,23,42,0.08);
padding: 40px 32px;
text-align: center;
}
/* logo */
.auth-logo img {
width: 220px;
height: 220px;
object-fit: contain;
padding: 22px;
border-radius: 18px;
border: 1px solid #e5e7eb;
background: #fff;
opacity: 0.95;
}
.auth-logo span {
display: block;
font-size: 26px;
font-weight: 700;
color: #111827;
margin-top: 8px;
}
/* headings */
h1 {
font-size: 22px;
font-weight: 600;
margin: 16px 0 8px;
}
.subtitle {
font-size: 14px;
color: #6b7280;
margin-bottom: 20px;
}
/* form inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"] {
width: 100%;
padding: 12px;
border-radius: 10px;
border: 1px solid #e5e7eb;
background: #f9fafb;
transition: all 0.2s ease;
font-size: 14px;
margin-bottom: 12px;
}
input:focus {
border-color: #111827;
background: #fff;
outline: none;
box-shadow: 0 0 0 3px rgba(17,24,39,0.05);
}
/* checkbox */
.checkbox {
display: flex;
align-items: center;
font-size: 13px;
margin-bottom: 10px;
}
.checkbox input {
margin-right: 8px;
}
/* buttons */
.btn {
width: 100%;
background: #111827;
color: #fff;
border: none;
border-radius: 12px;
padding: 12px;
font-size: 15px;
cursor: pointer;
transition: all 0.2s ease;
}
.btn:hover {
background: #030712;
}
/* link section */
.links {
text-align: center;
margin-top: 16px;
font-size: 14px;
color: #4b5563;
}
.links a {
color: #111827;
text-decoration: none;
font-weight: 500;
}
.links a:hover {
text-decoration: underline;
}
/* separator line */
.separator {
height: 1px;
background: #e5e7eb;
margin: 16px auto;
width: 80%;
border-radius: 1px;
}
/* alert messages */
.alert {
border-radius: 10px;
padding: 10px 14px;
font-size: 14px;
margin-bottom: 14px;
text-align: left;
display: flex;
align-items: center;
gap: 8px;
}
.alert-error {
background-color: #fef2f2;
border: 1px solid #fecaca;
color: #b91c1c;
}
.alert-error::before {
content: "⚠️";
}
.alert-success {
background-color: #ecfdf5;
border: 1px solid #a7f3d0;
color: #065f46;
}
.alert-success::before {
content: "✅";
}
/* input error text */
.input-error {
color: #b91c1c;
font-size: 13px;
margin-top: -6px;
margin-bottom: 10px;
display: block;
text-align: left;
}
/* responsive */
@media (max-width: 480px) {
.auth-container {
padding: 32px 22px;
border-radius: 18px;
}
}
/* ------------------------------
Client sidebar (registracijos.html)
------------------------------ */
:root{
--sp-blue:#1e4ea8;
--sp-blue-dark:#1a4290;
--sp-white:#ffffff;
--sp-line: rgba(255,255,255,.16);
--sp-hover: rgba(255,255,255,.08);
--sp-active: rgba(255,255,255,.12);
}
.sp-app{background:#f3f4f6; min-height:100vh;}
.sp-sidebar{
background: #fbfbfc;
color: var(--sp-white);
height: 100%;
min-height: 100vh;
display:flex;
flex-direction:column;
}
.sp-brand{
display:flex;
align-items:center;
gap:12px;
padding: 18px 18px 16px;
text-decoration:none;
color: var(--sp-white);
}
.sp-brand img{
width: 120px;
height: auto;
object-fit:contain;
filter: drop-shadow(0 8px 16px rgba(0,0,0,.25));
}
.sp-section-title{
padding: 10px 18px 6px;
font-size: 18px;
font-weight: 500;
opacity: .85;
}
.sp-nav{padding: 2px 0 6px;}
.sp-nav-item{
display:flex;
align-items:center;
gap:14px;
padding: 14px 14px;
margin: 6px 8px;
border-radius: 14px;
text-decoration:none;
color: var(--sp-white);
font-size: 20px;
font-weight: 700;
}
.sp-nav-item .sp-ico{
width: 30px;
text-align:center;
font-size: 22px;
opacity:.95;
}
.sp-nav-item:hover{background: var(--sp-hover);}
.sp-nav-item.is-active{background: var(--sp-active);}
.sp-divider{
height: 1px;
background: var(--sp-line);
margin: 14px 18px;
border-radius: 999px;
}
/* Bottom navigation (phones) */
.sp-bottom-nav{
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
background: #0b0f14;
border-top: 1px solid rgba(255,255,255,.10);
padding: 10px 8px 12px;
display:none;
}
.sp-bottom-nav-inner{
display:grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
align-items:center;
}
.sp-bottom-item{
text-decoration:none;
color: rgba(255,255,255,.78);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap: 4px;
padding: 6px 4px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
.sp-bottom-item i{font-size: 18px;}
.sp-bottom-item.is-active{color: #fff; background: rgba(255,255,255,.08);}
/* Responsive behavior */
@media (max-width: 768px){
.sp-bottom-nav{display:block;}
.left-side.sidebar-offcanvas{display:none !important;}
.right-side{padding-bottom: 84px;}
}
/* Define 2 column template */
.right-side,
.left-side {
min-height: 100%;
display: block;
}
/*right side - contins main content*/
.right-side {
background-color: #f9f9f9;
margin-left: 220px;
}
/*left side - contains sidebar*/
.left-side {
position: absolute;
width: 220px;
top: 0;
}
@media screen and (min-width: 992px) {
.left-side {
top: 70px;
}
/*Right side strech mode*/
.right-side.strech {
margin-left: 0;
}
.right-side.strech > .content-header {
margin-top: 0px;
}
/* Left side collapse */
.left-side.collapse-left {
left: -220px;
}
}
/*Give content full width on xs screens*/
@media screen and (max-width: 992px) {
.right-side {
margin-left: 0;
}
}
/* --- Updated typography to match reference screenshot --- */
.class-row {
padding: 14px 0;
}
.class-title {
font-size: 16px;
font-weight: 600;
line-height: 1.3;
margin-bottom: 6px;
}
.class-instructor {
font-size: 14px;
font-weight: 500;
color: #6b7280;
}
.class-meta {
font-size: 13px;
font-weight: 400;
line-height: 1.4;
color: #8a8f98;
gap: 12px;
}
.class-meta i {
font-size: 13px;
opacity: 0.7;
}
/* Sidebar/menu typography & grouping (inherits colors from existing variables in AdminLTE.css) */
.sp-menu-groups{padding-bottom: 18px;}
.sp-group-title{
padding: 10px 18px 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .85;
display:flex;
align-items:center;
gap: 10px;
}
.sp-group-emoji{font-size: 14px; line-height: 1;}
.sp-nav-item{
font-size: 16px;
font-weight: 600;
padding: 12px 14px;
}
.sp-nav-item[aria-disabled="true"]{
opacity: .6;
pointer-events: none;
}
/* Bottom nav uses existing styles but allow button */
.sp-bottom-btn{
border:0;
background:transparent;
width:100%;
}
.sp-bottom-btn:focus{outline: none;}
.sp-bottom-item{cursor:pointer;}
.sp-bottom-item[aria-disabled="true"]{opacity:.7; pointer-events:none;}
/* Mobile drawer */
.sp-no-scroll{overflow:hidden;}
.sp-mobile-drawer{
position:fixed;
inset:0;
z-index:10000;
display:none;
}
.sp-mobile-drawer.is-open{display:block;}
.sp-mobile-drawer-backdrop{
position:absolute;
inset:0;
background: rgba(0,0,0,.45);
}
.sp-mobile-drawer-sheet{
position:absolute;
left:0;
right:0;
bottom:0;
background: var(--sp-blue);
color: var(--sp-white);
border-top-left-radius: 18px;
border-top-right-radius: 18px;
max-height: 80vh;
overflow:auto;
box-shadow: 0 -18px 45px rgba(0,0,0,.35);
}
.sp-mobile-drawer-handle{
width: 46px;
height: 5px;
border-radius: 999px;
background: rgba(255,255,255,.35);
margin: 10px auto 2px;
}
.sp-mobile-drawer-content{padding: 8px 0 18px;}
.sp-mobile-title{
padding: 10px 18px 0;
font-size: 14px;
font-weight: 700;
letter-spacing: .02em;
opacity: .95;
}
@media (max-width: 768px){
/* Make bottom labels fit better */
.sp-bottom-item span{font-size: 11px;}
}