@import url('https://fonts.googleapis.com/css2?family=Franklin Gothic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
	--sidebar-w: 225px;
	--sidebar-collapsed-w: 50px;
	--accent: #cd4e18;
	--bg: #f8f9fa;
	--muted: #020752;

	/*from outside*/
	--base-clr: #F1F1F1;/*background*/
	--line-clr: #42434a;/*borderlines */
	--hover-clr: #C9C7C7;/*background hover Selection*/
	--text-clr: #240404;/*text color*/
	--accent-clr: #991719;/*Current selection #FF635E 991719*/
	--secondary-text-clr: #403232;
}
*{box-sizing:border-box;}
body {
	/*
	font-family: 'Segoe UI', sans-serif;
	background-color: #f8f9fa;*/
   /*
	font-family: 'MS Sans Serif', sans-serif;
	font-family: 'Franklin Gothic', Arial Bold;*/

	/*background-color: var(--base-clr);*/

	font-family: 'Franklin Gothic', sans-serif;  /* replace Franklin Gothic */
	font-size: 14px;                     /* slightly smaller */
	font-weight: 400;                  /* normal instead of bold */
	color: #240404;
	line-height: 1.25;
	background-color: #F8F9FA;
	overflow-y: auto;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
}
/*body{margin:0;font-family:Inter,Arial,sans-serif;background:#f6f8fa;}*/
.layout{display:flex;min-height:100vh;}
/* Sidebar */
.sidebar{
  width:var(--sidebar-w);background:var(--bg);
  border-right:1px solid #e6e6e6;
  transition:width .25s ease,transform .25s ease;
  position:fixed;top:0;left:0;bottom:0;
  padding:12px 0;z-index:1200;overflow-y:auto;
  box-shadow:2px 0 14px rgba(0,0,0,.03);
}
.sidebar.collapsed{width:var(--sidebar-collapsed-w);}
.sidebar.show{transform:translateX(0);}
@media(max-width:768px){
	.sidebar{width:90vw;max-width:320px;min-width:170px;
	transform:translateX(-100%);
	transition:transform 0.25s;
	border-radius:0 16px 16px 0;
	background:#fff; padding-top:10px;}
	.sidebar.show{transform:translateX(0);}
}
/* Brand */
.brand{display:flex;align-items:center;gap:10px;padding:8px 16px;font-weight:bold;}
.logo{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;}
.logo img,.topbar-logo img{width:24px;height:24px;object-fit:contain;}
.brand-text{background:linear-gradient(45deg,#f44336,#ff9100);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
/* Menu */
.menu{list-style:none;padding:0;margin:0;}
.menu-item{position:relative;}
.menu-btn{
	display:flex;align-items:center;gap:10px;width:100%;padding:10px 20px;
	background:none;border:none;cursor:pointer;border-radius:8px;text-align:left;color:#222;font-size:1em;
}
.menu-btn i{min-width:26px;text-align:center;font-size:1.12em;color:var(--muted);}
.menu-btn:hover{background:#eef6ff;color:var(--accent);}
.chev{margin-left:auto;font-size:1.05em;color:#bbb;transition:transform .3s;}
.menu-item.open .chev{transform:rotate(180deg);}
/* Submenu */
.submenu{list-style:none;padding-left:32px;margin:0;max-height:0;overflow:hidden;transition:max-height .3s ease;}
.menu-item.open>.submenu{max-height:600px;}
.submenu li a{display:flex;align-items:center;gap:12px;padding:9px 8px;
  border-radius:6px;color:#333;text-decoration:none;font-size:1.04em;}
.submenu li a:hover{background:#f0f7ff;color:var(--accent);}
/* Collapsed desktop text hide */
@media(min-width:769px){
	.sidebar.collapsed .menu-text,
	.sidebar.collapsed .chev,
	.sidebar.collapsed .submenu-text,
	.sidebar.collapsed .brand-text{display:none;}
	.sidebar.collapsed .brand{justify-content:center;}
}
/* Hover-expand mode */
@media(min-width:769px){
	.sidebar.hover-expand{width:var(--sidebar-w);}
	.sidebar.hover-expand ~ .content{margin-left:var(--sidebar-w);}
	.sidebar.hover-expand .menu-text,
	.sidebar.hover-expand .chev,
	.sidebar.hover-expand .submenu-text,
	.sidebar.hover-expand .brand-text{display:inline;}
}
/* Content layout with sticky topbar */
.content{
	flex:1;margin-left:var(--sidebar-w);
	display:flex;flex-direction:column;
	height:100vh; /* Fill viewport */
	transition:margin-left .25s ease;
}
.sidebar.collapsed ~ .content{margin-left:var(--sidebar-collapsed-w);}
@media(max-width:768px){.content{margin-left:0!important;}}
/* Sticky topbar */
.topbar{
	display:flex;align-items:center;justify-content:space-between;
	padding:8px;
	background:var(--bg);
	position:sticky;top:0;
	z-index:100;
	border-bottom:1px solid #e6e6e6;
}
.topbar-left{display:flex;align-items:center;gap:8px;}
.topbar-logo{display:none;align-items:center;gap:6px;}
.topbar-logo span{font-weight:bold;background:linear-gradient(45deg,#f44336,#ff9100);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:1.05em;}
/* User menu */
.user-menu-container{position:relative;}
.user-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;cursor:pointer;border:2px solid #eee;}
.menu-dots{font-size:1.4em;cursor:pointer;display:none;}
.user-dropdown{
	position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid #e1e1e1;
	border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,0.08);min-width:140px;z-index:2000;
	opacity:0;transform:translateY(-6px);pointer-events:none;
	transition:opacity 0.2s ease,transform 0.2s ease;
}
.user-dropdown.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.user-dropdown a{display:block;padding:8px 12px;color:#333;text-decoration:none;font-size:0.95em;}
.user-dropdown a:hover{background:#f4f7ff;color:var(--accent);}
@media(max-width:768px){
	.topbar-logo{display:flex;}
	.menu-dots{display:block;}
	.user-avatar{display:none;}
}
/* Scrollable inner content */
.content-inner{
	flex:1;overflow-y:auto;
	padding:18px;
	background:#fff;
}
/* Overlay mobile */
.sidebar-overlay{display:none;}
@media(max-width:768px){
	.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.04);z-index:1199;}
	.sidebar.show ~ .sidebar-overlay{display:block;}
}
/* Desktop (>= 769px): keep fixed height scroll area */
@media (min-width: 769px) {
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.content-inner {
		flex: 1;
		overflow-y: auto;
	}
}

/* Mobile (< 769px): let it flow normally */
@media (max-width: 768px) {
	.content {
		display: block;
		height: auto;
	}
	.content-inner {
		height: auto;
		overflow-y: visible;
		padding-bottom: 60px; /* optional space for safe area */
	}
}

.brand-text {
	background: linear-gradient(45deg, #f44336, #ff9100);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2rem;
    font-weight: bold;
    margin-left: 10px;
}

.login-card {
    width: 100%;
    max-width: 350px;
    border-left: 5px solid green;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.15);
}

.logo {
    width: 50px;
    height: auto;
}
/*.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}*/

.user-info {
    display: flex;
    flex-direction: column;
}
.textarea-left {
  text-align: left !important;
}

/* This will apply your body font and font-size to DataTables */
.dataTable,
.dataTable th,
.dataTable td,
.dataTables_wrapper,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
	font-family: inherit !important;
	font-size: inherit !important;
	color: inherit !important;
}
input,
select,
textarea,
table,
button {
	font-family: inherit;   /* same as body */
	font-size: inherit;     /* same as body */
	font-weight: inherit;   /* same as body */
	color: inherit;         /* same text color */
	line-height: inherit;
}

input,
select,
textarea,
button {
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 6px 8px;
	background-color: #fff;
}
.textarea-left {
	text-align: left;
	white-space: pre-wrap; /* keeps line breaks, removes unintended spaces */
}
/* Container + basic reset inside the picker */
.daterangepicker {
	background: #fff !important;
	border: 1px solid #d0d7de !important;
	border-radius: 6px !important;
	color: #2b2b2b !important;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Kill theme table/button styles leaking in */
.daterangepicker table,
.daterangepicker table th,
.daterangepicker table td {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Month header */
.daterangepicker .drp-calendar .calendar-table th.month {
  background: #ffffff !important;
  color: #24292f !important;
  font-weight: 600 !important;
  text-align: center !important;
}

/* Weekday header row */
.daterangepicker .calendar-table thead tr:nth-child(2) th {
  background: #f6f8fa !important;
  color: #57606a !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
}

/* Prev/Next buttons */
.daterangepicker .calendar-table thead tr:first-child th.prev,
.daterangepicker .calendar-table thead tr:first-child th.next {

  border-radius: 4px !important;
   color: #0d6efd !important;   /* make arrows visible */
  font-weight: bold;        /* optional: make them stand out */
  cursor: pointer;          /* ensures it looks clickable */
}

/* Day cells */
.daterangepicker .calendar-table td {
  background: #fff !important;
  color: #24292f !important;
  border-radius: 0 !important;
}
.daterangepicker td.off { color: #8c959f !important; }
.daterangepicker td.available:hover { background: #e9ecef !important; }
.daterangepicker td.in-range { background: #dbeafe !important; }          /* light blue range */
.daterangepicker td.start-date,
.daterangepicker td.end-date {
  background: #357ebd !important;
  color: #fff !important;
  border-radius: 4px !important;
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background: #357ebd !important;
  color: #fff !important;
}

/* Left ranges panel */
.daterangepicker .ranges li {
  background: #f6f8fa !important;
  color: #24292f !important;
  border-radius: 4px !important;
  margin-bottom: 2px !important;
}
.daterangepicker .ranges li:hover,
.daterangepicker .ranges li.active {
  background: #357ebd !important;
  color: #fff !important;
}

/* Buttons – beat .btn-success / .btn-default from themes */
.daterangepicker .drp-buttons .btn.applyBtn.btn-success,
.daterangepicker .drp-buttons .btn.applyBtn {
  background-color: #357ebd !important;
  border-color: #357ebd !important;
  color: #fff !important;
}
.daterangepicker .drp-buttons .btn.cancelBtn.btn-default,
.daterangepicker .drp-buttons .btn.cancelBtn.btn-secondary,
.daterangepicker .drp-buttons .btn.cancelBtn {
  background-color: #eef2f6 !important;
  border-color: #cfd6dc !important;
  color: #24292f !important;
}

/* Inputs at top of calendars */
.daterangepicker .drp-selected,
.daterangepicker .drp-calendar .form-control,
.daterangepicker .drp-calendar input {
  background: #fff !important;
  border: 1px solid #cfd6dc !important;
  color: #24292f !important;
  box-shadow: none !important;
}

/* Month-Year text color */
.daterangepicker .calendar-table th.month {
    color: #000 !important;   /* black */
    font-weight: 600;         /* make it bold */
    font-size: 14px;          /* adjust size if needed */
}
/*.daterangepicker .calendar-table th.prev::after {
    content: "◀"; /* left arrow
    color: #000;
    font-size: 16px;
}

.daterangepicker .calendar-table th.next::after {
    content: "▶"; /* right arrow 
    color: #000;
    font-size: 16px;
}*/
/* Left & right arrow colors */
.daterangepicker .calendar-table th.prev i,
.daterangepicker .calendar-table th.next i {
    color: #000 !important;   /* black arrows */
    font-size: 14px;          /* adjust size if too small */
}


.offcanvas-half {
    width: 100% !important; /* Default for small screens */
}

@media (min-width: 768px) { /* Tablet and up */
    .offcanvas-half {
        width: 65% !important; /* Half width on larger screens */
    }
}
textarea {
    vertical-align: top;  /* ensures text starts at top */
    padding-top: 5px;     /* optional small padding */
    line-height: 1.4;     /* ensure normal spacing */
}