
/* MetroMitra Unified Owner-Hub Visual System */
:root{--mm-gold:#caa44d;--mm-gold-dark:#9b772b;--mm-ink:#191919;--mm-paper:#fff;--mm-bg:#f6f6f3;--mm-line:#e8e5dc;--mm-muted:#85847d;--mm-radius:13px;--mm-shadow:0 12px 34px rgba(30,27,20,.065)}
body{background:var(--mm-bg);color:#242424}
/* Internal portals inherit Owner Hub geometry */
.internal-app{display:flex;min-height:100vh;background:var(--mm-bg)}
.internal-sidebar{width:270px;min-width:270px;background:#191919;border-right:1px solid #2c2c2c;padding:0;position:fixed;inset:0 auto 0 0;z-index:60;display:flex;flex-direction:column}
.internal-brand{padding:21px 18px;border-bottom:1px solid #303030;margin:0}
.internal-brand .brand{display:flex;align-items:center;gap:11px;color:#fff;font-size:20px;font-weight:800}
.internal-brand .brand img{width:38px;height:38px;border-radius:11px}
.internal-brand .brand small{display:block;color:#a8a8a3;font-size:10px;letter-spacing:.7px;margin-top:2px}
.internal-brand button{display:none}
.internal-user{margin:15px 13px;padding:12px;background:#232323;border:1px solid #343434;border-radius:13px;display:flex;gap:10px;align-items:center}
.internal-user .avatar{width:38px;height:38px;border-radius:10px;background:var(--mm-gold);color:#171717}
.internal-user b{color:#fff;font-size:12px}.internal-user small{color:#9e9e98;font-size:10px}
.internal-nav{padding:3px 11px;gap:2px;overflow:auto;flex:1}
.internal-nav a{width:100%;padding:10px 12px;border-radius:9px;color:#aaa;font-size:13px;font-weight:650;display:flex;gap:11px;align-items:center}
.internal-nav a span{width:18px;color:var(--mm-gold)}
.internal-nav a:hover,.internal-nav a.active{background:#292929;color:#fff}.internal-nav a.active{box-shadow:inset 3px 0 var(--mm-gold)}
.internal-logout{margin:10px 13px 16px;padding:12px;border-top:1px solid #303030;color:#aaa;font-size:13px}
.internal-main{margin-left:270px;width:calc(100% - 270px);min-width:0}
.internal-top{height:68px;background:#fff;border-bottom:1px solid var(--mm-line);padding:0 27px;position:sticky;top:0;z-index:40;display:flex;align-items:center}
.internal-title b{font-size:14px}.internal-title span{font-size:10px;color:#85847d}.internal-actions{margin-left:auto}
.internal-content{padding:28px 30px;max-width:1600px}.internal-footer{padding:20px 30px;color:#8a8982;font-size:11px;border-top:1px solid var(--mm-line);margin-top:20px}
.role-badge{background:#f6f0df;color:#8c6b24;border:1px solid #eadfca}
/* Generic pages: same Owner Hub cards, forms and tables */
.container{max-width:1600px;padding:28px 30px;margin:0 auto}
.card,.kpi,.table-wrap,.form-card,.content-grid>section{background:#fff;border:1px solid var(--mm-line);border-radius:13px;box-shadow:none}
.card-body{padding:18px}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:15px}
.kpi{padding:17px;position:relative;transition:.16s ease}.kpi:hover{transform:translateY(-2px);box-shadow:var(--mm-shadow);border-color:#dcc89d}.kpi span{font-size:11px;color:#817f78;font-weight:700}.kpi b{font-size:27px;font-weight:850;margin:7px 0;color:#20201e}.kpi small{font-size:10px;color:#9b9991}
.status{display:inline-flex;padding:5px 8px;border-radius:99px;font-size:9px;font-weight:800;text-transform:capitalize;background:#f1f0eb;color:#666}.status.active,.status.approved,.status.converted{background:#e9f5ec;color:#397344}.status.pending,.status.new,.status.follow_up{background:#f8f0da;color:#8c6b24}.status.rejected,.status.closed{background:#faeaea;color:#963e3e}
.content-grid{gap:15px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.section-title h2{font-size:14px;margin:0}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:11px}.table th{color:#89877f;background:#faf9f5;font-size:10px;text-transform:uppercase;letter-spacing:.5px}.table th,.table td{padding:11px 10px;border-bottom:1px solid #efede7;text-align:left;vertical-align:middle}.table tr:last-child td{border-bottom:0}
.quick{padding:11px;border:1px solid #e9e5dc;border-radius:9px;font-size:11px;font-weight:750;background:#fff}.quick:hover{border-color:var(--mm-gold);background:#fffcf4}.activity-row{padding:10px 0;border-bottom:1px solid #efede7}.activity-row:last-child{border-bottom:0}
.form-card{padding:20px;max-width:1100px;margin:0 auto}.form-card h1{font-size:27px;margin:4px 0 8px}.field input,.field select,.field textarea{border-color:#ddd9cf;border-radius:8px}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--mm-gold);box-shadow:0 0 0 3px #caa44d18}
.btn{border-radius:8px;min-height:38px}.btn-primary,.btn-gold{background:var(--mm-gold);border-color:var(--mm-gold);color:#171717}.btn-primary:hover,.btn-gold:hover{background:#d2ad5b;border-color:#d2ad5b}.btn-dark{background:#222;border-color:#222;color:#fff}.btn-soft{background:#f5f2e9;border-color:#ebe3cf}
/* Public marketplace uses Owner Hub cards but retains public navigation */
.public-main{background:var(--mm-bg)}.public-main .card,.public-main .market-card,.public-main .business-tile,.public-main .category-tile{border-color:var(--mm-line);box-shadow:none}.public-main .market-card,.public-main .business-tile,.public-main .category-tile{border-radius:13px}.public-main .market-card:hover,.public-main .business-tile:hover,.public-main .category-tile:hover{box-shadow:var(--mm-shadow)}
/* Logged-in user shell */
.user-app{min-height:100vh;display:flex}.user-sidebar{width:270px;background:#191919;color:#d8d8d4;position:fixed;inset:0 auto 0 0;z-index:60;display:flex;flex-direction:column;border-right:1px solid #2c2c2c}.user-brand{padding:21px 18px;border-bottom:1px solid #303030}.user-brand a{display:flex;align-items:center;gap:11px;color:#fff;font-size:20px;font-weight:800}.user-brand img{width:38px;height:38px;border-radius:11px}.user-brand small{display:block;font-size:10px;color:#a8a8a3}.user-mini{margin:15px 13px;padding:12px;background:#232323;border:1px solid #343434;border-radius:13px;display:flex;gap:10px;align-items:center}.user-mini .avatar{width:38px;height:38px;border-radius:10px;background:var(--mm-gold);color:#171717}.user-mini strong{color:#fff;font-size:12px}.user-mini small{display:block;color:#9e9e98;font-size:10px;margin-top:4px}.user-nav{padding:3px 11px;overflow:auto;flex:1}.user-nav a{display:flex;align-items:center;gap:11px;color:#aaa;padding:10px 12px;border-radius:9px;font-size:13px;font-weight:650;margin:2px 0}.user-nav a span{width:18px;text-align:center;color:var(--mm-gold)}.user-nav a:hover,.user-nav a.active{background:#292929;color:#fff}.user-nav a.active{box-shadow:inset 3px 0 var(--mm-gold)}.user-logout{margin:10px 13px 16px;padding:12px;border-top:1px solid #303030;color:#aaa;font-size:13px}.user-main{margin-left:270px;width:calc(100% - 270px);min-width:0}.user-topbar{height:68px;background:#fff;border-bottom:1px solid var(--mm-line);display:flex;align-items:center;padding:0 27px;position:sticky;top:0;z-index:40}.user-topbar .menu-toggle{display:none}.user-search{height:39px;width:min(410px,45%);display:flex;align-items:center;background:#f6f5f1;border:1px solid #e8e5dc;border-radius:9px;padding:0 12px}.user-search input{border:0;background:transparent;outline:0;width:100%;font-size:12px}.user-actions{margin-left:auto;display:flex;gap:8px;align-items:center}.user-avatar{width:31px;height:31px;border-radius:8px;background:var(--mm-gold);display:grid;place-items:center;font-weight:900;color:#171717}.user-content{padding:28px 30px;max-width:1600px;margin:auto}.user-footer{padding:20px 30px;color:#8a8982;font-size:11px;border-top:1px solid var(--mm-line);margin-top:20px}.user-overlay{display:none}
@media(max-width:1000px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.internal-sidebar{transform:translateX(-100%);transition:.25s}.internal-sidebar.show{transform:none;box-shadow:15px 0 40px #0005}.internal-main{margin-left:0;width:100%}.internal-brand button{display:block}.internal-content{padding:20px 15px}.internal-top{padding:0 12px}.menu-toggle{display:block!important}.container{padding:20px 15px}.user-sidebar{transform:translateX(-100%);transition:.25s}.user-sidebar.show{transform:none;box-shadow:15px 0 40px #0005}.user-main{margin-left:0;width:100%}.user-topbar{padding:0 12px}.user-topbar .menu-toggle{display:block}.user-search{flex:1;width:auto;margin-left:10px}.user-content{padding:20px 15px}.user-overlay.show{display:block;position:fixed;inset:0;background:#0007;z-index:55}}
@media(max-width:520px){.kpis{grid-template-columns:1fr}.internal-actions .btn-soft{display:none}.user-search{display:none}.user-content{padding:18px 12px}}

/* === MetroMitra Professional UI v2 === */
:root{--mm-gold:#d4a94f;--mm-gold-2:#f3d78f;--mm-navy:#0d1726;--mm-navy-2:#16253a;--mm-paper:#fff;--mm-bg:#f4f6f8;--mm-line:#e6e9ee;--mm-text:#182333;--mm-muted:#718096;--mm-shadow:0 18px 50px rgba(18,31,50,.08)}
body{background:var(--mm-bg);color:var(--mm-text)}
.public-top{background:rgba(255,255,255,.94)!important;backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(20,30,45,.06);position:sticky;top:0;z-index:100}
.public-nav-wrap{max-width:1480px!important;margin:auto!important}
.public-brand span{letter-spacing:-.5px}.public-brand img{box-shadow:0 8px 20px rgba(15,30,50,.12)}
.public-nav a{transition:.18s ease}.public-nav a:hover{color:#111b2a;transform:translateY(-1px)}
.home-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 85% 20%,rgba(212,169,79,.20),transparent 28%),linear-gradient(135deg,#0a1424 0%,#14243b 52%,#1b314b 100%)!important}
.home-hero:after{content:"";position:absolute;width:440px;height:440px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-130px;bottom:-220px;box-shadow:0 0 0 50px rgba(255,255,255,.025),0 0 0 100px rgba(255,255,255,.018)}
.home-hero-inner{position:relative;z-index:2;max-width:1480px!important}
.hero-copy h1{letter-spacing:-1.5px;line-height:1.03}.hero-panel{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045))!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 24px 70px rgba(0,0,0,.18)!important;backdrop-filter:blur(14px)}
.hero-search{box-shadow:0 18px 45px rgba(0,0,0,.18)!important}.hero-search .btn{min-width:120px}
.home-section{max-width:1480px!important}.category-tile,.market-card,.business-tile{box-shadow:0 10px 30px rgba(18,31,50,.045)!important;border-color:#e7eaf0!important;transition:transform .18s,box-shadow .18s,border-color .18s}
.category-tile:hover,.market-card:hover,.business-tile:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(18,31,50,.10)!important;border-color:#d7b76b!important}
.home-cta{max-width:none!important;background:linear-gradient(115deg,#111b2b,#1c2f48)!important;box-shadow:inset 0 1px rgba(255,255,255,.08)}
.owner-shell{background:linear-gradient(135deg,#f4f6f8,#f8f7f3)}
.owner-app{background:transparent}.owner-sidebar{background:linear-gradient(180deg,#0b1320,#121e2d 70%,#0b1320)!important;border-right:1px solid rgba(255,255,255,.06)!important;box-shadow:8px 0 35px rgba(10,18,30,.08)}
.owner-brand{border-bottom-color:rgba(255,255,255,.08)!important}.owner-brand .brand-mark{box-shadow:0 8px 24px rgba(212,169,79,.18)}
.owner-nav a,.nav-group-title{transition:.16s ease}.owner-nav a:hover,.nav-group-title:hover{background:rgba(255,255,255,.06)!important}.owner-nav a.active{background:linear-gradient(90deg,rgba(212,169,79,.17),rgba(212,169,79,.03))!important;border-left:3px solid var(--mm-gold)}
.owner-top{background:rgba(255,255,255,.92)!important;backdrop-filter:blur(16px);box-shadow:0 1px 0 #e6e9ee!important}
.page-head h1{letter-spacing:-.7px}.panel-card,.kpi-card,.form-card,.card{box-shadow:var(--mm-shadow)!important;border-color:#e5e8ed!important}
.kpi-card{background:linear-gradient(180deg,#fff,#fbfcfd)!important}.kpi-icon{box-shadow:0 8px 18px rgba(212,169,79,.12)}
.btn-gold,.btn-primary{box-shadow:0 6px 18px rgba(212,169,79,.16);transition:.16s}.btn-gold:hover,.btn-primary:hover{transform:translateY(-1px)}
.internal-shell{background:#f4f6f8}.internal-sidebar{background:linear-gradient(180deg,#0b1320,#111d2c)!important;box-shadow:8px 0 30px rgba(10,18,30,.10);border-right:0}
.internal-nav a.active{background:linear-gradient(90deg,rgba(212,169,79,.18),rgba(212,169,79,.03))!important}
.internal-top{background:rgba(255,255,255,.93)!important;backdrop-filter:blur(14px);box-shadow:0 1px 0 #e7e9ee}
.approval-tabs{display:flex;gap:8px;margin:0 0 15px;padding:5px;background:#e9edf2;border-radius:12px;width:max-content}.approval-tabs a{padding:9px 15px;border-radius:8px;font-size:12px;font-weight:800;color:#637084}.approval-tabs a.active{background:#fff;color:#172033;box-shadow:0 5px 18px rgba(18,31,50,.08)}
.approval-business{display:flex;align-items:center;gap:10px;min-width:210px}.approval-business img{width:42px;height:42px;border-radius:10px;object-fit:cover;background:#eef1f5}.approval-business small,.approval-note{display:block;color:#8791a0;font-size:10px;margin-top:3px}.approval-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:260px}.approval-actions input{width:150px;padding:8px 9px;border:1px solid #dfe3e9;border-radius:8px;font:inherit;font-size:11px}.btn-danger{background:#fff0f0!important;color:#a33a3a!important;border:1px solid #f0caca!important}
.approval-banner{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 17px;margin:0 0 18px;border:1px solid #ead9ac;background:linear-gradient(90deg,#fff9e9,#fff);border-radius:13px;box-shadow:0 10px 30px rgba(50,40,20,.05)}.approval-banner.rejected{border-color:#efcccc;background:linear-gradient(90deg,#fff1f1,#fff)}.approval-banner strong{display:block;font-size:13px}.approval-banner span{display:block;color:#7c828b;font-size:11px;margin-top:3px}
@media(max-width:900px){.approval-actions{min-width:200px}.approval-actions input{width:100%}.approval-banner{align-items:flex-start;flex-direction:column}.approval-tabs{width:100%;overflow:auto}}

/* === MetroMitra Dashboard Responsive UI v3 === */
.internal-app,.user-app{min-width:0;overflow-x:hidden}.internal-content,.user-content{box-sizing:border-box;width:100%}
.internal-top,.user-topbar{gap:12px}.internal-top .menu-toggle,.user-topbar .menu-toggle{display:inline-flex!important;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid #dfe5ec;border-radius:11px;background:#fff;color:#172033;cursor:pointer;flex:0 0 42px;box-shadow:0 5px 15px rgba(15,23,42,.06)}
.internal-top .menu-toggle:hover,.user-topbar .menu-toggle:hover{background:#eff6ff;color:#2563eb;border-color:#bfdbfe}
.internal-app.sidebar-collapsed .internal-sidebar{transform:translateX(-100%)}.internal-app.sidebar-collapsed .internal-main{margin-left:0;width:100%}
.user-app.sidebar-collapsed .user-sidebar{transform:translateX(-100%)}.user-app.sidebar-collapsed .user-main{margin-left:0;width:100%}
.internal-sidebar,.user-sidebar{transition:transform .24s ease,box-shadow .24s ease}.internal-sidebar.show,.user-sidebar.show{transform:none;box-shadow:16px 0 45px rgba(15,23,42,.18)}
.internal-content .page-head,.user-content .page-head{gap:18px;flex-wrap:wrap}.internal-content .kpis,.user-content .kpis{min-width:0}.internal-content .card,.internal-content .kpi,.user-content .card,.user-content .kpi{min-width:0;overflow:hidden}.internal-content table,.user-content table{max-width:100%}.internal-content .table-wrap,.user-content .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dashboard-listings-grid{min-width:0}.dashboard-listing-card{min-width:0}.dashboard-listing-image img{max-width:none}
.internal-actions,.user-actions{min-width:0}.internal-actions .role-badge{white-space:nowrap}
@media(min-width:801px){.internal-top .menu-toggle,.user-topbar .menu-toggle{display:inline-flex!important}.internal-app.sidebar-collapsed .internal-top,.user-app.sidebar-collapsed .user-topbar{padding-left:18px}.internal-sidebar,.user-sidebar{transform:none}.sidebar-overlay,.user-overlay{display:none!important}}
@media(max-width:1100px){.internal-content,.user-content{padding:22px 20px}.internal-content .content-grid{grid-template-columns:1fr}.internal-content .admin-grid{grid-template-columns:1fr}.internal-content .quick-grid,.user-content .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.internal-content .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.internal-sidebar,.user-sidebar{transform:translateX(-100%)}.internal-sidebar.show,.user-sidebar.show{transform:none}.internal-main,.user-main{margin-left:0!important;width:100%!important}.internal-top,.user-topbar{min-height:64px;height:auto;padding:10px 12px}.internal-title{min-width:0;display:flex;flex-direction:column}.internal-title b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.internal-actions .btn-soft{display:none}.internal-content,.user-content{padding:18px 14px}.internal-content .page-head h1,.user-content .page-head h1{font-size:30px;line-height:1.12}.internal-content .kpis,.user-content .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.internal-content .quick-grid,.user-content .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.user-search{flex:1;min-width:0;width:auto}.user-actions{margin-left:auto}.user-actions .icon-btn{display:none}.user-overlay.show,.sidebar-overlay.show{display:block;position:fixed;inset:0;background:rgba(15,23,42,.48);z-index:55}}
@media(max-width:560px){.internal-content,.user-content{padding:16px 12px}.internal-content .kpis,.user-content .kpis{grid-template-columns:1fr}.internal-content .quick-grid,.user-content .quick-grid{grid-template-columns:1fr}.internal-content .page-head,.user-content .page-head{align-items:flex-start}.internal-content .page-head .btn,.user-content .page-head .btn{width:100%;box-sizing:border-box}.internal-actions .role-badge{display:none}.user-search{display:none}.dashboard-listing-image{height:185px}.dashboard-listing-actions{flex-direction:column}.dashboard-listing-actions .btn{width:100%}.internal-content .form-card,.user-content .form-card{padding:16px}.internal-content .form-grid,.user-content .form-grid{grid-template-columns:1fr}.internal-content .field.full,.user-content .field.full{grid-column:auto}.internal-content .table,.user-content .table{font-size:10px}.internal-footer,.user-footer{padding:16px 12px}}


/* Phase 15: professional responsive shell and click-to-open navigation */
.owner-topbar .menu-toggle,.internal-top .menu-toggle{display:inline-grid!important;place-items:center;flex:0 0 40px;width:40px;height:40px;margin-right:14px;border:1px solid #e2e8f0;border-radius:11px;background:#fff;color:#172033;cursor:pointer}
.owner-topbar .menu-toggle:hover,.internal-top .menu-toggle:hover{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}
.owner-sidebar,.internal-sidebar{transition:transform .24s ease,box-shadow .24s ease}
.owner-sidebar{box-shadow:8px 0 28px rgba(15,23,42,.08)}
.owner-app.sidebar-collapsed .owner-sidebar{transform:translateX(-100%)}
.owner-app.sidebar-collapsed .owner-main{margin-left:0;width:100%}
.internal-app .internal-sidebar{transform:translateX(-100%)}
.internal-app:not(.sidebar-collapsed) .internal-sidebar{transform:translateX(0)}
.internal-app .internal-main{margin-left:0;width:100%}
.internal-app.sidebar-collapsed .internal-sidebar{transform:translateX(-100%)}
.internal-app:not(.sidebar-collapsed) .internal-main{margin-left:270px;width:calc(100% - 270px)}
.internal-app .internal-sidebar.show{transform:translateX(0)}
@media(max-width:800px){
 .owner-app:not(.sidebar-collapsed) .owner-sidebar{transform:translateX(0)}
 .internal-app:not(.sidebar-collapsed) .internal-main{margin-left:0;width:100%}
 .owner-topbar,.internal-top{gap:8px}
 .owner-topbar .menu-toggle,.internal-top .menu-toggle{margin-right:4px}
}

@media(max-width:800px){.internal-app:not(.sidebar-collapsed) .internal-sidebar{transform:translateX(-100%)}.internal-app .internal-sidebar.show{transform:translateX(0)}}
