@charset "utf-8";

/* ============================================
   iManage UI — Apple-inspired design system
   ============================================ */

:root {
	--bg-primary: #f5f5f7;
	--bg-surface: #ffffff;
	--bg-content: #f0f0f3;
	--bg-navbar: rgba(251, 251, 253, 0.80);
	--bg-notification: rgba(29, 29, 31, 0.94);
	--text-primary: #1d1d1f;
	--text-secondary: #86868b;
	--text-on-dark: #f5f5f7;
	--accent: #1fb4c5;
	--accent-hover: #18a0b0;
	--border: rgba(0, 0, 0, 0.10);
	--separator: 1px solid var(--border);
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 18px;
	--transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Arial, sans-serif;
	background: var(--bg-surface);
	color: var(--text-primary);
	letter-spacing: -0.01em;
	padding-top: 48px;
}

h1 { font-weight: 600; letter-spacing: -0.02em; }
h2 { font-weight: 600; letter-spacing: -0.02em; }
h3 { font-weight: 600; letter-spacing: -0.01em; }
h4 { font-weight: 600; }
h5 { font-weight: 600; }
h6 { font-weight: 600; }

/* ---- Notification Bar (Layer 4 — topmost, dark) ---- */
#notification_box {
	width: 100%;
	position: fixed;
	z-index: 1090;
	background: #000;
	height: 48px;
	overflow: hidden;
	top: 0;
	left: 0;
}

#notification_slider {
	transform: translateY(-48px);
	transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

#notification_slider.show-notification {
	transform: translateY(0);
}

/* Bloc 1 : message de notification (caché au-dessus) */
#notification_message_bar {
	height: 48px;
	background: transparent;
}

.notification_message_content {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	width: 100%;
	padding: 0 16px;
}

#notification_text {
	color: #fff;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#notification_message_bar {
	transition: background-color 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

#notification_message_bar.bg-success { background-color: #198754; }
#notification_message_bar.bg-info { background-color: #0d6efd; }
#notification_message_bar.bg-warning { background-color: #e67e00; }
#notification_message_bar.bg-danger { background-color: #dc3545; }

/* Bloc 2 : logo + titre + icônes (visible par défaut) */
#notification_main_bar {
	height: 48px;
	background: transparent;
}

.notification_main_content {
	display: flex;
	align-items: center;
	height: 48px;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 16px;
}

.notification_main_content .navbar-brand {
	flex-shrink: 0;
}

.notification_main_content .navbar-brand img {
	height: 28px;
	width: auto;
}

#content_title {
	flex: 1;
	position: relative;
	top: 0;
	text-transform: uppercase;
	color: var(--text-on-dark);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.notification_bar_actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.session_controls {
	opacity: 0.7;
	transition: opacity var(--transition);
	display: none !important;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	color: var(--text-on-dark);
	cursor: pointer;
}

.session_controls.visible {
	display: inline-flex !important;
}

.session_controls:hover { opacity: 1; }

/* Lang switcher — toujours visible, indépendant de la session */
.lang-switcher-group {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin: 0 4px;
}

.lang-switcher-group .lang-btn {
	border: none;
	border-radius: 4px;
	background: transparent;
	color: rgba(255,255,255,0.5);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 3px 7px;
	cursor: pointer;
	line-height: 1;
	transition: color 0.2s, background 0.2s;
}

.lang-switcher-group .lang-btn.active {
	background: rgba(0,180,216,0.22);
	color: #00B4D8;
}

.lang-switcher-group .lang-btn:hover:not(.active) {
	color: rgba(255,255,255,0.9);
}

.persistent_control {
	opacity: 0.7;
	transition: opacity var(--transition);
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	color: var(--text-on-dark);
	cursor: pointer;
}

.persistent_control:hover { opacity: 1; }

/* ---- Navbar (Layer 3 — light, frosted glass) ---- */
.navbar {
	position: sticky;
	top: 48px;
	z-index: 1030;
	background: var(--bg-navbar) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: var(--separator);
	padding: 8px 0;
	transition: background var(--transition);
}

.navbar-brand img {
	opacity: 0.9;
	transition: opacity var(--transition);
}

.navbar-brand:hover img {
	opacity: 1;
}

.nav-link {
	color: var(--text-primary) !important;
	font-weight: 500;
	padding: 6px 14px !important;
	border-radius: var(--radius-sm);
	transition: background var(--transition);
}

.nav-link > .fa-solid,
.nav-link > .fa-regular {
	margin-right: 6px;
	width: 1.1em;
	text-align: center;
}

.nav-link:hover {
	background: rgba(0, 0, 0, 0.04);
}

.dropdown-menu {
	border: var(--separator);
	border-radius: var(--radius-md);
	padding: 6px;
	background: var(--bg-surface);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	animation: dropdown-in 0.15s ease-out;
}

@keyframes dropdown-in {
	from { opacity: 0; transform: translateY(-4px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.dropdown-item {
	padding: 7px 12px;
	border-radius: 6px;
	color: var(--text-primary);
	transition: background var(--transition);
}

.dropdown-item:hover, .dropdown-item:focus {
	background: var(--accent);
	color: #fff;
}

.dropdown-header {
	font-weight: 600;
	color: var(--text-secondary);
	padding: 7px 12px 4px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.dropdown-divider {
	margin: 4px 12px;
	opacity: 0.15;
}

.dropdown-menu-columns {
	columns: 2;
	column-gap: 4px;
	column-rule: 1px solid var(--border);
	min-width: 480px;
}

.dropdown-group {
	break-inside: avoid;
	list-style: none;
}

.dropdown-group + .dropdown-group {
	margin-top: 2px;
}

#user {
	color: var(--text-secondary);
}

#user strong {
	color: var(--text-primary);
	font-weight: 600;
}

/* ---- Content Area (Layer 2 — recessed, muted) ---- */
#page {
}

#page_content {
	padding-bottom: 60px;
}

#requested_content {
	padding-top: 0;
	padding-bottom: 0;
}

/* ---- Busy Overlay ---- */
#busy_overlay {
	position: fixed;
	top: 48px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1040;
	background: rgba(0, 0, 0, 0.2);
	display: none;
	align-items: center;
	justify-content: center;
}

#busy_overlay.active {
	display: flex;
}

#busy_overlay .fa-spin {
	color: var(--accent);
	background: var(--bg-surface);
	width: 56px;
	height: 56px;
	line-height: 56px;
	text-align: center;
	border-radius: 50%;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* ---- Breadcrumb Bar ---- */
#breadcrumb_bar {
	display: none;
	padding: 6px 0;
	background: var(--bg-surface);
	border-bottom: var(--separator);
}

#breadcrumb_bar.visible {
	display: block;
}

#breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .82rem;
	margin: 0;
	padding: 0;
}

#breadcrumb .bc-item {
	color: var(--accent);
	cursor: pointer;
	font-weight: 500;
	border: none;
	background: none;
	padding: 0;
}

#breadcrumb .bc-item:hover {
	text-decoration: underline;
}

#breadcrumb .bc-sep {
	color: var(--text-secondary);
	font-size: .7rem;
}

#breadcrumb .bc-current {
	color: var(--text-primary);
	font-weight: 600;
}

/* ---- Footer (Layer 1 — grounded, clean) ---- */
#page_footer {
	position: fixed;
	height: 48px;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--bg-surface);
	border-top: var(--separator);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 0 20px;
	z-index: 100;
}

#page_footer small {
	color: var(--text-secondary);
	font-weight: 500;
	letter-spacing: 0.02em;
}

#page_footer img {
	height: 20px;
	width: auto;
	opacity: 0.4;
	transition: opacity var(--transition);
}

#page_footer:hover img {
	opacity: 0.7;
}

/* ---- Login Greeting ---- */
#login_greeting_wrap {
	position: fixed;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 1060;
	pointer-events: none;
	display: none;
}

#login_greeting_wrap span {
	font-family: 'Dancing Script', cursive;
	font-size: 4.5rem;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	line-height: 1;
	display: inline-block;
	transition: opacity 0.7s ease-in-out;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* ---- Login Box ---- */
.login-brand-col {
	background: #000;
	min-height: 320px;
}

.login-brand-logo {
	width: 60%;
	max-width: 160px;
	height: auto;
}

#login_box .btn-primary {
	font-weight: 600;
}

/* ---- Forms & Inputs ---- */
.form-control {
	border-radius: var(--radius-sm);
	border: 1px solid rgba(0, 0, 0, 0.12);
	padding: 8px 12px;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus {
	border-color: var(--accent);
	box-shadow: none;
}

.form-select {
	border-radius: var(--radius-sm);
}

/* ---- Tables ---- */
.table thead th {
	font-weight: 600;
	font-size: .78rem;
	text-transform: capitalize;
	letter-spacing: 0.02em;
	color: var(--text-secondary);
}

.table td {
	vertical-align: top;
	border-color: var(--border);
	padding: 10px 12px;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
	background-color: rgba(0, 0, 0, 0.025);
}

.table-sm td, .table-sm th {
	padding: 6px 10px;
}

/* DataTables controls — discret */
div.dataTables_info,
.dataTables_info {
	color: var(--text-secondary) !important;
	font-size: .72rem !important;
}

div.dataTables_length,
div.dataTables_length label,
.dataTables_length,
.dataTables_length label {
	font-size: .72rem !important;
	color: var(--text-secondary) !important;
}

div.dataTables_length select,
.dataTables_length select {
	font-size: .72rem !important;
}

div.dataTables_filter,
div.dataTables_filter label,
.dataTables_filter,
.dataTables_filter label {
	font-size: .72rem !important;
	color: var(--text-secondary) !important;
}

div.dataTables_filter input,
.dataTables_filter input {
	font-size: .78rem !important;
}

/* Boutons et icones dans les cellules de tableaux */
.table td .btn,
.table th .btn {
	padding-left: 10px;
	padding-right: 10px;
}

.table td .fa-solid,
.table td .fa-regular {
	padding: 0 4px;
}

/* ---- Cards & Panels ---- */

/* ---- Content surfaces (forms, reports rendered in content area) ---- */
/* ---- Detail link on record numbers ---- */
strong.detail-link {
	color: var(--accent);
	cursor: pointer;
}

strong.detail-link:hover {
	text-decoration: underline;
}

/* ---- Content title ---- */
.content-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--text-primary);
	background: var(--bg-content);
	margin: 20px 0;
	padding: 8px 16px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	gap: 8px;
}

.content-title .content-title-actions {
	margin-left: auto;
}

.content-title small {
	font-weight: 500;
	color: var(--text-secondary);
	letter-spacing: 0;
	margin-left: 10px;
}

#report_nav_links,
#report_form_links {
	margin-left: auto;
	display: flex;
	gap: 2px;
}

#report_nav_links + #report_form_links {
	margin-left: 0;
}

#report_nav_links .nav-link-btn,
#report_form_links .form-link-btn {
	background: none;
	border: none;
	color: var(--accent);
	font-size: .8rem;
	font-weight: 500;
	padding: 2px 8px;
	cursor: pointer;
	text-decoration: none;
}

#report_nav_links .nav-link-btn:hover,
#report_form_links .form-link-btn:hover {
	text-decoration: underline;
	color: var(--accent-hover);
}

/* ---- Action icons spacing ---- */
.record_tools .fa-solid,
.record_tools .fa-regular,
.print_order_invoice,
.print_kitchen_ticket,
.print_bar_ticket,
.change_password_command,
.update_data,
.cancel_data {
	padding: 4px 6px;
	margin: 0 2px;
	cursor: pointer;
	color: var(--text-secondary);
	transition: color var(--transition);
}

.record_tools .fa-solid:hover,
.record_tools .fa-regular:hover,
.print_order_invoice:hover,
.print_kitchen_ticket:hover,
.print_bar_ticket:hover,
.change_password_command:hover,
.update_data:hover,
.cancel_data:hover {
	color: var(--accent);
}

/* ---- Centered form container ---- */
.form-container {
	max-width: 480px;
	margin: 0 auto;
}

.form-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-bottom: 24px;
}



/* ---- Monthly report header ---- */
.report-header {
	text-align: center;
	margin-bottom: 24px;
}

.report-header img {
	width: 180px;
	height: auto;
	margin-bottom: 8px;
}

.report-header .report-subtitle {
	color: var(--accent);
	font-weight: 600;
}

.report-header h3 {
	font-weight: 700;
	margin-top: 16px;
	letter-spacing: 0.02em;
}

.report-header h3 small {
	font-weight: 400;
	color: var(--text-secondary);
}

.report-header .report-date {
	text-align: right;
	color: var(--text-secondary);
}

.report-main-title {
	font-weight: 700;
	margin-top: 16px;
	letter-spacing: 0.02em;
}

/* ---- Hidden inputs ---- */
.no_display,
input[type="radio"].no_display,
input[type="checkbox"].no_display {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* ---- Data & Utilities ---- */
.data_block {
	text-transform: uppercase;
}


.print_change_ticket, #expand_content, .dropdown-menu a {
	cursor: pointer;
}

.print_change_ticket, .cancel_data, .update_data, .comment {
	margin-left: 10px;
}

.number {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.input-group-text {
	padding-left: 20px;
	padding-right: 20px;
}

input[type="number"] {
	text-align: right;
}