/* Sydmoln brand layer. Core WHMCS styles and behaviour remain intact. */
:root {
 --sm-bg: #fcfafc; --sm-surface: #f7f3f7; --sm-card: #ffffff;
 --sm-ink: #191322; --sm-muted: #726879; --sm-border: #e8e1eb;
 --sm-pink: #ec278b; --sm-pink-hover: #bd1266; --sm-soft: #fff0f7;
 --sm-violet: #a54df0; --sm-cyan: #4ec5e4; --sm-dark: #110d1c;
 --sm-light: #f8f4fa; --sm-dark-muted: #bcb0c9; --sm-dark-border: #35283f;
 --sm-focus: 0 0 0 3px #ec278b26; --sm-shadow: 0 8px 28px #19132208;
 --primary: var(--sm-pink); --primary-lifted: var(--sm-pink-hover); --primary-accented: var(--sm-pink-hover);
 --primary-50: var(--sm-soft); --primary-100: #ffdaeb; --primary-200: #ffb2d3;
 --primary-300: #ff83b9; --primary-400: #f95aab; --primary-500: var(--sm-pink);
 --primary-600: #d51978; --primary-700: var(--sm-pink-hover); --primary-800: #961254; --primary-900: #65113c; --primary-950: #3a0922;
 --text: var(--sm-ink); --text-muted: var(--sm-muted); --bg: var(--sm-card); --bg-muted: var(--sm-bg);
 --bg-lifted: var(--sm-surface); --border-muted: var(--sm-border); --border: var(--sm-border);
 --bg-inverted: var(--sm-dark); --rounding-sm: .375rem; --rounding-md: .5rem; --rounding-lg: .75rem;
 --sm-gradient: linear-gradient(100deg,var(--sm-cyan),var(--sm-violet) 45%,var(--sm-pink));
}
body.sydmoln-client { background: var(--sm-bg); color: var(--sm-ink); font-family: Manrope, sans-serif; line-height: 1.65; }
.sydmoln-client h1,.sydmoln-client h2,.sydmoln-client h3,.sydmoln-client h4,.sm-logo { font-family: Sora,sans-serif; letter-spacing: 0; }
a { color: var(--sm-pink-hover); } a:hover { color: var(--sm-pink); }
#header.header { background: var(--sm-card); border-bottom: 1px solid var(--sm-border); }
#header .topbar { background: var(--sm-dark); color: var(--sm-light); border: 0; }
#header .topbar .btn,#header .topbar .input-group-text { color: var(--sm-light); background: transparent; border-color: var(--sm-dark-border); }
#header .navbar-light { background: var(--sm-card); padding: 12px 0; }
.sm-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 700; color: var(--sm-ink); }
.sm-logo img { display: block; object-fit: contain; }
#header .navbar-brand { margin: 0; }
#header .main-navbar-wrapper { background: var(--sm-card); border-top: 1px solid var(--sm-border); }
#header .navbar-nav .nav-link { font-weight: 600; color: var(--sm-muted); padding: 13px 16px; }
#header .navbar-nav .nav-link:hover,#header .navbar-nav .active > .nav-link { color: var(--sm-pink-hover); background: var(--sm-soft); }
#header .cart-btn { border: 1px solid var(--sm-border); border-radius: 50%; }
.master-breadcrumb { background: var(--sm-surface); border-bottom: 1px solid var(--sm-border); }
.master-breadcrumb .breadcrumb { background: transparent; font-size: 12px; padding: 14px 0; margin: 0; }
#main-body { padding-top: 36px; padding-bottom: 64px; min-height: 65vh; }
.card,.panel,.modal-content,.dropdown-menu { background: var(--sm-card); border: 1px solid var(--sm-border); border-radius: 8px; box-shadow: var(--sm-shadow); }
.card-header,.panel-heading { background: var(--sm-card); border-bottom: 1px solid var(--sm-border); padding: 20px; }
.card-header h3,.card-title { font-size: 16px; font-weight: 600; }
.card-body { padding: 22px; }
.card-footer { background: var(--sm-surface); border-color: var(--sm-border); }
.sidebar .card { box-shadow: none; }
.sidebar .card-header { background: var(--sm-dark); color: var(--sm-light); border-radius: 7px 7px 0 0; }
.sidebar .card-header h3 { color: inherit; }
.list-group-item { border-color: var(--sm-border); padding: 14px 20px; }
.list-group-item.active,.list-group-item.active:hover { background: var(--sm-soft); color: var(--sm-pink-hover); border-color: var(--sm-border); }
.list-group-item-action:hover { background: var(--sm-surface); }
.tiles { background: transparent; border: 0; }
.tiles .row { gap: 0; }
.tiles .tile { position: relative; display: block; margin: 6px; padding: 24px 20px; border: 1px solid var(--sm-border); border-radius: 8px; background: var(--sm-card); color: var(--sm-ink); box-shadow: var(--sm-shadow); min-height: 155px; transition: border-color .2s,transform .2s; }
.tiles .tile:hover { transform: translateY(-3px); border-color: var(--sm-pink); text-decoration: none; }
.tiles .tile .stat { font-family: Sora,sans-serif; font-size: 34px; font-weight: 600; line-height: 1.3; }
.tiles .tile .title { color: var(--sm-muted); font-size: 13px; margin-top: 7px; }
.tiles .tile > i { color: var(--sm-violet); font-size: 22px; opacity: 1; }
.tiles .tile .highlight { height: 3px; background: var(--sm-gradient); border-radius: 0 0 8px 8px; }
.btn { border-radius: 8px; font-weight: 600; font-size: 13px; padding: 10px 17px; white-space: normal; }
.btn-primary { background: var(--sm-pink); border-color: var(--sm-pink); color: var(--sm-card); }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active { background: var(--sm-pink-hover); border-color: var(--sm-pink-hover); color: var(--sm-card); }
.btn-default,.btn-outline-primary { background: var(--sm-card); color: var(--sm-ink); border-color: var(--sm-border); }
.btn-default:hover,.btn-outline-primary:hover { background: var(--sm-soft); border-color: var(--sm-pink); color: var(--sm-pink-hover); }
.btn:focus,.form-control:focus { box-shadow: var(--sm-focus); }
.btn-link { color: var(--sm-pink-hover); }
.form-control { border-radius: 8px; border: 1px solid var(--sm-border); color: var(--sm-ink); background: var(--sm-card); min-height: 44px; font-size: 14px; }
textarea.form-control { min-height: 110px; }
.form-control:focus { border-color: var(--sm-pink); background: var(--sm-card); color: var(--sm-ink); }
label { font-size: 13px; font-weight: 600; }
.input-group-text { background: var(--sm-surface); border-color: var(--sm-border); }
.table { color: var(--sm-ink); }
.table thead th,.dataTables_wrapper table thead th { background: var(--sm-surface); font-size: 12px; font-weight: 700; border-color: var(--sm-border); }
.table td,.table th { padding: 16px; border-color: var(--sm-border); vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background: var(--sm-bg); }
.table-hover tbody tr:hover { background: var(--sm-soft); }
.page-item.active .page-link { background: var(--sm-pink); border-color: var(--sm-pink); }
.page-link { color: var(--sm-pink-hover); border-color: var(--sm-border); }
.nav-tabs { border-color: var(--sm-border); }
.nav-tabs .nav-link.active { color: var(--sm-pink-hover); background: var(--sm-card); border-color: var(--sm-border); border-bottom-color: var(--sm-card); }
.logincontainer { max-width: 480px; margin: 24px auto; padding: 32px; background: var(--sm-card); border: 1px solid var(--sm-border); border-radius: 8px; box-shadow: var(--sm-shadow); }
#footer.footer { background: var(--sm-dark); color: var(--sm-dark-muted); border-top: 0; padding: 40px 0; }
#footer .sm-logo { color: var(--sm-light); }
#footer a { color: var(--sm-dark-muted); } #footer a:hover { color: var(--sm-light); }
#footer .sm-company,#footer .copyright { font-size: 12px; }
#footer .sm-footer-brand { margin-bottom: 16px; }
:focus-visible { outline: 2px solid var(--sm-pink); outline-offset: 3px; }
@media(max-width:767px) { #main-body { padding-top: 20px; padding-bottom: 32px; } .tiles .tile { padding: 20px 14px; min-height: 145px; } .tiles .tile .stat { font-size: 28px; } .logincontainer { padding: 22px; } .sm-logo { font-size: 21px; } .table-responsive { overflow-x: auto; } #footer .sm-company { overflow-wrap: anywhere; } }
@media(prefers-reduced-motion:reduce) { .tiles .tile { transition: none; } .tiles .tile:hover { transform: none; } }