/* created by oran */
/* arabic */
@font-face {
font-family: 'Aref Ruqaa';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/arefruqaa-WwkYxPW1E165rajQKDulKDwNQNAY2e_7.woff2') format('woff2');
unicode-range:
U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E,
U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22,
U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49,
U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F,
U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E,
U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Aref Ruqaa';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/arefruqaa-WwkYxPW1E165rajQKDulKDwNQNsY2e_7.woff2') format('woff2');
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Aref Ruqaa';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/arefruqaa-WwkYxPW1E165rajQKDulKDwNQNUY2Q.woff2') format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS4J0.woff2') format('woff2');
unicode-range:
U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E,
U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22,
U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49,
U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F,
U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E,
U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscSCyS4J0.woff2') format('woff2');
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscRiyS.woff2') format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS4J0.woff2') format('woff2');
unicode-range:
U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E,
U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22,
U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49,
U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F,
U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E,
U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscSCyS4J0.woff2') format('woff2');
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscRiyS.woff2') format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS4J0.woff2') format('woff2');
unicode-range:
U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E,
U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22,
U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49,
U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F,
U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E,
U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscSCyS4J0.woff2') format('woff2');
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscRiyS.woff2') format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS4J0.woff2') format('woff2');
unicode-range:
U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E,
U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22,
U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49,
U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F,
U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E,
U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscSCyS4J0.woff2') format('woff2');
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscRiyS.woff2') format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS4J0.woff2') format('woff2');
unicode-range:
U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E,
U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22,
U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49,
U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F,
U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E,
U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscSCyS4J0.woff2') format('woff2');
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscRiyS.woff2') format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html,
body {
margin: 0;
padding: 0;
background: linear-gradient(180deg, #112b52 0%, #0f274d 100%);
}
html.dark-mode,
html.dark-mode body {
background: linear-gradient(180deg, #0f1d36 0%, #0b1529 100%);
}
#app-shell {
position: fixed;
inset: 0;
z-index: 9000;
pointer-events: none;
background: linear-gradient(180deg, #112b52 0%, #0f274d 100%);
}
html.dark-mode #app-shell {
background: linear-gradient(180deg, #0f1d36 0%, #0b1529 100%);
}
/* The navigation block — .ui-nav: the primary gradient, the header's top
radius, full width. */
#app-shell .shell-nav {
display: flex;
flex-direction: column;
width: 100%;
background: linear-gradient(135deg, #0f274d 0%, #091a36 100%);
border-radius: 14px 14px 0 0;
}
html.dark-mode #app-shell .shell-nav {
background: linear-gradient(135deg, #16294a 0%, #0b1529 100%);
}
/* The header band — .ui-nav-band: the centred column of logo, title and
identity, at the container width. */
#app-shell .shell-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 10px max(16px, env(safe-area-inset-right, 0px)) 12px
max(16px, env(safe-area-inset-left, 0px));
}
#app-shell .shell-logo {
width: 76px;
height: 76px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
overflow: hidden;
flex-shrink: 0;
}
#app-shell .shell-logo img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
#app-shell .shell-title {
display: flex;
flex-direction: column;
gap: 2px;
max-width: 1100px;
margin: 0;
color: #fff;
text-align: center;
font-family: 'Cairo', sans-serif;
font-size: 20px;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.3px;
}
/* Reserves the height of the header's identity row (the name and the
status slot, see UiNavBar / ui.css .ui-nav-identity / .ui-nav-status),
so the band is the same height as the frame's and nothing shifts when
the shell is swapped out. 32px is the status slot's own reserved height
(the offline pill's height); the button itself is hidden: nobody is
signed in yet. */
#app-shell .shell-identity {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
max-width: 100%;
min-height: 32px;
}
#app-shell .shell-signout {
visibility: hidden;
min-height: 27px;
min-width: 0;
padding: 3px 10px;
font-family: 'Cairo', sans-serif;
font-size: 11px;
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 6px;
}
/* Reserves the tab strip's place — .ui-nav-tabs: a white bar at the
container width, so the real tabs appear in the same space. */
#app-shell .shell-tabs {
width: 100%;
max-width: 1280px;
min-height: 52px;
margin: 16px auto;
border-radius: 14px;
background: #ffffff;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
html.dark-mode #app-shell .shell-tabs {
background: #0f1d36;
border-color: #2a3f63;
}
/* The frame's own compact steps (ui.css .ui-nav-band / .ui-nav-title /
.ui-nav-logo), so the shell follows the phone layout too. */
@media (max-width: 768px) {
#app-shell .shell-header {
padding: 8px max(12px, env(safe-area-inset-right, 0px)) 10px
max(12px, env(safe-area-inset-left, 0px));
}
#app-shell .shell-title {
font-size: 17px;
}
#app-shell .shell-tabs {
min-height: 36px;
margin: 12px auto;
}
}
@media (max-width: 480px) {
#app-shell .shell-title {
font-size: 14px;
letter-spacing: 0;
}
#app-shell .shell-logo {
width: 60px;
height: 60px;
}
}
/* app: styles/variables.css */
/* ========================================
CSS VARIABLES & DESIGN TOKENS
المتغيرات الأساسية للتصميم
======================================== */
:root {
/* Brand Colors - الحفاظ على الألوان الأصلية */
--primary: #0f274d;
--primary-dark: #091a36;
--gold: #caa854;
--gold-light: #f4d489;
--green: #238b5a;
--red: #c94b42;
/* Surface Colors - تعديل الأبيض ليكون أريح للعين */
--white: #ffffff;
--card: #f5f7fb;
/* بدلاً من #f7f7f7 - لون أفتح وأريح */
--border: #e2e8f0;
/* بدلاً من #dcdcdc - أفتح وأكثر احترافية */
--text: #1e293b;
/* بدلاً من #1d2433 - أريح للقراءة */
/* Heading and label text. The redesign coloured titles with --primary,
but --primary is a dark surface colour, so those titles vanish in
.dark-mode. Light keeps --primary; dark takes the light --text. It is
declared in both themes so the dark value is not lost to the alias. */
--heading-text: var(--primary);
/* Body background */
--body-bg-start: #112b52;
--body-bg-end: #0f274d;
/* Modal & surface backgrounds */
--modal-bg: #f7f7f7;
--modal-header-from: #ffffff;
--modal-header-to: #fafafa;
--modal-border: #dfdfdf;
--modal-title-color: #10254a;
/* Muted text */
--text-muted: #64748b;
/* Subtle surface tints */
--surface-subtle: #fafcff;
--surface-warning: #fffbeb;
--warning-text: #92400e;
/* Status / countdown tints. These were hardcoded literals with no
.dark-mode override, so countdown chips and status pills stayed bright
islands on a dark page (report 07 §5.4). The light values are
byte-identical to the literals they replace, so light mode is
unchanged. */
--status-warning-bg: #fef3c7;
--status-warning-fg: #92400e;
--status-danger-bg: #fee2e2;
--status-danger-fg: #991b1b;
--status-info-bg: #ecfeff;
--status-info-fg: #155e75;
--status-neutral-bg: #1f2937;
--status-neutral-fg: #ffffff;
/* The "ok" state chip (ticket 98-3c): the one tone the Settings row chips
were missing — an active author. Light values are the prototype's own
chip-ok tint. */
--status-ok-bg: #e6f4ec;
--status-ok-fg: #1b6b45;
/* Tints the screens need (ticket 300): gold washes, white washes for text
and lines on the navy header, the modal scrim, a placeholder grey, the
alternate row and WhatsApp's green. Both themes declare all nine. */
--gold-a08: rgba(202, 168, 84, 0.08);
--gold-a15: rgba(202, 168, 84, 0.15);
--gold-a40: rgba(202, 168, 84, 0.4);
--on-dark-a10: rgba(255, 255, 255, 0.1);
--on-dark-a60: rgba(255, 255, 255, 0.6);
--scrim: rgba(0, 0, 0, 0.45);
--placeholder: #94a3b8;
--row-alt: #f8fafc;
--whatsapp: #25d366;
/* Login-page gradient. auth.css:18 was written against these two names
but they were never defined anywhere, so that `background` shorthand
was invalid and the login page rendered with no background. They
track the body background so the two stay in step. */
--bg-gradient-start: var(--body-bg-start);
--bg-gradient-end: var(--body-bg-end);
/* Secondary surface — device cards and the Client-Contacts form panel
in SettingsTab. Referenced but never defined; those panels rendered
fully transparent. */
--bg-secondary: #eef2f8;
/* Alias of --text, kept because client.css:645 reads it (it has a
fallback, so this only makes the intent explicit). */
--text-primary: var(--text);
/* Shadows - أخف وأكثر نعومة */
--shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
/* The desktop/tablet scale — the owner's 80% browser-zoom reference.
Phones (≤768px) reset it to 1 in mobile.css, so they keep today's sizes. */
--ui-scale: 0.8;
/* Text size multiplier — controlled by «حجم الخط» in Settings.
Default 1 = today's sizes. Small 0.86, large 1.14, xlarge 1.29. */
--ui-text-step: 1;
/* Combined text scale: screen scale × text step. Only text uses this.
Spacing, padding and other sizes keep --ui-scale. */
--ui-text-scale: calc(var(--ui-scale) * var(--ui-text-step));
/* The floor for desktop type: only the two smallest steps land on it
(2xs 8px, xs 8.8px). 0 on phones, so today's small sizes survive. */
--ui-text-min: 10px;
/* Spacing Scale - مصغرة للديسكتوب */
--space-xs: calc(4px * var(--ui-scale));
--space-sm: calc(8px * var(--ui-scale));
--space-md: calc(12px * var(--ui-scale));
--space-lg: calc(16px * var(--ui-scale));
--space-xl: calc(20px * var(--ui-scale));
--space-2xl: calc(24px * var(--ui-scale));
/* Font Sizes — today's px x 0.8 on desktop, today's px on a phone.
The floor lifts only the two smallest steps (2xs 8px, xs 8.8px), so
the hierarchy the review found collapsed keeps its order.
--ui-text-min is 0 on a phone, so the floor never applies there.
Uses --ui-text-scale (screen scale × text step) so «حجم الخط» works. */
--font-2xs: max(var(--ui-text-min), calc(10px * var(--ui-text-scale)));
/* 10px */
--font-xs: max(var(--ui-text-min), calc(11px * var(--ui-text-scale)));
/* 11px */
--font-sm: max(var(--ui-text-min), calc(13px * var(--ui-text-scale)));
/* 13px */
--font-base: max(var(--ui-text-min), calc(14px * var(--ui-text-scale)));
/* 14px */
--font-md: max(var(--ui-text-min), calc(15px * var(--ui-text-scale)));
/* 15px */
--font-lg: max(var(--ui-text-min), calc(17px * var(--ui-text-scale)));
/* 17px */
--font-xl: max(var(--ui-text-min), calc(20px * var(--ui-text-scale)));
/* 20px */
--font-2xl: max(var(--ui-text-min), calc(24px * var(--ui-text-scale)));
/* 24px */
/* Border Radius - أنعم قليلاً */
--radius-sm: calc(6px * var(--ui-scale));
--radius-md: calc(10px * var(--ui-scale));
--radius-lg: calc(14px * var(--ui-scale));
--radius-xl: calc(18px * var(--ui-scale));
--radius-2xl: calc(22px * var(--ui-scale));
--radius-full: 999px;
/* Container limits - للديسكتوب */
--container-max: 1280px;
/* Safe area insets (iOS notch / Dynamic Island / home indicator).
Resolve to 0px on devices/browsers without safe areas (desktop,
Android, older Safari), so these are safe to use unconditionally —
no media query needed. Requires viewport-fit=cover in index.html. */
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
}
/* Dark Mode - the office navy and gold */
.dark-mode {
--primary: #16294a;
--primary-dark: #0b1529;
--gold: #caa854;
--gold-light: #f4d489;
--green: #2d7a5a;
--red: #c94b42;
--white: #0f1d36;
--card: #16284a;
--border: #2a3f63;
--text: #e8edf5;
--heading-text: var(--text);
/* surface tokens — dark overrides */
--body-bg-start: #0f1d36;
--body-bg-end: #0b1529;
--modal-bg: #16284a;
--modal-header-from: #1b3056;
--modal-header-to: #16284a;
--modal-border: #2a3f63;
--modal-title-color: #e8edf5;
--surface-subtle: #12233f;
--surface-warning: #2a2a1e;
--warning-text: #f4d489;
--text-muted: #a3b0c4;
--bg-secondary: #12233f;
/* Status / countdown tints — dark variants. */
--status-warning-bg: #3a3418;
--status-warning-fg: #f4d489;
--status-danger-bg: #3a1f1f;
--status-danger-fg: #f0a5a0;
--status-info-bg: #16323a;
--status-info-fg: #8fd6e0;
--status-neutral-bg: #0b1529;
--status-neutral-fg: #e8edf5;
--status-ok-bg: #17351f;
--status-ok-fg: #8fd6a8;
/* The same nine tints. Seven carry the light value; the placeholder and
the alternate row are darker, to sit on the navy card. */
--gold-a08: rgba(202, 168, 84, 0.08);
--gold-a15: rgba(202, 168, 84, 0.15);
--gold-a40: rgba(202, 168, 84, 0.4);
--on-dark-a10: rgba(255, 255, 255, 0.1);
--on-dark-a60: rgba(255, 255, 255, 0.6);
--scrim: rgba(0, 0, 0, 0.45);
--placeholder: #7d8ba3;
--row-alt: #12233f;
--whatsapp: #25d366;
}
/* body background in dark mode is handled via --body-bg-start/end tokens in variables.css */
.dark-mode .main-card,
.dark-mode .modal-content {
background: var(--card);
border-color: var(--border);
}
.dark-mode .input,
.dark-mode .custom-select,
.dark-mode textarea.input {
background: var(--surface-subtle);
border-color: var(--border);
color: var(--text);
}
.dark-mode .input::placeholder {
color: var(--placeholder);
}
.dark-mode .btn-light {
background: var(--surface-subtle);
color: var(--text);
border-color: var(--border);
}
.dark-mode .btn-light:hover {
background: var(--border);
}
.dark-mode table {
background: var(--card);
}
.dark-mode tbody td {
border-bottom-color: var(--border);
}
.dark-mode tbody tr {
background: var(--card);
}
.dark-mode tbody tr:nth-child(even) {
background: var(--row-alt);
}
.dark-mode tbody tr:hover {
background: var(--gold-a08);
}
.dark-mode .dashboard-card {
background: var(--card);
}
.dark-mode .static-field {
background: var(--surface-subtle);
border-color: var(--border);
color: var(--text);
}
.dark-mode .empty-state h2 {
color: var(--text-muted);
}
.dark-mode .filter-checkbox {
background: var(--surface-subtle);
}
.dark-mode .filter-checkbox:hover {
background: var(--gold-a08);
}
/* Light neutral surfaces that were hardcoded to a light-mode-only
background with no dark override — same "light button floating on
a dark page" issue table rows had above, just on tab/badge
surfaces instead of table rows. The Dashboard's sub-tabs left this
rule: they are transparent tabs now (ticket 98-2a). */
.dark-mode .client-tabs button {
background: var(--surface-subtle);
}
/* app: styles/reset.css */
/* ========================================
RESET & GLOBAL BASE STYLES
إعادة الضبط والأنماط الأساسية
======================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
html {
direction: rtl;
scroll-behavior: smooth;
scroll-padding-top: 20px;
/* "none" (not "contain") is required to actually stop the elastic
rubber-band bounce itself, not just scroll chaining. Reliably
supported on iOS Safari 16+. */
overscroll-behavior-y: none;
/* Matches body's background. If Safari still shows any bounce
sliver beyond body's box, this is what's revealed behind it —
previously unset (default white), which was the reported flash. */
background: linear-gradient(180deg, var(--body-bg-start) 0%, var(--body-bg-end) 100%);
/* Prevent Safari from auto-bumping font size on orientation change */
-webkit-text-size-adjust: 100%;
}
body {
font-family: 'Cairo', sans-serif;
background: linear-gradient(180deg, var(--body-bg-start) 0%, var(--body-bg-end) 100%);
color: var(--text);
min-height: 100vh;
/* 100dvh accounts for Safari's collapsing/expanding address bar —
100vh alone is locked to the largest possible viewport, leaving a
gap (or forcing a jump) as the toolbar shows/hides. Falls back to
100vh on browsers without dvh support. */
min-height: 100dvh;
overflow-x: hidden;
overscroll-behavior-y: none;
}
body::before {
content: '';
position: fixed;
inset: 0;
background: radial-gradient(circle at top right, var(--on-dark-a10), transparent 30%);
pointer-events: none;
z-index: -1;
}
a {
text-decoration: none;
}
button,
input,
select,
textarea {
font-family: 'Cairo', sans-serif;
-webkit-tap-highlight-color: transparent;
}
button {
user-select: none;
transition: all 0.2s ease;
}
/* button:hover and button:active transforms are handled
per-component (.btn, .tab-item, etc.) to avoid conflicts */
/* ========================================
SCROLLBAR
======================================== */
::-webkit-scrollbar {
width: 8px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--border);
}
::-webkit-scrollbar-thumb {
background: var(--gold-a40);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--gold-a40);
}
/* ========================================
APP WRAPPER
======================================== */
.app {
width: 100%;
min-height: 100vh;
min-height: 100dvh;
}
/* ========================================
PAGE ANIMATION
======================================== */
.fade-page {
animation: fadePage 0.22s ease;
}
@keyframes fadePage {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ========================================
EMPTY STATE
======================================== */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(14px * var(--ui-scale));
padding: calc(48px * var(--ui-scale)) calc(20px * var(--ui-scale));
text-align: center;
animation: fadePage 0.25s ease;
}
.empty-icon {
width: calc(72px * var(--ui-scale));
height: calc(72px * var(--ui-scale));
border-radius: 50%;
background: var(--gold-a15);
display: flex;
align-items: center;
justify-content: center;
font-size: max(var(--ui-text-min), calc(36px * var(--ui-text-scale)));
}
.empty-state h2 {
color: var(--text-muted);
font-size: var(--font-xl);
}
/* ========================================
PAGE CONTENT
======================================== */
.page-content {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
/* ========================================
KEYBOARD FOCUS
There was no global focus style, so a keyboard user could not see where
they were — including on the clickable dashboard cards, which only
became reachable once Card.jsx started forwarding onClick to
role="button" + tabIndex. Uses :focus-visible, so mouse and touch users
see no change. Component-level rules (e.g. .agent-panel button:focus-visible)
are more specific and still win.
======================================== */
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
/* ========================================
BADGE / STATUS
======================================== */
.badge {
display: inline-block;
padding: calc(4px * var(--ui-scale)) calc(10px * var(--ui-scale));
border-radius: var(--radius-full);
font-size: var(--font-sm);
font-weight: 700;
}
/* The badge types the app renders by hand. Without these rules every type
rendered as bare text, so one type looked exactly like another — and the
hand-written
`✓ مستلم` in MuhadreenTab
had no background at all. */
.badge-success {
background: var(--green);
color: var(--status-neutral-fg);
}
.badge-warning {
background: var(--surface-warning);
color: var(--warning-text);
}
.badge-info {
background: var(--primary);
color: var(--status-neutral-fg);
}
/* ========================================
COUNTDOWN BADGES
======================================== */
.countdown-text {
padding: calc(3px * var(--ui-scale)) calc(8px * var(--ui-scale));
border-radius: var(--radius-full);
font-size: var(--font-xs);
font-weight: 700;
width: fit-content;
}
.countdown-yellow {
background: var(--status-warning-bg);
color: var(--status-warning-fg);
}
.countdown-red {
background: var(--status-danger-bg);
color: var(--status-danger-fg);
}
.countdown-black {
background: var(--status-neutral-bg);
color: var(--status-neutral-fg);
}
.countdown-normal {
background: var(--status-info-bg);
color: var(--status-info-fg);
}
/* ========================================
GLOBAL SEARCH RESULTS
======================================== */
.global-results {
display: flex;
flex-direction: column;
gap: calc(10px * var(--ui-scale));
margin-top: calc(14px * var(--ui-scale));
}
.global-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: calc(12px * var(--ui-scale)) calc(14px * var(--ui-scale));
border-radius: var(--radius-md);
background: var(--surface-subtle);
}
/* ========================================
COMPLETION CELL (muhadreen table)
======================================== */
.completion-cell {
text-align: center;
vertical-align: middle;
font-weight: 700;
}
/* ========================================
DASHBOARD OPERATIONS (inside dashboard)
======================================== */
.dashboard-operations-wrapper {
display: flex;
flex-direction: column;
gap: calc(12px * var(--ui-scale));
}
.dashboard-operations-list {
display: flex;
flex-direction: column;
gap: calc(8px * var(--ui-scale));
}
/* ========================================
PRINT STYLES
======================================== */
@media print {
body {
background: var(--white) !important;
}
button {
display: none !important;
}
.card {
box-shadow: none !important;
border: 1px solid var(--border);
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 1px solid var(--border);
padding: 8px;
font-size: 11px;
}
}
/* app: styles/layout.css */
/* ========================================
LAYOUT — HEADER / NAVIGATION / PAGE CONTAINER
التخطيط العام للصفحة
======================================== */
/* ========================================
APP FRAME — the navigation and its one header action
Ticket 97. The band and the tab strip are the shared UiNavBar block. The
sign-out is the one control the block has no slot for, so the frame keeps
it in a fixed place in the band's corner — the band's own content (logo,
title, identity) is centred, so the corner stays clear at every width.
======================================== */
.app-nav {
position: relative;
}
.app-header-actions {
position: absolute;
/* The sign-out sits in the band's corner; the band's top padding now
carries --safe-top (ui.css .ui-nav-band), so this offset must carry it
too or the control would stay under the status bar. 0px on a device
without a safe area, so desktop is unchanged (ticket uifix, item 1). */
top: max(12px, calc(var(--safe-top) + 12px));
inset-inline-start: calc(16px * var(--ui-scale));
z-index: 2;
}
/* The same quiet account action the app header carried before: transparent
with a thin translucent outline, visibly secondary to the office title.
Two classes, so it still wins over the mobile .btn sizing. */
.app-signout.btn {
min-height: calc(27px * var(--ui-scale));
min-width: 0;
padding: calc(3px * var(--ui-scale)) calc(10px * var(--ui-scale));
font-size: var(--font-xs);
background: transparent;
color: var(--status-neutral-fg);
border: 1px solid var(--on-dark-a60);
box-shadow: none;
}
.app-signout.btn:hover {
background: var(--on-dark-a10);
border-color: var(--on-dark-a60);
}
@media (max-width: 768px) {
.app-header-actions {
/* The compact step resets the offset, so it carries the safe-area
term too (ticket uifix, item 1). */
top: max(8px, calc(var(--safe-top) + 8px));
inset-inline-start: 12px;
}
}
@media (max-width: 480px) {
.app-signout.btn {
padding: 3px 8px;
}
}
/* ========================================
DIGITAL CLOCK
The clock's base rule lives in clock.css; only its glass overlay is here.
======================================== */
.digital-clock::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, var(--on-dark-a10), transparent);
pointer-events: none;
}
/* ========================================
PAGE CONTAINER
======================================== */
.page-container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: var(--space-lg) var(--space-xl) calc(40px * var(--ui-scale));
padding-left: calc(max(20px, var(--safe-left)) * var(--ui-scale));
padding-right: calc(max(20px, var(--safe-right)) * var(--ui-scale));
display: flex;
flex-direction: column;
gap: calc(16px * var(--ui-scale));
}
.page-container > * {
animation: fadePage 0.2s ease;
}
/* ========================================
PAGE HEADER (title + actions row)
======================================== */
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(12px * var(--ui-scale));
flex-wrap: wrap;
margin-bottom: calc(4px * var(--ui-scale));
}
.page-header-title {
display: flex;
align-items: center;
gap: calc(10px * var(--ui-scale));
}
.page-header-title span {
font-size: var(--font-lg);
}
.page-header-title h1 {
font-size: var(--font-xl);
color: var(--heading-text);
font-weight: 800;
}
.page-header-actions {
display: flex;
align-items: center;
gap: calc(8px * var(--ui-scale));
}
/* ========================================
ACTION GROUP
======================================== */
.action-group {
display: flex;
align-items: center;
gap: calc(6px * var(--ui-scale));
flex-wrap: wrap;
}
/* ========================================
OFFLINE INDICATOR
شريط يظهر فقط عند انقطاع الإنترنت
Ticket 97 (follow-up): the indicator is rendered in the frame's
navigation status slot (UiNavBar's `status`, styles/ui.css
`.ui-nav-status`), which reserves its place — so its base rule is now
static (no fixed positioning of its own). Its text, chrome and the rules
for when it shows are untouched.
On every screen WITHOUT the frame it is still the fixed pill it was
before the ticket: the same position rules, restored under the
`.offline-indicator--floating` modifier (the wrapper App.jsx renders it
in). The in-slot rendering keeps the static base rule.
Clickability (ticket 97, round 4): the controls the indicator carries
(the «التعديلات» button) must work in both renderings. The floating
surface is `pointer-events: none` (so the pill never blocks what is under
it); the slot carries no `pointer-events` rule (it is in normal flow and
overlays nothing). The controls get `pointer-events: auto` explicitly.
======================================== */
.offline-indicator {
display: flex;
align-items: center;
gap: calc(8px * var(--ui-scale));
background: var(--surface-warning);
border: 1px solid var(--gold);
color: var(--warning-text);
font-weight: 700;
font-size: var(--font-xs);
padding: calc(6px * var(--ui-scale)) calc(14px * var(--ui-scale));
border-radius: calc(999px * var(--ui-scale));
box-shadow: var(--shadow-lg);
white-space: nowrap;
}
/* The fixed pill the indicator was before the ticket — every position rule
it had, unchanged, so a frameless screen shows it exactly where it always
did. `pointer-events: none` is the floating surface's one job: the pill
must never block a click on whatever lies under it. The pill inside this
wrapper inherits it; the controls it carries get their own
`pointer-events` back below. */
.offline-indicator--floating {
position: fixed;
top: max(8px, calc(var(--safe-top) + 8px));
left: 50%;
transform: translateX(-50%);
z-index: 9100;
pointer-events: none;
}
/* The indicator may carry controls, and they must be clickable in BOTH
renderings. In the frame's slot the pill is in the normal flow (it overlays
nothing), so the base rule above carries no `pointer-events` at all — the
controls inherit `auto` there. Inside the floating pill the surface is
`pointer-events: none`, so the controls need it back explicitly.
Today no interactive descendant sits inside the indicator (the pending
notice moved to the page's content area, ticket fx-pending). The list below
keeps any link or control a later ticket adds inside the indicator working
too. (The modals it opens are portaled to — Modal.jsx:213 — so they
are never inside this element and need no rule here.) */
.offline-indicator button,
.offline-indicator a[href],
.offline-indicator input,
.offline-indicator select,
.offline-indicator textarea,
.offline-indicator [role='button'] {
pointer-events: auto;
}
.offline-indicator-dot {
width: calc(8px * var(--ui-scale));
height: calc(8px * var(--ui-scale));
border-radius: 50%;
background: var(--gold);
flex-shrink: 0;
}
/* ========================================
APP UPDATE PROMPT
شريط يظهر عند توفر نسخة جديدة من التطبيق
The service worker has activated a new build; this is the one tap that
reloads into it. Fixed above everything so it is seen on any route.
======================================== */
.app-update-prompt {
position: fixed;
top: max(8px, calc(var(--safe-top) + 8px));
left: 50%;
transform: translateX(-50%);
z-index: 9200;
display: flex;
align-items: center;
gap: calc(8px * var(--ui-scale));
background: var(--gold);
border: 1px solid var(--gold-light);
color: var(--primary-dark);
font-weight: 700;
font-size: var(--font-xs);
padding: calc(8px * var(--ui-scale)) calc(16px * var(--ui-scale));
border-radius: calc(999px * var(--ui-scale));
box-shadow: var(--shadow-lg);
cursor: pointer;
white-space: nowrap;
}
.app-update-prompt:hover {
background: var(--gold-light);
}
/* app: styles/buttons.css */
/* ========================================
BUTTONS
الأزرار وعناصر التفاعل
======================================== */
.btn {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: calc(5px * var(--ui-scale));
min-width: calc(64px * var(--ui-scale));
min-height: calc(32px * var(--ui-scale));
padding: calc(5px * var(--ui-scale)) calc(12px * var(--ui-scale));
border: none;
outline: none;
border-radius: var(--radius-md);
cursor: pointer;
font-size: var(--font-sm);
font-weight: 700;
letter-spacing: 0.2px;
box-shadow: var(--shadow);
transition: all 0.18s ease;
}
.btn::after {
content: '';
position: absolute;
inset: 0;
background: var(--on-dark-a10);
opacity: 0;
transition: 0.18s;
}
.btn:hover {
transform: translateY(-1px);
filter: brightness(1.02);
}
.btn:hover::after {
opacity: 1;
}
.btn:active {
transform: scale(0.96);
}
/* ========================================
BUTTON VARIANTS
======================================== */
.btn-light {
background: var(--white);
color: var(--primary);
border: 1px solid var(--border);
box-shadow: none;
}
/* WhatsApp brand green, joined to the kit button. The compound selector
outranks the kit's ghost variant, so the brand colour wins wherever the
marker class is used. */
.ui-btn.btn-whatsapp {
background: var(--whatsapp);
color: var(--status-neutral-fg);
border-color: transparent;
}
/* ========================================
VISUALLY-DISABLED ACTION BUTTON
Used when a button should appear inactive
but still fire onClick (e.g. to show a
toast explaining why the action is not
available). Unlike HTML [disabled], this
does not block pointer events.
======================================== */
.btn-action-disabled {
opacity: 0.4;
cursor: not-allowed;
}
.btn-action-disabled:hover {
transform: none !important;
filter: none !important;
}
.btn-action-disabled::after {
display: none !important;
}
.btn-action-disabled:active {
transform: none !important;
}
/* ========================================
MAIN CARD
======================================== */
.main-card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: calc(8px * var(--ui-scale));
padding: calc(12px * var(--ui-scale));
border-radius: var(--radius-lg);
background: var(--card);
border: 1px solid var(--on-dark-a60);
box-shadow: var(--shadow);
transition: box-shadow 0.18s ease;
}
.main-card:hover {
box-shadow: var(--shadow-lg);
}
.main-card:not(:last-child) {
margin-bottom: calc(12px * var(--ui-scale));
}
.main-card > *:last-child {
margin-bottom: 0;
}
.main-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: calc(3px * var(--ui-scale));
background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
/* app: styles/inputs.css */
/* ========================================
INPUTS & FORMS
حقول الإدخال والنماذج
======================================== */
.input {
width: 100%;
height: calc(36px * var(--ui-scale));
padding: 0 calc(10px * var(--ui-scale));
border-radius: var(--radius-md);
border: 1px solid var(--border);
outline: none;
background: var(--white);
color: var(--text);
font-size: var(--font-sm);
font-weight: 500;
transition: all 0.18s ease;
}
.input:hover {
border-color: var(--gold-a40);
}
.input:focus {
border-color: var(--gold);
box-shadow: 0 0 0 2px var(--gold-a08);
}
.input::placeholder {
color: var(--text-muted);
}
/* ========================================
INPUT LABEL
======================================== */
.input-label {
display: block;
margin-bottom: calc(5px * var(--ui-scale));
margin-top: calc(2px * var(--ui-scale));
font-size: var(--font-xs);
font-weight: 700;
color: var(--heading-text);
}
/* ========================================
CUSTOM SELECT
======================================== */
.custom-select {
width: 100%;
height: calc(36px * var(--ui-scale));
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--white);
padding: 0 calc(10px * var(--ui-scale));
font-size: var(--font-sm);
font-weight: 500;
color: var(--text);
outline: none;
transition: all 0.18s ease;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
background-image:
linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
background-position:
calc(100% - 14px) 16px,
calc(100% - 8px) 16px;
background-size:
5px 5px,
5px 5px;
background-repeat: no-repeat;
}
.custom-select:focus {
border-color: var(--gold);
box-shadow: 0 0 0 2px var(--gold-a08);
}
.custom-select option {
background: var(--white);
color: var(--text);
font-size: var(--font-sm);
}
/* ========================================
SEARCH WRAPPER
======================================== */
.search-wrapper {
display: flex;
align-items: stretch;
gap: calc(8px * var(--ui-scale));
width: 100%;
flex: 1;
}
.search-wrapper .ui-field-input {
width: 100%;
flex: 1;
min-width: calc(200px * var(--ui-scale));
}
.search-wrapper .ui-field-input::placeholder {
color: var(--text-muted);
opacity: 1;
}
.search-wrapper .btn {
min-width: calc(80px * var(--ui-scale));
}
/* ========================================
STATIC FIELD (read-only display)
======================================== */
.static-field {
min-height: calc(34px * var(--ui-scale));
display: flex;
align-items: center;
padding: calc(6px * var(--ui-scale)) calc(10px * var(--ui-scale));
border-radius: var(--radius-sm);
background: var(--surface-subtle);
border: 1px solid var(--border);
font-weight: 600;
font-size: var(--font-sm);
word-break: break-word;
line-height: 1.5;
color: var(--text);
}
/* app: styles/modals.css */
/* ========================================
MODALS — النوافذ المنبثقة
======================================== */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 9400;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: calc(30px * var(--ui-scale));
padding-bottom: calc(30px * var(--ui-scale));
overflow-y: auto;
background: var(--scrim);
backdrop-filter: blur(4px);
animation: fadeOverlay 0.22s ease;
/* Ensure it's never accidentally hidden */
visibility: visible;
opacity: 1;
}
@keyframes fadeOverlay {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* The dialog frame (the chosen prototype's .modal): a head, a body that
scrolls inside while the page behind stays locked, and an actions row. */
.modal-content {
position: relative;
z-index: 9100;
display: flex;
flex-direction: column;
width: 100%;
max-width: calc(820px * var(--ui-scale));
max-height: 90vh;
max-height: 90dvh;
overflow: hidden;
padding: 0;
border-radius: var(--radius-xl);
background: var(--modal-bg);
border: 1px solid var(--on-dark-a60);
box-shadow: var(--shadow-lg);
animation: modalIn 0.22s ease;
}
@keyframes modalIn {
from {
opacity: 0;
transform: translateY(-16px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
flex-shrink: 0;
padding: calc(16px * var(--ui-scale)) calc(20px * var(--ui-scale));
border-bottom: 1px solid var(--modal-border);
background: linear-gradient(180deg, var(--modal-header-from), var(--modal-header-to));
position: sticky;
top: 0;
z-index: 2;
}
.modal-title {
display: flex;
align-items: center;
gap: calc(8px * var(--ui-scale));
font-size: var(--font-lg);
font-weight: 800;
color: var(--modal-title-color);
}
/* The close control is the kit's icon button, grown to a 44px touch target
(its accessible name is the button's own label). */
.modal-close.ui-btn--icon {
min-width: 44px;
min-height: 44px;
}
.modal-body {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
min-height: 0;
overflow-y: auto;
padding: var(--space-lg) var(--space-xl);
}
.modal-body .input {
width: 100%;
}
.modal-body .btn {
min-width: calc(100px * var(--ui-scale));
}
/* The form stack a dialog's UiFormField blocks sit in. */
.modal-form {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
/* A field with its own trailing control (the duration calculator). */
.modal-date-row {
display: flex;
align-items: flex-end;
gap: var(--space-sm);
}
.modal-date-row .ui-field {
flex: 1;
}
.modal-date-row .ui-btn--icon {
min-height: 40px;
}
/* Three equal quick-pick controls. */
.modal-quick-row {
display: flex;
gap: var(--space-sm);
}
.modal-quick-row .ui-btn {
flex: 1;
}
/* The actions row the frame renders when a dialog gives it one. */
.modal-foot {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
flex-shrink: 0;
padding: 14px var(--space-xl);
border-top: 1px solid var(--modal-border);
background: var(--card);
}
/* ========================================
CONFIRM MODAL
======================================== */
.confirm-text {
margin-bottom: calc(16px * var(--ui-scale));
text-align: center;
color: var(--text-muted);
font-size: var(--font-lg);
line-height: 1.8;
}
/* ========================================
GLOBAL SEARCH & CHANGE LOG (ticket 98-7b)
The two dialog screens that moved onto the kit's blocks. Colours and sizes
come only from variables.css, so the .dark-mode tokens carry both screens.
======================================== */
/* The Change Log's two filters sit on one wrapping row above the list. */
.change-log-filters {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
margin-bottom: var(--space-md);
}
/* Each filter takes an equal share of the row, and stacks on a narrow screen
(the row wraps) instead of squeezing the select. */
.change-log-filter {
flex: 1 1 220px;
}
/* The client an entry was about: the quiet line above the entry's own body. */
.change-log-client {
font-size: var(--font-xs);
color: var(--text-muted);
}
/* «تحميل المزيد» keeps its own centred row under the list. */
.change-log-more {
margin-top: var(--space-md);
text-align: center;
}
/* app: styles/toast.css */
/* ========================================
TOAST NOTIFICATIONS — إشعارات النظام
======================================== */
.toast-wrapper {
position: fixed;
top: max(16px, calc(var(--safe-top) + 12px));
left: 50%;
transform: translateX(-50%);
z-index: 9500;
pointer-events: none;
}
.toast-box {
display: flex;
align-items: center;
gap: calc(8px * var(--ui-scale));
width: auto;
max-width: calc(380px * var(--ui-scale));
min-width: calc(200px * var(--ui-scale));
padding: calc(9px * var(--ui-scale)) calc(14px * var(--ui-scale));
border-radius: var(--radius-md);
color: var(--status-neutral-fg);
font-size: var(--font-sm);
font-weight: 600;
backdrop-filter: blur(12px);
border: 1px solid var(--on-dark-a10);
box-shadow: var(--shadow-lg);
animation: toastShow 0.2s ease;
pointer-events: auto;
}
.toast-box span {
line-height: 1.4;
}
.toast-box.success {
background: var(--green);
}
.toast-box.error {
background: var(--red);
}
.toast-box.warning {
background: var(--gold);
color: var(--primary-dark);
}
@keyframes toastShow {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* app: styles/settings.css */
/* ========================================
SETTINGS PANEL STYLES — v4
Card-based SaaS design (Notion / Linear style)
======================================== */
/* ════════════════════════════════════════
CARD GROUPS (ticket #212)
مجموعات بطاقات الإعدادات — كل مجموعة لوحة معنونة، والبطاقات
شبكة البطاقات نفسها داخلها
════════════════════════════════════════ */
.settings-group {
margin-top: calc(16px * var(--ui-scale));
}
.settings-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(calc(260px * var(--ui-scale)), 1fr));
gap: calc(12px * var(--ui-scale));
}
.settings-category-card {
display: flex;
align-items: center;
gap: calc(14px * var(--ui-scale));
padding: calc(16px * var(--ui-scale)) calc(18px * var(--ui-scale));
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg, 12px);
cursor: pointer;
text-align: right;
transition:
box-shadow 0.2s ease,
border-color 0.2s ease,
transform 0.15s ease;
position: relative;
width: 100%;
box-shadow: var(--shadow);
}
.settings-category-card:hover {
border-color: var(--gold);
box-shadow: var(--shadow-lg);
transform: translateY(-1px);
}
.settings-category-card:active {
transform: translateY(0);
box-shadow: var(--shadow);
}
.settings-card-icon-wrap {
flex-shrink: 0;
width: calc(42px * var(--ui-scale));
height: calc(42px * var(--ui-scale));
border-radius: var(--radius-md, 10px);
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
}
.settings-card-body {
flex: 1;
min-width: 0;
}
.settings-card-title {
display: flex;
align-items: center;
gap: calc(6px * var(--ui-scale));
font-size: var(--font-sm);
font-weight: 700;
color: var(--primary);
margin-bottom: calc(2px * var(--ui-scale));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.settings-card-desc {
display: block;
font-size: max(var(--ui-text-min), calc(11px * var(--ui-text-scale)));
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.settings-card-badge {
flex-shrink: 0;
min-width: calc(20px * var(--ui-scale));
height: calc(20px * var(--ui-scale));
padding: 0 calc(6px * var(--ui-scale));
border-radius: calc(10px * var(--ui-scale));
background: var(--gold);
color: var(--status-neutral-fg);
font-size: var(--font-2xs);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.settings-card-arrow {
flex-shrink: 0;
color: var(--text-muted);
transition: transform 0.2s;
}
.settings-category-card:hover .settings-card-arrow {
transform: translateX(-3px);
color: var(--gold);
}
/* ════════════════════════════════════════
BROADCAST SECTION (ticket 98-3a)
قسم إرسال تنبيه للفريق
════════════════════════════════════════ */
.settings-broadcast-counter {
text-align: left;
font-size: var(--font-xs);
color: var(--text-muted);
}
.settings-broadcast-group {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.settings-broadcast-modes {
display: flex;
gap: calc(14px * var(--ui-scale));
}
.settings-broadcast-list {
display: flex;
flex-direction: column;
gap: calc(6px * var(--ui-scale));
}
.settings-broadcast-option {
display: flex;
align-items: center;
gap: calc(6px * var(--ui-scale));
font-size: var(--font-sm);
color: var(--text);
}
.settings-broadcast-note {
margin: 0;
font-size: var(--font-xs);
color: var(--text-muted);
}
.settings-broadcast-actions {
display: flex;
align-items: center;
gap: calc(10px * var(--ui-scale));
margin-top: calc(12px * var(--ui-scale));
}
.settings-broadcast-result {
font-size: var(--font-sm);
color: var(--green);
}
/* The one action a section keeps outside its group (ticket 98-3a): the
reset-password control and the cleanup control. */
.settings-section-actions {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-top: var(--space-md);
}
/* ════════════════════════════════════════
MODAL CONTENT
════════════════════════════════════════ */
.settings-modal-body {
padding: calc(4px * var(--ui-scale)) 0 calc(8px * var(--ui-scale));
display: flex;
flex-direction: column;
gap: calc(4px * var(--ui-scale));
}
.settings-modal-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: calc(10px * var(--ui-scale)) 0;
border-bottom: 1px solid var(--border);
gap: calc(16px * var(--ui-scale));
}
.settings-modal-row:last-child {
border-bottom: none;
}
.settings-modal-row-label {
display: flex;
flex-direction: column;
gap: calc(2px * var(--ui-scale));
font-size: var(--font-sm, 13px);
font-weight: 500;
color: var(--text);
}
.settings-row-hint {
font-size: var(--font-2xs);
color: var(--text-muted);
font-weight: 400;
}
.settings-modal-row-control {
flex-shrink: 0;
}
.settings-modal-divider {
height: 1px;
background: var(--border);
margin: calc(8px * var(--ui-scale)) 0;
}
.settings-hint-text {
font-size: max(var(--ui-text-min), calc(11px * var(--ui-text-scale)));
color: var(--text-muted);
line-height: 1.7;
margin: calc(6px * var(--ui-scale)) 0 0;
padding: calc(8px * var(--ui-scale)) calc(10px * var(--ui-scale));
background: var(--surface-subtle);
border-radius: var(--radius-sm, 6px);
border-right: 3px solid var(--gold);
}
.settings-action-group {
display: flex;
flex-direction: column;
gap: calc(8px * var(--ui-scale));
margin-top: calc(8px * var(--ui-scale));
}
.settings-full-btn {
width: 100%;
justify-content: center;
}
/* ════════════════════════════════════════
SECTION LISTS (ticket 98-3b)
قوائم الأقسام — صفوف النموذج الأولي
════════════════════════════════════════ */
/* The prototype's rows, as one plain list. The surface is the section's own
group (the kit's card), so no second frame is written here. */
.settings-list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.settings-list-row {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--space-sm);
padding: calc(10px * var(--ui-scale)) 0;
border-bottom: 1px solid var(--border);
text-align: right;
}
.settings-list-row:last-child {
border-bottom: none;
}
/* The row's own block: a long error message or device name wraps inside it
instead of widening the page. */
.settings-list-main {
display: flex;
flex-direction: column;
gap: calc(2px * var(--ui-scale));
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
}
.settings-list-title {
font-size: var(--font-sm);
font-weight: 700;
color: var(--heading-text);
}
.settings-list-meta {
font-size: var(--font-xs);
color: var(--text-muted);
}
.settings-list-actions {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
margin-inline-start: auto;
}
/* The prototype's `.chip` states, painted with the app's status tokens. */
.settings-list-chip {
display: inline-flex;
align-items: center;
gap: calc(5px * var(--ui-scale));
border-radius: var(--radius-full);
padding: calc(2px * var(--ui-scale)) calc(10px * var(--ui-scale));
font-size: var(--font-xs);
font-weight: 700;
white-space: nowrap;
}
.settings-list-chip.is-warn {
background: var(--status-warning-bg);
color: var(--status-warning-fg);
}
.settings-list-chip.is-danger {
background: var(--status-danger-bg);
color: var(--status-danger-fg);
}
.settings-list-chip.is-info {
background: var(--status-info-bg);
color: var(--status-info-fg);
}
/* An active author (ticket 98-3c) — the fourth state, on its own token pair
so dark mode follows like the other three. */
.settings-list-chip.is-ok {
background: var(--status-ok-bg);
color: var(--status-ok-fg);
}
/* The log entry's stack: monospace and never wider than its row. */
.settings-list-stack {
font-family: monospace;
font-size: var(--font-2xs);
color: var(--text-muted);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* «التغييرات المعلقة» (ticket 98-3c): the refresh control's own row, then
the prototype's rows and their four states. */
.settings-pending {
display: block;
margin-top: var(--space-lg);
}
.settings-pending-toolbar {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
}
/* The error-log viewer's own scroll frame, as before. */
.settings-logs {
max-height: calc(450px * var(--ui-scale));
overflow-y: auto;
}
/* The unresolved restore rows' own block below the backup controls. */
.settings-unresolved {
display: block;
margin-top: var(--space-lg);
}
.settings-unresolved-amount {
max-width: calc(160px * var(--ui-scale));
}
/* «قراءات تحتاج تصحيحا» (ticket #202): the tick wraps the row's text, so
the whole line is the target. */
.settings-correction-choice {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
flex: 1;
min-width: 0;
cursor: pointer;
text-align: right;
}
/* ── Monitoring Chart ── */
.settings-usage-chart {
display: flex;
align-items: flex-end;
gap: calc(4px * var(--ui-scale));
height: calc(56px * var(--ui-scale));
margin: calc(12px * var(--ui-scale)) 0;
padding: 0 calc(2px * var(--ui-scale));
}
.settings-chart-col {
flex: 1;
display: flex;
align-items: flex-end;
height: 100%;
}
.settings-chart-bar {
width: 100%;
background: var(--gold);
border-radius: calc(3px * var(--ui-scale)) calc(3px * var(--ui-scale)) 0 0;
min-height: calc(4px * var(--ui-scale));
transition: height 0.3s ease;
opacity: 0.85;
}
.settings-chart-bar:hover {
opacity: 1;
}
/* ── Save All button (ticket 98-3a) ── */
.settings-save-all {
margin-top: calc(28px * var(--ui-scale));
text-align: center;
}
/* ════════════════════════════════════════
TOGGLE SWITCH
════════════════════════════════════════ */
.switch {
position: relative;
display: inline-block;
width: calc(48px * var(--ui-scale));
height: calc(24px * var(--ui-scale));
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--border);
transition: 0.2s;
border-radius: calc(34px * var(--ui-scale));
}
.slider:before {
content: '';
position: absolute;
height: calc(18px * var(--ui-scale));
width: calc(18px * var(--ui-scale));
left: calc(3px * var(--ui-scale));
bottom: calc(3px * var(--ui-scale));
background: var(--status-neutral-fg);
transition: 0.2s;
border-radius: 50%;
box-shadow: var(--shadow);
}
input:checked + .slider {
background: var(--gold);
}
input:checked + .slider:before {
transform: translateX(calc(24px * var(--ui-scale)));
}
/* ════════════════════════════════════════
STATS GRID (reused in modal)
════════════════════════════════════════ */
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: calc(10px * var(--ui-scale));
margin-bottom: calc(8px * var(--ui-scale));
}
.stat-card {
background: var(--surface-subtle);
border-radius: var(--radius-md, 8px);
padding: calc(12px * var(--ui-scale));
text-align: center;
border: 1px solid var(--border);
}
.stat-card .stat-number {
font-size: var(--font-xl, 20px);
font-weight: 800;
color: var(--gold);
line-height: 1.2;
}
.stat-card .stat-label {
font-size: var(--font-xs, 10px);
color: var(--text-muted);
margin-top: calc(4px * var(--ui-scale));
}
/* ════════════════════════════════════════
USERS PANEL (ticket 98-3d)
لوحة المستخدمين — صفوف النموذج الأولي
════════════════════════════════════════ */
/* The two sections of the Users screen, one under the other. */
.users-panel {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.users-section,
.users-role-defaults {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
/* The one editor box the name/Role form, the invite form, the Role defaults
editor and the Exceptions editor share. */
.users-editor-box {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-md);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-secondary);
}
.users-editor-fields {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
/* The Permission catalogue as tick boxes, shared by both editors. */
.users-perm-list {
display: flex;
flex-direction: column;
gap: calc(6px * var(--ui-scale));
}
.users-perm-option {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--font-sm);
cursor: pointer;
}
.users-perm-option.is-locked {
cursor: default;
}
/* The permission's name takes the free space beside its tick box. */
.users-perm-label {
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
}
/* A box that differs from the Role: «+» added, «−» removed. */
.users-perm-added {
color: var(--green);
font-weight: 700;
}
.users-perm-removed {
color: var(--red);
font-weight: 700;
}
/* The delete dialog's content: the person, what is removed, what stays, the
typed-email field and the two controls. The size is set once here and the
lines inherit it. */
.users-delete {
display: flex;
flex-direction: column;
gap: var(--space-sm);
font-size: var(--font-sm);
}
.users-delete-list {
margin: 0;
padding-inline-start: calc(20px * var(--ui-scale));
}
.users-delete-warning {
margin: 0;
color: var(--red);
}
/* ════════════════════════════════════════
DARK MODE
════════════════════════════════════════ */
/* The card, the stat card and the labels now read the theme tokens, so their
dark overrides are gone. The hint box keeps its own wash. */
.dark-mode .settings-hint-text {
background: var(--on-dark-a10);
}
/* ════════════════════════════════════════
MOBILE
════════════════════════════════════════ */
@media (max-width: 768px) {
/* Two columns on a phone (ticket 98-3a): the cards stay side by side down
to the narrow step, and the section titles and descriptions wrap inside
their own card instead of being cut off. */
.settings-cards-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settings-category-card {
min-height: 44px;
}
.settings-card-title,
.settings-card-desc {
white-space: normal;
overflow: visible;
}
.stats-grid {
grid-template-columns: 1fr 1fr;
}
.settings-modal-row {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
/* One column at the narrow step (ticket 98-3a). */
@media (max-width: 360px) {
.settings-cards-grid {
grid-template-columns: 1fr;
}
}
/* app: styles/clock.css */
/* ========================================
CLOCK STYLES
======================================== */
.digital-clock {
position: fixed;
top: max(12px, calc(var(--safe-top) + 8px));
left: max(16px, calc(var(--safe-left) + 8px));
z-index: 9000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: calc(90px * var(--ui-scale));
padding: calc(6px * var(--ui-scale)) calc(12px * var(--ui-scale));
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
color: var(--status-neutral-fg);
font-size: var(--font-sm);
font-weight: 800;
letter-spacing: 1px;
direction: ltr;
user-select: none;
backdrop-filter: blur(10px);
border: 1px solid var(--on-dark-a10);
box-shadow: var(--shadow-lg);
cursor: pointer;
transition: all 0.18s ease;
}
.digital-clock:hover {
opacity: 0.85;
transform: scale(0.98);
}
.digital-clock-time {
font-size: max(var(--ui-text-min), calc(13px * var(--ui-text-scale)));
font-weight: 700;
letter-spacing: 1px;
direction: ltr;
color: var(--status-neutral-fg);
white-space: nowrap;
}
.digital-clock-date {
font-size: max(var(--ui-text-min), calc(9px * var(--ui-text-scale)));
font-weight: 500;
opacity: 0.75;
direction: ltr;
color: var(--status-neutral-fg);
}
/* Date Calculator Modal - Small */
.calculator-modal .modal-content {
max-width: calc(320px * var(--ui-scale));
}
.calculator-container {
display: flex;
flex-direction: column;
gap: calc(12px * var(--ui-scale));
}
.calculator-input {
margin-bottom: calc(4px * var(--ui-scale));
}
.calculator-input-label {
display: block;
margin-bottom: calc(4px * var(--ui-scale));
font-size: max(var(--ui-text-min), calc(11px * var(--ui-text-scale)));
font-weight: 700;
color: var(--heading-text);
}
.calculator-quick {
display: flex;
gap: calc(8px * var(--ui-scale));
justify-content: center;
}
.calculator-quick-btn {
background: var(--surface-subtle);
border: none;
border-radius: calc(6px * var(--ui-scale));
padding: calc(4px * var(--ui-scale)) calc(12px * var(--ui-scale));
font-size: max(var(--ui-text-min), calc(11px * var(--ui-text-scale)));
font-weight: 600;
cursor: pointer;
transition: 0.18s;
color: var(--primary);
}
.calculator-quick-btn:hover {
background: var(--gold);
color: var(--primary-dark);
transform: translateY(-1px);
}
.calculator-result {
background: var(--gold-a15);
padding: calc(10px * var(--ui-scale));
border-radius: calc(8px * var(--ui-scale));
text-align: center;
border: 1px solid var(--gold);
}
.calculator-result-date {
font-size: max(var(--ui-text-min), calc(14px * var(--ui-text-scale)));
font-weight: 800;
color: var(--gold);
}
.dark-mode .calculator-quick-btn {
color: var(--text);
}
/* app: styles/ui.css */
/* ========================================
SHARED UI KIT — ui.css
حزمة العناصر المشتركة
The first building blocks of the redesign (ticket 94). Every selector here
is prefixed "ui-" so nothing that already exists can be restyled by
accident. Colours, radii, shadows and fonts come only from the tokens in
variables.css, so light and dark follow automatically and no new colour is
introduced. Right to left with logical properties (inline-start / end).
Desktop is spacious, phone is compact.
Theme-safe text: several tokens flip between themes, so the kit uses them
deliberately. --text / --text-muted for text on a surface; --white / --card
for surfaces; --primary / --primary-dark for filled dark surfaces; and
--status-neutral-fg (light in BOTH themes) for text on a filled surface.
Using --white as text, or --primary as text on a surface, would disappear
in dark mode, so neither appears here.
======================================== */
/* ========================================
SCREEN-READER ONLY
======================================== */
.ui-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ========================================
PAGE FRAME
الإطار العام للصفحة
The frame takes the current app's own page chrome: the app paints the page
area with the body gradient (reset.css `body`), and its content column is
`.page-container` (layout.css) — same max width, same padding, same rhythm.
======================================== */
.ui-page {
display: flex;
flex-direction: column;
gap: var(--space-lg);
min-height: 100%;
background: linear-gradient(180deg, var(--body-bg-start) 0%, var(--body-bg-end) 100%);
color: var(--text);
}
.ui-page-inner {
display: flex;
flex-direction: column;
gap: var(--space-lg);
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: var(--space-lg) var(--space-xl) calc(40px * var(--ui-scale));
padding-inline-start: max(var(--space-xl), var(--safe-left));
padding-inline-end: max(var(--space-xl), var(--safe-right));
}
.ui-page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
flex-wrap: wrap;
}
.ui-page-title {
display: flex;
align-items: center;
gap: var(--space-sm);
color: var(--status-neutral-fg);
font-size: var(--font-xl);
font-weight: 800;
line-height: 1.3;
}
.ui-page-actions {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
}
.ui-page-body {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
/* ========================================
NAVIGATION BAR
الترويسة وشريط الملاحة
Built from the current app's own header and tab bar (Layout.jsx +
layout.css): a dark primary gradient band with the top radius and the
centred logo/title/identity of `.main-header`, then the white tab bar of
`.tabs-container` with the icon above the label, `.tab-item`'s primary text
and gold active underline. The colours come from the same tokens, so light
and dark follow.
======================================== */
.ui-nav {
display: flex;
flex-direction: column;
width: 100%;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
color: var(--status-neutral-fg);
}
.ui-nav-band {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(6px * var(--ui-scale));
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: calc(10px * var(--ui-scale)) calc(16px * var(--ui-scale)) calc(12px * var(--ui-scale));
/* The app runs edge-to-edge (viewport-fit=cover + a translucent status
bar), so the band's top sits UNDER the status bar / Dynamic Island.
The old header padded its top the same way (.main-header in layout.css);
--safe-top is 0px on a device without a safe area, so desktop is
unchanged. Ticket uifix, item 1. */
padding-top: max(10px, calc(var(--safe-top) + 10px));
padding-inline-start: calc(max(16px, var(--safe-left)) * var(--ui-scale));
padding-inline-end: calc(max(16px, var(--safe-right)) * var(--ui-scale));
}
.ui-nav-logo {
display: flex;
align-items: center;
justify-content: center;
width: calc(76px * var(--ui-scale));
height: calc(76px * var(--ui-scale));
flex-shrink: 0;
}
.ui-nav-logo-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.ui-nav-title {
display: flex;
flex-direction: column;
gap: calc(2px * var(--ui-scale));
max-width: calc(1100px * var(--ui-scale));
margin: 0;
color: var(--status-neutral-fg);
text-align: center;
font-size: var(--font-xl);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.3px;
}
.ui-nav-identity {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-sm);
max-width: 100%;
}
/* The signed-in name reads as a handwritten signature, exactly as the app
header does (layout.css `.header-identity-name`). */
.ui-nav-user {
font-family: 'Aref Ruqaa', 'Cairo', sans-serif;
color: var(--status-neutral-fg);
font-size: var(--font-lg);
font-weight: 700;
line-height: 1.5;
overflow-wrap: anywhere;
}
/* The `status` slot (ticket 97): when UiNavBar is given a `status` node it
takes the built-in connectivity mark's place in the identity row. The slot
holds a fixed height — the height of the offline pill it carries (6px + 6px
padding, 1px + 1px border, 11px × 1.6 line ≈ 32px, all scaled with the
tokens) — so the identity row, and with it the band and the tab strip below
it, do not move or resize when the indicator appears or disappears or its
counter changes from nothing to a number. The reserve is at every width; the
narrower steps only shrink the name (`.ui-nav-user` at ≤768), never the
slot. */
.ui-nav-status {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
min-height: calc(32px * var(--ui-scale));
}
.ui-nav-tabs {
display: flex;
align-items: stretch;
width: 100%;
max-width: var(--container-max);
min-height: calc(52px * var(--ui-scale));
margin: var(--space-lg) auto;
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--white);
border: 1px solid var(--border);
backdrop-filter: blur(4px);
box-shadow: var(--shadow);
}
.ui-nav-tab {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
min-width: 0;
min-height: calc(52px * var(--ui-scale));
padding: calc(8px * var(--ui-scale)) calc(6px * var(--ui-scale));
border: none;
border-bottom: 2px solid transparent;
background: transparent;
color: var(--text);
font-size: var(--font-sm);
font-weight: 700;
white-space: nowrap;
cursor: pointer;
transition: all 0.18s ease;
}
.ui-nav-tab:hover {
background: color-mix(in srgb, var(--gold) 8%, transparent);
color: var(--gold);
}
.ui-nav-tab.is-active {
background: color-mix(in srgb, var(--gold) 10%, transparent);
color: var(--gold);
border-bottom: 2px solid var(--gold);
}
.ui-nav-tab-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(3px * var(--ui-scale));
}
.ui-nav-badge {
display: flex;
align-items: center;
justify-content: center;
min-width: calc(16px * var(--ui-scale));
height: calc(16px * var(--ui-scale));
padding: 0 calc(4px * var(--ui-scale));
border-radius: var(--radius-full);
background: var(--red);
color: var(--status-neutral-fg);
font-size: var(--font-2xs);
font-weight: 700;
}
/* ========================================
IDENTITY BAR
شريط هوية الموكل والقضية
A quiet dark band in the app's own language: the same primary gradient the
header band carries (client.css `.client-header-band`), with the same gold
accent.
======================================== */
.ui-identity {
display: flex;
align-items: center;
gap: var(--space-md);
flex-wrap: wrap;
padding: calc(10px * var(--ui-scale)) var(--space-xl);
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--status-neutral-fg);
border-bottom: 2px solid var(--gold);
}
.ui-identity-name {
font-size: var(--font-lg);
font-weight: 800;
color: var(--status-neutral-fg);
}
.ui-identity-sep {
width: 1px;
height: calc(15px * var(--ui-scale));
background: var(--gold);
}
.ui-identity-fact {
display: inline-flex;
align-items: center;
gap: calc(5px * var(--ui-scale));
font-size: var(--font-sm);
color: var(--gold-light);
}
.ui-identity-fact b {
color: var(--status-neutral-fg);
font-weight: 800;
}
.ui-identity-subject {
flex: 1 1 calc(240px * var(--ui-scale));
min-width: calc(120px * var(--ui-scale));
font-size: var(--font-sm);
color: var(--gold-light);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Compact (phone) form (ticket 95): the name and the case number stay on
the bar, and the year, the court and the case subject sit behind a
disclosure that opens on a tap. The desktop form above is untouched. */
.ui-identity--compact {
align-items: center;
gap: var(--space-sm);
}
.ui-identity--compact .ui-identity-name {
font-size: var(--font-md);
}
.ui-identity-toggle {
display: inline-flex;
align-items: center;
gap: calc(5px * var(--ui-scale));
min-height: 44px;
padding: 0 var(--space-md);
border: 1px solid var(--gold);
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--gold) 16%, transparent);
color: var(--gold-light);
font-size: var(--font-sm);
font-weight: 700;
cursor: pointer;
transition: background 0.18s ease;
}
.ui-identity-toggle:hover {
background: color-mix(in srgb, var(--gold) 26%, transparent);
}
.ui-identity-toggle .ui-identity-fact b {
color: var(--status-neutral-fg);
}
.ui-identity-chevron {
transition: transform 0.18s ease;
}
.ui-identity-chevron.is-open {
transform: rotate(180deg);
}
.ui-identity-more {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
flex-basis: 100%;
}
.ui-identity-more .ui-identity-subject {
flex-basis: 100%;
white-space: normal;
}
/* ========================================
CARD
البطاقة
The app's card surface: `--card` (buttons.css `.main-card`, dashboard.css
`.dashboard-card`), the same 12px padding and radius, and the same gold
hairline across the top.
======================================== */
.ui-card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-md);
border-radius: var(--radius-lg);
background: var(--card);
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
.ui-card::before {
content: '';
position: absolute;
top: 0;
inset-inline: 0;
height: calc(3px * var(--ui-scale));
background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.ui-card-title {
display: flex;
align-items: center;
gap: var(--space-sm);
margin: 0;
padding-inline-start: calc(9px * var(--ui-scale));
border-inline-start: 3px solid var(--gold);
color: var(--text);
font-size: var(--font-md);
font-weight: 800;
line-height: 1.4;
}
.ui-card-body {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
/* ========================================
TABLE SHELL
هيكل الجدول — نوع الخلية ونظام الألوان من الجداول الحالية
(table.css `table`, `thead th`, `tbody td`), وعمود الإجراءات يبقى مثبّتاً
على الهاتف.
======================================== */
.ui-table-shell {
position: relative;
width: 100%;
overflow-x: auto;
border-radius: var(--radius-lg);
background: var(--white);
border: 1px solid var(--border);
}
.ui-table {
width: 100%;
min-width: calc(650px * var(--ui-scale));
border-collapse: collapse;
background: var(--white);
color: var(--text);
}
.ui-table thead th {
padding: calc(8px * var(--ui-scale));
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: var(--status-neutral-fg);
font-size: var(--font-xs);
font-weight: 700;
text-align: center;
letter-spacing: 0.2px;
white-space: nowrap;
}
.ui-table tbody td {
padding: calc(7px * var(--ui-scale)) calc(8px * var(--ui-scale));
border-bottom: 1px solid var(--border);
font-size: var(--font-xs);
font-weight: 500;
line-height: 1.4;
text-align: center;
vertical-align: middle;
}
/* The compact body text an opt-in screen asks for (ticket 96a round 2): the
denser --font-2xs the Sessions and Archive tables had before they moved
onto the shell. Two classes (the shell modifier + .ui-table) outrank both
`.ui-table tbody td` (0,1,2) and table.css `tbody td` (0,0,2); a shell
without the modifier is untouched. At 768px and below the readable rule
further down wins back --font-sm for a screen that also asks for it. */
.ui-table-shell--compact .ui-table tbody td {
font-size: var(--font-2xs);
}
.ui-table tbody tr:last-child td {
border-bottom: none;
}
.ui-table tbody tr:nth-child(even) {
background: var(--surface-subtle);
}
.ui-table tbody tr:hover {
background: color-mix(in srgb, var(--gold) 4%, transparent);
}
.ui-table-cell-strong {
font-weight: 700;
color: var(--text);
}
.ui-table-cell-muted {
color: var(--text-muted);
}
/* Ticket 305: a date in a list table never breaks inside itself. */
.ui-table .ui-col-date {
white-space: nowrap;
}
.ui-table-actions {
display: flex;
gap: calc(6px * var(--ui-scale));
align-items: center;
flex-wrap: nowrap;
}
/* ========================================
FORM FIELD
حقل النموذج — علامة الإلزامي والخطأ بجواره
======================================== */
.ui-field {
display: flex;
flex-direction: column;
gap: calc(6px * var(--ui-scale));
min-width: 0;
}
.ui-field-label {
display: inline-flex;
align-items: center;
gap: calc(4px * var(--ui-scale));
font-size: var(--font-sm);
font-weight: 700;
color: var(--text);
}
.ui-field-req {
color: var(--status-danger-fg);
font-weight: 800;
}
.ui-field-input {
width: 100%;
min-height: calc(40px * var(--ui-scale));
padding: calc(9px * var(--ui-scale)) calc(12px * var(--ui-scale));
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-subtle);
color: var(--text);
font-size: var(--font-base);
font-weight: 500;
outline: none;
transition: all 0.15s ease;
}
.ui-field-input:focus {
border-color: var(--gold);
background: var(--white);
}
.ui-field-input[aria-invalid='true'] {
border-color: var(--red);
background: var(--status-danger-bg);
}
/* fx-visual: the field placeholder reads the muted token, so it stays legible
in both themes. */
.ui-field-input::placeholder {
color: var(--text-muted);
}
.ui-field-error {
display: inline-flex;
align-items: center;
gap: calc(5px * var(--ui-scale));
font-size: var(--font-xs);
font-weight: 700;
color: var(--status-danger-fg);
}
.ui-field-help {
font-size: var(--font-xs);
color: var(--text-muted);
}
/* ========================================
STATE BLOCK
الحالات: عادي / فارغ / تحميل / خطأ
======================================== */
.ui-state {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
padding: calc(38px * var(--ui-scale)) var(--space-2xl);
border-radius: var(--radius-lg);
background: var(--white);
border: 1px solid var(--border);
text-align: center;
}
.ui-state-icon {
display: flex;
align-items: center;
justify-content: center;
width: calc(60px * var(--ui-scale));
height: calc(60px * var(--ui-scale));
border-radius: 50%;
background: var(--surface-subtle);
border: 1px dashed var(--border);
color: var(--text-muted);
}
.ui-state-icon.is-error {
background: var(--status-danger-bg);
border-style: solid;
border-color: var(--red);
color: var(--status-danger-fg);
}
.ui-state-title {
margin: 0;
color: var(--text);
font-size: var(--font-lg);
font-weight: 800;
}
.ui-state-text {
max-width: calc(420px * var(--ui-scale));
margin: 0;
color: var(--text-muted);
font-size: var(--font-sm);
line-height: 1.7;
}
.ui-state-reason {
max-width: calc(420px * var(--ui-scale));
margin: 0;
padding: calc(6px * var(--ui-scale)) calc(12px * var(--ui-scale));
border-radius: var(--radius-sm);
background: var(--status-danger-bg);
color: var(--status-danger-fg);
font-size: var(--font-xs);
font-weight: 700;
direction: ltr;
overflow-wrap: anywhere;
}
.ui-state-actions {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
justify-content: center;
}
.ui-state-skeleton {
display: flex;
flex-direction: column;
gap: var(--space-sm);
width: 100%;
}
.ui-skel-row {
display: flex;
align-items: center;
gap: var(--space-md);
padding: calc(11px * var(--ui-scale)) calc(12px * var(--ui-scale));
border-bottom: 1px solid var(--border);
}
.ui-skel-row:last-child {
border-bottom: none;
}
.ui-skel {
border-radius: var(--radius-sm);
background: linear-gradient(90deg, var(--card) 25%, var(--surface-subtle) 50%, var(--card) 75%);
background-size: 200% 100%;
animation: ui-shimmer 1.3s infinite;
}
.ui-skel-dot {
width: calc(34px * var(--ui-scale));
height: calc(34px * var(--ui-scale));
border-radius: 50%;
flex-shrink: 0;
}
.ui-skel-grow {
flex: 1;
height: calc(12px * var(--ui-scale));
}
.ui-skel-chip {
width: calc(64px * var(--ui-scale));
height: calc(16px * var(--ui-scale));
border-radius: var(--radius-full);
flex-shrink: 0;
}
@keyframes ui-shimmer {
to {
background-position: -200% 0;
}
}
/* ========================================
CONFIRMATION BLOCK
كتلة التأكيد — تسمّي السجل المطلوب حذفه
======================================== */
.ui-confirm {
display: flex;
flex-direction: column;
gap: var(--space-md);
padding: var(--space-lg);
border-radius: var(--radius-lg);
background: var(--white);
border: 1px solid var(--border);
border-inline-start: 4px solid var(--red);
box-shadow: var(--shadow);
}
.ui-confirm-title {
margin: 0;
color: var(--text);
font-size: var(--font-lg);
font-weight: 800;
}
.ui-confirm-text {
margin: 0;
color: var(--text);
font-size: var(--font-sm);
line-height: 1.8;
}
.ui-confirm-record {
color: var(--status-danger-fg);
font-weight: 800;
overflow-wrap: anywhere;
}
.ui-confirm-actions {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
}
/* ========================================
STATUS MARKS
علامة التقويم، الاتصال، وحالة الحفظ
======================================== */
.ui-mark {
display: inline-flex;
align-items: center;
gap: calc(6px * var(--ui-scale));
font-size: var(--font-sm);
font-weight: 700;
}
.ui-mark-dot {
width: calc(8px * var(--ui-scale));
height: calc(8px * var(--ui-scale));
border-radius: 50%;
flex-shrink: 0;
}
.ui-mark.is-ok {
color: var(--green);
}
.ui-mark.is-ok .ui-mark-dot {
background: var(--green);
}
.ui-mark.is-pending {
color: var(--warning-text);
}
.ui-mark.is-pending .ui-mark-dot {
background: var(--gold);
}
.ui-mark.is-problem {
color: var(--status-danger-fg);
}
.ui-mark.is-problem .ui-mark-dot {
background: var(--red);
}
/* A quiet state that is neither good nor bad. Kept muted so it never reads
as a warning. */
.ui-mark.is-neutral {
color: var(--text-muted);
}
.ui-mark.is-neutral .ui-mark-dot {
background: var(--text-muted);
}
/* The registered Calendar mark's icon-only form (ticket 184): a small calendar
icon where the dot and the words used to be. It keeps the is-ok colour and
carries no text, so its accessible name (aria-label/title) is the meaning.
The icon is 15px, so it never raises a table row's height. */
.ui-mark--icon {
display: inline-flex;
align-items: center;
color: var(--green);
line-height: 0;
}
.ui-conn {
display: inline-flex;
align-items: center;
gap: calc(6px * var(--ui-scale));
font-size: var(--font-xs);
font-weight: 700;
}
.ui-conn-dot {
width: calc(9px * var(--ui-scale));
height: calc(9px * var(--ui-scale));
border-radius: 50%;
flex-shrink: 0;
}
.ui-conn.is-online {
color: var(--green);
}
.ui-conn.is-online .ui-conn-dot {
background: var(--green);
}
.ui-conn.is-offline {
color: var(--red);
}
.ui-conn.is-offline .ui-conn-dot {
background: var(--red);
}
.ui-save {
display: inline-flex;
align-items: center;
gap: calc(8px * var(--ui-scale));
font-size: var(--font-sm);
font-weight: 700;
flex-wrap: wrap;
}
.ui-save.is-saving {
color: var(--text-muted);
}
.ui-save.is-saved {
color: var(--green);
}
.ui-save.is-failed {
color: var(--status-danger-fg);
}
.ui-save-spin {
width: calc(15px * var(--ui-scale));
height: calc(15px * var(--ui-scale));
border-radius: 50%;
border: 2.5px solid var(--border);
border-top-color: var(--gold);
animation: ui-spin 0.8s linear infinite;
flex-shrink: 0;
}
@keyframes ui-spin {
to {
transform: rotate(360deg);
}
}
/* ========================================
PENDING WORK
عدّاد الأعمال المعلّقة وقائمتها
The counter beside the connectivity mark and the list it opens. The list
carries the three kinds of unfinished work — a refused change, a clash and
a draft — each with its own tint, and the two row actions.
======================================== */
.ui-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: calc(18px * var(--ui-scale));
height: calc(18px * var(--ui-scale));
padding: 0 calc(5px * var(--ui-scale));
border: none;
border-radius: var(--radius-full);
background: var(--red);
color: var(--status-neutral-fg);
font-size: var(--font-2xs);
font-weight: 700;
cursor: pointer;
}
.ui-pending-list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin: 0;
padding: 0;
list-style: none;
}
.ui-pending-item {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
padding: calc(8px * var(--ui-scale)) calc(10px * var(--ui-scale));
border-radius: var(--radius-md);
background: var(--surface-subtle);
border: 1px solid var(--border);
color: var(--text);
font-size: var(--font-sm);
}
.ui-pending-kind {
padding: calc(2px * var(--ui-scale)) calc(8px * var(--ui-scale));
border-radius: var(--radius-full);
background: var(--surface-warning);
color: var(--warning-text);
font-size: var(--font-2xs);
font-weight: 700;
white-space: nowrap;
}
.ui-pending-kind.is-conflict {
background: var(--status-danger-bg);
color: var(--status-danger-fg);
}
.ui-pending-kind.is-draft {
background: var(--status-info-bg);
color: var(--status-info-fg);
}
.ui-pending-kind.is-unknown {
background: var(--card);
color: var(--text-muted);
}
.ui-pending-what {
color: var(--text);
font-weight: 700;
}
.ui-pending-when {
color: var(--text-muted);
font-size: var(--font-xs);
}
.ui-pending-why {
flex: 1 1 100%;
color: var(--text-muted);
font-size: var(--font-xs);
}
.ui-pending-actions {
display: inline-flex;
gap: var(--space-xs);
margin-inline-start: auto;
}
.ui-pending-empty {
margin: 0;
color: var(--text-muted);
font-size: var(--font-sm);
}
/* ========================================
DRAFT LIST
قائمة المسودات
======================================== */
.ui-drafts {
display: flex;
flex-direction: column;
gap: calc(6px * var(--ui-scale));
margin-bottom: calc(8px * var(--ui-scale));
}
.ui-draft-row {
display: flex;
align-items: center;
gap: calc(6px * var(--ui-scale));
padding: calc(6px * var(--ui-scale)) calc(10px * var(--ui-scale));
border-radius: var(--radius-md);
background: var(--surface-subtle);
border: 1px solid var(--border);
}
.ui-draft-summary {
flex: 1;
color: var(--text);
font-size: var(--font-sm);
}
/* ========================================
CONFLICT VIEW
شاشة التعارض — نسختي ونسخة الخادم جنب بعض
======================================== */
.ui-conflict {
display: flex;
flex-direction: column;
gap: var(--space-md);
padding: var(--space-lg);
border-radius: var(--radius-lg);
background: var(--white);
border: 1px solid var(--border);
border-inline-start: 4px solid var(--gold);
box-shadow: var(--shadow);
}
.ui-conflict-title {
margin: 0;
color: var(--text);
font-size: var(--font-lg);
font-weight: 800;
}
.ui-conflict-meta {
margin: 0;
color: var(--text-muted);
font-size: var(--font-sm);
}
.ui-conflict-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
overflow: hidden;
border-radius: var(--radius-md);
background: var(--border);
border: 1px solid var(--border);
}
.ui-conflict-head {
padding: calc(6px * var(--ui-scale)) calc(10px * var(--ui-scale));
background: var(--card);
color: var(--text);
font-size: var(--font-xs);
font-weight: 800;
text-align: center;
}
.ui-conflict-cell {
display: flex;
flex-direction: column;
gap: calc(2px * var(--ui-scale));
padding: calc(8px * var(--ui-scale)) calc(10px * var(--ui-scale));
background: var(--white);
color: var(--text);
font-size: var(--font-sm);
overflow-wrap: anywhere;
}
.ui-conflict-cell.is-different {
background: var(--status-danger-bg);
color: var(--status-danger-fg);
}
.ui-conflict-label {
color: var(--text-muted);
font-size: var(--font-2xs);
font-weight: 700;
}
.ui-conflict-actions {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
}
/* Ticket 166: each choice carries its consequence line under the label, so
the line is read as part of the choice. The two choices share the row and
their lines wrap inside the button; the second-class selector is needed to
outrank `.ui-btn` (0,1,0) for the layout properties. */
.ui-conflict-actions .ui-conflict-choice {
flex: 1 1 0;
min-width: 0;
flex-direction: column;
align-items: flex-start;
text-align: start;
gap: calc(2px * var(--ui-scale));
padding: calc(8px * var(--ui-scale)) calc(10px * var(--ui-scale));
}
.ui-conflict-choice-label {
font-weight: 800;
}
.ui-conflict-choice-consequence {
font-weight: 400;
font-size: var(--font-2xs);
line-height: 1.6;
overflow-wrap: anywhere;
}
/* ========================================
REVIEW CHOICE
قرار محتاج مراجعة
======================================== */
.ui-review {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-lg);
border-radius: var(--radius-lg);
background: var(--white);
border: 1px solid var(--border);
border-inline-start: 4px solid var(--red);
box-shadow: var(--shadow);
}
.ui-review-text {
margin: 0;
color: var(--text-muted);
font-size: var(--font-sm);
line-height: 1.7;
}
.ui-review-decision {
margin: 0;
padding: calc(8px * var(--ui-scale)) calc(12px * var(--ui-scale));
border-radius: var(--radius-sm);
background: var(--surface-subtle);
border: 1px solid var(--border);
color: var(--text);
font-size: var(--font-sm);
overflow-wrap: anywhere;
}
/* ========================================
BUTTONS
الأزرار — بمقاسات أزرار التطبيق الحالية (buttons.css `.btn`)
Same height, padding, radius and type as the app's buttons. The variants map
onto the app's own: gold = `.btn-primary`, danger = `.btn-danger`,
ghost = `.btn-light`. The app's soft button shadow is left out: the kit
introduces no colour value of its own (see the stylesheet audit), and every
shadow token here is heavier than that one.
======================================== */
.ui-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: calc(5px * var(--ui-scale));
min-height: calc(32px * var(--ui-scale));
min-width: calc(64px * var(--ui-scale));
padding: calc(5px * var(--ui-scale)) calc(12px * var(--ui-scale));
border: 1px solid transparent;
border-radius: var(--radius-md);
font-size: var(--font-sm);
font-weight: 700;
letter-spacing: 0.2px;
cursor: pointer;
transition: all 0.18s ease;
}
.ui-btn:hover {
filter: brightness(1.02);
}
.ui-btn--gold {
background: var(--gold);
color: var(--primary-dark);
}
.ui-btn--primary {
background: var(--primary);
color: var(--status-neutral-fg);
}
.ui-btn--ghost {
background: var(--white);
color: var(--text);
border-color: var(--border);
}
.ui-btn--danger {
background: var(--red);
color: var(--status-neutral-fg);
}
.ui-btn[disabled] {
opacity: 0.45;
cursor: not-allowed;
}
.ui-btn--icon {
min-width: calc(32px * var(--ui-scale));
min-height: calc(32px * var(--ui-scale));
padding: 0;
}
/* ========================================
STICKY TOAST CLOSE
زر إغلاق التنبيه — على الإشعار الذي يبقى حتى يُغلق
Ticket 166: a notice the conflict flow raises stays on screen until the
User closes it, so it carries this control. It reuses the kit's button,
stripped to fit the toast, and grows to a 44px touch target on a phone.
======================================== */
.ui-toast-close {
min-width: 44px;
min-height: 44px;
padding: 0;
background: transparent;
border: none;
color: currentColor;
box-shadow: none;
}
.ui-toast-close:hover {
background: transparent;
filter: brightness(1.15);
}
/* ========================================
GALLERY
معرض العناصر — للمدير فقط
The gallery sits on the app's own page background (the body gradient) and
its head is the app header's band, so the owner compares like with like.
======================================== */
.ui-gallery {
min-height: 100vh;
background: linear-gradient(180deg, var(--body-bg-start) 0%, var(--body-bg-end) 100%);
color: var(--status-neutral-fg);
}
.ui-gallery-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
flex-wrap: wrap;
padding: calc(10px * var(--ui-scale)) calc(16px * var(--ui-scale)) calc(12px * var(--ui-scale));
padding-inline-start: calc(max(16px, var(--safe-left)) * var(--ui-scale));
padding-inline-end: calc(max(16px, var(--safe-right)) * var(--ui-scale));
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
color: var(--status-neutral-fg);
}
.ui-gallery-head h1 {
margin: 0;
font-size: var(--font-xl);
font-weight: 800;
}
.ui-gallery-toggle {
display: inline-flex;
gap: var(--space-xs);
}
.ui-gallery-body {
display: flex;
flex-direction: column;
gap: var(--space-2xl);
max-width: var(--container-max);
margin: 0 auto;
padding: var(--space-2xl) var(--space-xl) calc(60px * var(--ui-scale));
}
.ui-gallery-section {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.ui-gallery-section > h2 {
margin: 0;
padding-inline-start: calc(10px * var(--ui-scale));
border-inline-start: 4px solid var(--gold);
color: var(--status-neutral-fg);
font-size: var(--font-lg);
font-weight: 800;
}
.ui-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(calc(280px * var(--ui-scale)), 1fr));
gap: var(--space-lg);
align-items: start;
}
.ui-gallery-demo {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.ui-gallery-caption {
color: var(--gold-light);
font-size: var(--font-xs);
font-weight: 700;
text-align: center;
}
/* The gallery's column-class demo (ticket 96a round 2): a column may carry
its own class, which the shell puts on that column's
and
. Here it
right-aligns the demo's first column, the way the Archive's name column is
aligned on a phone. The two-class selector is needed to outrank
`.ui-table thead th` / `.ui-table tbody td` (0,1,2). */
.ui-table th.ui-gallery-col-right,
.ui-table td.ui-gallery-col-right {
text-align: right;
}
/* The gallery's row-class demo (ticket 96b): a row may carry its own class,
which the shell puts on its
. Here it tints the demo's first row, the
way the Muhadreen tab tints a highlighted row. The cell selector outranks
nothing it competes with — the row stripes are set on
, and this tint
is on the cells, so it shows through. */
.ui-gallery-row-marked td {
background: var(--surface-warning);
}
/* The gallery's shell-class demo (ticket 96c): a screen may hand the shell
its own class, which the shell puts on its root — the way the Client
Profile's sessions and expert tables keep their table-wide rules after
moving off the old `.table-wrapper`. Here it tints the demo's frame border,
the way a screen class recolours its own table box. The two-class selector
outranks the shell's own `.ui-table-shell` border. */
.ui-table-shell.ui-gallery-shell-class {
border-color: var(--gold);
}
.ui-gallery-note {
padding: calc(10px * var(--ui-scale)) calc(14px * var(--ui-scale));
border-radius: var(--radius-md);
background: var(--surface-warning);
border: 1px solid var(--gold);
color: var(--warning-text);
font-size: var(--font-sm);
font-weight: 700;
}
.ui-gallery-refused {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-md);
min-height: 60vh;
padding: var(--space-2xl);
text-align: center;
}
.ui-gallery-refused h1 {
margin: 0;
color: var(--status-neutral-fg);
font-size: var(--font-xl);
font-weight: 800;
}
.ui-gallery-refused p {
margin: 0;
color: var(--text-muted);
font-size: var(--font-sm);
}
/* ========================================
PHONE — COMPACT
الهاتف: مضغوط. تُطبَّق القواعد على العرض الحقيقي (media query) وعلى معاينة
الهاتف داخل المعرض (.ui-gallery-phone) حتى تُرى الحالة المضغوطة على شاشة
كبيرة أيضاً.
======================================== */
@media (max-width: 768px) {
.ui-page-inner {
gap: var(--space-md);
padding: 10px 12px 36px;
padding-inline-start: max(12px, var(--safe-left));
padding-inline-end: max(12px, var(--safe-right));
}
.ui-nav-band {
padding: 8px 12px 10px;
/* The compact step resets the band's padding, so it must carry the
safe-area term too (ticket uifix, item 1). */
padding-top: max(8px, calc(var(--safe-top) + 8px));
padding-inline-start: max(12px, var(--safe-left));
padding-inline-end: max(12px, var(--safe-right));
}
.ui-nav-title {
font-size: var(--font-lg);
}
/* Ticket uifix (item 2): the tabs are laid out in TWO rows of equal-width
cells, so the labels can never run into each other. The column count is
half the number of visible tabs, rounded up — UiNavBar passes it as the
--ui-nav-tab-columns custom property (navTabsLayout.js), because
Permissions hide some tabs. A label that does not fit its cell wraps
(white-space: normal) instead of being cut, and the cell grows with it. */
.ui-nav-tabs {
display: grid;
grid-template-columns: repeat(var(--ui-nav-tab-columns, 1), minmax(0, 1fr));
align-items: stretch;
min-height: 0;
margin: var(--space-md) auto;
}
.ui-nav-tab {
min-height: 44px;
padding: 4px;
gap: 3px;
white-space: normal;
font-size: var(--font-xs);
}
.ui-nav-tab-inner {
gap: 2px;
}
.ui-nav-user {
font-size: var(--font-md);
}
.ui-identity {
gap: var(--space-sm);
padding: 8px var(--space-md);
}
.ui-identity-subject {
flex-basis: 100%;
white-space: normal;
}
.ui-field-input {
min-height: 44px;
font-size: 16px;
}
.ui-state {
padding: 28px var(--space-lg);
}
/* The counter's list: the row actions drop to their own line so the
item's name and reason stay readable on a narrow screen. */
.ui-pending-actions {
flex: 1 1 100%;
margin-inline-start: 0;
}
/* The two conflict columns stay side by side, just tighter. */
.ui-conflict,
.ui-review {
padding: var(--space-md);
}
.ui-conflict-cell,
.ui-conflict-head {
padding: 6px 8px;
}
/* On a phone the two choices stack: each takes the full row, so their
consequence lines never run into each other and nothing scrolls
sideways. */
.ui-conflict-actions .ui-conflict-choice {
flex-basis: 100%;
}
.ui-draft-summary {
font-size: var(--font-xs);
}
/* The last "actions" column is pinned to the inline-end edge with an
opaque background, and its targets grow to 44px, so no row action is
ever hidden off-screen on a phone. */
.ui-table-shell .ui-table-actions {
position: sticky;
inset-inline-end: 0;
background: var(--white);
box-shadow: var(--shadow);
z-index: 3;
}
.ui-table-shell thead .ui-table-actions {
z-index: 6;
background: var(--primary);
}
.ui-table-shell tbody tr:nth-child(even) .ui-table-actions {
background: var(--surface-subtle);
}
.ui-table-shell .ui-btn--icon {
min-width: 44px;
min-height: 44px;
}
/* The readable phone body text (--font-sm) the old `.table-wrapper tbody
td` gave at 768px and below. Only a shell that opts in with
`readableOnPhone` gets it, so the two screens already on the shell keep
their own look. Same specificity as the compact rule above (0,2,2) but
later in the file, so it wins there; it also outranks table.css
`tbody td` (0,0,2) and `.ui-table tbody td` (0,1,2). */
.ui-table-shell--readable .ui-table tbody td {
font-size: var(--font-sm);
}
/* Every control in the pinned actions cell grows to a 44px touch target.
The app's own Button keeps its class (.btn) and its changesData
behaviour — only its box grows. This raises the height of every action
button (table.css `table .btn` 28px, 0,1,1) to 44; their width already
comes from `table .btn`'s 50px floor, so it is left alone. The extra
session-row/view-row class outranks table.css
`.session-actions-column .session-actions-row .btn` /
`.session-view-row .btn` (both 0,3,0) and raises those icon-only
targets — 28px wide, 30px tall — to 44 as well. */
.ui-table-shell .ui-table-actions .btn {
min-height: 44px;
}
.ui-table-shell .ui-table-actions .session-actions-row .btn,
.ui-table-shell .ui-table-actions .session-view-row .btn {
min-width: 44px;
min-height: 44px;
}
/* The Sessions two-row layout (edit + delete, then view) is kept; the
column widens so two 44px targets fit side by side without the row
overflowing the pinned cell. */
.ui-table-shell .ui-table-actions .session-actions-column {
min-width: 92px;
}
/* The Admin screen's own two-row actions layout (Done+View / Edit+Delete)
shrinks its icon-only buttons — admin.css
`.admin-tab .admin-record-actions .actions-row .btn` sets min-width 0
and min-height 28px (0,4,0), which outranks the 44px rule above. The
extra class here (0,5,0) restores the 44px target, and the column is
widened so two 44px targets fit side by side, exactly as the Sessions
column above. */
.ui-table-shell .ui-table-actions .admin-record-actions .actions-row .btn {
min-width: 44px;
min-height: 44px;
}
.ui-table-shell .ui-table-actions .admin-record-actions {
min-width: 92px;
}
/* The Client Profile's own one-column actions layout (تسجيل, then تعديل,
then حذف) inside `.client-sessions-actions`, shared by the sessions and
the expert tables. The screen's own rules give each button the full
width of the column (client.css / table.css); the column's floor is the
prototype's 96px (styles/table.css `.client-sessions-actions`), and the
extra class here (0,4,0) keeps that floor on a phone and grows every
action to a 44px target. The expert section reuses the very same
classes, so one rule covers both. */
.ui-table-shell .ui-table-actions .client-sessions-actions {
min-width: 96px;
}
.ui-table-shell .ui-table-actions .client-sessions-actions .btn {
min-width: 44px;
min-height: 44px;
}
}
/* A narrow-phone step, matching the app's own 480px header step
(mobile.css `.header-title`, `.header-logo`). */
@media (max-width: 480px) {
.ui-nav-title {
font-size: var(--font-base);
letter-spacing: 0;
}
.ui-nav-logo {
width: 60px;
height: 60px;
}
}
/* Same compacting, driven by the gallery's phone toggle instead of the
viewport, so the compact layout can be shown on a desktop screen. */
.ui-gallery-phone .ui-page-inner {
gap: var(--space-md);
padding: 10px 12px 36px;
}
.ui-gallery-phone .ui-nav-band {
padding: 8px 12px 10px;
}
.ui-gallery-phone .ui-nav-title {
font-size: var(--font-lg);
}
.ui-gallery-phone .ui-nav-tabs {
min-height: 0;
margin: var(--space-md) auto;
}
.ui-gallery-phone .ui-nav-tab {
min-height: 36px;
padding: 4px;
gap: 3px;
font-size: var(--font-xs);
}
.ui-gallery-phone .ui-nav-tab-inner {
gap: 2px;
}
.ui-gallery-phone .ui-nav-user {
font-size: var(--font-md);
}
.ui-gallery-phone .ui-identity {
gap: var(--space-sm);
padding: 8px var(--space-md);
}
.ui-gallery-phone .ui-identity-subject {
flex-basis: 100%;
white-space: normal;
}
.ui-gallery-phone .ui-field-input {
min-height: 44px;
font-size: 16px;
}
.ui-gallery-phone .ui-pending-actions {
flex: 1 1 100%;
margin-inline-start: 0;
}
.ui-gallery-phone .ui-conflict,
.ui-gallery-phone .ui-review {
padding: var(--space-md);
}
.ui-gallery-phone .ui-conflict-cell,
.ui-gallery-phone .ui-conflict-head {
padding: 6px 8px;
}
.ui-gallery-phone .ui-conflict-actions .ui-conflict-choice {
flex-basis: 100%;
}
.ui-gallery-phone .ui-draft-summary {
font-size: var(--font-xs);
}
.ui-gallery-phone .ui-table-shell .ui-table-actions {
position: sticky;
inset-inline-end: 0;
background: var(--white);
box-shadow: var(--shadow);
z-index: 3;
}
.ui-gallery-phone .ui-table-shell thead .ui-table-actions {
z-index: 6;
background: var(--primary);
}
.ui-gallery-phone .ui-table-shell tbody tr:nth-child(even) .ui-table-actions {
background: var(--surface-subtle);
}
.ui-gallery-phone .ui-table-shell .ui-btn--icon {
min-width: 44px;
min-height: 44px;
}
/* ========================================
WORDING CHANGE (ticket 168)
الكلمات المتغيّرة في مقارنة قبل / بعد
A corrected article's before-and-after: the words that differ carry the
existing warning tint, and the words the correction removes are struck
through. Colours come only from variables.css.
======================================== */
.ui-wording-changed {
background: var(--surface-warning);
border-radius: var(--radius-sm);
padding: 0 calc(3px * var(--ui-scale));
font-weight: 700;
}
.ui-wording-removed {
text-decoration: line-through;
}
/* ========================================
REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
.ui-skel,
.ui-save-spin {
animation: none;
}
}
/* app: styles/auth.css */
/* ========================================
AUTHENTICATION — صفحات تسجيل الدخول
======================================== */
.login-page {
position: relative;
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: calc(16px * var(--ui-scale));
padding-top: calc(max(16px, var(--safe-top)) * var(--ui-scale));
padding-bottom: calc(max(16px, var(--safe-bottom)) * var(--ui-scale));
padding-left: calc(max(16px, var(--safe-left)) * var(--ui-scale));
padding-right: calc(max(16px, var(--safe-right)) * var(--ui-scale));
overflow: hidden;
background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
}
.login-page::before {
content: '';
position: absolute;
width: calc(400px * var(--ui-scale));
height: calc(400px * var(--ui-scale));
top: calc(-150px * var(--ui-scale));
right: calc(-120px * var(--ui-scale));
border-radius: 50%;
background: var(--gold-a08);
filter: blur(30px);
}
.login-page::after {
content: '';
position: absolute;
width: calc(350px * var(--ui-scale));
height: calc(350px * var(--ui-scale));
bottom: calc(-150px * var(--ui-scale));
left: calc(-120px * var(--ui-scale));
border-radius: 50%;
background: color-mix(in srgb, var(--primary) 6%, transparent);
filter: blur(30px);
}
/* ========================================
LOGIN CARD
======================================== */
.login-card {
position: relative;
width: 100%;
max-width: calc(400px * var(--ui-scale));
padding: calc(24px * var(--ui-scale)) calc(22px * var(--ui-scale));
border-radius: var(--radius-2xl);
text-align: center;
overflow: hidden;
background: var(--card);
border: 1px solid var(--on-dark-a60);
box-shadow: var(--shadow-lg);
backdrop-filter: blur(8px);
}
/* ========================================
LOGIN LOGO
======================================== */
.login-logo {
position: relative;
width: calc(56px * var(--ui-scale));
height: calc(56px * var(--ui-scale));
margin: 0 auto calc(10px * var(--ui-scale));
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: var(--status-neutral-fg);
font-size: max(var(--ui-text-min), calc(28px * var(--ui-text-scale)));
box-shadow: var(--shadow);
}
.login-logo::after {
content: '';
position: absolute;
inset: -8px;
border-radius: var(--radius-xl);
background: var(--gold-a15);
z-index: -1;
}
/* ========================================
LOGIN TEXT
======================================== */
.login-top-text {
color: var(--gold);
font-size: var(--font-sm);
font-weight: 700;
margin-bottom: calc(6px * var(--ui-scale));
}
.login-title {
font-size: var(--font-2xl);
font-weight: 800;
color: var(--heading-text);
margin-bottom: calc(6px * var(--ui-scale));
}
.login-subtitle {
font-size: var(--font-sm);
color: var(--text-muted);
margin-bottom: calc(20px * var(--ui-scale));
}
/* ========================================
LOGIN FORM
======================================== */
.login-form {
display: flex;
flex-direction: column;
gap: calc(12px * var(--ui-scale));
}
/* ========================================
LOGIN — reason line, forgot-password link and its feedback
======================================== */
/* why the app is asking you to sign in again (authDiagnostics.js) */
.login-reason {
margin: calc(-8px * var(--ui-scale)) 0 calc(16px * var(--ui-scale));
padding: calc(10px * var(--ui-scale)) calc(12px * var(--ui-scale));
border-radius: var(--radius-md);
background: var(--surface-warning);
color: var(--warning-text);
font-size: var(--font-sm);
line-height: 1.7;
text-align: right;
}
.login-reason p + p {
margin-top: calc(6px * var(--ui-scale));
}
/* The shared-device tick on the sign-in screen. It is one inline row, the
shape it has today; the label wraps the box, so the whole row is the
touch target (44px on a phone, styles/mobile.css). */
.auth-shared-device {
display: flex;
align-items: center;
gap: calc(8px * var(--ui-scale));
font-size: var(--font-sm);
cursor: pointer;
user-select: none;
}
.auth-shared-device-check {
width: calc(16px * var(--ui-scale));
height: calc(16px * var(--ui-scale));
margin: 0;
}
/* The code screen's two lines above the field (Display Name, then the
mailbox the code went to) — the inline styles they used to carry. */
.auth-otp-name {
font-weight: 700;
margin: 0 0 calc(4px * var(--ui-scale));
}
.auth-otp-sent {
margin: 0;
}
.login-reset-info {
margin: 0;
padding: calc(10px * var(--ui-scale)) calc(12px * var(--ui-scale));
border-radius: var(--radius-md);
font-size: var(--font-sm);
line-height: 1.7;
text-align: right;
}
.login-reset-success {
background: var(--status-ok-bg);
color: var(--green);
}
.login-reset-error {
background: var(--status-danger-bg);
color: var(--red);
}
/* ========================================
AUTH — BOOT SCREEN (prototype 8-6)
What the User sees while the session and the profile resolve, instead of a
white page: the app's logo, its name, a quiet progress bar and the wait
line. Every colour is a token, so dark mode follows.
======================================== */
.auth-boot {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2xl);
min-height: 100vh;
min-height: 100dvh;
padding: calc(16px * var(--ui-scale));
background: linear-gradient(160deg, var(--body-bg-start) 0%, var(--body-bg-end) 100%);
color: var(--status-neutral-fg);
text-align: center;
}
.auth-boot-logo {
display: flex;
align-items: center;
justify-content: center;
width: calc(84px * var(--ui-scale));
height: calc(84px * var(--ui-scale));
border-radius: var(--radius-2xl);
background: var(--primary-dark);
border: 1px solid var(--gold);
color: var(--gold-light);
font-size: max(var(--ui-text-min), calc(40px * var(--ui-text-scale)));
animation: auth-boot-pulse 1.8s ease-in-out infinite;
}
.auth-boot-title {
font-size: var(--font-xl);
font-weight: 800;
}
.auth-boot-sub {
font-size: var(--font-sm);
opacity: 0.6;
}
.auth-boot-bar {
width: calc(180px * var(--ui-scale));
height: calc(4px * var(--ui-scale));
border-radius: var(--radius-full);
background: var(--primary-dark);
overflow: hidden;
}
.auth-boot-bar-fill {
display: block;
height: 100%;
width: 45%;
border-radius: var(--radius-full);
background: var(--gold);
animation: auth-boot-slide 1.4s ease-in-out infinite;
}
@keyframes auth-boot-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes auth-boot-slide {
0% {
transform: translateX(140px);
}
100% {
transform: translateX(-140px);
}
}
/* app: styles/dashboard.css */
/* ========================================
DASHBOARD — لوحة التحكم الرئيسية
======================================== */
.dashboard-page {
display: flex;
flex-direction: column;
gap: calc(14px * var(--ui-scale));
}
.dashboard-content {
min-width: 0;
}
/* ========================================
DASHBOARD STAT CARDS GRID
======================================== */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(calc(160px * var(--ui-scale)), 1fr));
gap: calc(12px * var(--ui-scale));
margin-top: calc(4px * var(--ui-scale));
margin-bottom: calc(16px * var(--ui-scale));
align-items: stretch;
}
/* ========================================
DASHBOARD CARD
======================================== */
.dashboard-card {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: calc(10px * var(--ui-scale));
padding: calc(10px * var(--ui-scale));
border-radius: var(--radius-lg);
background: var(--card);
box-shadow: var(--shadow);
transition: all 0.18s ease;
}
.dashboard-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.dashboard-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(2px * var(--ui-scale));
background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
/* ========================================
DASHBOARD CARD PARTS
======================================== */
.dashboard-card-top {
display: flex;
align-items: center;
gap: calc(10px * var(--ui-scale));
}
.dashboard-icon {
position: relative;
width: calc(44px * var(--ui-scale));
height: calc(44px * var(--ui-scale));
min-width: calc(44px * var(--ui-scale));
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
background: var(--gold-a08);
}
.dashboard-label {
font-size: var(--font-xs);
color: var(--text-muted);
font-weight: 600;
}
.dashboard-value {
font-size: var(--font-xl);
font-weight: 800;
margin-top: calc(2px * var(--ui-scale));
color: var(--heading-text);
}
/* ========================================
DASHBOARD FILTER CARDS
======================================== */
.dashboard-filter-card {
cursor: pointer;
transition: 0.2s ease;
border: 1px solid var(--on-dark-a10);
}
.dashboard-filter-card:hover {
transform: translateY(-2px);
}
.dashboard-filter-active-all {
border: 2px solid var(--gold) !important;
background: var(--gold-a08) !important;
}
.dashboard-filter-active-family {
border: 2px solid var(--gold) !important;
background: var(--gold-a08) !important;
}
.dashboard-filter-active-civil {
border: 2px solid var(--gold) !important;
background: var(--gold-a08) !important;
}
.dashboard-filter-active-criminal {
border: 2px solid var(--gold) !important;
background: var(--gold-a08) !important;
}
/* ========================================
DASHBOARD INSIGHTS
======================================== */
.dashboard-insights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(calc(140px * var(--ui-scale)), 1fr));
gap: calc(10px * var(--ui-scale));
margin-bottom: calc(16px * var(--ui-scale));
}
.dashboard-insight-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(2px * var(--ui-scale));
min-height: calc(60px * var(--ui-scale));
padding: calc(8px * var(--ui-scale));
text-align: center;
background: var(--card);
color: var(--text);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
}
.dashboard-insight-number {
font-size: var(--font-xl);
font-weight: 900;
color: var(--heading-text);
}
.dashboard-insight-label {
font-size: var(--font-xs);
color: var(--text-muted);
}
/* ========================================
DASHBOARD STAT CARD (clickable)
======================================== */
.dashboard-stat-warning {
background: var(--surface-warning) !important;
border: 1px solid var(--gold) !important;
}
/* ========================================
DASHBOARD SUMMARY CARDS — the prototype's .kpi look (ticket 98-2a)
Each card is one native