/* ============================================================
Santosa theme overlay — aligns the legacy AdminLTE-based EMS
with the look/feel of spa.santosaphuket.com (sage/teal/stone,
Source Sans 3, rounded cards, signature Santosa script logo).
Loads AFTER AdminLTE + skin so its rules win without !important
spam wherever the cascade allows.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700;800&display=swap');
:root{
--teal:#3DBFB7; --teal-dark:#2A9E97; --teal-deep:#1A6E6A;
--sage:#A9B7A6; --sage-deep:#748677; --sage-soft:#EAF0E8;
--shell:#F7F4F6; --stone:#F5F1EB; --taupe:#8E8379;
--text:#1A2E3B; --text-mid:#2D4356; --text-soft:#64748B;
--border:#E6E0EB; --line:#EFEFE7; --white:#FFFFFF;
--bg:linear-gradient(180deg,#FCFBF8 0%,#F6F3ED 48%,#F2F5F0 100%);
--shadow-sm:0 1px 2px rgba(36,32,48,.05);
--shadow:0 8px 24px rgba(36,32,48,.06);
--shadow-lg:0 24px 56px rgba(58,52,45,.08);
}
/* ---------- base ---------- */
html,body{height:auto;min-height:100%}
body.skin-black-light,
body.hold-transition.skin-black-light{
font-family:'Source Sans 3',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
color:var(--text);
background:var(--bg);
background-attachment:fixed;
-webkit-font-smoothing:antialiased;
}
/* ---------- main header / topbar ---------- */
.skin-black-light .main-header > .logo,
.skin-black-light .main-header > .logo:hover{
background:transparent;
color:var(--text);
border-bottom:0;
border-right:1px solid var(--line);
height:64px;
line-height:64px;
display:flex;align-items:center;justify-content:center;
}
/* Show exactly one mark at a time. AdminLTE toggles which span is
visible via the .sidebar-collapse class on . The previous
theme rule forced both spans to display:flex, so two wordmarks
appeared. We hard-pin with !important because the original CSS
set display:flex which loses to AdminLTE's collapsed-state rules
only when specificities tie. */
.skin-black-light .main-header .logo .logo-lg{
display:flex !important;align-items:center;justify-content:center;height:64px;
}
.skin-black-light .main-header .logo .logo-mini{ display:none !important; }
/* When the sidebar is collapsed (mini state), AdminLTE adds
.sidebar-collapse to alongside .skin-black-light. The two
classes share the same element, so the selector must chain them
without whitespace. */
.skin-black-light.sidebar-collapse .main-header .logo .logo-lg{ display:none !important; }
.skin-black-light.sidebar-collapse .main-header .logo .logo-mini{
display:flex !important;align-items:center;justify-content:center;height:64px;
}
.skin-black-light .main-header .logo img,
.skin-black-light .main-header .logo #logo{
width:auto !important;
max-width:160px;
max-height:34px;
margin:0 !important;
/* Black wordmark on the transparent/light topbar — leave as-is. */
filter:none;
opacity:1;
}
.skin-black-light .main-header .logo-mini img{ max-width:42px; max-height:28px; }
.skin-black-light .main-header .navbar,
.skin-black-light .main-header .navbar-static-top{
background:#fff;
border-bottom:1px solid var(--line);
min-height:64px;
box-shadow:var(--shadow-sm);
}
.skin-black-light .main-header .sidebar-toggle{
color:var(--text-mid);
padding:22px 18px;
}
.skin-black-light .main-header .sidebar-toggle:hover{
background:var(--sage-soft);
color:var(--teal-deep);
}
.skin-black-light .main-header .sidebar-toggle:before{
font-family:FontAwesome;
content:"\f0c9";
font-size:18px;
}
/* topbar user pill */
.skin-black-light .navbar .nav > li.user-menu > a{
padding:12px 16px;
display:flex;align-items:center;gap:10px;
color:var(--text-mid);
font-weight:600;
font-size:13px;
border-left:1px solid var(--line);
background:transparent;
}
.skin-black-light .navbar .nav > li.user-menu > a:hover,
.skin-black-light .navbar .nav > li.user-menu.open > a{
background:var(--sage-soft);
color:var(--teal-deep);
}
.skin-black-light .navbar .nav > li.user-menu > a img.user-image{
width:28px;height:28px;border:1.5px solid var(--sage);margin:0;
}
.skin-black-light .navbar .nav > li.user-menu .dropdown-menu{
border:1px solid var(--line);
border-radius:14px;
box-shadow:0 18px 40px rgba(36,32,48,.12);
padding:6px;
margin-top:6px;
min-width:200px !important;
width:auto !important;
}
.skin-black-light .navbar .nav .dropdown-menu > li > a{
padding:10px 12px;
border-radius:10px;
color:var(--text-mid);
font-weight:500;
}
.skin-black-light .navbar .nav .dropdown-menu > li > a:hover{
background:var(--sage-soft);
color:var(--teal-deep);
}
.skin-black-light .navbar .nav .dropdown-menu .divider{
background:var(--line);margin:6px 4px;
}
/* ---------- sidebar ---------- */
.skin-black-light .main-sidebar,
.skin-black-light .left-side{
background:#FBF9F4;
border-right:1px solid var(--line);
box-shadow:none;
}
.skin-black-light .sidebar-menu > li > a{
color:var(--text-mid);
font-weight:500 !important;
font-size:14px;
padding:12px 18px;
border-left:3px solid transparent;
transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.skin-black-light .sidebar-menu > li > a > i{
color:var(--sage-deep);
font-size:15px;
width:22px;
}
.skin-black-light .sidebar-menu > li:hover > a,
.skin-black-light .sidebar-menu > li.active > a,
.skin-black-light .sidebar-menu > li > a:focus{
background:var(--sage-soft) !important;
color:var(--teal-deep) !important;
border-left-color:var(--teal-deep);
}
.skin-black-light .sidebar-menu > li:hover > a > i,
.skin-black-light .sidebar-menu > li.active > a > i{
color:var(--teal-deep);
}
.skin-black-light .sidebar-menu > li.header{
background:transparent;
color:var(--taupe);
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
padding:18px 18px 8px;
}
.skin-black-light .sidebar-menu > li{
border-bottom:1px solid rgba(116,134,119,.08) !important;
}
/* ---------- content wrapper ---------- */
.content-wrapper{
background:transparent !important;
padding-top:8px;
}
.content-wrapper > .content-header{
padding:18px 22px 6px;
}
.content-header > h1{
font-family:'Source Sans 3',system-ui,sans-serif;
font-weight:700;
color:var(--text);
font-size:22px;
}
.content-header > h1 > small{ color:var(--text-soft); font-weight:500; }
.content-header > .breadcrumb,
.custombreadcrumb{
background:transparent;
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
color:var(--taupe);
top:18px;
right:22px;
}
.content-header > .breadcrumb > li > a{ color:var(--sage-deep); }
.content-header > .breadcrumb > .active{ color:var(--text-mid); }
.content{ padding:8px 22px 22px; }
/* ---------- boxes / cards ---------- */
.box{
background:#fff;
border:1px solid var(--line);
border-radius:16px;
box-shadow:var(--shadow);
margin-bottom:22px;
}
.box.box-primary,.box.box-success,.box.box-info,.box.box-warning,.box.box-danger{
border-top-color:var(--line) !important;
}
.box-header{
border-bottom:1px solid var(--line);
padding:16px 20px;
border-radius:16px 16px 0 0;
}
.box-header.with-border{ border-bottom:1px solid var(--line); }
.box-header > .box-title{
font-weight:700;
color:var(--text);
font-size:16px;
}
.box-body{ padding:20px; }
.box-footer{
background:transparent;
border-top:1px solid var(--line);
border-radius:0 0 16px 16px;
padding:14px 20px;
}
/* ---------- buttons ---------- */
.btn{
border-radius:10px;
font-weight:600;
font-family:inherit;
padding:8px 16px;
border:1px solid transparent;
transition:all .15s ease;
}
.btn-primary,
.btn-success{
background:var(--sage-deep) !important;
background-color:var(--sage-deep) !important;
border-color:var(--sage-deep) !important;
color:#fff !important;
box-shadow:0 6px 16px rgba(116,134,119,.18);
}
.btn-primary:hover,.btn-success:hover,.btn-primary:focus,.btn-success:focus,
.btn-primary:active,.btn-success:active,.btn-primary.active,.btn-success.active{
background:#6B7B6D !important;
border-color:#6B7B6D !important;
color:#fff !important;
}
.btn.btn-color{
background-color:var(--sage-deep) !important;
border-color:var(--sage-deep) !important;
color:#fff !important;
}
.btn-default{
background:#fff;
color:var(--text-mid);
border-color:#D4DED0;
}
.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.hover{
background:var(--sage-soft) !important;
border-color:#C7D1C1 !important;
color:var(--teal-deep) !important;
}
.btn-info{
background:var(--teal-deep) !important;
border-color:var(--teal-deep) !important;
color:#fff !important;
}
.btn-info:hover,.btn-info:focus{
background:#155551 !important;
border-color:#155551 !important;
}
.btn-warning{
background:#D7A55A !important;
border-color:#D7A55A !important;
color:#fff !important;
}
.btn-danger,.deletecolor{
background:#C0392B !important;
border-color:#C0392B !important;
color:#fff !important;
}
.editcolor{
background:var(--teal-deep) !important;
color:#fff !important;
}
.btn-flat{ border-radius:10px !important; }
/* table action buttons */
table .btn-default:hover,table .btn-default:active,table .btn-default.hover{
background-color:var(--teal-deep) !important;
color:#fff !important;
border-color:var(--teal-deep) !important;
}
.dataTable .fa-pencil{ color:var(--teal-deep); }
.dataTable .fa-trash-o{ color:#C0392B; }
/* ---------- forms ---------- */
.form-control{
border-radius:10px;
border:1.5px solid #DDD5CA;
background:#fff;
color:var(--text);
padding:8px 12px;
font-family:inherit;
font-size:14px;
box-shadow:none;
transition:border-color .15s ease,background .15s ease;
}
.form-control:focus{
border-color:#C7D1C1;
background:#FCFDFC;
box-shadow:none;
outline:none;
}
label, .control-label, .f-label label{
color:var(--text-mid);
font-weight:600;
font-size:13px;
}
.has-feedback .form-control-feedback{ color:var(--taupe); }
fieldset{
border:1px solid var(--line) !important;
border-radius:14px;
padding:18px 22px !important;
}
fieldset legend, .b-r{
color:var(--text-mid);
font-weight:700;
background:#fff;
padding:0 10px;
}
/* ---------- tables / DataTables ---------- */
.table{
background:#fff;
font-size:14px;
}
.table > thead > tr > th{
background:#FBF9F4;
color:var(--taupe);
font-size:11px;
letter-spacing:1.2px;
text-transform:uppercase;
font-weight:700;
border-bottom:1px solid var(--line) !important;
padding:14px 13px;
}
.table > tbody > tr > td{
border-top:1px solid var(--line);
vertical-align:middle;
color:var(--text-mid);
}
.table-striped > tbody > tr:nth-of-type(odd){ background:#FCFBF8; }
.table-hover > tbody > tr:hover{ background:var(--sage-soft); }
.dataTables_wrapper .dataTables_filter input[type="search"]{
border-radius:10px;
border:1.5px solid #DDD5CA;
height:36px;
background-position:96% 50%;
}
.dataTables_wrapper .dataTables_length select{
border-radius:8px;
border:1.5px solid #DDD5CA;
padding:4px 8px;
}
a.dt-button{
border-radius:10px !important;
border:1px solid #D4DED0 !important;
background:#fff !important;
color:var(--text-mid) !important;
font-weight:600 !important;
padding:6px 14px !important;
height:auto !important;
font-size:13px !important;
}
a.dt-button:hover{
background:var(--sage-soft) !important;
color:var(--teal-deep) !important;
border-color:#C7D1C1 !important;
}
.pagination > li > a,
.pagination > li > span{
color:var(--text-mid);
border-color:var(--line);
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span{
background:var(--sage-deep) !important;
border-color:var(--sage-deep) !important;
color:#fff !important;
}
.pagination > li > a:hover{
background:var(--sage-soft);
color:var(--teal-deep);
border-color:#C7D1C1;
}
/* ---------- alerts ---------- */
.alert{
border-radius:12px;
border:1px solid transparent;
padding:12px 16px;
}
.alert-success{ background:#EDF7EE; border-color:#CFE5CE; color:#2E7D32; }
.alert-danger,.alert-error{ background:#FDECEA; border-color:#F5BCB5; color:#C0392B; }
.alert-warning{ background:#FFF6E5; border-color:#F2D9A0; color:#8C6A1F; }
.alert-info{ background:#E8F5F4; border-color:#BCE0DD; color:var(--teal-deep); }
/* ---------- modals ---------- */
.modal-content{
border-radius:16px;
border:1px solid var(--line);
box-shadow:0 24px 56px rgba(36,32,48,.18);
}
.modal-header{
border-bottom:1px solid var(--line);
padding:16px 22px;
border-radius:16px 16px 0 0;
}
.modal-title{ font-weight:700; color:var(--text); }
.modal-body{ padding:20px 22px; }
.modal-footer{
border-top:1px solid var(--line);
padding:14px 22px;
}
/* ---------- footer ---------- */
.main-footer{
background:transparent !important;
border-top:1px solid var(--line);
color:var(--text-soft);
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
padding:18px 22px;
}
/* ---------- login screen ---------- */
body.hold-transition.login-page,
body.hold-transition.register-page,
body.login-page,
body.register-page{
background:var(--bg) !important;
background-attachment:fixed;
min-height:100vh;
display:flex;align-items:center;justify-content:center;
padding:28px;
font-family:'Source Sans 3',system-ui,sans-serif;
}
.login-box,.register-box{
width:100%;max-width:420px;margin:0 auto;
}
.login-logo,.register-logo{
text-align:center;margin-bottom:0;
}
.login-logo a, .register-logo a{ color:var(--text); }
.login-logo img,
.login-logo p img{
width:auto !important;
height:auto !important;
max-width:220px !important;
max-height:72px !important;
display:block;margin:0 auto 8px;
}
.login-logo p{ margin:0; }
.login-logo b{
display:block;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--taupe);
font-weight:600;
margin-top:6px;
}
.login-box-body,.register-box-body{
background:#fff;
border:1px solid #E8E1D8;
border-radius:24px;
padding:36px 32px;
box-shadow:var(--shadow-lg);
}
.login-box-msg,.register-box-msg{
color:var(--text-mid);
font-weight:600;
margin-bottom:18px;
padding:0;
}
.login-box .form-control,
.register-box .form-control{
padding:12px 16px;
border-radius:12px;
border:1.5px solid #DDD5CA;
font-size:15px;
}
.login-box .has-feedback .form-control-feedback{
width:38px;height:38px;line-height:38px;color:var(--taupe);
}
.login-box .btn-primary,
.login-box .btn-color,
.register-box .btn-primary,
.register-box .btn-color{
padding:13px 16px;
border-radius:12px;
font-size:15px;
font-weight:700;
}
.login-box .forgot{
color:var(--sage-deep);
font-weight:600;
text-decoration:none;
margin:6px 0 14px;
}
.login-box .forgot:hover{ color:var(--teal-deep); text-decoration:underline; }
/* ---------- responsive tweaks ---------- */
@media (max-width:991px){
.skin-black-light .main-header > .logo{
width:100%;
height:56px;
line-height:56px;
border-right:0;
}
.skin-black-light .main-header .logo .logo-lg,
.skin-black-light .main-header .logo .logo-mini{ height:56px; }
.skin-black-light .main-header .navbar{ margin-left:0; min-height:0; }
.content-wrapper{ margin-left:0 !important; }
.main-footer{ margin-left:0 !important; }
/* Settings page uses vertical "tabs-left" — stack to horizontal
wrap on small screens so the panel below gets the full width. */
.tabbable.tabs-left > .nav-tabs,
.tabbable.tabs-left > .nav-tabs.col-md-3{
float:none !important;
width:100% !important;
border-right:0;
border-bottom:1px solid var(--line);
display:flex;flex-wrap:wrap;
}
.tabbable.tabs-left > .tab-content,
.tabbable.tabs-left > .tab-content.col-md-9{
margin-left:0 !important;
width:100% !important;
border-left:0;
}
.tabbable.tabs-left > .nav-tabs > li{ float:none; }
.tabbable.tabs-left > .nav-tabs > li > a{ border-radius:8px; margin:4px; }
}
@media (max-width:767px){
.content,.content-header{ padding-left:14px; padding-right:14px; }
.content-header > h1{ font-size:18px; }
.box-body{ padding:14px; }
.box-header{ padding:14px; }
.login-box-body,.register-box-body{ padding:26px 20px; }
.dataTables_wrapper{ overflow-x:auto; }
.table-responsive{ border:0; }
.navbar-custom-menu{ float:right; }
/* allow long tables to scroll horizontally */
.box-body > .table-responsive,
.box-body > .dataTables_wrapper{ -webkit-overflow-scrolling:touch; }
/* Box header title + action buttons stack vertically. The legacy
markup puts buttons inside .box-tools.pull-right which overflows
the title on phones. */
.box-header{
display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}
.box-header > .box-tools.pull-right{
position:static !important;
float:none !important;
width:100%;
display:flex;flex-wrap:wrap;gap:6px;
padding:0;
}
.box-header > .box-tools.pull-right > .btn,
.box-header > .box-tools.pull-right > .btn-sm{
flex:1 1 auto;min-width:0;font-size:12px;
}
/* DataTables length + buttons + filter row: stack instead of colliding. */
.dataTables_wrapper .row:first-child{ display:flex;flex-direction:column;gap:8px; }
.dataTables_wrapper .row:first-child > [class*="col-"]{
width:100% !important;float:none !important;text-align:left !important;
}
.dataTables_wrapper .dt-buttons,
.dataTables_wrapper .dataTables_filter,
.box-body .dt-buttons,
.box-body .dataTables_filter{ float:none !important; text-align:left !important; }
.dataTables_wrapper .dataTables_filter input[type="search"]{
width:100% !important; margin-left:0;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label{ display:block; }
.dataTables_wrapper .dataTables_paginate{ float:none !important; text-align:center; padding-top:8px; }
.dataTables_wrapper .dataTables_info{ text-align:center; padding-top:6px; }
/* Legacy custom.css fixed-percentage layouts — stack on mobile. */
.setting_block,.setting_content,
.inputsize,.profilesize,.btn-size,.genform{
width:100% !important;
float:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
.logo-holder{
margin-top:0 !important;
padding-left:0 !important;
float:none !important;
text-align:center !important;
}
.pad-box-primary{ padding:18px 14px !important; }
.content_padding{ padding:14px !important; }
/* Bootstrap form-horizontal: labels go above the fields on phones. */
.form-horizontal .control-label{
text-align:left;padding-top:0;margin-bottom:6px;
}
.form-horizontal .form-group > [class*="col-"]{ width:100%; }
/* Modal: full-width on phones with safe margins. */
.modal-dialog{ margin:10px; width:auto !important; }
/* Page-level inline floats (e.g. expenses "Sample Import file" link). */
.row a[style*="float: right"],
.row a[style*="float:right"]{
float:none !important;
display:inline-block;margin-top:8px;
}
/* Reports page: charts already render at 100% width, but tighten
the rigid min-height so they don't dwarf small screens. */
[id$="piechart"],[id$="barchart"]{ min-height:320px !important; }
}
@media (max-width:480px){
.skin-black-light .main-header .logo img{ max-width:130px; }
.content-header > h1{ font-size:16px; }
.btn{ padding:7px 12px; font-size:13px; }
.box-header > .box-title{ font-size:15px; }
.box-header > .box-tools.pull-right > .btn,
.box-header > .box-tools.pull-right > .btn-sm{ flex-basis:100%; }
.login-box-body,.register-box-body{ padding:22px 16px; border-radius:18px; }
.login-box,.register-box{ max-width:100%; }
}
/* Make all tables scroll horizontally on small screens without
needing each view to wrap them in .table-responsive. */
@media (max-width:767px){
.box-body > .table,
.box-body table.dataTable,
.box-body > .dataTables_wrapper > .row > [class*="col-"] > .table,
.box-body > .dataTables_wrapper table.dataTable{
display:block;
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
}
/* Universal safety net: never let runaway content blow out the viewport
horizontally, and keep raw ![]()
/