/* ============================================================
   RozHisab — Mobile Responsive Overrides
   Works WITH app.css. Covers public pages + edge cases.
   ============================================================ */

/* ── Safe area for notch devices ─── */
.app-shell{
  padding-bottom:env(safe-area-inset-bottom,0);
  padding-left:env(safe-area-inset-left,0);
  padding-right:env(safe-area-inset-right,0);
}

/* ══ PUBLIC PAGES (index, blog, forum, NRI landing etc.) ════ */

/* ── Public header ─── */
@media(max-width:900px){
  .pub-header-inner{padding:12px 16px!important;gap:10px!important}
  .pub-nav,.pub-nav-dropdown{display:none!important}
  .pub-hamburger{display:flex!important}
  .pub-nav-cta a.btn-ghost{display:none!important}
  .pub-nav-cta .btn{padding:7px 14px!important;font-size:.8rem!important}
}

/* ── Homepage nav ─── */
@media(max-width:900px){
  nav.pub-header,nav{padding:12px 16px!important}
  .nav-links{display:none!important}
  .nav-cta .btn:first-child{display:none!important}
}

/* ── Homepage hero ─── */
@media(max-width:900px){
  .hero{
    display:flex!important;
    flex-direction:column!important;
    padding:40px 20px 32px!important;
    gap:28px!important;
  }
  .hero h1{font-size:1.9rem!important;line-height:1.2!important}
  .hsub{font-size:.88rem!important;max-width:100%!important}
  .hbtns{display:flex!important;flex-direction:column!important;gap:8px!important}
  .hbtns a,.hbtns .btn{width:100%!important;justify-content:center!important}
  .hstats{flex-wrap:wrap!important;gap:16px!important}
  .pfloat{display:none!important}
  .pcard{max-width:100%!important;transform:none!important}
}

/* ── Homepage features grid ─── */
@media(max-width:900px){
  .feat-wrap .sec{padding:40px 20px!important}
  .fgrid{grid-template-columns:1fr 1fr!important;gap:12px!important}
  .fcard{padding:16px!important}
  h2{font-size:1.6rem!important;letter-spacing:-.01em!important}
}
@media(max-width:540px){
  .fgrid{grid-template-columns:1fr!important}
  h2{font-size:1.4rem!important}
}

/* ── Tax saving section on homepage ─── */
@media(max-width:900px){
  #tax-saving{padding:40px 20px!important}
  #tax-saving h2{font-size:1.6rem!important}
}

/* ── Pricing + FAQ + footer sections ─── */
@media(max-width:900px){
  .sec,.pub-content,.pub-content-wide{padding:36px 20px!important}
  .pgrid{grid-template-columns:1fr!important}
  footer{padding:36px 20px 0!important}
  .fw{grid-template-columns:1fr 1fr!important;gap:20px!important}
}
@media(max-width:540px){
  .fw{grid-template-columns:1fr!important}
}

/* ── Public footer ─── */
@media(max-width:900px){
  .pub-footer-inner{grid-template-columns:1fr 1fr!important;gap:20px 14px!important}
  .pub-footer-bottom{flex-direction:column!important;text-align:center!important;gap:4px!important}
}
@media(max-width:540px){
  .pub-footer-inner{grid-template-columns:1fr!important}
}

/* ── Blog ─── */
@media(max-width:900px){
  .blog-header{padding:40px 20px!important}
  .blog-header h1{font-size:1.8rem!important}
  .blog-layout{padding:24px 16px!important}
  .featured-card{display:flex!important;flex-direction:column!important}
  .featured-visual{min-height:160px!important}
  .posts-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}
  .blog-wrap{padding:28px 16px 60px!important}
  .blog-title{font-size:1.6rem!important}
  .related-grid{grid-template-columns:1fr!important}
  .cat-strip{gap:6px!important}
  .blog-search{flex-direction:column!important}
}
@media(max-width:540px){
  .posts-grid{grid-template-columns:1fr!important}
  .blog-title{font-size:1.35rem!important}
}

/* ── Forum ─── */
@media(max-width:900px){
  .forum-shell{
    display:flex!important;
    flex-direction:column!important;
    padding:16px 12px!important;
  }
  .forum-sidebar{position:static!important;order:2}
  .forum-main{order:1}
  .post-row{padding:10px 12px!important}
  .reply-badge{min-width:40px!important;text-align:center!important}
  .new-post-box{margin:8px!important;max-height:92vh!important;overflow-y:auto!important}
}

/* ── SIP Calculator ─── */
@media(max-width:800px){
  .tool-hero{padding:40px 20px!important}
  .tool-hero h1{font-size:1.8rem!important}
  .calc-shell{
    display:flex!important;
    flex-direction:column!important;
    padding:24px 16px!important;
    gap:20px!important;
  }
  .faq-s{padding:0 16px 40px!important}
}

/* ── NRI Landing page ─── */
@media(max-width:900px){
  .nri-hero{padding:44px 20px!important}
  .hero-h1{font-size:1.9rem!important}
  .rates-bar{padding:10px 14px!important}
  .feat-g,.fema-g,.vs-g,.testi-g{grid-template-columns:1fr!important;gap:12px!important}
  .sec{padding:40px 20px!important}
  .cta-band{padding:44px 20px!important}
}

/* ── Bank Statement Analyser ─── */
@media(max-width:900px){
  .step-grid,.bank-grid{grid-template-columns:1fr!important;gap:12px!important}
}

/* ── NRI Dashboard (app) ─── */
@media(max-width:768px){
  .currency-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .rate-ticker{overflow-x:auto!important;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch}
  .rate-ticker::-webkit-scrollbar{display:none}
}

/* ── Portfolio ─── */
@media(max-width:900px){
  .port-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .holding-hdr{display:none!important}
  .holding-row{
    display:grid!important;
    grid-template-columns:30px 1fr auto auto!important;
    gap:6px 8px!important;
    padding:10px 12px!important;
    align-items:center!important;
  }
  /* Hide qty, avg buy columns on mobile — keep LTP and P&L */
  .holding-row>div:nth-child(3){display:none!important}
  .holding-row>div:nth-child(4){display:none!important}
  /* Sell + delete buttons */
  .holding-row>div:last-child{grid-column:2/5!important;display:flex!important;gap:6px!important}
  #addModal>div,#sellModal>div{
    width:calc(100vw - 20px)!important;
    max-width:100%!important;
    margin:10px!important;
    max-height:88vh!important;
    overflow-y:auto!important;
  }
  #exchSelector{gap:4px!important}
  .exch-pill{font-size:.7rem!important;padding:4px 8px!important}
}
@media(max-width:480px){
  .port-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .port-stat-val{font-size:1.2rem!important}
}

/* ── Tax Tracker ─── */
@media(max-width:768px){
  .stat-pill{padding:12px 8px!important}
  .stat-pill-val{font-size:1.2rem!important}
  .tax-section-head{padding:12px!important;gap:8px!important}
  .tax-section-desc{display:none!important}
  .tax-entry-row{flex-wrap:wrap!important;gap:6px!important;padding:8px 12px!important}
  #quickAddModal>div{
    width:calc(100vw - 20px)!important;
    max-width:100%!important;
    margin:10px!important;
    max-height:90vh!important;
    overflow-y:auto!important;
  }
}

/* ── Admin panel ─── */
@media(max-width:900px){
  .adm-sidebar{display:none!important}
  .adm-main{margin-left:0!important}
  .adm-body{padding:14px!important}
  .stat-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .stat-val{font-size:1.4rem!important}
  .editor-shell{grid-template-columns:1fr!important;gap:14px!important}
  .img-grid{grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
  .img-modal-grid{grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
  .a-table{font-size:.76rem!important}
  .a-table td,.a-table th{padding:7px 8px!important}
}

/* ══ MODALS — full width on mobile ══════════════════════════ */
@media(max-width:768px){
  /* Any element with id ending in Modal */
  [id$="Modal"]{padding:10px!important}
  [id$="Modal"]>div{
    width:calc(100vw - 20px)!important;
    max-width:100%!important;
    margin:0!important;
    border-radius:14px!important;
    max-height:88vh!important;
    overflow-y:auto!important;
  }
}

/* ══ TOUCH TARGETS ══════════════════════════════════════════ */
@media(hover:none) and (pointer:coarse){
  .btn{min-height:44px!important}
  .nav-item{min-height:44px!important;padding:10px 14px!important}
  .form-input,input,select{min-height:44px!important}
  .type-btn{min-height:44px!important}
  .calc-key{min-height:46px!important}
  .filter-chip{min-height:36px!important;padding:6px 12px!important}
  .tax-section-head{min-height:52px!important}

  /* No hover effects on touch devices */
  .fcard:hover,.feat-c:hover,.post-card:hover,
  .tcard:hover,.btn-primary:hover,
  .feat-card:hover{transform:none!important;box-shadow:none!important}

  /* Tap feedback */
  .btn:active{opacity:.82!important;transform:scale(.97)!important}
  .calc-key:active{transform:scale(.88)!important}
  .nav-item:active{background:var(--accent-light)!important}
}

/* ══ OVERFLOW PREVENTION ════════════════════════════════════ */
@media(max-width:768px){
  /* Prevent ANY element from overflowing viewport width */
  body{overflow-x:hidden!important}
  .page-wrap,.main-content{overflow-x:hidden!important}
  img{max-width:100%!important;height:auto!important}
  /* Tables scroll horizontally */
  .data-table-wrap,.a-table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  table{min-width:500px}
  /* Pre/code blocks */
  pre,code{white-space:pre-wrap!important;word-break:break-word!important}
}

/* ══ PWA + STANDALONE ═══════════════════════════════════════ */
#bottomNav{
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
@media(display-mode:standalone){
  .app-shell{padding-top:env(safe-area-inset-top,0)}
  body{overscroll-behavior-y:contain}
}

/* ══ LANDSCAPE PHONE ════════════════════════════════════════ */
@media(max-width:768px) and (orientation:landscape){
  .page-wrap{padding-top:8px!important}
  #bottomNav{display:none!important}
  .main-content{padding-bottom:0!important}
  .stats-grid{grid-template-columns:repeat(4,1fr)!important}
}

/* ══ ANIMATIONS (keep minimal on mobile) ═══════════════════ */
@keyframes slideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* ══ MOBILE MENU (public pages) ════════════════════════════ */
.pub-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;border:none;background:none;margin-left:8px}
.pub-hamburger span{display:block;width:22px;height:2px;background:var(--text,#0D1321);border-radius:2px;transition:all .2s}
.pub-mobile-menu{
  display:none;position:fixed;inset:0;
  background:rgba(13,19,33,.96);z-index:9999;
  flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:20px;
}
.pub-mobile-menu a{
  width:min(300px,88vw);text-align:center;padding:13px 20px;
  border-radius:12px;font-size:1rem;font-weight:700;
  color:#fff;text-decoration:none;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  transition:background .15s;
}
.pub-mobile-menu a:hover,.pub-mobile-menu a:active{background:rgba(255,255,255,.18)}
.pub-mobile-menu-close{
  position:absolute;top:16px;right:16px;
  font-size:1.8rem;color:#fff;cursor:pointer;
  background:none;border:none;line-height:1;padding:8px;
}
@media(max-width:900px){
  .pub-hamburger{display:flex!important}
}

/* ══ QUICK FIXES — prevent iOS zoom ════════════════════════ */
#quickAddSheet input,#quickAddSheet select,
input[type="text"],input[type="number"],
input[type="email"],input[type="date"],
input[type="password"],select,textarea{
  font-size:16px!important
}