/* =========================================================
   MAHARUDRA CONSTRUCTION — MODERN LIGHT UI
   Shared visual system for every page
   ========================================================= */
:root{
  --mr-primary:#1769aa;
  --mr-primary-dark:#0d4f86;
  --mr-accent:#1769aa;
  --mr-success:#20a464;
  --mr-danger:#dc4c4c;
  --mr-info:#3b82c4;
  --mr-purple:#7456c8;
  --mr-sidebar:#ffffff;
  --mr-bg:#f5f7fb;
  --mr-surface:#ffffff;
  --mr-surface-soft:#f8faff;
  --mr-text:#172033;
  --mr-muted:#748096;
  --mr-border:#e5eaf2;
  --mr-border-strong:#d7dfeb;
  --mr-radius:16px;
  --mr-shadow:0 8px 28px rgba(23,42,70,.07);
  --mr-shadow-hover:0 14px 35px rgba(23,42,70,.11);
  --mr-font:Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--mr-bg)!important;
  color:var(--mr-text)!important;
  font-family:var(--mr-font)!important;
  transition:background .25s ease,color .25s ease;
}
button,a,input,select,textarea{font-family:inherit}
button{cursor:pointer}

/* =========================
   SIDEBAR
   ========================= */
.sidebar{
  width:238px!important;
  background:var(--mr-sidebar)!important;
  color:var(--mr-text)!important;
  padding:14px 10px 18px!important;
  border-right:1px solid var(--mr-border)!important;
  box-shadow:4px 0 22px rgba(23,42,70,.035)!important;
  overflow-y:auto;
}

.logo{
  background:#fff!important;
  border:1px solid var(--mr-border)!important;
  border-radius:16px!important;
  padding:10px!important;
  margin:0 4px 14px!important;
  box-shadow:0 4px 16px rgba(23,42,70,.05)!important;
}
.logo img{
  width:92px!important;
  height:92px!important;
  object-fit:contain!important;
}

.company{
  background:#fff!important;
  border-bottom:0!important;
  border-radius:12px!important;
  margin:0 4px 10px!important;
}
.company img{max-width:175px}

.menu{
  margin-top:8px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
}
.menu a{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  min-height:46px!important;
  padding:11px 14px!important;
  margin:0 2px!important;
  border-radius:11px!important;
  color:#566277!important;
  background:transparent!important;
  text-decoration:none!important;
  font-size:14px!important;
  font-weight:600!important;
  transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease!important;
}
.menu a span:first-child{font-size:17px;line-height:1}
.menu a:hover{
  background:#f1f6fc!important;
  color:var(--mr-primary)!important;
  transform:translateX(2px);
}
.menu a.active{
  background:#eaf3fc!important;
  color:var(--mr-primary)!important;
  box-shadow:inset 3px 0 0 var(--mr-primary)!important;
}
.menu a.active:hover{background:#e6f1fc!important}
.menu a[data-mr-settings]{
  margin-top:10px!important;
  border-top:1px solid var(--mr-border)!important;
  border-radius:0 0 11px 11px!important;
  padding-top:17px!important;
}
.menu a[data-mr-logout]{
  color:#c95151!important;
}
.menu a[data-mr-logout]:hover{
  background:#fff0f0!important;
  color:#c43f3f!important;
}

/* =========================
   MAIN + TOPBAR
   ========================= */
.main{margin-left:238px!important;min-height:100vh}
.topbar{
  height:72px!important;
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid var(--mr-border)!important;
  box-shadow:0 4px 20px rgba(23,42,70,.045)!important;
  padding:0 28px!important;
  backdrop-filter:blur(12px);
}
.topbar h2{font-size:20px!important;color:var(--mr-text)!important;font-weight:700}
.user{position:relative;cursor:pointer;user-select:none}
.user strong{color:#46536a!important;font-size:14px}
.user .user-icon{
  width:40px!important;height:40px!important;
  background:linear-gradient(135deg,var(--mr-primary),#4b91c9)!important;
  border:3px solid #edf5fc!important;
  box-shadow:0 4px 12px rgba(23,105,170,.18)!important;
  transition:transform .2s,box-shadow .2s!important;
}
.user:hover .user-icon{transform:scale(1.05);box-shadow:0 7px 18px rgba(23,105,170,.24)!important}

/* =========================
   CONTENT + HEADERS
   ========================= */
.content{padding:28px!important}
.page-header{margin-bottom:24px!important}
.page-header h1,.welcome h1{color:var(--mr-text)!important;letter-spacing:-.3px}
.page-header p,.welcome p{color:var(--mr-muted)!important}

/* =========================
   CARDS / BOXES / SECTIONS
   ========================= */
.box,.section,.summary-card,.card,.create-box,.quotation-box,.invoice-box{
  background:var(--mr-surface)!important;
  border:1px solid var(--mr-border)!important;
  border-radius:16px!important;
  box-shadow:var(--mr-shadow)!important;
}
.box:hover,.summary-card:hover,.card:hover{box-shadow:var(--mr-shadow-hover)!important}
.summary-card,.card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important}
.summary-card:hover,.card:hover{transform:translateY(-2px)!important}

/* =========================
   FORMS / INPUTS
   ========================= */
input,select,textarea,
.form-group input,.form-group textarea,.form-group select,
.search,.mr-setting-select{
  background:#fff!important;
  color:var(--mr-text)!important;
  border:1px solid var(--mr-border-strong)!important;
  border-radius:10px!important;
  transition:border-color .2s,box-shadow .2s,background .2s!important;
}
input:focus,select:focus,textarea:focus,
.form-group input:focus,.form-group textarea:focus,.form-group select:focus,
.search:focus,.mr-setting-select:focus{
  border-color:#8bb9dc!important;
  box-shadow:0 0 0 4px rgba(23,105,170,.08)!important;
  outline:none!important;
}
.form-group label{color:#5c687c!important}
th{background:#f7f9fc!important;color:#667286!important;border-bottom:1px solid var(--mr-border)!important}
td{border-bottom-color:var(--mr-border)!important;color:#39465b}

/* =========================
   BUTTONS
   ========================= */
.create-btn,.add-btn,.view-btn{
  background:linear-gradient(135deg,var(--mr-primary),#2c7fbb)!important;
  border:0!important;
  box-shadow:0 5px 14px rgba(23,105,170,.15)!important;
}
.save-btn{background:linear-gradient(135deg,#20a464,#2dbb78)!important}
.cancel-btn{background:#7c8795!important}
.delete-btn,.close-btn,.confirm-delete{background:#dc4c4c!important}
.edit-btn{background:#7456c8!important}
.print{background:#7456c8!important}
button.create-btn:hover,button.add-btn:hover,button.view-btn:hover,button.save-btn:hover,button.edit-btn:hover{filter:brightness(1.04);transform:translateY(-1px)}

/* =========================
   PROFILE POPUP
   ========================= */
.mr-profile-popup{
  position:absolute!important;
  right:0!important;
  top:calc(100% + 12px)!important;
  width:290px!important;
  background:#fff!important;
  color:var(--mr-text)!important;
  border:1px solid var(--mr-border)!important;
  border-radius:16px!important;
  box-shadow:0 18px 45px rgba(23,42,70,.15)!important;
  padding:16px!important;
  opacity:0;visibility:hidden;
  transform:translateY(-8px) scale(.98);
  transition:.2s ease!important;
  z-index:5000!important;
}
.mr-profile-popup.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.mr-profile-head{border-bottom-color:var(--mr-border)!important}
.mr-profile-avatar{background:linear-gradient(135deg,var(--mr-primary),#4b91c9)!important}
.mr-profile-role,.mr-profile-actions button{color:var(--mr-muted)}
.mr-profile-actions button:hover{background:#f2f6fb!important;color:var(--mr-primary)!important}
.mr-profile-actions .logout{color:#d24e4e!important}

/* =========================
   SETTINGS
   ========================= */
.mr-settings-grid{gap:20px!important}
.mr-setting-card{
  background:#fff!important;
  border:1px solid var(--mr-border)!important;
  border-radius:16px!important;
  box-shadow:var(--mr-shadow)!important;
}
.mr-setting-row{border-bottom-color:var(--mr-border)!important}
.mr-save-settings{
  background:linear-gradient(135deg,var(--mr-primary),#2c7fbb)!important;
  border:0!important;
  box-shadow:0 6px 16px rgba(23,105,170,.16)!important;
}
.mr-reset-settings{border-color:var(--mr-border-strong)!important}
.mr-color.active{outline:3px solid rgba(23,105,170,.14)!important}

/* =========================
   TOAST / MODALS
   ========================= */
.toast{border-radius:12px!important;box-shadow:0 12px 35px rgba(23,42,70,.16)!important}
.delete-confirm{background:rgba(19,30,45,.35)!important;backdrop-filter:blur(4px)}
.confirm-box{border:1px solid var(--mr-border)!important;border-radius:16px!important;box-shadow:0 20px 55px rgba(23,42,70,.18)!important}

/* =========================
   PAGE TRANSITIONS
   ========================= */
body.mr-page-enter{overflow:hidden}
body.mr-page-enter:after{content:"";position:fixed;inset:0;background:var(--mr-bg);z-index:999999;animation:mrPageOut .28s ease forwards;pointer-events:none}
body.mr-page-loading{animation:mrPageIn .35s ease}
@keyframes mrPageOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-14px)}}
@keyframes mrPageIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
body.mr-nav-leave > *{animation:mrNavLeave .18s ease forwards}
@keyframes mrNavLeave{to{opacity:0;transform:translateX(-10px)}}
body.mr-page-loaded > *{animation:mrNavEnter .28s ease both}
@keyframes mrNavEnter{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
body.mr-no-animations *,body.mr-no-animations *::before,body.mr-no-animations *::after{animation:none!important;transition:none!important}
body.mr-logout-page > *{animation:mrLogout .4s ease forwards!important}
@keyframes mrLogout{to{opacity:0;transform:scale(.98)}}

/* =========================
   COMPACT MODE
   ========================= */
body.mr-compact .content{padding:20px!important}
body.mr-compact .box,body.mr-compact .section,body.mr-compact .summary-card,body.mr-compact .card{padding:17px!important}
body.mr-compact .menu a{min-height:42px!important;padding:9px 14px!important}

/* =========================
   DARK MODE — OPTIONAL SETTING
   ========================= */
body[data-theme="dark"]{
  --mr-bg:#111923;
  --mr-surface:#182330;
  --mr-surface-soft:#1c2937;
  --mr-sidebar:#182330;
  --mr-text:#eef4fa;
  --mr-muted:#aab6c4;
  --mr-border:#2c3b4a;
  --mr-border-strong:#3a4a5a;
}
body[data-theme="dark"] .sidebar,
body[data-theme="dark"] .logo,
body[data-theme="dark"] .company,
body[data-theme="dark"] .topbar,
body[data-theme="dark"] .box,
body[data-theme="dark"] .section,
body[data-theme="dark"] .summary-card,
body[data-theme="dark"] .card,
body[data-theme="dark"] .create-box,
body[data-theme="dark"] .quotation-box,
body[data-theme="dark"] .invoice-box,
body[data-theme="dark"] .mr-setting-card,
body[data-theme="dark"] .mr-profile-popup{background:var(--mr-surface)!important;color:var(--mr-text)!important;border-color:var(--mr-border)!important}
body[data-theme="dark"] .logo img{filter:none}
body[data-theme="dark"] .menu a{color:#b8c4d1!important}
body[data-theme="dark"] .menu a:hover{background:#223243!important;color:#fff!important}
body[data-theme="dark"] .menu a.active{background:#223c55!important;color:#79b6e5!important}
body[data-theme="dark"] input,body[data-theme="dark"] select,body[data-theme="dark"] textarea,body[data-theme="dark"] .search{background:#111b25!important;color:#edf4fa!important;border-color:var(--mr-border)!important}
body[data-theme="dark"] th{background:#202e3c!important;color:#dce6ef!important}
body[data-theme="dark"] td{color:#d5dee8!important;border-color:var(--mr-border)!important}

/* =========================
   RESPONSIVE
   ========================= */
@media(max-width:900px){
  .sidebar{width:215px!important}
  .main{margin-left:215px!important}
  .content{padding:20px!important}
}
@media(max-width:700px){
  .sidebar{position:relative!important;width:100%!important;height:auto!important;min-height:auto!important;border-right:0!important;border-bottom:1px solid var(--mr-border)!important}
  .main{margin-left:0!important}
  .logo{width:105px;margin:0 auto 12px!important}
  .menu{display:grid!important;grid-template-columns:repeat(2,1fr);gap:5px!important}
  .menu a{margin:0!important}
  .topbar{padding:0 16px!important}
  .content{padding:16px!important}
  .mr-profile-popup{right:-5px!important}
}