/* ==========================================================================
   EXTRA LOGISTICS MAIL — MASTER DESIGN SYSTEM (ATTACHMENT A FIDELITY)
   Theme: Deep Petrol, Glassmorphism, Lime Green & Cyan Accents
   ========================================================================== */

:root {
	/* Palette */
	--extra-bg-deep: #08171a;
	--extra-bg-petrol: #0D282C;
	--extra-bg-petrol-light: #133E44;
	--extra-bg-surface: rgba(13, 40, 44, 0.72);
	--extra-bg-surface-elevated: rgba(19, 62, 68, 0.85);
	--extra-bg-input: rgba(8, 26, 29, 0.78);
	
	--extra-accent-lime: #C5D267;
	--extra-accent-lime-rgb: 197, 210, 103;
	--extra-accent-cyan: #20c997;
	--extra-accent-cyan-rgb: 32, 201, 151;
	
	--extra-text-primary: #FFFFFF;
	--extra-text-secondary: #B5C6C6;
	--extra-text-muted: #7ea4aa;
	
	--extra-glass-border: rgba(255, 255, 255, 0.08);
	--extra-glass-border-glow: rgba(197, 210, 103, 0.35);
	--extra-glass-blur: blur(24px) saturate(160%);
	
	--extra-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--extra-font-arabic: 'Cairo', 'Inter', Tahoma, sans-serif;
}

[dir="rtl"] {
	font-family: var(--extra-font-arabic);
}

/* ==========================================================================
   GLOBAL LAYOUT & BACKGROUND
   ========================================================================== */
html.extra-mail-skin,
body.extra-mail-body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	font-family: var(--extra-font-sans);
	background: #08171a radial-gradient(circle at 20% 15%, #0f353a 0%, #08171a 100%) fixed !important;
	color: var(--extra-text-primary);
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

#layout.extra-layout {
	display: flex;
	height: calc(100vh - 58px);
	margin-top: 58px;
	width: 100vw;
	background: transparent;
	position: relative;
	box-sizing: border-box;
}

/* ==========================================================================
   TOP GLOBAL WORKSPACE TOOLBAR
   ========================================================================== */
.extra-top-workspace-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 58px;
	background: rgba(9, 27, 30, 0.85);
	backdrop-filter: var(--extra-glass-blur);
	-webkit-backdrop-filter: var(--extra-glass-blur);
	border-bottom: 1px solid var(--extra-glass-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	z-index: 100;
	box-sizing: border-box;
}

/* Search Container with ⌘ K shortcut hint */
.extra-search-container {
	flex: 1;
	max-width: 480px;
}

.extra-search-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.extra-search-icon {
	position: absolute;
	left: 14px;
	width: 16px;
	height: 16px;
	stroke: var(--extra-text-muted);
	pointer-events: none;
}

.extra-quick-search-input {
	width: 100%;
	height: 38px;
	background: rgba(6, 20, 22, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 0 60px 0 38px;
	color: #ffffff;
	font-size: 13.5px;
	font-family: inherit;
	transition: all 0.2s ease;
	outline: none;
}

.extra-quick-search-input::placeholder {
	color: #6d8e94;
}

.extra-quick-search-input:focus {
	border-color: var(--extra-accent-lime);
	background: rgba(10, 31, 35, 0.95);
	box-shadow: 0 0 12px rgba(197, 210, 103, 0.25);
}

.extra-search-kbd {
	position: absolute;
	right: 12px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 6px;
	padding: 2px 7px;
	color: #9cb5ba;
	pointer-events: none;
}

/* Header Right Actions */
.extra-header-actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.extra-action-icon-btn {
	position: relative;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #c0d8dc;
	transition: all 0.2s ease;
}

.extra-action-icon-btn:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(197, 210, 103, 0.4);
	color: #ffffff;
}

.extra-action-icon-btn svg {
	width: 17px;
	height: 17px;
}

.extra-notif-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--extra-accent-lime);
	color: #08171a;
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 8px rgba(197, 210, 103, 0.6);
}

/* User Profile Pill */
.extra-user-profile-pill {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	padding: 3px 12px 3px 4px;
	cursor: pointer;
	user-select: none;
	transition: all 0.2s ease;
}

.extra-user-profile-pill:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(197, 210, 103, 0.35);
}

.profile-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(135deg, #17545e 0%, #207d8c 100%);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(197, 210, 103, 0.4);
}

.profile-name {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: #e4f2f5;
}

.chevron-down {
	width: 12px;
	height: 12px;
	stroke: var(--extra-text-muted);
}

/* Profile Dropdown Menu */
.extra-profile-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: #0d282c;
	border: 1px solid rgba(197, 210, 103, 0.3);
	border-radius: 14px;
	padding: 10px 0;
	min-width: 200px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
	display: none;
	flex-direction: column;
	z-index: 200;
}

.extra-user-profile-pill.active .extra-profile-menu {
	display: flex;
}

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

.menu-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #17545e;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
}

.menu-name {
	display: block;
	font-size: 13.5px;
	color: #ffffff;
}

.menu-role {
	display: block;
	font-size: 11.5px;
	color: var(--extra-accent-lime);
}

.menu-divider {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	margin: 6px 0;
}

.menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	color: #c0dce1;
	font-size: 13px;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.menu-item svg {
	width: 15px;
	height: 15px;
	stroke: #7ea1a7;
}

.menu-item:hover {
	background: rgba(197, 210, 103, 0.12);
	color: #ffffff;
}

.menu-item:hover svg {
	stroke: var(--extra-accent-lime);
}

.menu-item.logout:hover {
	background: rgba(220, 53, 69, 0.15);
	color: #ff9999;
}

/* ==========================================================================
   LEFT NAVIGATION MENU (#layout-menu)
   ========================================================================== */
#layout-menu.extra-layout-menu {
	width: 220px;
	min-width: 220px;
	height: 100%;
	background: rgba(11, 33, 37, 0.85);
	backdrop-filter: var(--extra-glass-blur);
	-webkit-backdrop-filter: var(--extra-glass-blur);
	border-right: 1px solid var(--extra-glass-border);
	display: flex;
	flex-direction: column;
	padding: 16px 14px 20px;
	box-sizing: border-box;
	z-index: 10;
}

/* Brand Logo */
.extra-menu-brand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 6px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	margin-bottom: 16px;
}

.extra-brand-logo {
	height: 28px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
}

/* Distinctive Glowing Compose Button (Attachment A) */
.extra-compose-wrapper {
	margin-bottom: 20px;
}

.extra-compose-btn,
#taskmenu a.button.compose {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	width: 100% !important;
	height: 44px !important;
	border-radius: 12px !important;
	background: rgba(19, 62, 68, 0.9) !important;
	border: 1px solid rgba(197, 210, 103, 0.45) !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.3px !important;
	text-decoration: none !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 16px rgba(197, 210, 103, 0.22) !important;
	transition: all 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}

.extra-compose-btn::before,
#taskmenu a.button.compose::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5D267' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'%3E%3C/path%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
}

.extra-compose-btn:hover,
#taskmenu a.button.compose:hover {
	background: rgba(25, 78, 85, 1) !important;
	border-color: var(--extra-accent-lime) !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 24px rgba(197, 210, 103, 0.4) !important;
	transform: translateY(-1px);
}

/* Nav Tasks List */
.extra-nav-tasks {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

#layout-menu a.button:not(.compose) {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	height: 40px !important;
	padding: 0 12px !important;
	border-radius: 10px !important;
	color: var(--extra-text-secondary) !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	transition: all 0.15s ease !important;
}

#layout-menu a.button:not(.compose):hover {
	background: rgba(255, 255, 255, 0.06) !important;
	color: #ffffff !important;
}

#layout-menu a.button.selected:not(.compose) {
	background: rgba(197, 210, 103, 0.12) !important;
	border-color: rgba(197, 210, 103, 0.35) !important;
	color: #ffffff !important;
	font-weight: 600 !important;
}

/* Task Menu Footer (Settings, Theme, Logout) */
.extra-menu-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* ==========================================================================
   FOLDERS SIDEBAR (#layout-sidebar)
   ========================================================================== */
#layout-sidebar.extra-sidebar {
	width: 230px;
	min-width: 230px;
	height: 100%;
	background: rgba(10, 30, 34, 0.75);
	backdrop-filter: var(--extra-glass-blur);
	-webkit-backdrop-filter: var(--extra-glass-blur);
	border-right: 1px solid var(--extra-glass-border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.extra-sidebar-header {
	padding: 16px 18px 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.extra-sidebar-header .username {
	font-size: 13.5px;
	font-weight: 600;
	color: #e0eff1;
}

/* Mailbox Tree Listing (Attachment A) */
.extra-folderlist-content {
	flex: 1;
	overflow-y: auto;
	padding: 12px 10px;
}

.extra-mailboxlist li {
	margin-bottom: 2px;
}

.extra-mailboxlist a {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 8px 12px !important;
	border-radius: 8px !important;
	color: var(--extra-text-secondary) !important;
	font-size: 13px !important;
	text-decoration: none !important;
	transition: all 0.15s ease !important;
}

.extra-mailboxlist a:hover {
	background: rgba(255, 255, 255, 0.06) !important;
	color: #ffffff !important;
}

/* Active Folder (Inbox Selected - Lime Highlight) */
.extra-mailboxlist li.selected > a {
	background: rgba(197, 210, 103, 0.14) !important;
	border: 1px solid rgba(197, 210, 103, 0.3) !important;
	color: #ffffff !important;
	font-weight: 600 !important;
}

/* Unread Badge (Pill Badge) */
.extra-mailboxlist .unreadcount {
	background: var(--extra-accent-lime) !important;
	color: #08171a !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	padding: 2px 7px !important;
	border-radius: 10px !important;
	box-shadow: 0 0 8px rgba(197, 210, 103, 0.5) !important;
}

/* Custom Folders Section */
.extra-folders-section-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--extra-text-muted);
	padding: 14px 12px 6px;
}

/* ==========================================================================
   MESSAGES LIST PANEL (#layout-list)
   ========================================================================== */
#layout-list.extra-listbox {
	width: 370px;
	min-width: 340px;
	height: 100%;
	background: rgba(13, 40, 44, 0.65);
	backdrop-filter: var(--extra-glass-blur);
	-webkit-backdrop-filter: var(--extra-glass-blur);
	border-right: 1px solid var(--extra-glass-border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.extra-list-header {
	padding: 16px 18px 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.extra-inbox-title-wrap {
	display: flex;
	flex-direction: column;
}

.extra-folder-heading {
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
}

.extra-folder-counts {
	font-size: 12px;
	color: var(--extra-text-muted);
	margin-top: 2px;
}

.extra-messagelist-toolbar {
	display: flex;
	align-items: center;
	gap: 6px;
}

.extra-messagelist-toolbar a.button {
	width: 30px;
	height: 30px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #92b0b5;
	transition: all 0.15s ease;
}

.extra-messagelist-toolbar a.button:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

/* Message List Table rendered as Rounded Glass Cards */
.extra-messagelist-content {
	flex: 1;
	overflow-y: auto;
	padding: 10px 8px;
}

.extra-messagelist-table {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 6px !important;
}

.extra-messagelist-table tr {
	background: rgba(10, 31, 35, 0.6) !important;
	border: 1px solid rgba(255, 255, 255, 0.06) !important;
	border-radius: 12px !important;
	transition: all 0.15s ease !important;
	cursor: pointer;
}

.extra-messagelist-table tr:hover {
	background: rgba(16, 48, 54, 0.75) !important;
	border-color: rgba(197, 210, 103, 0.25) !important;
}

/* Active / Selected Message Row (Attachment A - Lime Accent Glow) */
.extra-messagelist-table tr.selected {
	background: rgba(19, 62, 68, 0.9) !important;
	border: 1px solid rgba(197, 210, 103, 0.45) !important;
	border-left: 3.5px solid var(--extra-accent-lime) !important;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), 0 0 14px rgba(197, 210, 103, 0.2) !important;
}

.extra-messagelist-table td {
	padding: 10px 8px !important;
	vertical-align: middle !important;
	border: none !important;
	color: var(--extra-text-secondary);
}

.extra-messagelist-table td.subject {
	font-weight: 500;
	color: #e6f3f5;
}

.extra-messagelist-table tr.unread td.subject {
	font-weight: 700;
	color: #ffffff;
}

.extra-messagelist-table td.date {
	font-size: 11.5px;
	color: var(--extra-text-muted);
	text-align: right;
}

/* Card details styling */
.extra-message-card {
	display: flex;
	gap: 12px;
	width: 100%;
	padding: 4px;
	box-sizing: border-box;
}

.extra-message-card .card-avatar-col {
	flex-shrink: 0;
}

.extra-message-card .card-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
	color: #fff;
	background: #17545e;
	border: 1px solid rgba(197, 210, 103, 0.3);
}

.extra-message-card .avatar-ot { background: #17545e; }
.extra-message-card .avatar-ls { background: #206d7d; }
.extra-message-card .avatar-fd { background: #124e58; }
.extra-message-card .avatar-it { background: #28536b; }

.extra-message-card .card-content-col {
	flex: 1;
	min-width: 0;
}

.extra-message-card .card-top-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 3px;
}

.extra-message-card .card-sender-name {
	font-weight: 600;
	font-size: 13.5px;
	color: #ffffff;
}

.extra-message-card .card-timestamp {
	font-size: 11px;
	color: #799ea4;
}

.extra-message-card .card-subject-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}

.extra-message-card .card-subject-text {
	font-size: 13px;
	font-weight: 500;
	color: #d1e4e7;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.extra-message-card .card-snippet-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.extra-message-card .card-snippet-text {
	font-size: 12px;
	color: #799ea4;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

.extra-message-card .card-attachment-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.extra-message-card .card-attachment-icon svg {
	width: 14px !important;
	height: 14px !important;
	max-width: 14px !important;
	max-height: 14px !important;
	stroke: #799ea4;
	display: block;
}

#layout-sidebar.extra-sidebar {
	width: 220px !important;
	min-width: 200px !important;
}

.extra-mailboxlist a {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 10px 14px !important;
}

.extra-mailboxlist a .name {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* ==========================================================================
   MESSAGE READING PANEL & CONTACT INSPECTOR (#layout-content)
   ========================================================================== */
#layout-content.extra-layout-content {
	flex: 1;
	height: 100%;
	background: rgba(11, 34, 38, 0.72);
	backdrop-filter: var(--extra-glass-blur);
	-webkit-backdrop-filter: var(--extra-glass-blur);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.extra-content-header {
	height: 52px;
	padding: 0 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Main Split: Reading Iframe + Right Inspector */
.extra-preview-split-container {
	flex: 1;
	display: flex;
	height: calc(100% - 52px);
	width: 100%;
	overflow: hidden;
}

.extra-reading-area {
	flex: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}

.extra-iframe-wrapper {
	width: 100%;
	height: 100%;
	border: none;
}

.extra-iframe-wrapper iframe {
	width: 100%;
	height: 100%;
	border: none;
	background: transparent;
}

/* Rightmost Contact Inspector Panel (Attachment A) */
.extra-contact-inspector {
	width: 290px;
	min-width: 270px;
	max-width: 320px;
	height: 100%;
	background: rgba(8, 26, 29, 0.65);
	backdrop-filter: var(--extra-glass-blur);
	-webkit-backdrop-filter: var(--extra-glass-blur);
	border-left: 1px solid var(--extra-glass-border);
	padding: 24px 20px;
	overflow-y: auto;
	box-sizing: border-box;
}

.inspector-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.inspector-avatar-wrap {
	margin-bottom: 14px;
}

.inspector-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, #17545e 0%, #207d8c 100%);
	color: #ffffff;
	font-size: 22px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid rgba(197, 210, 103, 0.45);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(197, 210, 103, 0.2);
}

.inspector-name {
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 4px 0;
}

.inspector-email {
	font-size: 12px;
	color: var(--extra-text-muted);
	margin-bottom: 18px;
	word-break: break-all;
}

/* Quick Action Buttons */
.inspector-quick-actions {
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
}

.inspector-quick-actions .quick-btn {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #d1eaee;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.inspector-quick-actions .quick-btn:hover {
	background: rgba(197, 210, 103, 0.15);
	border-color: var(--extra-accent-lime);
	color: #ffffff;
	transform: translateY(-1px);
}

.inspector-quick-actions .quick-btn svg {
	width: 18px;
	height: 18px;
}

/* Inspector Sections */
.inspector-section {
	width: 100%;
	text-align: left;
	margin-bottom: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding-top: 14px;
}

.inspector-section .section-title {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--extra-accent-lime);
	margin: 0 0 10px 0;
}

.inspector-section .info-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.inspector-section .info-label {
	font-size: 12px;
	font-weight: 600;
	color: #ffffff;
}

.inspector-section .info-value {
	font-size: 11.5px;
	color: var(--extra-text-muted);
}

/* Recent Emails List */
.recent-emails-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.recent-item {
	padding: 8px 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	transition: background 0.15s ease;
	cursor: pointer;
}

.recent-item:hover {
	background: rgba(197, 210, 103, 0.1);
}

.recent-subject {
	font-size: 11.5px;
	color: #d5ecf0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.recent-time {
	font-size: 10.5px;
	color: var(--extra-text-muted);
	white-space: nowrap;
}

/* ==========================================================================
   INSIDE MESSAGE PREVIEW (Attachment A Fidelity)
   ========================================================================== */
.extra-message-header {
	padding: 20px 24px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.extra-subject-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
}

.extra-subject-title {
	font-size: 20px;
	font-weight: 700;
	color: #ffffff;
	margin: 0;
}

.extra-subject-badges {
	display: flex;
	align-items: center;
	gap: 8px;
}

.extra-badge {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 6px;
	letter-spacing: 0.3px;
}

.badge-external {
	background: rgba(230, 160, 30, 0.18);
	border: 1px solid rgba(240, 180, 50, 0.4);
	color: #f7ca55;
}

.badge-important {
	background: rgba(0, 180, 216, 0.18);
	border: 1px solid rgba(72, 202, 228, 0.4);
	color: #60d5ec;
}

.extra-star-btn {
	background: transparent;
	border: none;
	cursor: pointer;
	color: #799ea4;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s ease;
}

.extra-star-btn:hover,
.extra-star-btn.active {
	color: #f7ca55;
}

.extra-star-btn svg {
	width: 18px;
	height: 18px;
}

.extra-sender-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.extra-sender-avatar-circle {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, #17545e 0%, #207d8c 100%);
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid rgba(197, 210, 103, 0.4);
}

.extra-header-content {
	flex: 1;
}

/* Readable Body Canvas */
.extra-readable-body {
	padding: 24px 26px;
	color: #e5f1f3;
	font-size: 14.5px;
	line-height: 1.65;
}

/* Attachments Block */
.extra-attachments-block {
	padding: 12px 24px 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.extra-attachment-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 8px 0 0 0;
}

.extra-attachment-cards li {
	background: rgba(10, 31, 35, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: all 0.2s ease;
}

.extra-attachment-cards li:hover {
	background: rgba(16, 48, 54, 0.9);
	border-color: rgba(197, 210, 103, 0.4);
}

/* Bottom Reply Bar */
.extra-bottom-reply-bar {
	padding: 16px 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(8, 24, 27, 0.6);
}

.extra-reply-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 10px;
	padding: 8px 16px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.extra-reply-btn:hover {
	background: rgba(197, 210, 103, 0.15);
	border-color: var(--extra-accent-lime);
	color: #ffffff;
}

.extra-reply-btn svg {
	width: 15px;
	height: 15px;
}

.extra-reply-btn.icon-only {
	padding: 8px 12px;
}

/* ==========================================================================
   CUSTOM SCROLLBARS
   ========================================================================== */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.16);
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(197, 210, 103, 0.4);
}

/* ==========================================================================
   RTL (ARABIC) RULES
   ========================================================================== */
[dir="rtl"] #layout-menu.extra-layout-menu {
	border-right: none;
	border-left: 1px solid var(--extra-glass-border);
}

[dir="rtl"] #layout-sidebar.extra-sidebar {
	border-right: none;
	border-left: 1px solid var(--extra-glass-border);
}

[dir="rtl"] #layout-list.extra-listbox {
	border-right: none;
	border-left: 1px solid var(--extra-glass-border);
}

[dir="rtl"] .extra-contact-inspector {
	border-left: none;
	border-right: 1px solid var(--extra-glass-border);
}

[dir="rtl"] .extra-messagelist-table tr.selected {
	border-left: 1px solid rgba(197, 210, 103, 0.45) !important;
	border-right: 3.5px solid var(--extra-accent-lime) !important;
}

[dir="rtl"] .extra-search-icon {
	left: auto;
	right: 14px;
}

[dir="rtl"] .extra-quick-search-input {
	padding: 0 38px 0 60px;
	text-align: right;
}

[dir="rtl"] .extra-search-kbd {
	right: auto;
	left: 12px;
}

[dir="rtl"] .extra-profile-menu {
	right: auto;
	left: 0;
}

/* ==========================================================================
   RESPONSIVE LAYOUT BEHAVIOR
   ========================================================================== */
@media (max-width: 1400px) {
	.extra-contact-inspector {
		display: none; /* Collapses secondary contact panel on normal laptop screens */
	}
}

@media (max-width: 992px) {
	#layout-sidebar.extra-sidebar {
		width: 200px;
		min-width: 200px;
	}
	#layout-list.extra-listbox {
		width: 300px;
		min-width: 280px;
	}
}

@media (max-width: 768px) {
	.extra-top-workspace-bar {
		padding: 0 12px;
	}
	.extra-search-container {
		max-width: 240px;
	}
	.profile-name {
		display: none;
	}
}