/* ============================================================
   Microsoft Office 365 / Fluent Design System - Global Theme
   Compact, clean, professional UI matching O365 aesthetics
   ============================================================ */

/* --- CSS Custom Properties --- */
:root {
  /* Primary Blues (Microsoft Brand) */
  --o365-primary: #0078d4;
  --o365-primary-dark: #106ebe;
  --o365-primary-darker: #005a9e;
  --o365-primary-light: #2b88d8;
  --o365-primary-lighter: #c7e0f4;
  --o365-primary-lightest: #deecf9;
  --o365-primary-bg: #eff6fc;

  /* Neutrals */
  --o365-black: #000000;
  --o365-neutral-dark: #201f1e;
  --o365-neutral-primary: #323130;
  --o365-neutral-primary-alt: #3b3a39;
  --o365-neutral-secondary: #605e5c;
  --o365-neutral-secondary-alt: #8a8886;
  --o365-neutral-tertiary: #a19f9d;
  --o365-neutral-tertiary-alt: #c8c6c4;
  --o365-neutral-quaternary: #d2d0ce;
  --o365-neutral-quaternary-alt: #e1dfdd;
  --o365-neutral-light: #edebe9;
  --o365-neutral-lighter: #f3f2f1;
  --o365-neutral-lighter-alt: #faf9f8;
  --o365-white: #ffffff;

  /* Semantic */
  --o365-success: #107c10;
  --o365-success-bg: #dff6dd;
  --o365-warning: #ff8c00;
  --o365-warning-bg: #fff4ce;
  --o365-error: #d13438;
  --o365-error-bg: #fde7e9;
  --o365-info: #0078d4;
  --o365-info-bg: #deecf9;

  /* Shadows (Fluent depth) */
  --o365-shadow-4: 0 1.6px 3.6px 0 rgba(0, 0, 0, .132), 0 0.3px 0.9px 0 rgba(0, 0, 0, .108);
  --o365-shadow-8: 0 3.2px 7.2px 0 rgba(0, 0, 0, .132), 0 0.6px 1.8px 0 rgba(0, 0, 0, .108);
  --o365-shadow-16: 0 6.4px 14.4px 0 rgba(0, 0, 0, .132), 0 1.2px 3.6px 0 rgba(0, 0, 0, .108);

  /* Sidebar */
  --o365-sidebar-bg: #1b1b1f;
  --o365-sidebar-width: 180px;
  --o365-sidebar-collapsed-width: 48px;

  /* Header */
  --o365-header-height: 40px;
}

/* --- Base Reset & Typography --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif !important;
  font-size: 14px;
  line-height: 1.42857;
  color: var(--o365-neutral-primary);
  background-color: var(--o365-neutral-lighter-alt) !important;
  margin: 0;
  padding: 0;
}

/* --- Compact Headings --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 600;
  color: var(--o365-neutral-dark);
  margin: 0;
  line-height: 1.3;
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 17px;
}

h3 {
  font-size: 15px;
}

h4 {
  font-size: 14px;
}

h5 {
  font-size: 13px;
}

h6 {
  font-size: 12px;
}

p {
  margin: 0 0 4px 0;
}

/* --- Compact Spacing Overrides --- */
/* Reduce all padding/margin in common Tailwind patterns */
.space-y-6>*+* {
  margin-top: 12px !important;
}

.space-y-8>*+* {
  margin-top: 14px !important;
}

.space-y-4>*+* {
  margin-top: 8px !important;
}

.space-y-3>*+* {
  margin-top: 6px !important;
}

.space-y-2>*+* {
  margin-top: 4px !important;
}

.space-y-1>*+* {
  margin-top: 2px !important;
}

.gap-6 {
  gap: 12px !important;
}

.gap-8 {
  gap: 14px !important;
}

.gap-4 {
  gap: 8px !important;
}

.gap-3 {
  gap: 6px !important;
}

/* --- O365 Cards --- */
.bg-white {
  border-radius: 4px !important;
}

/* Cards with shadows */
.shadow-sm,
.shadow,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
  box-shadow: var(--o365-shadow-4) !important;
}

/* Card hover elevation */
.shadow-sm:hover,
.shadow:hover {
  box-shadow: var(--o365-shadow-8) !important;
}

/* Rounded corners - make them O365-flat (2-4px) */
.rounded-xl,
.rounded-2xl,
.rounded-3xl {
  border-radius: 4px !important;
}

.rounded-lg {
  border-radius: 4px !important;
}

.rounded-md {
  border-radius: 2px !important;
}

/* Exception: avatars and badges stay round */
.rounded-full {
  border-radius: 9999px !important;
}

/* --- O365 Buttons --- */
button,
.btn,
[role="button"] {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px;
  border-radius: 2px !important;
  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
}

/* Primary buttons - O365 blue (office365 mode only) */
html:not([data-theme="sleek"]):not([data-theme="ento"]) .bg-blue-600,
html:not([data-theme="sleek"]):not([data-theme="ento"]) .bg-blue-500,
html:not([data-theme="sleek"]):not([data-theme="ento"]) .from-blue-600,
html:not([data-theme="sleek"]):not([data-theme="ento"]) .from-blue-500 {
  background: var(--o365-primary) !important;
  background-image: none !important;
}

html:not([data-theme="sleek"]):not([data-theme="ento"]) .bg-blue-600:hover,
html:not([data-theme="sleek"]):not([data-theme="ento"]) .bg-blue-500:hover,
html:not([data-theme="sleek"]):not([data-theme="ento"]) .hover\:from-blue-500:hover {
  background: var(--o365-primary-dark) !important;
  background-image: none !important;
}

/* Remove gradients in O365 mode only - keep progress bars & avatars */
html:not([data-theme="sleek"]):not([data-theme="ento"]) div.bg-gradient-to-r:not(.h-full):not(.h-2):not(.h-2\.5):not(.w-8):not(.w-10):not(.w-12),
html:not([data-theme="sleek"]):not([data-theme="ento"]) div.bg-gradient-to-br:not(.h-full):not(.w-8):not(.w-10):not(.w-12),
html:not([data-theme="sleek"]):not([data-theme="ento"]) div.bg-gradient-to-b:not(.h-full),
html:not([data-theme="sleek"]):not([data-theme="ento"]) div.bg-gradient-to-l:not(.h-full),
html:not([data-theme="sleek"]):not([data-theme="ento"]) div.bg-gradient-to-t:not(.h-full) {
  background-image: none !important;
}

/* --- O365 Inputs & Selects --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--o365-neutral-tertiary) !important;
  border-radius: 2px !important;
  background-color: var(--o365-white) !important;
  color: var(--o365-neutral-primary) !important;
  min-height: 32px;
  line-height: 1.4 !important;
  transition: border-color 100ms ease;
  outline: none !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--o365-primary) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Inputs with left icons - preserve icon-padding for all common sizes */
.pl-8 input,
input.pl-8 {
  padding-left: 2rem !important;
}

.pl-9 input,
input.pl-9 {
  padding-left: 2.25rem !important;
}

.pl-10 input,
input.pl-10 {
  padding-left: 2.5rem !important;
}

.pl-11 input,
input.pl-11 {
  padding-left: 2.75rem !important;
}

.pl-12 input,
input.pl-12 {
  padding-left: 3rem !important;
}

/* Inputs with right icons */
.pr-8 input,
input.pr-8 {
  padding-right: 2rem !important;
}

.pr-10 input,
input.pr-10 {
  padding-right: 2.5rem !important;
}

.pr-12 input,
input.pr-12 {
  padding-right: 3rem !important;
}

/* Remove Tailwind ring on focus */
.focus\:ring-2:focus,
.focus\:ring-1:focus,
.focus\:ring:focus {
  box-shadow: none !important;
  --tw-ring-shadow: none !important;
}

/* --- O365 Tables --- */
table {
  font-size: 13px;
  border-collapse: collapse;
  width: 100%;
}

th {
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: none !important;
  color: var(--o365-neutral-secondary) !important;
  background-color: var(--o365-neutral-lighter) !important;
  padding: 6px 10px !important;
  border-bottom: 1px solid var(--o365-neutral-quaternary-alt) !important;
  text-align: left;
  white-space: nowrap;
}

td {
  padding: 5px 10px !important;
  border-bottom: 1px solid var(--o365-neutral-light) !important;
  color: var(--o365-neutral-primary);
  vertical-align: middle;
}

tr:hover td {
  background-color: var(--o365-neutral-lighter-alt) !important;
}

/* --- O365 Badges / Pills --- */
.rounded-full {
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* Status badges */
.bg-green-100,
.bg-green-50 {
  background-color: var(--o365-success-bg) !important;
}

.text-green-700,
.text-green-800,
.text-green-600 {
  color: var(--o365-success) !important;
}

.bg-red-100,
.bg-red-50 {
  background-color: var(--o365-error-bg) !important;
}

.text-red-700,
.text-red-800,
.text-red-600 {
  color: var(--o365-error) !important;
}

.bg-amber-100,
.bg-yellow-100,
.bg-amber-50,
.bg-yellow-50 {
  background-color: var(--o365-warning-bg) !important;
}

.text-amber-700,
.text-amber-800,
.text-yellow-700,
.text-yellow-800 {
  color: #986f0b !important;
}

.bg-blue-100,
.bg-blue-50 {
  background-color: var(--o365-info-bg) !important;
}

.text-blue-700,
.text-blue-800,
.text-blue-600 {
  color: var(--o365-primary) !important;
}

/* --- O365 Page Content Compact --- */
/* Reduce page padding */
.p-8 {
  padding: 16px !important;
}

.p-6 {
  padding: 12px !important;
}

.p-5 {
  padding: 10px !important;
}

.p-4 {
  padding: 8px !important;
}

.px-8 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.px-6 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.py-8 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.py-6 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.py-4 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.py-3 {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.py-2\.5 {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* Compact text sizes */
.text-2xl {
  font-size: 17px !important;
  line-height: 1.3 !important;
}

.text-3xl {
  font-size: 20px !important;
  line-height: 1.3 !important;
}

.text-4xl {
  font-size: 24px !important;
  line-height: 1.3 !important;
}

.text-xl {
  font-size: 16px !important;
  line-height: 1.3 !important;
}

.text-lg {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.text-base {
  font-size: 13px !important;
}

.text-sm {
  font-size: 12px !important;
}

.text-xs {
  font-size: 11px !important;
}

/* --- O365 Modals --- */
.fixed.inset-0 {
  backdrop-filter: blur(2px);
}

.fixed.inset-0>div,
.fixed.inset-0 .bg-white {
  border-radius: 4px !important;
  box-shadow: var(--o365-shadow-16) !important;
}

/* --- O365 Scrollbar --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--o365-neutral-tertiary-alt);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--o365-neutral-tertiary);
}

/* --- O365 Links --- */
a {
  color: var(--o365-primary);
  text-decoration: none;
}

a:hover {
  color: var(--o365-primary-dark);
  text-decoration: underline;
}

/* Nav links should not underline */
nav a,
nav a:hover {
  text-decoration: none !important;
}

/* --- O365 Loading Spinner --- */
.animate-spin {
  animation: spin 0.8s linear infinite;
}

/* --- O365 Transitions --- */
.transition-all {
  transition-duration: 100ms !important;
}

/* --- O365 Charts area --- */
.recharts-wrapper {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11px !important;
}

.recharts-text {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11px !important;
}

.recharts-tooltip-wrapper {
  font-size: 12px !important;
}

/* --- O365 Grid compact --- */
.grid-cols-4 {
  gap: 10px;
}

.grid-cols-3 {
  gap: 10px;
}

.grid-cols-2 {
  gap: 10px;
}

/* --- O365 Max Width --- */
.max-w-7xl {
  max-width: 100% !important;
}

/* --- O365 KPI Cards Compact --- */
.bg-white.p-5,
.bg-white.p-6 {
  padding: 10px 12px !important;
}

/* --- Animations (minimal, professional) --- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-fadeIn {
  animation: fadeIn 150ms ease-out;
}

.animate-scaleIn {
  animation: scaleIn 150ms ease-out;
}

/* Remove pulse animations for cleaner O365 look */
.animate-pulse {
  animation: none !important;
}

/* --- O365 Sidebar Specific --- */
.o365-sidebar {
  width: var(--o365-sidebar-width);
  background-color: var(--o365-sidebar-bg);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: fixed;
  z-index: 20;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.o365-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 6px;
}

.o365-sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.o365-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.o365-nav-section-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  padding: 10px 10px 3px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.o365-nav-section-title:hover {
  color: rgba(255, 255, 255, 0.6);
}

.o365-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 400;
  text-decoration: none !important;
  transition: background-color 80ms ease, color 80ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 28px;
}

.o365-nav-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.o365-nav-item.active {
  background-color: var(--o365-primary);
  color: #ffffff;
  font-weight: 600;
}

.o365-nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- O365 Header Bar --- */
.o365-header {
  height: var(--o365-header-height);
  background-color: var(--o365-white);
  border-bottom: 1px solid var(--o365-neutral-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.o365-header h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--o365-neutral-dark);
}

/* --- O365 Main Content --- */
.o365-main {
  margin-left: var(--o365-sidebar-width);
  width: calc(100% - var(--o365-sidebar-width));
  min-height: 100vh;
  background-color: var(--o365-neutral-lighter-alt);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.o365-content {
  padding: 14px 20px;
  flex: 1;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* --- O365 User Profile (sidebar footer) --- */
.o365-user-profile {
  padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 8px;
}

.o365-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--o365-primary);
  flex-shrink: 0;
}

.o365-user-name {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.o365-user-role {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- O365 Search in header --- */
.o365-search {
  display: flex;
  align-items: center;
  background-color: var(--o365-neutral-lighter);
  border: 1px solid var(--o365-neutral-quaternary-alt);
  border-radius: 2px;
  padding: 0 8px;
  height: 28px;
  width: 220px;
  transition: border-color 100ms ease, background-color 100ms ease;
}

.o365-search:focus-within {
  border-color: var(--o365-primary);
  background-color: var(--o365-white);
}

.o365-search input {
  border: none !important;
  background: transparent !important;
  padding: 0 4px !important;
  min-height: auto !important;
  height: 26px !important;
  font-size: 12px !important;
  flex: 1;
  outline: none;
}

.o365-search input:focus {
  border: none !important;
  box-shadow: none !important;
}

/* --- O365 Logo area --- */
.o365-logo-area {
  padding: 10px 10px 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.o365-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: linear-gradient(135deg, #e0e0e0, #b0b0b0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.o365-logo-icon img {
  height: 22px;
  width: auto;
}

.o365-logo-text {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.3px;
}

.o365-logo-text span {
  color: var(--o365-primary-light);
}

.o365-logo-subtitle {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.02em;
}

/* --- O365 Week Badge --- */
.o365-week-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background-color: var(--o365-primary-lightest);
  color: var(--o365-primary-dark);
  font-size: 11px;
  font-weight: 600;
  border-radius: 2px;
  border: 1px solid var(--o365-primary-lighter);
}

/* --- O365 Notification bell --- */
.o365-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 2px;
  color: var(--o365-neutral-secondary);
  cursor: pointer;
  transition: background-color 80ms ease;
}

.o365-bell:hover {
  background-color: var(--o365-neutral-lighter);
}

.o365-bell-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  background-color: var(--o365-error);
  border-radius: 50%;
  border: 1px solid var(--o365-white);
}

/* --- O365 Quick Actions bar override --- */
.bg-gradient-to-r.from-blue-600.to-indigo-600 {
  background: var(--o365-primary) !important;
  background-image: none !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
}

/* --- O365 Filter section compact --- */
.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
  gap: 8px !important;
}

/* --- O365 Compact label --- */
label {
  font-size: 12px !important;
  font-weight: 600;
  color: var(--o365-neutral-secondary) !important;
  margin-bottom: 2px !important;
}

/* --- O365 Logout button --- */
.o365-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 80ms ease, color 80ms ease;
  border: none;
  background: transparent;
  padding: 0;
}

.o365-logout:hover {
  background-color: rgba(220, 38, 38, 0.15);
  color: #f87171;
}

/* --- O365 Section collapse animation --- */
.o365-section-content {
  overflow: hidden;
  transition: max-height 150ms ease, opacity 150ms ease;
}

.o365-section-content.collapsed {
  max-height: 0;
  opacity: 0;
}

.o365-section-content.expanded {
  max-height: 2000px;
  opacity: 1;
}

/* --- App Switcher --- */
.app-switcher-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 2px;
  color: var(--o365-neutral-secondary);
  cursor: pointer;
  transition: background-color 80ms ease, color 80ms ease;
  border: none;
  background: transparent;
  padding: 0;
  margin-right: 12px;
}

.app-switcher-button:hover {
  background-color: var(--o365-neutral-lighter);
  color: var(--o365-neutral-primary);
}

.app-switcher-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 60px;
  animation: fadeIn 150ms ease-out;
}

.app-switcher-panel {
  background-color: var(--o365-white);
  border-radius: 4px;
  box-shadow: var(--o365-shadow-16);
  width: 90%;
  max-width: 720px;
  max-height: 80vh;
  overflow-y: auto;
  animation: scaleIn 150ms ease-out;
}

.app-switcher-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--o365-neutral-light);
}

.app-switcher-header h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--o365-neutral-dark);
  margin: 0;
}

.app-switcher-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 2px;
  color: var(--o365-neutral-secondary);
  cursor: pointer;
  transition: background-color 80ms ease, color 80ms ease;
  border: none;
  background: transparent;
  padding: 0;
}

.app-switcher-close:hover {
  background-color: var(--o365-neutral-lighter);
  color: var(--o365-neutral-primary);
}

.app-switcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 20px;
}

.app-tile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--o365-neutral-quaternary-alt);
  border-left: 3px solid var(--o365-primary);
  border-radius: 4px;
  background-color: var(--o365-white);
  cursor: pointer;
  transition: all 100ms ease;
  text-align: left;
}

.app-tile:hover {
  border-color: var(--o365-neutral-tertiary);
  box-shadow: var(--o365-shadow-8);
  transform: translateY(-1px);
}

.app-tile-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-tile-content {
  flex: 1;
  min-width: 0;
}

.app-tile-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--o365-neutral-dark);
  margin-bottom: 2px;
}

.app-tile-description {
  font-size: 12px;
  color: var(--o365-neutral-secondary);
  line-height: 1.3;
}

/* --- Print-friendly --- */
@media print {

  .o365-sidebar,
  .o365-header {
    display: none !important;
  }

  .o365-main {
    margin-left: 0 !important;
  }
}