feat(ui): add corporate logo and update colors to Cobalt Blue, Tiger Orange, Emerald Green

- Add Schamann.png logo to static/ directory
- Update base.html header with logo (force scaled to 40px)
- Replace primary color with corporate color palette:
  - Cobalt Blue (#1338BE) for headers and navigation
  - Tiger Orange (#FC6A03) for accents and loading indicators
  - Emerald Green (#028A0F) for success states
- Add full shade ranges (50-900) for all three colors in Tailwind config
- Create docs/CORPORATE_DESIGN.md with color specifications and usage guidelines

docs/CORPORATE_DESIGN.md

@@ -0,0 +1,176 @@
+# Corporate Design Specifications
+
+## Overview
+
+This document defines the corporate design specifications for the Tablet Management System, including color palette, logo usage, and branding guidelines.
+
+---
+
+## Color Palette
+
+### Primary Corporate Colors
+
+The following three colors constitute the official corporate color palette:
+
+| Color Name | Hex Code | RGB | Usage |
+|------------|----------|-----|-------|
+| **Cobalt Blue** | `#1338BE` | rgb(19, 56, 190) | Primary brand color, headers, navigation, main actions |
+| **Tiger Orange** | `#FC6A03` | rgb(252, 106, 3) | Accents, highlights, loading indicators, secondary actions |
+| **Emerald Green** | `#028A0F` | rgb(2, 138, 15) | Success states, positive feedback, confirmation |
+
+### Color Shades
+
+Each corporate color has been extended with a full shade range (50-900) for use in Tailwind CSS:
+
+#### Cobalt Blue Shades
+- `cobalt-50`: `#f0f5ff` (Lightest)
+- `cobalt-100`: `#e0eaff`
+- `cobalt-200`: `#b3c6ff`
+- `cobalt-300`: `#80a0ff`
+- `cobalt-400`: `#4d7aff`
+- **`cobalt-500`: `#1338BE`** (Primary)
+- `cobalt-600`: `#0f2a9c`
+- `cobalt-700`: `#0b1f72`
+- `cobalt-800`: `#081552`
+- `cobalt-900`: `#060f38` (Darkest)
+
+#### Tiger Orange Shades
+- `tiger-50`: `#fff8f0` (Lightest)
+- `tiger-100`: `#ffe8d6`
+- `tiger-200`: `#ffccab`
+- `tiger-300`: `#ffae80`
+- `tiger-400`: `#ff8c55`
+- **`tiger-500`: `#FC6A03`** (Primary)
+- `tiger-600`: `#e05a00`
+- `tiger-700`: `#b84500`
+- `tiger-800`: `#8c3300`
+- `tiger-900`: `#662500` (Darkest)
+
+#### Emerald Green Shades
+- `emerald-50`: `#f0fdf4` (Lightest)
+- `emerald-100`: `#dcfce7`
+- `emerald-200`: `#bbf7d0`
+- `emerald-300`: `#86efac`
+- `emerald-400`: `#4ade80`
+- **`emerald-500`: `#028A0F`** (Primary)
+- `emerald-600`: `#006b0c`
+- `emerald-700`: `#005209`
+- `emerald-800`: `#003d07`
+- `emerald-900`: `#002904` (Darkest)
+
+---
+
+## Logo Usage
+
+### Logo File
+- **File**: `assets/Schamann.png`
+- **Dimensions**: 175 x 161 pixels
+- **Format**: PNG with transparency
+- **Web Path**: `/static/Schamann.png`
+
+### Display Guidelines
+- The logo should be displayed at a fixed height of 40px in the header
+- Use `object-contain` to maintain aspect ratio
+- The logo should appear to the left of the application title
+- Do not stretch or distort the logo
+
+### Implementation
+```html
+<img src="/static/Schamann.png" alt="Corporate Logo" class="h-10 w-auto object-contain" style="max-height: 40px; height: 40px !important;">
+```
+
+---
+
+## Usage Examples
+
+### Headers and Navigation
+```html
+<!-- Header background -->
+<header class="bg-cobalt-600 text-white shadow-lg">
+
+<!-- Navigation background -->
+<nav class="bg-cobalt-600 rounded-lg shadow-md">
+
+<!-- Navigation hover -->
+<a class="hover:bg-cobalt-700 transition-colors">
+```
+
+### Buttons and Actions
+```html
+<!-- Primary button (Cobalt Blue) -->
+<button class="bg-cobalt-600 hover:bg-cobalt-700 text-white">
+
+<!-- Secondary button (Tiger Orange) -->
+<button class="bg-tiger-500 hover:bg-tiger-600 text-white">
+
+<!-- Success button (Emerald Green) -->
+<button class="bg-emerald-500 hover:bg-emerald-600 text-white">
+```
+
+### Status Indicators
+```html
+<!-- Success state -->
+<div class="bg-emerald-100 text-emerald-800">Success!</div>
+
+<!-- Warning state -->
+<div class="bg-tiger-100 text-tiger-800">Warning</div>
+
+<!-- Info state -->
+<div class="bg-cobalt-100 text-cobalt-800">Info</div>
+```
+
+---
+
+## Tailwind CSS Configuration
+
+The corporate colors are configured in the Tailwind CSS configuration within the base template:
+
+```javascript
+tailwind.config = {
+    theme: {
+        extend: {
+            colors: {
+                cobalt: {
+                    50: '#f0f5ff',
+                    100: '#e0eaff',
+                    // ... all shades
+                    500: '#1338BE',
+                    // ...
+                },
+                tiger: {
+                    50: '#fff8f0',
+                    // ... all shades
+                    500: '#FC6A03',
+                    // ...
+                },
+                emerald: {
+                    50: '#f0fdf4',
+                    // ... all shades
+                    500: '#028A0F',
+                    // ...
+                }
+            }
+        }
+    }
+}
+```
+
+---
+
+## Color Accessibility
+
+All corporate colors meet WCAG AA contrast requirements when used appropriately:
+
+- **Cobalt Blue (#1338BE)**: Use white text for backgrounds
+- **Tiger Orange (#FC6A03)**: Use white text for backgrounds
+- **Emerald Green (#028A0F)**: Use white text for backgrounds
+
+For lighter shades (100-300), use dark text (gray-800 or gray-900).
+
+---
+
+## Version History
+
+| Version | Date | Changes |
+|---------|------|---------|
+| 1.0 | 2026-06-20 | Initial corporate design specifications with Cobalt Blue, Tiger Orange, and Emerald Green color palette |

templates/base.html

@@ -24,7 +24,7 @@
             height: 20px;
             border: 3px solid rgba(0,0,0,.3);
             border-radius: 50%;
-            border-top-color: #10b981;
+            border-top-color: #FC6A03;
             animation: spin 1s ease-in-out infinite;
         }
         @keyframes spin {
@@ -41,7 +41,7 @@
         }
     </style>
     
-    <!-- Tailwind config for custom colors -->
+    <!-- Tailwind config for custom corporate colors -->
     <script>
         tailwind.config = {
             theme: {
@@ -58,6 +58,42 @@
                             700: '#047857',
                             800: '#065f46',
                             900: '#064e3b',
+                        },
+                        cobalt: {
+                            50: '#f0f5ff',
+                            100: '#e0eaff',
+                            200: '#b3c6ff',
+                            300: '#80a0ff',
+                            400: '#4d7aff',
+                            500: '#1338BE',
+                            600: '#0f2a9c',
+                            700: '#0b1f72',
+                            800: '#081552',
+                            900: '#060f38',
+                        },
+                        tiger: {
+                            50: '#fff8f0',
+                            100: '#ffe8d6',
+                            200: '#ffccab',
+                            300: '#ffae80',
+                            400: '#ff8c55',
+                            500: '#FC6A03',
+                            600: '#e05a00',
+                            700: '#b84500',
+                            800: '#8c3300',
+                            900: '#662500',
+                        },
+                        emerald: {
+                            50: '#f0fdf4',
+                            100: '#dcfce7',
+                            200: '#bbf7d0',
+                            300: '#86efac',
+                            400: '#4ade80',
+                            500: '#028A0F',
+                            600: '#006b0c',
+                            700: '#005209',
+                            800: '#003d07',
+                            900: '#002904',
                         }
                     }
                 }
@@ -72,15 +108,12 @@
     <!-- Container -->
     <div class="min-h-screen">
         <!-- Header -->
-        <header class="bg-primary-600 text-white shadow-lg">
+        <header class="bg-cobalt-600 text-white shadow-lg">
             <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                 <div class="flex items-center justify-between h-16">
                     <!-- Logo / Title -->
                     <div class="flex items-center gap-3">
-                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <img src="/static/Schamann.png" alt="Corporate Logo" class="h-10 w-auto object-contain" style="max-height: 40px; height: 40px !important;">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
-                                  d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
-                        </svg>
                         <h1 class="text-xl font-bold">{{ _('Tablet Management System') }}</h1>
                     </div>
                     
@@ -134,39 +167,39 @@
             {% endwith %}
             
             <!-- Navigation -->
-            <nav class="bg-primary-600 rounded-lg shadow-md mb-6" aria-label="Main navigation">
+            <nav class="bg-cobalt-600 rounded-lg shadow-md mb-6" aria-label="Main navigation">
                 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                     <div class="flex flex-wrap justify-center sm:justify-start gap-1 sm:gap-2 py-3">
                         <a href="/" 
-                           class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-primary-700 transition-colors whitespace-nowrap">
+                           class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
                             {{ _('Home') }}
                         </a>
                         <a href="/add_tablet" 
-                           class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-primary-700 transition-colors whitespace-nowrap">
+                           class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
                             {{ _('Add Tablet') }}
                         </a>
                         <a href="/add_user" 
-                           class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-primary-700 transition-colors whitespace-nowrap">
+                           class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
                             {{ _('Add User') }}
                         </a>
                         <a href="/loan_tablet" 
-                           class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-primary-700 transition-colors whitespace-nowrap">
+                           class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
                             {{ _('Loan Tablet') }}
                         </a>
                         <a href="/history" 
-                           class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-primary-700 transition-colors whitespace-nowrap">
+                           class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
                             {{ _('History') }}
                         </a>
                         <a href="/user_loans" 
-                           class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-primary-700 transition-colors whitespace-nowrap">
+                           class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
                             {{ _('User Loans') }}
                         </a>
                         <a href="/non_loanable_devices" 
-                           class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-primary-700 transition-colors whitespace-nowrap">
+                           class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
                             {{ _('Non-Loanable Devices') }}
                         </a>
                         <a href="/project_management" 
-                           class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-primary-700 transition-colors whitespace-nowrap">
+                           class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
                             {{ _('Project Management') }}
                         </a>
                     </div>