/* =====================================================
   MenuRestaurant Dashboard
   Version : 1.0
===================================================== */

/* =====================================================
   MenuRestaurant Dashboard
   Layout
===================================================== */


/* =====================================================
   Dashboard Layout
===================================================== */

.mr-dashboard-wrapper{

    display:flex;

    flex-direction:row-reverse;

    min-height:100vh;

}

.mr-sidebar{

    width:270px;

    background:var(--sidebar);

    color:#fff;

    display:flex;

    flex-direction:column;

    position:fixed;

    top:0;

    right:0;

    height:100vh;

    overflow:auto;

}

.mr-sidebar-header{

    padding:35px 25px;

    text-align:center;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.mr-sidebar-header h2{

    font-size:24px;

    font-weight:700;

}

.mr-sidebar-nav{

    padding:20px;

    flex:1;

}

.mr-sidebar-link{

    display:flex;

    align-items:center;

    gap:15px;

    padding:14px 18px;

    margin-bottom:8px;

    border-radius:12px;

    transition:var(--transition);

}

.mr-sidebar-link:hover{

    background:var(--sidebar-hover);

}

.mr-sidebar-icon{

    width:34px;

    height:34px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.08);

    border-radius:10px;

    font-size:15px;

}

.mr-sidebar-divider{

    height:1px;

    background:rgba(255,255,255,.08);

    margin:18px 0;

}

.mr-logout{

    color:#ffb3b3;

}

.mr-dashboard-content{

    flex:1;

    margin-right:270px;

    display:flex;

    flex-direction:column;

}

.mr-dashboard-body{

    padding:35px;

}

/* ==========================================
   Topbar
========================================== */

.mr-topbar{

    height:72px;

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 28px;

}

.mr-topbar-left{

    display:flex;

    align-items:center;

}

.mr-restaurant-title{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:22px;

    font-weight:700;

    color:#222;

}

.mr-topbar-right{

    display:flex;

    align-items:center;

    gap:20px;

}

.mr-subscription-status{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#555;

}

.mr-status-dot{

    width:10px;

    height:10px;

    background:#22c55e;

    border-radius:50%;

}

.mr-qr-button{

    background:#111827;

    color:#fff;

    border:none;

    padding:10px 18px;

    border-radius:8px;

    cursor:pointer;

    font-family:inherit;

    font-size:14px;

}

.mr-user-box{

    display:flex;

    flex-direction:column;

    text-align:right;

}

.mr-user-name{

    font-weight:700;

}

.mr-user-role{

    font-size:13px;

    color:#777;

}
/* ==========================================
Restaurant Card
========================================== */

.mr-card{

    background:#fff;

    border-radius:14px;

    padding:30px;

    box-shadow:0 2px 8px rgba(0,0,0,.05);

}

.mr-card h2{

    margin-bottom:30px;

    font-size:24px;

}

.mr-field{

    display:flex;

    flex-direction:column;

    margin-bottom:22px;

}

.mr-field label{

    margin-bottom:8px;

    font-weight:700;

}

.mr-field input,
.mr-field textarea{

    border:1px solid #ddd;

    border-radius:8px;

    padding:12px;

    font-family:inherit;

    font-size:15px;

}

.mr-field textarea{

    min-height:120px;

}

.mr-save-btn{

    background:#16a34a;

    color:#fff;

    border:none;

    padding:14px 24px;

    border-radius:8px;

    cursor:pointer;

    font-family:inherit;

}
/* ==========================================
Active Sidebar Item
========================================== */

.mr-sidebar-link.mr-active{

    background:#2563EB;

    color:#fff;

}

.mr-sidebar-link.mr-active .mr-sidebar-icon{

    background:rgba(255,255,255,.20);

}
/* ==========================================
Dashboard Home
========================================== */

.mr-dashboard-cards{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin:25px 0;

}

.mr-dashboard-cards .mr-card{

    text-align:center;

}

.mr-dashboard-cards h2{

    margin-top:15px;

    color:var(--primary);

}

@media(max-width:992px){

    .mr-dashboard-cards{

        grid-template-columns:1fr;

    }

}

/* ==========================================
Restaurant Form
========================================== */

.mr-form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.mr-form-group{

    display:flex;

    flex-direction:column;

}

.mr-form-group label{

    margin-bottom:8px;

    font-weight:700;

    color:var(--text);

}

.mr-form textarea{

    resize:vertical;

}

/* ==========================================
Success Message
========================================== */

.mr-success{

    margin:20px 0;

    padding:14px 18px;

    background:#DCFCE7;

    color:#166534;

    border-radius:10px;

    border:1px solid #BBF7D0;

}

/* ==========================================
Category List
========================================== */

.mr-category-list{

    margin-top:20px;

}

.mr-category-item{

    padding:15px;

    border-bottom:1px solid var(--border);

}

.mr-category-item:last-child{

    border-bottom:none;

}

/* ==========================================
Category Layout
========================================== */

.mr-category-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    border-bottom:1px solid var(--border);

}

.mr-category-item:last-child{

    border-bottom:none;

}

.mr-category-title{

    font-size:16px;

    font-weight:700;

}

.mr-category-actions{

    display:flex;

    gap:10px;

}

/* ==========================================
Secondary Button
========================================== */

.mr-btn-secondary{

    background:#E5E7EB;

    color:#111827;

    border:none;

    border-radius:10px;

    padding:10px 18px;

    cursor:pointer;

    transition:var(--transition);

    font-family:inherit;

}

.mr-btn-secondary:hover{

    background:#D1D5DB;

}

/* ==========================================
Danger Button
========================================== */

.mr-btn-danger{

    background:#DC2626;

    color:#ffffff;

    border:none;

    border-radius:10px;

    padding:10px 18px;

    cursor:pointer;

    transition:var(--transition);

    font-family:inherit;

}

.mr-btn-danger:hover{

    background:#B91C1C;

}

/* ==========================================
Category Edit
========================================== */

.mr-category-view{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.mr-category-edit{

    margin-top:15px;

}

.mr-category-edit input{

    margin-bottom:15px;

}

.mr-category-edit-actions{

    display:flex;

    gap:10px;

}

/* ==========================================
Toast Notification
========================================== */

.mr-toast{

    position:fixed;

    top:25px;

    left:50%;

    transform:translateX(-50%);

    background:#16A34A;

    color:#fff;

    padding:14px 22px;

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

    font-size:14px;

    font-weight:700;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

.mr-toast.show{

    opacity:1;

    visibility:visible;

}

/* ==========================================
Modal
========================================== */

.mr-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:99998;

}

.mr-modal.show{

    opacity:1;

    visibility:visible;

}

.mr-modal-box{

    width:420px;

    max-width:90%;

    background:#fff;

    border-radius:16px;

    padding:30px;

    box-shadow:0 20px 60px rgba(0,0,0,.2);

    text-align:center;

}

.mr-modal-box h3{

    margin-bottom:15px;

}

.mr-modal-box p{

    color:#6B7280;

    line-height:2;

}

.mr-modal-actions{

    margin-top:30px;

    display:flex;

    justify-content:center;

    gap:15px;

}

.mr-image-picker{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.mr-image-preview{

    width:180px;

    height:135px;

    border:1px solid #ddd;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:#fafafa;

}

.mr-image-preview img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/*=========================================
=            QR Card                      =
=========================================*/

.mr-qr-card{

    text-align:center;

}

.mr-qr-image{

    margin:20px auto;

}

.mr-qr-image img{

    width:220px;

    max-width:100%;

    border:1px solid #ddd;

    border-radius:12px;

    background:#fff;

    padding:12px;

}

.mr-qr-actions{

    margin-top:20px;

}

.mr-status-active .mr-status-dot{
    background:#22c55e;
}

.mr-status-expired .mr-status-dot{
    background:#ef4444;
}

.mr-dashboard-link{

	display:block;

	text-decoration:none;

	color:inherit;

	cursor:pointer;

	transition:.25s;

}

.mr-dashboard-link:hover{

	transform:translateY(-3px);

	box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.mr-subscription-table {
	width: 100%;
	border-collapse: collapse;
}

.mr-subscription-table td {
	padding: 14px;
	border-bottom: 1px solid #eee;
}


/*
|--------------------------------------------------------------------------
| Subscription Plans
|--------------------------------------------------------------------------
*/

.mr-plan-grid {
	display: flex;
	flex-direction: row;
	gap: 20px;
	margin-top: 20px;
	width: 100%;
	align-items: stretch;
	flex-wrap: nowrap;
}

.mr-plan {
	flex: 1 1 0;
	min-width: 0;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	background: #fff;
	box-sizing: border-box;
}

.mr-plan h4 {
	margin-bottom: 10px;
}

.mr-plan h3 {
	margin-top: 0;
	margin-bottom: 15px;
}


/*
|--------------------------------------------------------------------------
| Plan Features
|--------------------------------------------------------------------------
*/

.mr-plan ul {
	padding: 0;
	margin: 20px 0;
	list-style: none;
	text-align: right;
	line-height: 2.1;
}

.mr-plan li {
	font-size: 14px;
	border-bottom: 1px solid #f1f1f1;
	padding: 6px 0;
}


/*
|--------------------------------------------------------------------------
| Subscription Forms
|--------------------------------------------------------------------------
*/

.mr-subscription-form {
	display: block;
	width: 100%;
	margin: 10px 0;
}

.mr-subscription-form button,
.mr-plan-button,
.mr-plan button {
	display: block;
	width: 100%;
	margin-top: 15px;
	padding: 12px;
	border: none;
	border-radius: 10px;
	background: #ff9800;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	opacity: 1;
	box-sizing: border-box;
}

.mr-subscription-form button:hover,
.mr-plan-button:hover,
.mr-plan button:hover {
	opacity: 0.9;
}


/*
|--------------------------------------------------------------------------
| Current Plan
|--------------------------------------------------------------------------
*/

.mr-plan-current {
	border: 2px solid #4caf50;
}

.mr-current-plan {
	display: inline-block;
	margin-bottom: 10px;
	padding: 5px 12px;
	border-radius: 20px;
	background: #e8f5e9;
	color: #2e7d32;
	font-size: 13px;
	font-weight: bold;
}


/*
|--------------------------------------------------------------------------
| Pro Plan
|--------------------------------------------------------------------------
*/

.mr-plan-pro {
	border: 2px solid #ff9800;
}


/*
|--------------------------------------------------------------------------
| Disabled Features
|--------------------------------------------------------------------------
*/

.mr-feature-disabled {
	color: #999;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

	.mr-plan-grid {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.mr-plan {
		width: 100%;
	}

}