/* ==========================================================================
   ezPMS — Dermatology Practice Management System
   Design system matching the team's approved mockups (teal + green, clean clinical SaaS)
   ========================================================================== */

:root{
  --teal-900:#1F6B79;
  --teal-700:#2B8C9E;
  --teal-600:#2B8C9E;
  --teal-500:#28B3B3;
  --teal-100:#E3F3F5;
  --teal-50:#F1F9FA;
  --sidebar-grad-top:#2B8C9E;
  --sidebar-grad-bottom:#28B3B3;

  --green-600:#3AB02D;
  --green-100:#EDF9EF;

  --ink:#303030;
  --muted:#6B6A6A;
  --muted-2:#8A8A8A;
  --muted-3:#9D9D9D;
  --border:rgba(208,208,208,.87);
  --bg:#F4F7F8;
  --surface:#FFFFFF;
  --surface-alt:#FCFCFD;
  --search-bg:#F6F6F6;

  --danger:#E5484D;
  --danger-100:#F9EDED;
  --warn:#E0A030;
  --warn-100:#F9F8ED;
  --info:#5B93E8;
  --info-100:#EDF6F9;
  --pink:#EC4899;
  --pink-100:#FCE8F3;

  --radius-sm:8px;
  --radius-md:15px;
  --shadow-card:0 2px 10px rgba(15,60,68,.06);
  --shadow-pop:0 20px 50px rgba(15,60,68,.18);
  --sidebar-w:250px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Lato',sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:14.5px;
  line-height:1.55;
}
h1,h2,h3,h4,h5,h6,.font-display{font-family:'Lato',sans-serif; font-weight:700; color:var(--ink); margin:0;}
p{margin:0 0 .6em; color:var(--muted);}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
::selection{background:var(--teal-100); color:var(--teal-900);}
:focus-visible{outline:2px solid var(--teal-500); outline-offset:2px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Lato',sans-serif; font-weight:700; font-size:14px;
  padding:11px 20px; border-radius:var(--radius-sm); border:1.5px solid transparent;
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-teal{background:var(--teal-700); color:#fff;}
.btn-teal:hover{background:var(--teal-900); color:#fff; box-shadow:0 10px 22px rgba(18,95,107,.28);}
.btn-green{background:var(--green-600); color:#fff;}
.btn-green:hover{box-shadow:0 10px 22px rgba(47,174,102,.28); color:#fff;}
.btn-outline{background:#fff; border-color:var(--border); color:var(--ink);}
.btn-outline:hover{border-color:var(--teal-500); color:var(--teal-700);}
.btn-outline-green{background:#fff; border-color:var(--green-600); color:var(--green-600);}
.btn-outline-green:hover{background:var(--green-100);}
.btn-outline-teal{background:#fff; border-color:var(--teal-600); color:var(--teal-700);}
.btn-outline-teal:hover{background:var(--teal-50);}
.btn-danger-outline{background:#fff; border-color:var(--danger); color:var(--danger);}
.btn-danger-outline:hover{background:var(--danger-100);}
.btn-sm{padding:8px 14px; font-size:13px;}
.btn-block{width:100%;}
.btn-icon{width:38px; height:38px; padding:0; border-radius:var(--radius-sm);}

/* ---------- Layout shell ---------- */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:linear-gradient(180deg,var(--sidebar-grad-top),var(--sidebar-grad-bottom));
  color:#fff; display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:1000;
  transition:transform .25s ease;
}
.sidebar-brand{display:flex; align-items:center; gap:10px; padding:24px 22px 18px;}
.sidebar-brand .logo-icon{
  width:34px; height:34px; background:#fff; border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:var(--teal-700); font-size:18px; flex-shrink:0;
}
.sidebar-brand .logo-text{font-family:'Lato',sans-serif; font-weight:600; font-size:20px; color:#fff;}
.sidebar-brand .logo-text b{font-weight:700;}
.sidebar-nav{flex:1; overflow-y:auto; padding:6px 14px 20px;}
.sidebar-nav a, .sidebar-nav .nav-parent{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--radius-sm);
  color:#D6ECEF; font-size:14px; font-weight:500; margin-bottom:3px; cursor:pointer;
}
.sidebar-nav a i, .sidebar-nav .nav-parent i{font-size:16px; width:18px; text-align:center; flex-shrink:0;}
.sidebar-nav a:hover, .sidebar-nav .nav-parent:hover{background:rgba(255,255,255,.08); color:#fff;}
.sidebar-nav a.active{background:#fff; color:var(--teal-700); font-weight:700; box-shadow:0 6px 16px rgba(0,0,0,.12);}
.sidebar-sub{padding-left:30px; display:none;}
.sidebar-sub.open{display:block;}
.sidebar-sub a{padding:9px 14px; font-size:13.5px; font-weight:400;}
.nav-section-label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#7FB8C0; padding:16px 14px 6px;}
.sidebar-toggle{display:none;}

.main-area{flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-height:100vh;}
.topbar{
  background:#fff; border-bottom:1px solid var(--border); padding:14px 28px;
  display:flex; align-items:center; gap:20px; position:sticky; top:0; z-index:500;
}
.topbar .date-label{font-size:13.5px; color:var(--muted); font-weight:500; white-space:nowrap;}
.institution-badge{
  display:flex; align-items:center; gap:8px; background:var(--danger-100); border:1px solid #F6C9CA;
  color:#B91C1C; padding:8px 14px; border-radius:20px; font-size:13.5px; font-weight:600; cursor:pointer; position:relative;
}
.institution-badge i.bi-geo-alt-fill{color:var(--danger);}
.institution-dropdown{
  position:absolute; top:calc(100% + 8px); left:0; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop); min-width:240px; padding:8px; display:none; z-index:600;
}
.institution-dropdown.open{display:block;}
.institution-dropdown a{display:block; padding:10px 12px; border-radius:6px; font-size:13.5px; color:var(--ink); font-weight:500;}
.institution-dropdown a:hover{background:var(--teal-50);}
.institution-dropdown a.current{background:var(--teal-100); color:var(--teal-700); font-weight:700;}
.topbar-spacer{flex:1;}
.topbar-tools{display:flex; align-items:center; gap:14px;}
.tool-btn{
  width:40px; height:40px; border-radius:50%; border:none; background:var(--bg); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:17px; cursor:pointer; position:relative; flex-shrink:0;
}
.tool-btn .badge-count{
  position:absolute; top:-2px; right:-2px; background:var(--danger); color:#fff; font-size:10px; font-weight:700;
  width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid #fff;
}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip .avatar{width:38px; height:38px; border-radius:50%; background:var(--teal-100); color:var(--teal-700); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0;}
.user-chip .name{font-size:13.5px; font-weight:700; line-height:1.2;}
.user-chip .role{font-size:12px; color:var(--muted);}
.mobile-menu-btn{display:none; background:none; border:none; font-size:22px; color:var(--ink); cursor:pointer;}

.page-content{padding:26px 28px 60px;}
.page-title{font-size:22px; font-weight:600; color:var(--teal-800,var(--teal-700)); margin-bottom:20px;}

@media (max-width:1080px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0); box-shadow:var(--shadow-pop);}
  .main-area{margin-left:0;}
  .mobile-menu-btn{display:flex; align-items:center;}
  .topbar .date-label{display:none;}
}
.sidebar-overlay{
  position:fixed; inset:0; background:rgba(15,45,50,.4); z-index:999; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.sidebar-overlay.open{opacity:1; pointer-events:auto;}

/* ---------- Cards ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-card);}
.card-pad{padding:22px 24px;}
.card-head{display:flex; align-items:center; justify-content:between; justify-content:space-between; margin-bottom:18px;}
.card-head h3{font-size:16px; font-weight:600; display:flex; align-items:center; gap:10px;}
.card-head h3 i{color:var(--teal-600);}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.stat-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:20px 22px; box-shadow:var(--shadow-card);}
.stat-card-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px;}
.stat-card-top span{font-size:13.5px; color:var(--muted); font-weight:500;}
.stat-icon{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;}
.stat-icon.blue{background:var(--info-100); color:var(--info);}
.stat-icon.orange{background:var(--warn-100); color:var(--warn);}
.stat-icon.green{background:var(--green-100); color:var(--green-600);}
.stat-icon.red{background:var(--danger-100); color:var(--danger);}
.stat-icon.pink{background:var(--pink-100); color:var(--pink);}
.stat-value{font-size:34px; font-weight:700; font-family:'Lato',sans-serif; color:var(--ink);}

@media (max-width:1080px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.stat-grid{grid-template-columns:1fr;}}

/* Patient card (dashboard "recently accessed") */
.patient-mini-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:18px; box-shadow:var(--shadow-card);}
.patient-mini-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.patient-mini-head .avatar{width:44px; height:44px; border-radius:50%; background:var(--teal-100); color:var(--teal-700); display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;}
.patient-mini-head h5{font-size:14.5px; margin-bottom:2px;}
.patient-mini-head span{font-size:12.5px; color:var(--muted);}
.patient-mini-row{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); margin-bottom:8px;}
.patient-mini-row i{color:var(--muted); width:15px; flex-shrink:0;}
.patient-mini-row b{color:var(--muted); font-weight:500; margin-right:4px;}
.patient-mini-foot{display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--border);}
.patient-mini-foot .time{font-size:12px; color:var(--muted);}

.simple-list-row{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border);}
.simple-list-row:last-child{border-bottom:none;}
.simple-list-row .avatar{width:38px; height:38px; border-radius:50%; background:var(--teal-100); color:var(--teal-700); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0;}
.simple-list-row h6{font-size:13.5px; margin-bottom:2px;}
.simple-list-row span{font-size:12px; color:var(--muted);}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;}
table.data-table{width:100%; border-collapse:collapse; font-size:13.5px;}
table.data-table thead th{
  text-align:left; padding:12px 16px; background:var(--bg); color:var(--muted); font-weight:600; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;
}
table.data-table thead th:first-child{border-radius:8px 0 0 8px;}
table.data-table thead th:last-child{border-radius:0 8px 8px 0;}
table.data-table tbody td{padding:14px 16px; border-bottom:1px solid var(--border); vertical-align:middle;}
table.data-table tbody tr:hover{background:var(--teal-50);}
.row-menu-btn{background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; padding:4px 8px;}

.status-pill{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; font-size:12px; font-weight:700;}
.status-pill.active{background:var(--green-100); color:var(--green-600);}
.status-pill.pending{background:var(--warn-100); color:#B7791F;}
.status-pill.voided{background:var(--danger-100); color:var(--danger);}
.status-pill.inactive{background:var(--bg); color:var(--muted);}

/* ---------- Forms ---------- */
.form-label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:8px;}
.form-label .req{color:var(--danger);}
.form-control{
  width:100%; border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:11px 14px;
  font-family:'Lato',sans-serif; font-size:13.5px; background:#fff; color:var(--ink);
}
.form-control:focus{outline:none; border-color:var(--teal-500); box-shadow:0 0 0 3px var(--teal-100);}
.input-icon-wrap{position:relative;}
.input-icon-wrap .form-control{padding-right:40px;}
.input-icon-wrap i{position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:15px;}
textarea.form-control{min-height:100px; resize:vertical;}
.form-row{display:grid; gap:20px;}
.form-row.cols-2{grid-template-columns:1fr 1fr;}
.form-row.cols-3{grid-template-columns:1fr 1fr 1fr;}
.form-row.cols-4{grid-template-columns:1fr 1fr 1fr 1fr;}
.field-block{margin-bottom:20px;}
@media (max-width:900px){.form-row.cols-2,.form-row.cols-3,.form-row.cols-4{grid-template-columns:1fr;}}

.toggle-btn-group{display:flex; gap:10px;}
.toggle-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; background:#fff;
}
.toggle-btn.selected{background:var(--teal-700); border-color:var(--teal-700); color:#fff;}

.tag-input-box{border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; display:flex; flex-wrap:wrap; gap:6px; min-height:48px; align-items:center;}
.tag-chip{display:inline-flex; align-items:center; gap:6px; background:var(--teal-100); color:var(--teal-700); padding:5px 10px; border-radius:16px; font-size:12.5px; font-weight:600;}
.tag-chip button{background:none; border:none; color:var(--teal-700); cursor:pointer; font-size:13px; display:flex;}
.tag-input-box input{border:none; outline:none; flex:1; min-width:100px; font-size:13.5px; padding:4px;}

.family-search-box{background:var(--bg); border:1px dashed var(--border); border-radius:var(--radius-md); padding:18px;}
.family-chip{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 14px;}
.family-chip .avatar{width:34px; height:34px; border-radius:50%; background:var(--teal-100); color:var(--teal-700); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px;}
.family-chip .info h6{font-size:13px; margin-bottom:1px;}
.family-chip .info span{font-size:11.5px; color:var(--muted);}
.family-chip .remove{margin-left:6px; background:none; border:none; color:var(--muted); cursor:pointer;}

/* Checkbox */
.check-row{display:flex; align-items:center; gap:10px; font-size:13.5px;}
.check-row input[type="checkbox"]{width:17px; height:17px; accent-color:var(--teal-600);}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(15,45,50,.45); z-index:1500; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease; padding:20px;
}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal-box{background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-pop); width:100%; max-width:640px; max-height:88vh; overflow-y:auto;}
.modal-box.wide{max-width:760px;}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:22px 26px; border-bottom:1px solid var(--border);}
.modal-head h3{font-size:19px; font-weight:600; color:var(--teal-700);}
.modal-close{background:var(--bg); border:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted);}
.modal-body{padding:24px 26px;}
.modal-foot{padding:18px 26px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:12px;}

.added-item-card{background:var(--teal-50); border:1px solid var(--teal-100); border-radius:var(--radius-sm); padding:14px; position:relative;}
.added-item-card h6{font-size:13.5px; color:var(--teal-800,var(--teal-700)); margin-bottom:6px;}
.added-item-card span{font-size:12px; color:var(--muted); display:block;}
.added-item-card .remove-x{position:absolute; top:10px; right:10px; background:none; border:none; color:var(--muted); cursor:pointer;}
.tip-box{display:flex; gap:12px; background:var(--teal-50); border:1px solid var(--teal-100); border-radius:var(--radius-sm); padding:14px; font-size:12.5px; color:var(--teal-800,var(--teal-700));}
.tip-box i{color:var(--teal-600); font-size:16px; flex-shrink:0;}

/* ---------- Prescription builder / print preview ---------- */
.rx-grid{display:grid; grid-template-columns:1fr 360px; gap:22px; align-items:start;}
@media (max-width:1180px){.rx-grid{grid-template-columns:1fr;}}
.rx-preview{
  position:sticky; top:90px; border:2px dashed var(--teal-200,#BEE3E8); border-radius:var(--radius-md); background:#fff; padding:0;
}
.rx-preview-head{padding:20px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px;}
.rx-preview-head i{color:var(--teal-700); font-size:20px;}
.rx-preview-head h4{font-size:15px; color:var(--teal-700);}
.rx-preview-body{padding:20px 22px; font-size:13px;}
.rx-preview-body .rx-line{margin-bottom:6px; padding-left:14px;}
.rx-preview-body h6{font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:16px 0 6px;}
.rx-preview-body h6:first-child{margin-top:0;}
.rx-void-watermark{
  position:absolute; top:40%; left:50%; transform:translate(-50%,-50%) rotate(-18deg); font-size:52px; font-weight:800;
  color:rgba(229,72,77,.18); font-family:'Lato',sans-serif; pointer-events:none; letter-spacing:.1em;
}

/* Detail info grid (patient details in prescription builder) */
.detail-info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px 24px;}
.detail-info-item{display:flex; align-items:flex-start; gap:10px;}
.detail-info-item i{color:var(--teal-600); font-size:15px; margin-top:2px;}
.detail-info-item span{display:block; font-size:11.5px; color:var(--muted); margin-bottom:2px;}
.detail-info-item b{font-size:13.5px;}
@media (max-width:700px){.detail-info-grid{grid-template-columns:1fr 1fr;}}

/* ---------- Tabs ---------- */
.tab-strip{display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:22px; overflow-x:auto;}
.tab-item{padding:13px 18px; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap; display:flex; align-items:center; gap:8px;}
.tab-item.active{color:var(--teal-700); border-color:var(--teal-700);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* Timeline (patient history) */
.timeline-item{display:flex; gap:16px; padding-bottom:24px; position:relative;}
.timeline-item::before{content:""; position:absolute; left:17px; top:38px; bottom:0; width:2px; background:var(--border);}
.timeline-item:last-child::before{display:none;}
.timeline-dot{width:36px; height:36px; border-radius:50%; background:var(--teal-100); color:var(--teal-700); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:15px; z-index:1;}
.timeline-card{flex:1; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px;}
.timeline-card-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; flex-wrap:wrap; gap:8px;}
.institution-tag{background:var(--teal-100); color:var(--teal-700); font-size:11px; font-weight:700; padding:4px 10px; border-radius:12px;}

/* Permission matrix */
.perm-matrix{width:100%; border-collapse:collapse; font-size:13px;}
.perm-matrix th, .perm-matrix td{padding:11px 14px; border-bottom:1px solid var(--border); text-align:center;}
.perm-matrix th{background:var(--bg); font-size:12px; text-transform:uppercase; color:var(--muted);}
.perm-matrix td:first-child, .perm-matrix th:first-child{text-align:left; font-weight:600;}
.perm-matrix input[type=checkbox]{width:17px; height:17px; accent-color:var(--teal-600);}

/* Auth pages (login / select institution) */
.auth-split{display:grid; grid-template-columns:1fr 1fr; min-height:100vh;}
.auth-visual{background:linear-gradient(150deg,var(--sidebar-grad-top),var(--sidebar-grad-bottom)); display:flex; align-items:center; justify-content:center; padding:40px;}
.auth-visual img{max-width:480px;}
.auth-panel{display:flex; flex-direction:column; justify-content:center; padding:60px; max-width:460px; margin:0 auto; width:100%;}
.auth-logo{display:flex; align-items:center; gap:10px; margin-bottom:36px;}
.auth-logo .logo-icon{width:38px; height:38px; background:var(--teal-100); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--teal-700); font-size:20px;}
.auth-logo .logo-text{font-family:'Lato',sans-serif; font-weight:600; font-size:24px; color:var(--teal-800,var(--teal-700));}
.auth-panel h2{font-size:24px; margin-bottom:6px;}
.auth-panel > p{margin-bottom:28px;}
.institution-option{
  display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); margin-bottom:10px; cursor:pointer; font-size:14px; font-weight:500;
}
.institution-option:hover{border-color:var(--teal-500);}
.institution-option.selected{border-color:var(--teal-700); background:var(--teal-50); font-weight:700; color:var(--teal-700);}
@media (max-width:900px){.auth-split{grid-template-columns:1fr;} .auth-visual{display:none;}}

/* Empty state */
.empty-state{text-align:center; padding:60px 20px; color:var(--muted);}
.empty-state i{font-size:36px; margin-bottom:12px; display:block; color:var(--teal-300,#8FC7CE);}

/* Toast (unsaved changes etc) */
.confirm-banner{background:var(--warn-100); border:1px solid #F0D8A8; color:#8A5A00; padding:12px 16px; border-radius:var(--radius-sm); font-size:13px; display:flex; align-items:center; gap:10px; margin-bottom:18px;}

/* ==========================================================================
   Responsive tweaks + PRINT (Print Prescription button)
   ========================================================================== */
@media (max-width:768px){
  .page-content{padding:20px 16px 50px;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .form-row.cols-4{grid-template-columns:1fr 1fr;}
  .detail-info-grid{grid-template-columns:1fr 1fr;}
  .cast-grid{grid-template-columns:repeat(2,1fr);}
}
@media print{
  .sidebar, .topbar, .mobile-menu-btn, .breadcrumb-bar, .modal-overlay, #backToTop,
  .rx-grid > div:first-child, .rx-preview .btn{display:none !important;}
  .main-area{margin-left:0 !important;}
  .rx-grid{display:block !important;}
  .rx-preview{position:static !important; border:1px solid #ccc !important; box-shadow:none !important;}
  body{background:#fff !important;}
}