/* Zoho CRM Inspired Theme - Pure CSS */
:root {
--zoho-dark: #121e2d;
--zoho-dark-hover: #1a293d;
--zoho-blue: #0065ff;
--zoho-blue-hover: #0050cc;
--zoho-bg: #f4f6f9;
--zoho-card-bg: #ffffff;
--zoho-text: #2d3748;
--zoho-text-muted: #718096;
--zoho-border: #e2e8f0;
--sidebar-width: 240px;
--header-height: 60px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica
Neue", Arial, sans-serif;
}
body {
background-color: var(--zoho-bg);
color: var(--zoho-text);
direction: rtl;
font-size: 14px;
}
.crm-app-container {
display: flex;
height: 100vh;
overflow: hidden;
}
/* Zoho Dark Sidebar */
.zoho-sidebar {
width: var(--sidebar-width);
background-color: var(--zoho-dark);
display: flex;
flex-direction: column;
justify-content: space-between;
color: #ffffff;
flex-shrink: 0;
}
.sidebar-brand {
height: var(--header-height);
display: flex;
align-items: center;
gap: 12px;
padding: 0 20px;
background-color: rgba(0,0,0,0.15);
}
.brand-logo {
width: 32px;
height: 32px;
background-color: var(--zoho-blue);
color: white;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-size: 16px;
}
.brand-text {
font-size: 15px;
font-weight: 600;
}
.sidebar-nav {
padding: 15px 0;
flex-grow: 1;
overflow-y: auto;
}
.nav-item {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 20px;
color: #a0aec0;
text-decoration: none;
transition: all 0.2s ease;
}
.nav-item:hover, .nav-item.active {
color: #ffffff;
background-color: var(--zoho-dark-hover);
border-right: 4px solid var(--zoho-blue);
}
.nav-icon {
width: 20px;
height: 20px;
fill: currentColor;
flex-shrink: 0;
}
.sidebar-footer {
border-top: 1px solid rgba(255,255,255,0.08);
}
/* Main Workspace */
.crm-main-content {
flex-grow: 1;
display: flex;
flex-direction: column;
background-color: var(--zoho-bg);
overflow: hidden;
}
/* Header Bar */
.zoho-header {
height: var(--header-height);
background-color: var(--zoho-card-bg);
border-bottom: 1px solid var(--zoho-border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
}
.header-title {
display: flex;
align-items: center;
gap: 12px;
}
.header-title h1 {
font-size: 18px;
font-weight: 700;
color: #1a202c;
}
.module-badge {
background-color: #ebf8ff;
color: #2b6cb0;
font-size: 11px;
padding: 2px 8px;
border-radius: 12px;
font-weight: 600;
}
.header-actions {
display: flex;
align-items: center;
gap: 16px;
}
.search-box {
position: relative;
display: flex;
align-items: center;
}
.search-icon {
position: absolute;
right: 12px;
width: 16px;
height: 16px;
fill: var(--zoho-text-muted);
}
.search-box input {
padding: 8px 14px 8px 36px;
width: 280px;
border: 1px solid var(--zoho-border);
border-radius: 6px;
outline: none;
font-size: 13px;
transition: border-color 0.2s;
}
.search-box input:focus {
border-color: var(--zoho-blue);
}
.btn-primary {
background-color: var(--zoho-blue);
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s;
}
.btn-primary:hover {
background-color: var(--zoho-blue-hover);
}
.btn-secondary {
background-color: #e2e8f0;
color: #4a5568;
border: none;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.btn-secondary:hover {
background-color: #cbd5e1;
}
/* Sub-tabs Bar */
.crm-subtabs {
background-color: var(--zoho-card-bg);
border-bottom: 1px solid var(--zoho-border);
display: flex;
padding: 0 24px;
gap: 8px;
}
.subtab-btn {
background: none;
border: none;
padding: 12px 16px;
font-size: 13px;
font-weight: 600;
color: var(--zoho-text-muted);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.2s;
}
.subtab-btn:hover {
color: var(--zoho-text);
}
.subtab-btn.active {
color: var(--zoho-blue);
border-bottom-color: var(--zoho-blue);
}
/* Content Body & Panes */
.crm-content-body {
flex-grow: 1;
padding: 24px;
overflow-y: auto;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
.table-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.table-toolbar h3 {
font-size: 16px;
font-weight: 600;
}
.toolbar-actions {
display: flex;
gap: 8px;
}
.table-responsive {
background-color: var(--zoho-card-bg);
border: 1px solid var(--zoho-border);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.zoho-table {
width: 100%;
border-collapse: collapse;
text-align: right;
font-size: 13px;
}
.zoho-table th {
background-color: #f8fafc;
color: #475569;
font-weight: 600;
padding: 12px 16px;
border-bottom: 1px solid var(--zoho-border);
}
.zoho-table td {
padding: 12px 16px;
border-bottom: 1px solid var(--zoho-border);
color: #1e293b;
}
.zoho-table tr:last-child td {
border-bottom: none;
}
.zoho-table tr:hover {
background-color: #f8fafc;
}
/* Kanban Board Styling */
.kanban-board {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
height: calc(100vh - 220px);
}
.kanban-column {
background-color: #ebf0f5;
border-radius: 8px;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid #d2dce6;
}
.col-header {
background-color: #e2e8f0;
padding: 12px;
font-weight: 700;
font-size: 13px;
color: #334155;
border-bottom: 1px solid #cbd5e1;
}
.kanban-cards {
padding: 12px;
overflow-y: auto;
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.kanban-card {
background-color: #ffffff;
padding: 12px;
border-radius: 6px;
border: 1px solid var(--zoho-border);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
cursor: pointer;
transition: transform 0.1s;
}
.kanban-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.card-title {
font-weight: 600;
font-size: 13px;
margin-bottom: 6px;
color: #0f172a;
}
.card-company {
font-size: 11px;
color: var(--zoho-text-muted);
margin-bottom: 8px;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
color: #64748b;
border-top: 1px solid #f1f5f9;
padding-top: 6px;
}
.badge-status {
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
}
.status-new { background-color: #e0f2fe; color: #0369a1; }
.status-neg { background-color: #fef3c7; color: #b45309; }
.status-quote { background-color: #f3e8ff; color: #7e22ce; }
.status-won { background-color: #dcfce7; color: #15803d; }