:root{
	--primary-color: #06385a;
	--primary-color-blur: rgba(6, 56, 90, .7);
	--primary-color-medium: #15679b;
	--primary-color-medium-blur: rgba(21, 111, 150, 0.7);
	--primary-color-light: #3498db;
	--primary-color-light-blur: rgba(66, 176, 196, 0.7);
	--text-color: #222;
	--text-color-light-gray: #ecf0f1;
	--btn-color: #2ecc71;
	--btn-color-dark: #23d47c;
	--btn-color-light: #39ee93;
	--border-color: #dfdcdc;
	--input-box: #fafafa;
	--logo-background: rgba(248,249,250,.9);
	--warning:#f39c12;
    --danger:#e74c3c;
    --battery:#f1c40f;
    --offline:#95a5a6;
    --ice:#3498db;
}

@font-face {
	font-family: "Vazirmatn";
	src: url(./fonts/Vazirmatn/Vazirmatn-VariableFont_wght.ttf)  format("truetype");
	font-weight: 100 900;
  	font-style: normal;
  	font-display: swap;
}

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html{
    scroll-behavior: smooth;
}

body {
	direction: rtl;
	font-family: "Vazirmatn";
}

body * {
	scrollbar-width: thin;
}

.layout{
    display: flex;
    min-height: 100vh;
}

#app.hidden{
    display:none;
}

.hidden{
	display: none !important;
}

#main {
	flex: 1;
	/* margin: 0px; */
	padding: 20px;
	/* height: 95vh; */
	overflow-y: auto;
}

#chart {
	width: 95%;
	height: 60vh;
	padding: 0px;
	margin: auto;
}

#sidebar {
	display: flex;
    flex-direction:column;
	min-height: 100vh;
	width:280px;
    flex-shrink:0;
	background-color: var(--primary-color);
	color: white;

}

.sidebar-header{
    padding:28px 24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.12);
}

.sidebar-logo{
	width: 90px;
	height: auto;
}

.sidebar-title{
    margin-top:12px;
    font-size:18px;
    font-weight:600;
	color: white;
}

.sidebar-nav{
	flex:1;
	overflow:auto;
}

.sidebar-nav-title{
    padding: 18px 24px 12px;
    font-size:0.9rem;
    font-weight:600;
    color:rgba(255,255,255,.7);
    letter-spacing:.5px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-footer{
    padding:20px;
    text-align:center;
    font-size:12px;
    color:rgba(255,255,255,.5);
    border-top:1px solid rgba(255,255,255,.12);
}

.content{
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#meter-list{
    list-style:none;
    margin:0;
    padding:6px 0;
	display:flex;
    flex-direction:column;
    gap:8px;

}

#meter-list li{
    position:relative;
	list-style:none;
    padding:14px 18px;
    margin:0 12px;
    border-radius:16px;
    color:white;
    cursor:pointer;
	border:1px solid rgba(255,255,255,.08);
	box-shadow:
        0 0 0 1px rgba(255,255,255,.08),
        0 2px 8px rgba(0,0,0,.15);
    transition:
        transform .2s ease,
        background-color .25s ease,
				box-shadow .2s ease;
}

#meter-list li:hover{
    /* background: rgba(255,255,255,.08); */
	background:#1a4f76;
	border-color: rgba(255,255,255,.18);
    transform: translateY(-2px);
	box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 6px 14px rgba(0,0,0,.25);
}

#meter-list li.active{
	background: #396a96;
	border-color: rgba(255,255,255,.25);
    /* border-right: 4px solid var(--btn-color); */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 8px 18px rgba(0,0,0,.30);
}

#meter-list li.active::before{
    content:"";
    position:absolute;
    right:0;
    top:8px;
    bottom:8px;
    width:5px;
    border-radius:10px;
    background: var(--btn-color);
	box-shadow:
		0 0 0 1px rgba(255,255,255,.06),
		0 0 14px rgba(46,204,113,.18);
}

.meter-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
	gap: 10px;
}

.meter-icons{
    display:flex;
    gap:10px;
    align-items:center;
	opacity:.9;
}

.meter-icons i:hover{
    opacity:1;
    transform:scale(1.15);
}

.meter-name{
	flex: 1;
    font-size:16px;
    font-weight:600;
    color:white;
	margin-bottom:8px;

	line-height:1.4;
	display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.meter-number{
    margin-top:4px;
    font-size:12px;
	color:#b9c8d8;
	margin-bottom:4px;
}

.meter-status{
    margin-top:8px;
    font-size:12px;
    /* color:rgba(255,255,255,.7); */
	color:#b9c8d8;
}

.meter-icons{
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
	flex-shrink:0;
}

.meter-card{
    margin:8px 10px;
    padding:12px;
    border-radius:14px;
    background:transparent;
	transition: all .2s ease;
}

.meter-card:hover{
    transform: translateY(-2px);
    background:#1d537a;
}
.status-dot{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    margin-left:6px;
}

/* #meter-list{
    padding:0 0 16px;
} */

#user-panel {
	display: none;
}

#meter-data {
	/* margin-top: 20pt; */
	/* margin-bottom: 20pt; */
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 80%;
	border-collapse: collapse;
	align-items: center;
}

.consumption_level_Normal .status-dot{
    border-right:4px solid #2ecc71;
}

.consumption_level_Low .status-dot{
    border-right:4px solid #3498db;
}

.consumption_level_Borderline .status-dot{
    border-right:4px solid #f1c40f;
}

.consumption_level_High .status-dot{
    border-right:4px solid #e67e22;
}

.consumption_level_VeryHigh .status-dot{
    border-right:4px solid #e74c3c;
}

.option-row {
	display: flex;
	gap: 20px;
	justify-content: center;
	align-items: center;
}

.option-key {
	border:none;
    padding:8px 18px;
	border-radius:12px;
    background:#fff;
	color:#1e3a8a;
    border:1px solid #cbd5e1;
	font-family:'Vazirmatn';
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:.25s;
}

.option-key:hover {
    background:#eff6ff;
    border-color:#60a5fa;
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(59,130,246,.18);
}

.option-key.active{
    background:linear-gradient(
        135deg,
        #3b82f6,
        #2563eb
    );
    color:white;
    border-color:#2563eb;
    box-shadow:0 10px 22px rgba(37,99,235,.3);
	transform:scale(.97);
}

.consumption-txt{
	color: #2c3e50;
	margin-bottom: 10px;
}

.logout-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: #f5f7fa;
    color: #4b5563;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.logout-btn:hover{
    background:#ffe8e8;
    color:#d62828;
    transform:translateY(-1px);
}

.logout-btn:active{
    transform:translateY(0);
}

/* Table */

.table-card{
    background:#fff;
    border-radius:18px;
    padding:24px;
    box-shadow:0 10px 30px rgba(15,23,42,.08);
}

th {
	height: 50px;
}

th,
td {
	padding: 15px;
}

/* .list-icon{
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
} */

.icon{
    font-size:18px;
}

.ex-triangle{
    color:var(--warning);
}

.abnormal{
    color:var(--danger);
}

.battery{
    color: var(--battery);
}

.disconnected{
    color:var(--offline);
}

.ice{
    color:var(--ice);
}

#meter-voltage,
#meter-temperature {
	direction: ltr;
}

/* Header */
.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 28px;
    background:white;
    border-bottom:1px solid #e5e7eb;
	flex-shrink: 0;
}

.page-title{
    font-size:28px;
    font-weight:700;
    color:var(--primary-color);
    margin:0;
}

.user-info{
    display:flex;
    align-items:center;
    gap:16px;
}

.user-avatar{
    font-size:34px;
    color:var(--primary-color-medium);
}

.user-detail{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}

#user-name{
    font-weight:700;
    color:#2c3e50;
}

#organization-name{
    font-size:13px;
    color:#7f8c8d;
}

.hidden {
    display: none;
}

#last-message-box{
    margin-top:24px;
    padding:24px;
    background:#fff;
    border-radius:18px;
    box-shadow:
        0 8px 24px rgba(15,23,42,.08);
    border:1px solid #e2e8f0;
    height:auto;
	min-height: 300px;
	max-height: 500px;
	overflow: visible;
}

#last-message-box::-webkit-scrollbar{
    width:8px;
}

#last-message-box::-webkit-scrollbar-track{
    background:#f1f5f9;
    border-radius:20px;
}

#last-message-box::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:20px;
}

#last-message-box::-webkit-scrollbar-thumb:hover{
    background:#94a3b8;
}

#last-message-box>div{
    font-size:20px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:18px;
}

#last-message{
    width:96%;
    border-collapse: separate;
    border-spacing: 0;
    font-size:14px;
	margin: auto;

}

#last-message th{
	position:sticky;
    top:0;
    z-index:2;
    background:#eff2f7;
    border-bottom:2px solid #e2e8f0;

}

#last-message tr:hover{
    background:#eaeef3;
}

#last-message thead th{
    background:linear-gradient(
        to bottom,
        #f8fafc,
        #eef2f7
    );
    color:#1e293b;
    font-weight:700;
    border-bottom:2px solid #dbe4ee;
}

/* #last-message th,
td {
	padding: 0 5pt;
} */

th,
td{
    padding:12px 18px;
	height:54px;
}

#last-message td{
    padding:14px 16px;
    color:#475569;
    border-bottom:1px solid #eef2f7;
	font-variant-numeric:tabular-nums;
} 

#last-message tbody tr{
    transition:.2s;
	text-align: center;
}

#last-message tbody tr:hover{
	background:#eff6ff;
}

#last-message thead th:first-child{
    border-top-right-radius:14px;
}

#last-message thead th:last-child{
    border-top-left-radius:14px;
}

#last-message tbody tr:nth-child(even){
    background:#fcfcfd;
}

#last-message-box::-webkit-scrollbar{
    width:8px;
}

#last-message-box::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:20px;
}

#last-message-box::-webkit-scrollbar-thumb:hover{
    background:#94a3b8;
}

#last-message-box button{
    padding:10px 18px;
    border-radius:10px;
    border:none;
    cursor:pointer;
    transition:.25s;
    font-family:'Vazirmatn';
    font-weight:600;
}

#last-message-box input:hover{
    transform:translateY(-2px);
}

.btn-open{
    background:#22c55e;
    color:white;
}

.btn-close{
    background:#ef4444;
    color:white;
}

.btn-cancel{
    background:#64748b;
    color:white;
}

.table-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    gap:20px;
}

.table-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.table-header h3{
    font-size:24px;
    color:#0f172a;
    margin:0;
}

.warning {
	background-color: #FC0;
	border-radius: 5px;
	/* width: fit-content; */
	width: 80%;
	overflow: hidden;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
	direction: rtl;
	font-size: 12pt;
}
.warning-group-header {
	background-color: #FC0;
	border-radius: 5px;
	/* width: fit-content; */
	width: 80%;
	overflow: hidden;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
	direction: rtl;
	font-size: 12pt;
	cursor: pointer;
}

.warning-icon {
	height: 18pt;
	float: right;
	margin-left: 2px;
}

.dismiss-icon {
	height: 18pt;
	float: left;
	margin-right: 2px;
	cursor: pointer;
}

.chart-tooltip-date {
	text-align: center;
	font-weight: bold;
}

.hidden {
	display: none;
}

/* Table Card */
.info-card{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;

	gap: 20px;
    background:#fff;
    border-radius:16px;
    padding:24px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    margin-bottom:20px;
}

.info-card i{
	margin-bottom: 12px;
}

.info-row{
    display:flex;
    gap:24px;
    justify-content:space-between;
    align-items:flex-start;
}

.info-item{
    display:flex;
    flex-direction:center;
    gap: 12px;
}

.info-item i{
    font-size:22px;
    color:var(--primary-color-light);
    width:28px;
    text-align:center;
}

.info-item div{
    display:flex;
    flex-direction:column;
}

.info-label{
    font-size:13px;
    color:#6b7280;
}

.info-value{
    font-size:16px;
    font-weight:700;
    color:#0f172a;
}

.info-name .info-value{
    font-size:18px;
}

/* Warnings */

.warning-card{
    background:#FFF8E6;
    border:1px solid #f6cf78;
    border-right:5px solid #F4B400;
    border-radius:16px;
    margin-bottom:16px;
    box-shadow:
		0 8px 20px rgba(255,180,0,.08);
    overflow:hidden;
	padding: 10px;
	/* height: 80px; */
}

.warning-card-header{
	display: flex;
	gap: 10px;
	justify-content:space-between;
    align-items:center;
    padding:16px 20px;
    cursor:pointer;
    transition:.25s;
}

.warning-card-header:hover{
    background:#fff8e5;
}

.warning-title{
    display:flex;
    align-items:center;
    gap:10px;
    color:#8A5A00;
	cursor: pointer;
    font-size:18px;
    font-weight:700;
}

.warning-count{
    min-width:34px;
    height:34px;
    border-radius:50%;
    background:#F4B400;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:700;
	font-size: 18px;
}

.warning-list{
    border-top:1px solid rgba(0,0,0,.08);
    padding:12px 18px;
}

.warning-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px dashed #E5E7EB;
}

.warning-item:last-child{
    border-bottom:none;
}

.warning-item i{
    /* color:#F4B400;; */
    font-size:20px;
}

.warning-dismiss{
	cursor: pointer;
	margin-bottom: 4px;
	color: var(--btn-color);
	background: none;
	border: none;
	font-size:22px;
    transition:.2s;
}

.warning-dismiss:hover{
    transform:scale(1.15);
    color:var(--btn-color-dark);
}

.warning-date{
    font-size:12px;
    color:#6B7280;
    margin-bottom:4px;
}

.warning-description{
    font-weight:600;
    color:#374151;
}

.warning-chevron{
    transition:.3s;
	color: #8A5A00;
}

.warning-card.open .warning-chevron{
    transform:rotate(180deg);
}

/* Grid */
.meter-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin:24px 0;
}

.meter-stat-card{
    background:white;
    border-radius:16px;
    padding:22px;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
    transition:.25s;
    text-align:center;
}

.meter-stat-card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.meter-stat-card i{
    font-size:30px;
    color:var(--primary-color-light);
    margin-bottom:12px;
}

.stat-title{
    font-size:13px;
    color:#6b7280;
    margin-bottom:8px;
}

.stat-value{
    font-size:18px;
    font-weight:700;
    color:#1f2937;
}